migrate Secrets list page from VirtualizedTable to ResourceDataView

Author: krishagarwal278

frontend/packages/console-app/src/components/data-view/ResourceDataView.tsx

@@ -29,6 +29,25 @@ import { ResourceFilters, GetDataViewRows } from './types';
 import { useResourceDataViewData } from './useResourceDataViewData';
 import { useResourceDataViewFilters } from './useResourceDataViewFilters';
 
+// Utility functions for cell properties
+export const getNameCellProps = (name: string) => ({
+  'data-test': `data-view-cell-${name}-name`,
+});
+
+export const actionsCellProps = {
+  'data-test': 'actions',
+};
+
+export const cellIsStickyProps = {
+  isStickyColumn: true,
+  stickyMinWidth: 200,
+};
+
+export const initialFiltersDefault = {
+  name: '',
+  label: '',
+};
+
 export type ResourceDataViewProps<TData, TCustomRowData, TFilters> = {
   label?: string;
   data: TData[];

frontend/packages/integration-tests-cypress/tests/crd-extensions/console-cli-download.cy.ts

@@ -41,8 +41,8 @@ describe(`${crd} CRD`, () => {
   it(`creates, displays, and deletes a new ${crd} instance`, () => {
     cy.visit(`/k8s/cluster/customresourcedefinitions?custom-resource-definition-name=${crd}`);
     listPage.isCreateButtonVisible();
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(crd, 'View instances');
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(crd, 'View instances');
     listPage.titleShouldHaveText(crd);
     listPage.clickCreateYAMLbutton();
     yamlEditor.isLoaded();
@@ -61,8 +61,8 @@ describe(`${crd} CRD`, () => {
     cy.get(`[data-test-id=${name}]`).should('contain', name);
 
     cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(name, `Delete ${crd}`);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(name, `Delete ${crd}`);
     modal.shouldBeOpened();
     modal.modalTitleShouldContain(`Delete ${crd}`);
     modal.submit();

frontend/packages/integration-tests-cypress/tests/crd-extensions/console-external-log-link.cy.ts

@@ -32,7 +32,7 @@ describe(`${crd} CRD`, () => {
 
   it(`creates, displays, modifies, and deletes a new ${crd} instance`, () => {
     cy.visit(`/k8s/cluster/customresourcedefinitions?custom-resource-definition-name=${crd}`);
-    listPage.rows.shouldBeLoaded();
+    listPage.dvRows.shouldBeLoaded();
     listPage.rows.clickRowByName(crd);
     detailsPage.titleShouldContain('consoleexternalloglinks.console.openshift.io');
     detailsPage.selectTab('Instances');
@@ -94,8 +94,8 @@ describe(`${crd} CRD`, () => {
     modal.shouldBeClosed();
 
     cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(name, `Delete ${crd}`);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(name, `Delete ${crd}`);
     modal.shouldBeOpened();
     modal.modalTitleShouldContain(`Delete ${crd}`);
     modal.submit();

frontend/packages/integration-tests-cypress/tests/crd-extensions/console-link.cy.ts

@@ -57,8 +57,8 @@ describe(`${crd} CRD`, () => {
       it(`creates, displays, and deletes a new ${crd} ${dropdownMenuName} instance`, () => {
         cy.visit(`/k8s/cluster/customresourcedefinitions?custom-resource-definition-name=${crd}`);
         listPage.isCreateButtonVisible();
-        listPage.rows.shouldBeLoaded();
-        listPage.rows.clickKebabAction(crd, 'View instances');
+        listPage.dvRows.shouldBeLoaded();
+        listPage.dvRows.clickKebabAction(crd, 'View instances');
         listPage.titleShouldHaveText(crd);
         listPage.clickCreateYAMLbutton();
         yamlEditor.isLoaded();
@@ -88,8 +88,8 @@ describe(`${crd} CRD`, () => {
           .should('exist');
 
         cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-        listPage.rows.shouldBeLoaded();
-        listPage.rows.clickKebabAction(name, `Delete ${crd}`);
+        listPage.dvRows.shouldBeLoaded();
+        listPage.dvRows.clickKebabAction(name, `Delete ${crd}`);
         modal.shouldBeOpened();
         modal.modalTitleShouldContain(`Delete ${crd}`);
         modal.submit();

frontend/packages/integration-tests-cypress/tests/crd-extensions/console-notification.cy.ts

@@ -32,8 +32,8 @@ describe(`${crd} CRD`, () => {
   it(`creates, displays, modifies, and deletes a new ${crd} instance`, () => {
     cy.visit(`/k8s/cluster/customresourcedefinitions?custom-resource-definition-name=${crd}`);
     listPage.isCreateButtonVisible();
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(crd, 'View instances');
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(crd, 'View instances');
     listPage.titleShouldHaveText(crd);
     listPage.clickCreateYAMLbutton();
     yamlEditor.isLoaded();
@@ -50,7 +50,7 @@ describe(`${crd} CRD`, () => {
     });
 
     cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-    listPage.rows.shouldBeLoaded();
+    listPage.dvRows.shouldBeLoaded();
     cy.log('Additional printer columns should exist.');
     cy.byTestID('has-additional-printer-columns').should('exist');
     cy.byTestID('additional-printer-column-header-Text').should('have.text', 'Text');
@@ -100,8 +100,8 @@ describe(`${crd} CRD`, () => {
     cy.get(altNotification).contains(altText).should('exist').and('be.visible');
 
     cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(name, `Delete ${crd}`);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(name, `Delete ${crd}`);
     modal.shouldBeOpened();
     modal.modalTitleShouldContain(`Delete ${crd}`);
     modal.submit();

frontend/packages/integration-tests-cypress/tests/crd-extensions/console-yaml-sample.cy.ts

@@ -62,8 +62,8 @@ metadata:
   it(`creates, displays, tests and deletes a new ${crd} instance`, () => {
     cy.visit(`/k8s/cluster/customresourcedefinitions?custom-resource-definition-name=${crd}`);
     listPage.isCreateButtonVisible();
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(crd, 'View instances');
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(crd, 'View instances');
     listPage.titleShouldHaveText(crd);
     listPage.clickCreateYAMLbutton();
     yamlEditor.isLoaded();
@@ -76,7 +76,7 @@ metadata:
     });
 
     cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-    listPage.rows.shouldBeLoaded();
+    listPage.dvRows.shouldBeLoaded();
     cy.log('Additional printer columns should not exist.');
     cy.byTestID('has-additional-printer-columns').should('not.exist');
     cy.log('Created date should exist since Age does not.');
@@ -106,8 +106,8 @@ metadata:
 
     // Delete CRD
     cy.visit(`/k8s/cluster/console.openshift.io~v1~${crd}`);
-    listPage.rows.shouldBeLoaded();
-    listPage.rows.clickKebabAction(name, `Delete ${crd}`);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvRows.clickKebabAction(name, `Delete ${crd}`);
     modal.shouldBeOpened();
     modal.modalTitleShouldContain(`Delete ${crd}`);
     modal.submit();

frontend/packages/integration-tests-cypress/views/list-page.ts

@@ -100,6 +100,20 @@ export const listPage = {
     shouldNotExist: (resourceName: string) =>
       cy.get(`[data-test-id="${resourceName}"]`, { timeout: 90000 }).should('not.exist'),
   },
+  dvRows: {
+    shouldBeLoaded: () => {
+      cy.get(`[data-test="data-view-table"]`).should('be.visible');
+    },
+    clickKebabAction: (resourceName: string, actionName: string) => {
+      cy.get(`[data-test="data-view-cell-${resourceName}-name"]`)
+        .contains(resourceName)
+        .parents('tr')
+        .within(() => {
+          cy.get('[data-test-id="kebab-button"]').click();
+        });
+      cy.byTestActionID(actionName).click();
+    },
+  },
 };
 
 export namespace ListPageSelector {

frontend/public/components/factory/list-page.tsx

@@ -105,6 +105,7 @@ type ListPageWrapperProps<L = any, C = any> = {
   customData?: C;
   hideColumnManagement?: boolean;
   nameFilter?: string;
+  hideLegacyFilterToolbar?: boolean;
 };
 
 export const ListPageWrapper: React.FC<ListPageWrapperProps> = (props) => {
@@ -122,6 +123,7 @@ export const ListPageWrapper: React.FC<ListPageWrapperProps> = (props) => {
     name,
     resources,
     nameFilter,
+    hideLegacyFilterToolbar,
   } = props;
   const dispatch = useDispatch();
   const memoizedIds = useDeepCompareMemoize(reduxIDs);
@@ -145,6 +147,7 @@ export const ListPageWrapper: React.FC<ListPageWrapperProps> = (props) => {
       hideLabelFilter={hideLabelFilter}
       columnLayout={columnLayout}
       uniqueFilterName={name}
+      hideLegacyFilterToolbar={hideLegacyFilterToolbar}
       {...props}
     />
   );
@@ -348,6 +351,7 @@ export type ListPageProps<L = any, C = any> = PageCommonProps<L, C> & {
   limit?: number;
   nameFilter?: string;
   skipAccessReview?: boolean;
+  hideLegacyFilterToolbar?: boolean;
 };
 
 export const ListPage = withFallback<ListPageProps>((props) => {
@@ -380,6 +384,7 @@ export const ListPage = withFallback<ListPageProps>((props) => {
     hideNameLabelFilters,
     hideColumnManagement,
     columnLayout,
+    hideLegacyFilterToolbar,
     flatten = (_resources) => _.get(_resources, name || kind, {} as FirehoseResult).data,
   } = props;
   const { t } = useTranslation();
@@ -457,6 +462,7 @@ export const ListPage = withFallback<ListPageProps>((props) => {
       hideColumnManagement={hideColumnManagement}
       columnLayout={columnLayout}
       nameFilter={nameFilter}
+      hideLegacyFilterToolbar={hideLegacyFilterToolbar}
     />
   );
 }, ErrorBoundaryFallbackPage);
@@ -485,6 +491,7 @@ type PageCommonProps<L = any, C = any> = {
   nameFilterPlaceholder?: string;
   autoFocus?: boolean;
   mock?: boolean;
+  hideLegacyFilterToolbar?: boolean;
 };
 
 export type MultiListPageProps<L = any, C = any> = PageCommonProps<L, C> & {
@@ -499,6 +506,7 @@ export type MultiListPageProps<L = any, C = any> = PageCommonProps<L, C> & {
   resources: (Omit<FirehoseResource, 'prop'> & { prop?: FirehoseResource['prop'] })[];
   staticFilters?: { key: string; value: string }[];
   nameFilter?: string;
+  hideLegacyFilterToolbar?: boolean;
 };
 
 export const MultiListPage: React.FC<MultiListPageProps> = (props) => {
@@ -530,6 +538,7 @@ export const MultiListPage: React.FC<MultiListPageProps> = (props) => {
     hideColumnManagement,
     columnLayout,
     nameFilter,
+    hideLegacyFilterToolbar,
   } = props;
 
   const { t } = useTranslation();
@@ -573,6 +582,7 @@ export const MultiListPage: React.FC<MultiListPageProps> = (props) => {
           labelFilterPlaceholder={labelFilterPlaceholder}
           nameFilter={nameFilter}
           namespace={namespace}
+          hideLegacyFilterToolbar={hideLegacyFilterToolbar}
         />
       </Firehose>
     </FireMan>