Bug 2177977: Move pagination to created/selected volume from modals

src/views/catalog/CreateFromInstanceTypes/components/BootableVolumeList/BootableVolumeList.tsx

@@ -1,9 +1,11 @@
-import React, { Dispatch, FC, SetStateAction, useState } from 'react';
+import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 
 import { V1beta1DataSource } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
 import { V1alpha2VirtualMachineClusterPreference } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { OPENSHIFT_OS_IMAGES_NS } from '@kubevirt-utils/constants/constants';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { getName } from '@kubevirt-utils/resources/shared';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
 import { ListPageFilter, useListPageFilter } from '@openshift-console/dynamic-plugin-sdk';
 import { FormGroup, Pagination, Split, SplitItem, TextInput } from '@patternfly/react-core';
 import { TableComposable, TableVariant, Tbody, Th, Thead, Tr } from '@patternfly/react-table';
@@ -22,6 +24,7 @@ import {
   paginationInitialStateForm,
   paginationInitialStateModal,
 } from './utils/constants';
+import { getPaginationFromVolumeIndex } from './utils/utils';
 
 import './BootableVolumeList.scss';
 
@@ -34,7 +37,7 @@ export type BootableVolumeListProps = {
 
 const BootableVolumeList: FC<BootableVolumeListProps> = ({
   preferences,
-  bootableVolumeSelectedState,
+  bootableVolumeSelectedState: [bootableVolumeSelected, setBootableVolumeSelected],
   bootableVolumesResources: { bootableVolumes, loaded, pvcSources },
   displayShowAllButton,
 }) => {
@@ -63,6 +66,15 @@ const BootableVolumeList: FC<BootableVolumeListProps> = ({
     }));
   };
 
+  useEffect(() => {
+    if (displayShowAllButton && !isEmpty(bootableVolumeSelected)) {
+      const selectedVolumeIndex = bootableVolumes?.findIndex(
+        (volume) => getName(volume) === getName(bootableVolumeSelected),
+      );
+      setPagination(getPaginationFromVolumeIndex(selectedVolumeIndex));
+    }
+  }, [bootableVolumeSelected, bootableVolumes, displayShowAllButton]);
+
   return (
     <>
       <Split className="bootable-volume-list-bar" hasGutter>
@@ -117,7 +129,7 @@ const BootableVolumeList: FC<BootableVolumeListProps> = ({
         {displayShowAllButton && (
           <ShowAllBootableVolumesButton
             preferences={preferences}
-            bootableVolumeSelectedState={bootableVolumeSelectedState}
+            bootableVolumeSelectedState={[bootableVolumeSelected, setBootableVolumeSelected]}
             bootableVolumesResources={{ bootableVolumes, loaded, pvcSources }}
           />
         )}
@@ -139,7 +151,7 @@ const BootableVolumeList: FC<BootableVolumeListProps> = ({
               bootableVolume={bs}
               activeColumnIDs={Object.values(activeColumns)?.map((col) => col?.id)}
               rowData={{
-                bootableVolumeSelectedState,
+                bootableVolumeSelectedState: [bootableVolumeSelected, setBootableVolumeSelected],
                 preference: preferences[bs?.metadata?.labels?.[DEFAULT_PREFERENCE_LABEL]],
                 pvcSource:
                   pvcSources?.[bs?.spec?.source?.pvc?.namespace]?.[bs?.spec?.source?.pvc?.name],

src/views/catalog/CreateFromInstanceTypes/components/BootableVolumeList/components/ShowAllBootableVolumesButton/ShowAllBootableVolumesButton.tsx

@@ -9,7 +9,7 @@ import BootableVolumeListModal from '../BootableVolumeListModal/BootableVolumeLi
 
 export type ShowAllBootableVolumesButtonProps = BootableVolumeListProps;
 
-const ShowAllBootableVolumesButton: FC<BootableVolumeListProps> = (props) => {
+const ShowAllBootableVolumesButton: FC<ShowAllBootableVolumesButtonProps> = (props) => {
   const { t } = useKubevirtTranslation();
   const { createModal } = useModal();
   return (

src/views/catalog/CreateFromInstanceTypes/components/BootableVolumeList/utils/utils.ts

@@ -1,12 +1,35 @@
 import { V1beta1DataSource } from '@kubevirt-ui/kubevirt-api/containerized-data-importer/models';
 import { OS_NAME_TYPES } from '@kubevirt-utils/resources/template';
+import { PaginationState } from '@virtualmachines/utils';
 
 import { DEFAULT_PREFERENCE_LABEL } from '../../../utils/constants';
 
+import { paginationInitialStateForm } from './constants';
+
 export const getBootVolumeOS = (bootVolume: V1beta1DataSource): OS_NAME_TYPES => {
   const bootVolumePreference = bootVolume?.metadata?.labels?.[DEFAULT_PREFERENCE_LABEL];
   return (
     Object.values(OS_NAME_TYPES).find((osName) => bootVolumePreference?.includes(osName)) ??
     OS_NAME_TYPES.other
   );
 };
+
+export const getPaginationFromVolumeIndex =
+  (volumeIndex: number) =>
+  (prevPagination: PaginationState): PaginationState => {
+    if (volumeIndex <= 0 || volumeIndex / prevPagination.perPage < 1) {
+      return paginationInitialStateForm;
+    }
+
+    const perPage = prevPagination.perPage;
+    const page = Math.floor(volumeIndex / perPage) + 1;
+    const startIndex = (page - 1) * perPage;
+    const endIndex = page * perPage;
+
+    return {
+      page,
+      perPage,
+      startIndex,
+      endIndex,
+    };
+  };