Merge pull request #2158 from pcbailey/feature-hide-deprecated-bootvo…

…lumes-by-default

CNV-45860: Select 'Hide deprecated bootable volume' filter by default

cypress/tests/catalog/filter.spec.ts

@@ -6,6 +6,7 @@ describe('Test VM catalog filter', () => {
     cy.login();
     cy.visitCatalog();
     cy.byTestID('templates-tab').click();
+    cy.get(catalogView.HIDE_DEPRECATED_TEMPLATES).find(catalogView.checkbox).uncheck();
   });
 
   it('ID(CNV-8464) Filter VM catalog by OS name', () => {

cypress/views/catalog.ts

@@ -3,6 +3,9 @@ export const vmCatalog = '.vm-catalog-grid-tile';
 export const filterText = '#filter-text-input';
 export const checkbox = '[type="checkbox"]';
 
+export const HIDE_DEPRECATED_TEMPLATES =
+  '[data-test-id="hideDeprecatedTemplates-Hide deprecated templates"]';
+
 // filter by OS Name
 export const RHEL = '[data-test-id="osName-RHEL"]';
 export const FEDORA = '[data-test-id="osName-Fedora"]';

src/utils/resources/bootableresources/constants.ts

@@ -7,3 +7,6 @@ export const KUBEVIRT_ISO_LABEL = 'kubevirt.io/iso';
 export const ISO = 'ISO';
 
 export const deprecatedOSNames = ['centos-stream8', 'centos7'];
+
+export const HIDE_DEPRECATED_BOOTABLE_VOLUMES = 'hideDeprecatedBootableVolumes';
+export const HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL = 'Hide deprecated bootable volumes';

src/utils/resources/bootableresources/hooks/useHideDeprecatedBootableVolumes.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+import { CREATE_VM_TAB } from '@catalog/CreateVMHorizontalNav/constants';
+import { useURLParams } from '@kubevirt-utils/hooks/useURLParams';
+import {
+  HIDE_DEPRECATED_BOOTABLE_VOLUMES,
+  HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL,
+} from '@kubevirt-utils/resources/bootableresources/constants';
+import { FilterValue } from '@openshift-console/dynamic-plugin-sdk';
+
+type UseHideDeprecatedBootableVolumes = (
+  onFilterChange: (type: string, value: FilterValue) => void,
+  currentTab?: CREATE_VM_TAB,
+) => void;
+
+const useHideDeprecatedBootableVolumes: UseHideDeprecatedBootableVolumes = (
+  onFilterChange,
+  currentTab,
+) => {
+  const { setParam } = useURLParams();
+
+  useEffect(() => {
+    if (currentTab !== CREATE_VM_TAB.INSTANCE_TYPES && currentTab !== undefined) return null;
+
+    // This is to select the 'Hide deprecated bootable volumes' filter by default
+    onFilterChange(HIDE_DEPRECATED_BOOTABLE_VOLUMES, {
+      all: [HIDE_DEPRECATED_BOOTABLE_VOLUMES],
+      selected: [HIDE_DEPRECATED_BOOTABLE_VOLUMES],
+    });
+
+    setParam(
+      `rowFilter-${HIDE_DEPRECATED_BOOTABLE_VOLUMES}`,
+      HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL,
+    );
+  }, [currentTab]);
+};
+
+export default useHideDeprecatedBootableVolumes;

src/utils/resources/template/utils/constants.ts

@@ -132,3 +132,6 @@ export const OS_IMAGE_LINKS = {
 
 export const GENERATE_VM_PRETTY_NAME_ANNOTATION =
   'openshift.kubevirt.io/pronounceable-suffix-for-name-expression';
+
+export const HIDE_DEPRECATED_TEMPLATES = 'hideDeprecatedTemplates';
+export const HIDE_DEPRECATED_TEMPLATES_KEY = 'hide-deprecated-templates';

src/views/bootablevolumes/list/BootableVolumesList.tsx

@@ -10,6 +10,7 @@ import {
 } from '@kubevirt-utils/hooks/usePagination/utils/constants';
 import { DataSourceModelRef } from '@kubevirt-utils/models';
 import useBootableVolumes from '@kubevirt-utils/resources/bootableresources/hooks/useBootableVolumes';
+import useHideDeprecatedBootableVolumes from '@kubevirt-utils/resources/bootableresources/hooks/useHideDeprecatedBootableVolumes';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
 import {
   K8sResourceCommon,
@@ -44,6 +45,8 @@ const BootableVolumesList: FC = () => {
     preferences,
   );
 
+  useHideDeprecatedBootableVolumes(onFilterChange);
+
   const onPageChange = ({ endIndex, page, perPage, startIndex }) => {
     setPagination(() => ({
       endIndex,

src/views/bootablevolumes/list/hooks/useBootableVolumesFilters.ts

@@ -1,7 +1,11 @@
 import { PersistentVolumeClaimModel } from '@kubevirt-ui/kubevirt-api/console';
 import DataSourceModel from '@kubevirt-ui/kubevirt-api/console/models/DataSourceModel';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { ISO } from '@kubevirt-utils/resources/bootableresources/constants';
+import {
+  HIDE_DEPRECATED_BOOTABLE_VOLUMES,
+  HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL,
+  ISO,
+} from '@kubevirt-utils/resources/bootableresources/constants';
 import {
   isBootableVolumeISO,
   isDeprecated,
@@ -28,8 +32,8 @@ const useBootableVolumesFilters = (): RowFilter<BootableResource>[] => {
           title: t('Hide deprecated bootable volumes'),
         },
       ],
-      reducer: (obj) => isDeprecated(getName(obj)) && 'Hide deprecated bootable volumes',
-      type: 'hide-deprecated-bootable volumes',
+      reducer: (obj) => isDeprecated(getName(obj)) && HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL,
+      type: HIDE_DEPRECATED_BOOTABLE_VOLUMES,
     },
     {
       filter: (availableOsNames, obj) =>

src/views/catalog/CreateFromInstanceTypes/CreateFromInstanceType.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 
 import SelectInstanceTypeSection from '@catalog/CreateFromInstanceTypes/components/SelectInstanceTypeSection/SelectInstanceTypeSection';
 import VMDetailsSection from '@catalog/CreateFromInstanceTypes/components/VMDetailsSection/VMDetailsSection';
+import { CREATE_VM_TAB } from '@catalog/CreateVMHorizontalNav/constants';
 import GuidedTour from '@kubevirt-utils/components/GuidedTour/GuidedTour';
 import Loading from '@kubevirt-utils/components/Loading/Loading';
 import { DEFAULT_NAMESPACE } from '@kubevirt-utils/constants/constants';
@@ -23,7 +24,9 @@ import { INSTANCE_TYPES_SECTIONS } from './utils/constants';
 
 import './CreateFromInstanceType.scss';
 
-const CreateFromInstanceType: FC = () => {
+type CreateFromInstanceTypeProps = { currentTab: CREATE_VM_TAB };
+
+const CreateFromInstanceType: FC<CreateFromInstanceTypeProps> = ({ currentTab }) => {
   const { t } = useKubevirtTranslation();
   const sectionState = useState<INSTANCE_TYPES_SECTIONS>(INSTANCE_TYPES_SECTIONS.SELECT_VOLUME);
 
@@ -81,6 +84,7 @@ const CreateFromInstanceType: FC = () => {
               >
                 <BootableVolumeList
                   bootableVolumesData={bootableVolumesData}
+                  currentTab={currentTab}
                   displayShowAllButton
                   favorites={[favorites as [], updaterFavorites]}
                   preferencesData={instanceTypesAndPreferencesData.preferences}

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

@@ -2,11 +2,13 @@ import React, { FC, useMemo, useState } from 'react';
 
 import { useInstanceTypeVMStore } from '@catalog/CreateFromInstanceTypes/state/useInstanceTypeVMStore';
 import { UseBootableVolumesValues } from '@catalog/CreateFromInstanceTypes/state/utils/types';
+import { CREATE_VM_TAB } from '@catalog/CreateVMHorizontalNav/constants';
 import { V1beta1VirtualMachineClusterPreference } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import ListPageFilter from '@kubevirt-utils/components/ListPageFilter/ListPageFilter';
 import ProjectDropdown from '@kubevirt-utils/components/ProjectDropdown/ProjectDropdown';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { UserSettingFavorites } from '@kubevirt-utils/hooks/useKubevirtUserSettings/utils/types';
+import useHideDeprecatedBootableVolumes from '@kubevirt-utils/resources/bootableresources/hooks/useHideDeprecatedBootableVolumes';
 import { BootableVolume } from '@kubevirt-utils/resources/bootableresources/types';
 import { convertResourceArrayToMap, getName } from '@kubevirt-utils/resources/shared';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
@@ -29,6 +31,7 @@ import './BootableVolumeList.scss';
 
 type BootableVolumeListProps = {
   bootableVolumesData: UseBootableVolumesValues;
+  currentTab?: CREATE_VM_TAB;
   displayShowAllButton?: boolean;
   favorites: UserSettingFavorites;
   preferencesData: V1beta1VirtualMachineClusterPreference[];
@@ -37,12 +40,14 @@ type BootableVolumeListProps = {
 
 const BootableVolumeList: FC<BootableVolumeListProps> = ({
   bootableVolumesData,
+  currentTab,
   displayShowAllButton = false,
   favorites,
   preferencesData,
   selectedBootableVolumeState,
 }) => {
   const { t } = useKubevirtTranslation();
+
   const {
     instanceTypeVMState,
     onSelectCreatedVolume,
@@ -71,6 +76,8 @@ const BootableVolumeList: FC<BootableVolumeListProps> = ({
     displayShowAllButton ? paginationInitialStateForm : paginationInitialStateModal,
   );
 
+  useHideDeprecatedBootableVolumes(onFilterChange, currentTab);
+
   const [volumeFavorites] = favorites;
 
   const { getSortType, sortedData, sortedPaginatedData } = useBootVolumeSortColumns(

src/views/catalog/CreateFromInstanceTypes/components/BootableVolumeList/hooks/useBootVolumeFilters.ts

@@ -1,6 +1,10 @@
 import DataSourceModel from '@kubevirt-ui/kubevirt-api/console/models/DataSourceModel';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { ISO } from '@kubevirt-utils/resources/bootableresources/constants';
+import {
+  HIDE_DEPRECATED_BOOTABLE_VOLUMES,
+  HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL,
+  ISO,
+} from '@kubevirt-utils/resources/bootableresources/constants';
 import {
   isBootableVolumeISO,
   isDeprecated,
@@ -27,8 +31,8 @@ const useBootVolumeFilters = (isModal: boolean): RowFilter<BootableVolume>[] =>
           title: t('Hide deprecated bootable volumes'),
         },
       ],
-      reducer: (obj) => isDeprecated(getName(obj)) && 'Hide deprecated bootable volumes',
-      type: `Hide deprecated bootable volumes${isModal && '-modal'}`,
+      reducer: (obj) => isDeprecated(getName(obj)) && HIDE_DEPRECATED_BOOTABLE_VOLUMES_LABEL,
+      type: HIDE_DEPRECATED_BOOTABLE_VOLUMES,
     },
     {
       filter: (availableOsNames, obj) => {

src/views/catalog/CreateVMHorizontalNav/CreateVMHorizontalNav.tsx

@@ -49,14 +49,14 @@ const CreateVMHorizontalNav: FC = () => {
           eventKey={CREATE_VM_TAB.INSTANCE_TYPES}
           title={<CreateVMTabTitle Icon={ImageIcon} titleText={t('InstanceTypes')} />}
         >
-          <CreateFromInstanceType />
+          <CreateFromInstanceType currentTab={currentTab} />
         </Tab>
         <Tab
           data-test="templates-tab"
           eventKey={CREATE_VM_TAB.TEMPLATE}
           title={<CreateVMTabTitle Icon={CatalogIcon} titleText={t('Template catalog')} />}
         >
-          <TemplatesCatalog />
+          <TemplatesCatalog currentTab={currentTab} />
         </Tab>
       </Tabs>
     </div>

src/views/catalog/templatescatalog/TemplatesCatalog.tsx

@@ -1,6 +1,8 @@
 import React, { FC, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom-v5-compat';
 
+import { CREATE_VM_TAB } from '@catalog/CreateVMHorizontalNav/constants';
+import useHideDeprecatedTemplateTiles from '@catalog/templatescatalog/hooks/useHideDeprecatedTemplateTiles';
 import { clearSessionStorageVM } from '@catalog/utils/WizardVMContext';
 import { V1Template } from '@kubevirt-ui/kubevirt-api/console';
 import { DEFAULT_NAMESPACE } from '@kubevirt-utils/constants/constants';
@@ -20,7 +22,9 @@ import { filterTemplates } from './utils/helpers';
 
 import './TemplatesCatalog.scss';
 
-const TemplatesCatalog: FC = () => {
+type TemplatesCatalogProps = { currentTab: CREATE_VM_TAB };
+
+const TemplatesCatalog: FC<TemplatesCatalogProps> = ({ currentTab }) => {
   const { ns: namespace } = useParams<{ ns: string }>();
   const [selectedTemplate, setSelectedTemplate] = useState<undefined | V1Template>(undefined);
 
@@ -37,6 +41,8 @@ const TemplatesCatalog: FC = () => {
     [templates, filters],
   );
 
+  useHideDeprecatedTemplateTiles(currentTab, onFilterChange);
+
   return (
     <Stack className="vm-catalog" hasGutter>
       {loaded ? (

src/views/catalog/templatescatalog/components/TemplatesCatalogFilters/TemplatesCatalogFilters.tsx

@@ -5,6 +5,7 @@ import { hasNoDefaultUserAllFilters } from '@catalog/templatescatalog/utils/help
 import { TemplateFilters } from '@catalog/templatescatalog/utils/types';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import {
+  HIDE_DEPRECATED_TEMPLATES_KEY,
   OS_NAME_LABELS,
   OS_NAME_TYPES,
   WORKLOADS,
@@ -54,17 +55,19 @@ export const TemplatesCatalogFilters: FC<{
       </VerticalTabs>
       <FilterSidePanel className="co-catalog-page__tabs" id="vm-catalog-filter-panel">
         <TemplatesCatalogFiltersGroup
+          filters={[
+            { label: t('Hide deprecated templates'), value: HIDE_DEPRECATED_TEMPLATES_KEY },
+          ]}
           onFilterClick={() =>
             onFilterChange(
               CATALOG_FILTERS.HIDE_DEPRECATED_TEMPLATES,
               !filters?.hideDeprecatedTemplates,
             )
           }
           pickedFilters={
-            new Set(filters?.hideDeprecatedTemplates ? ['hide-deprecated-templates'] : [])
+            new Set(filters?.hideDeprecatedTemplates ? [HIDE_DEPRECATED_TEMPLATES_KEY] : [])
           }
-          filters={[{ label: t('Hide deprecated templates'), value: 'hide-deprecated-templates' }]}
-          groupKey={'hideDeprecatedTemplates'}
+          groupKey={CATALOG_FILTERS.HIDE_DEPRECATED_TEMPLATES}
         />
         <TemplatesCatalogFiltersGroup
           onFilterClick={() =>

src/views/catalog/templatescatalog/hooks/useHideDeprecatedTemplateTiles.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+import { CREATE_VM_TAB } from '@catalog/CreateVMHorizontalNav/constants';
+import { CATALOG_FILTERS } from '@catalog/templatescatalog/utils/consts';
+import { useURLParams } from '@kubevirt-utils/hooks/useURLParams';
+import { HIDE_DEPRECATED_TEMPLATES } from '@kubevirt-utils/resources/template';
+
+type UseHideDeprecatedTemplateTiles = (
+  currentTab: CREATE_VM_TAB,
+  onFilterChange: (type: CATALOG_FILTERS, value: boolean | string) => void,
+) => void;
+
+const useHideDeprecatedTemplateTiles: UseHideDeprecatedTemplateTiles = (
+  currentTab,
+  onFilterChange,
+) => {
+  const { setParam } = useURLParams();
+
+  // This is to select the 'Hide deprecated templates' filter by default
+  useEffect(() => {
+    if (currentTab !== CREATE_VM_TAB.TEMPLATE) return null;
+
+    onFilterChange(CATALOG_FILTERS.HIDE_DEPRECATED_TEMPLATES, true);
+
+    setParam(HIDE_DEPRECATED_TEMPLATES, 'true');
+  }, [currentTab]);
+};
+
+export default useHideDeprecatedTemplateTiles;

src/views/catalog/templatescatalog/hooks/useVmTemplatesFilters.ts

@@ -15,12 +15,12 @@ export const useTemplatesFilters = (): [
   const hasNoDefaultUserAllParams =
     !!params.get(CATALOG_FILTERS.ONLY_DEFAULT) &&
     !!params.get(CATALOG_FILTERS.ONLY_USER) &&
-    !!params.get(CATALOG_FILTERS.ALL_ITEMS); // has no any of those params when accessing catalog first time
+    !!params.get(CATALOG_FILTERS.ALL_ITEMS); // has none of these params when accessing catalog for the first time
 
   const [filters, setFilters] = useState<TemplateFilters>({
     [CATALOG_FILTERS.ALL_ITEMS]: params.get(CATALOG_FILTERS.ONLY_DEFAULT) === 'false',
     [CATALOG_FILTERS.HIDE_DEPRECATED_TEMPLATES]:
-      params.get(CATALOG_FILTERS.HIDE_DEPRECATED_TEMPLATES) === 'false',
+      params.get(CATALOG_FILTERS.HIDE_DEPRECATED_TEMPLATES) === 'true',
     [CATALOG_FILTERS.IS_LIST]: params.get(CATALOG_FILTERS.IS_LIST) === 'true',
     [CATALOG_FILTERS.NAMESPACE]: params.get(CATALOG_FILTERS.NAMESPACE) || '',
     [CATALOG_FILTERS.ONLY_AVAILABLE]: params.get(CATALOG_FILTERS.ONLY_AVAILABLE) === 'true',

src/views/templates/list/VirtualMachineTemplatesList.tsx

@@ -19,6 +19,7 @@ import VirtualMachineTemplatesCreateButton from './components/VirtualMachineTemp
 import VirtualMachineTemplatesEmptyState from './components/VirtualMachineTemplatesEmptyState/VirtualMachineTemplatesEmptyState';
 import VirtualMachineTemplatesRow from './components/VirtualMachineTemplatesRow';
 import VirtualMachineTemplateSupport from './components/VirtualMachineTemplateSupport/VirtualMachineTemplateSupport';
+import useHideDeprecatedTemplates from './hooks/useHideDeprecatedTemplates';
 import { useTemplatesWithAvailableSource } from './hooks/useTemplatesWithAvailableSource';
 import useVirtualMachineTemplatesColumns from './hooks/useVirtualMachineTemplatesColumns';
 import useVirtualMachineTemplatesFilters from './hooks/useVirtualMachineTemplatesFilters';
@@ -58,6 +59,8 @@ const VirtualMachineTemplatesList: FC<ListPageProps> = ({
 
   const templatesLoaded = loaded && bootSourcesLoaded;
 
+  useHideDeprecatedTemplates(onFilterChange);
+
   if (templatesLoaded && isEmpty(data)) {
     return <VirtualMachineTemplatesEmptyState namespace={namespace} />;
   }

src/views/templates/list/hooks/useHideDeprecatedTemplates.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import { useURLParams } from '@kubevirt-utils/hooks/useURLParams';
+import {
+  HIDE_DEPRECATED_TEMPLATES,
+  HIDE_DEPRECATED_TEMPLATES_KEY,
+} from '@kubevirt-utils/resources/template';
+import { FilterValue } from '@openshift-console/dynamic-plugin-sdk';
+
+type UseHideDeprecatedTemplates = (
+  onFilterChange: (type: string, value: FilterValue) => void,
+) => void;
+
+const useHideDeprecatedTemplates: UseHideDeprecatedTemplates = (onFilterChange) => {
+  const { setParam } = useURLParams();
+
+  useEffect(() => {
+    // This is to select the 'Hide deprecated templates' filter by default
+    onFilterChange(HIDE_DEPRECATED_TEMPLATES, {
+      all: [HIDE_DEPRECATED_TEMPLATES],
+      selected: [HIDE_DEPRECATED_TEMPLATES],
+    });
+
+    setParam(`rowFilter-${HIDE_DEPRECATED_TEMPLATES}`, HIDE_DEPRECATED_TEMPLATES_KEY);
+  }, []);
+};
+
+export default useHideDeprecatedTemplates;