particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

multiple: set pagination defaults

Browse source 
Set pagination defaults, otherwise these might be `undefined`.
This commit is contained in:
Gianluca Zuccarelli 2024-11-29 13:50:08 +00:00 • committed by Lucas Garfield
parent bad77421ae
commit 4125a9cd3b
8 changed files with 36 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/Components/Blueprints/BlueprintsSideBar.tsx
View file

@ -24,7 +24,11 @@ import { Link } from 'react-router-dom';
import BlueprintCard from './BlueprintCard';
import BlueprintsPagination from './BlueprintsPagination';
import { DEBOUNCED_SEARCH_WAIT_TIME } from '../../constants';
import {
DEBOUNCED_SEARCH_WAIT_TIME,
PAGINATION_OFFSET,
PAGINATION_LIMIT,
} from '../../constants';
import { useGetBlueprintsQuery } from '../../store/backendApi';
import {
selectBlueprintSearchInput,
@ -55,8 +59,8 @@ type emptyBlueprintStateProps = {
const BlueprintsSidebar = () => {
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
const blueprintsOffset = useAppSelector(selectOffset);
const blueprintsLimit = useAppSelector(selectLimit);
const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;
const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
const {
data: blueprintsData,
isLoading,

5
src/Components/Blueprints/DeleteBlueprintModal.tsx
View file

@ -20,6 +20,7 @@ import {
useDeleteBlueprintMutation,
useGetBlueprintsQuery,
} from '../../store/imageBuilderApi';
import { PAGINATION_LIMIT, PAGINATION_OFFSET } from '../../constants';
interface DeleteBlueprintModalProps {
setShowDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
@ -31,8 +32,8 @@ export const DeleteBlueprintModal: React.FunctionComponent<
> = ({ setShowDeleteModal, isOpen }: DeleteBlueprintModalProps) => {
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
const blueprintsOffset = useAppSelector(selectOffset);
const blueprintsLimit = useAppSelector(selectLimit);
const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;
const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
const dispatch = useAppDispatch();
const { blueprintName } = useGetBlueprintsQuery(
{

4
src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx
View file

@ -30,7 +30,7 @@ import {
import RepositoriesStatus from './RepositoriesStatus';
import RepositoryUnavailable from './RepositoryUnavailable';
import { ContentOrigin } from '../../../../constants';
import { ContentOrigin, PAGINATION_COUNT } from '../../../../constants';
import {
ApiRepositoryResponseRead,
useListRepositoriesQuery,
@ -580,7 +580,7 @@ const Repositories = () => {
</PanelMain>
</Panel>
<Pagination
itemCount={count}
itemCount={count ?? PAGINATION_COUNT}
perPage={perPage}
page={page}
onSetPage={(_, newPage) => setPage(newPage)}

4
src/Components/CreateImageWizard/utilities/checkRepositoriesAvailability.ts
View file

@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { ContentOrigin } from '../../../constants';
import { ContentOrigin, PAGINATION_LIMIT } from '../../../constants';
import { useListRepositoriesQuery } from '../../../store/contentSourcesApi';
import { useAppSelector } from '../../../store/hooks';
import {
@ -41,7 +41,7 @@ export const useCheckRepositoriesAvailability = () => {
availableForVersion: version,
contentType: 'rpm',
origin: ContentOrigin.EXTERNAL,
limit: firstRequest?.data?.meta?.count,
limit: firstRequest?.data?.meta?.count || PAGINATION_LIMIT,
offset: 0,
},
{

10
src/Components/ImagesTable/ImagesTable.tsx
View file

@ -44,6 +44,9 @@ import { AwsTarget, Target } from './Target';
import {
AWS_S3_EXPIRATION_TIME_IN_HOURS,
OCI_STORAGE_EXPIRATION_TIME_IN_DAYS,
PAGINATION_LIMIT,
PAGINATION_OFFSET,
SEARCH_INPUT,
STATUS_POLLING_INTERVAL,
} from '../../constants';
import { useGetBlueprintsQuery } from '../../store/backendApi';
@ -76,10 +79,11 @@ const ImagesTable = () => {
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(10);
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
const blueprintSearchInput =
useAppSelector(selectBlueprintSearchInput) || SEARCH_INPUT;
const blueprintVersionFilter = useAppSelector(selectBlueprintVersionFilter);
const blueprintsOffset = useAppSelector(selectOffset);
const blueprintsLimit = useAppSelector(selectLimit);
const blueprintsOffset = useAppSelector(selectOffset) || PAGINATION_OFFSET;
const blueprintsLimit = useAppSelector(selectLimit) || PAGINATION_LIMIT;
const { selectedBlueprintVersion } = useGetBlueprintsQuery(
{

4
src/Components/ImagesTable/ImagesTableToolbar.tsx
View file

@ -28,6 +28,7 @@ import BlueprintVersionFilter from '../Blueprints/BlueprintVersionFilter';
import { BuildImagesButton } from '../Blueprints/BuildImagesButton';
import { DeleteBlueprintModal } from '../Blueprints/DeleteBlueprintModal';
import { EditBlueprintButton } from '../Blueprints/EditBlueprintButton';
import { SEARCH_INPUT } from '../../constants';
interface imagesTableToolbarProps {
itemCount: number;
@ -47,7 +48,8 @@ const ImagesTableToolbar: React.FC<imagesTableToolbarProps> = ({
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [showDiffModal, setShowDiffModal] = useState(false);
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
const blueprintSearchInput =
useAppSelector(selectBlueprintSearchInput) || SEARCH_INPUT;
const {
data: blueprintsComposes,

9
src/Components/ImagesTable/Instance.tsx
View file

@ -21,7 +21,11 @@ import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'
import { useLoadModule, useScalprum } from '@scalprum/react-core';
import { useNavigate } from 'react-router-dom';
import { FILE_SYSTEM_CUSTOMIZATION_URL, MODAL_ANCHOR } from '../../constants';
import {
FILE_SYSTEM_CUSTOMIZATION_URL,
MODAL_ANCHOR,
SEARCH_INPUT,
} from '../../constants';
import {
selectSelectedBlueprintId,
selectBlueprintSearchInput,
@ -104,7 +108,8 @@ const ProvisioningLink = ({
);
const selectedBlueprintId = useAppSelector(selectSelectedBlueprintId);
const blueprintSearchInput = useAppSelector(selectBlueprintSearchInput);
const blueprintSearchInput =
useAppSelector(selectBlueprintSearchInput) || SEARCH_INPUT;
const { selectedBlueprintVersion } = useGetBlueprintsQuery(
{ search: blueprintSearchInput },
{

5
src/constants.ts
View file

@ -258,3 +258,8 @@ export enum ContentOrigin {
}
export const AMPLITUDE_MODULE_NAME = 'imageBuilder';
export const PAGINATION_OFFSET = 0;
export const PAGINATION_LIMIT = 10;
export const PAGINATION_COUNT = 0;
export const SEARCH_INPUT = '';