diff --git a/src/Components/Blueprints/BlueprintsSideBar.tsx b/src/Components/Blueprints/BlueprintsSideBar.tsx index a05cf035..f6aa4345 100644 --- a/src/Components/Blueprints/BlueprintsSideBar.tsx +++ b/src/Components/Blueprints/BlueprintsSideBar.tsx @@ -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, diff --git a/src/Components/Blueprints/DeleteBlueprintModal.tsx b/src/Components/Blueprints/DeleteBlueprintModal.tsx index ce58ebb6..125bf877 100644 --- a/src/Components/Blueprints/DeleteBlueprintModal.tsx +++ b/src/Components/Blueprints/DeleteBlueprintModal.tsx @@ -20,6 +20,7 @@ import { useDeleteBlueprintMutation, useGetBlueprintsQuery, } from '../../store/imageBuilderApi'; +import { PAGINATION_LIMIT, PAGINATION_OFFSET } from '../../constants'; interface DeleteBlueprintModalProps { setShowDeleteModal: React.Dispatch>; @@ -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( { diff --git a/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx b/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx index 8ce01e68..d49a01e9 100644 --- a/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx +++ b/src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx @@ -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 = () => { setPage(newPage)} diff --git a/src/Components/CreateImageWizard/utilities/checkRepositoriesAvailability.ts b/src/Components/CreateImageWizard/utilities/checkRepositoriesAvailability.ts index 7bec789e..24842994 100644 --- a/src/Components/CreateImageWizard/utilities/checkRepositoriesAvailability.ts +++ b/src/Components/CreateImageWizard/utilities/checkRepositoriesAvailability.ts @@ -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, }, { diff --git a/src/Components/ImagesTable/ImagesTable.tsx b/src/Components/ImagesTable/ImagesTable.tsx index bcc74946..5cb5a88c 100644 --- a/src/Components/ImagesTable/ImagesTable.tsx +++ b/src/Components/ImagesTable/ImagesTable.tsx @@ -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( { diff --git a/src/Components/ImagesTable/ImagesTableToolbar.tsx b/src/Components/ImagesTable/ImagesTableToolbar.tsx index 1d9a3972..59735bcc 100644 --- a/src/Components/ImagesTable/ImagesTableToolbar.tsx +++ b/src/Components/ImagesTable/ImagesTableToolbar.tsx @@ -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 = ({ 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, diff --git a/src/Components/ImagesTable/Instance.tsx b/src/Components/ImagesTable/Instance.tsx index 6f3813f0..46cca680 100644 --- a/src/Components/ImagesTable/Instance.tsx +++ b/src/Components/ImagesTable/Instance.tsx @@ -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 }, { diff --git a/src/constants.ts b/src/constants.ts index 0da2cc73..8672b1a1 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -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 = '';