[WIP] CONSOLE-4719: Update Home nav section pages to use DataView

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

@@ -134,10 +134,17 @@ export const ResourceDataView = <
     const basicFilters: React.ReactNode[] = [];
 
     if (!hideNameLabelFilters) {
-      basicFilters.push(<DataViewTextFilter key="name" filterId="name" title={t('public~Name')} />);
+      basicFilters.push(
+        <DataViewTextFilter
+          key="name"
+          filterId="name"
+          title={t('public~Name')}
+          placeholder={t('public~Filter by name')}
+        />,
+      );
     }
 
-    if (!hideNameLabelFilters && !hideLabelFilter) {
+    if (!hideNameLabelFilters && !hideLabelFilter && loaded) {
       basicFilters.push(
         <DataViewLabelFilter key="label" filterId="label" title={t('public~Label')} data={data} />,
       );
@@ -149,7 +156,7 @@ export const ResourceDataView = <
 
     // Can't use data in the deps array as it will recompute the filters and will cause the selected category to reset
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [additionalFilterNodes, t]);
+  }, [additionalFilterNodes, t, loaded]);
 
   return mock ? (
     <EmptyBox label={label} />

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

@@ -76,42 +76,35 @@ export const useResourceDataViewData = <
 
   const dataViewColumns = React.useMemo<ResourceDataViewColumn<TData>[]>(
     () =>
-      activeColumns.map(
-        (
-          { id, title, sort, props: { classes, isStickyColumn, stickyMinWidth, modifier } },
-          index,
-        ) => {
-          const headerProps: ThProps = {
-            className: classes,
-            isStickyColumn,
-            stickyMinWidth,
-            modifier,
+      activeColumns.map(({ id, title, sort, props }, index) => {
+        const headerProps: ThProps = {
+          ...props,
+          dataLabel: title,
+        };
+
+        if (sort) {
+          headerProps.sort = {
+            columnIndex: index,
+            sortBy: {
+              index: 0,
+              direction: SortByDirection.asc,
+              defaultDirection: SortByDirection.asc,
+            },
           };
-
-          if (sort) {
-            headerProps.sort = {
-              columnIndex: index,
-              sortBy: {
-                index: 0,
-                direction: SortByDirection.asc,
-                defaultDirection: SortByDirection.asc,
-              },
-            };
-          }
-
-          return {
-            id,
-            title,
-            sortFunction: sort,
-            props: headerProps,
-            cell: title ? (
-              <span>{title}</span>
-            ) : (
-              <span className="pf-v6-u-screen-reader">{t('public~Actions')}</span>
-            ),
-          };
-        },
-      ),
+        }
+
+        return {
+          id,
+          title,
+          sortFunction: sort,
+          props: headerProps,
+          cell: title ? (
+            <span>{title}</span>
+          ) : (
+            <span className="pf-v6-u-screen-reader">{t('public~Actions')}</span>
+          ),
+        };
+      }),
     [activeColumns, t],
   );
 

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/alertmanager.cy.ts

@@ -75,10 +75,10 @@ describe('Alertmanager', () => {
     cy.byTestID('label-0').type(label);
     alertmanager.save();
     alertmanager.validateCreation(receiverName, receiverType, label);
-    listPage.rows.clickKebabAction(receiverName, 'Delete Receiver');
+    listPage.dvRows.clickKebabAction(receiverName, 'Delete Receiver');
     warningModal.confirm('AlertmanagerDeleteReceiverConfirmation');
     warningModal.shouldBeClosed('AlertmanagerDeleteReceiverConfirmation');
-    listPage.rows.shouldNotExist(receiverName);
+    listPage.dvRows.shouldNotExist(receiverName);
   });
 
   it('prevents deletion and form edit of a receiver with sub-route', () => {
@@ -100,7 +100,7 @@ receivers:
     yamlEditor.clickSaveCreateButton();
     cy.byTestID('alert-success').should('exist');
     detailsPage.selectTab('Details');
-    cy.get('[data-test-rows="resource-row"]')
+    cy.get('[data-test="data-view-table"]')
       .contains('team-X-pager')
       .parents('tr')
       .within(() => {
@@ -180,7 +180,7 @@ route:
     yamlEditor.clickSaveCreateButton();
     cy.get('.yaml-editor__buttons .pf-m-success').should('exist');
     detailsPage.selectTab('Details');
-    listPage.rows.shouldExist(receiverName);
+    listPage.dvRows.shouldExist(receiverName);
     alertmanager.visitEditPage(receiverName);
     cy.byTestID('label-0').should('have.value', matcher1);
     cy.byTestID('label-1').should('have.value', matcher2);

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/receivers/pagerduty.cy.ts

@@ -53,7 +53,7 @@ describe('Alertmanager: PagerDuty Receiver Form', () => {
     alertmanager.validateCreation(receiverName, receiverType, label);
 
     cy.log('update pagerduty_url');
-    listPage.rows.clickKebabAction(receiverName, 'Edit Receiver');
+    listPage.dvRows.clickKebabAction(receiverName, 'Edit Receiver');
     // Save as default checkbox disabled when url equals global url
     cy.byTestID('save-as-default').should('be.disabled');
     // changing url enables Save as default checkbox, should save pagerduty_url with Receiver

frontend/packages/integration-tests-cypress/tests/crud/other-routes.cy.ts

@@ -41,7 +41,7 @@ describe('Visiting other routes', () => {
     },
     {
       path: '/api-explorer',
-      waitFor: () => cy.get('[data-ouia-component-type$="TableRow"]').should('be.visible'),
+      waitFor: () => cy.get('[data-test="data-view-table"]').should('be.visible'),
     },
     {
       path: '/api-resource/ns/default/core~v1~Pod',
@@ -59,7 +59,7 @@ describe('Visiting other routes', () => {
       ? [
           {
             path: '/api-resource/ns/default/core~v1~Pod/access',
-            waitFor: () => cy.get('[data-ouia-component-type$="TableRow"]').should('be.visible'),
+            waitFor: () => cy.get('[data-test="data-view-table"]').should('be.visible'),
           },
           {
             path: '/k8s/cluster/user.openshift.io~v1~User',

frontend/packages/integration-tests-cypress/views/alertmanager.ts

@@ -73,9 +73,9 @@ export const alertmanager = {
   validateCreation: (receiverName: string, type: string, label: string) => {
     cy.byLegacyTestID('item-filter').clear();
     cy.byLegacyTestID('item-filter').type(receiverName);
-    listPage.rows.shouldExist(receiverName);
-    listPage.rows.shouldExist(type);
-    listPage.rows.shouldExist(label);
+    listPage.dvRows.shouldExist(receiverName);
+    listPage.dvRows.shouldExist(type);
+    listPage.dvRows.shouldExist(label);
   },
   visitAlertmanagerPage: () => {
     cy.visit('/settings/cluster/alertmanagerconfig');

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

@@ -104,6 +104,12 @@ export const listPage = {
     shouldBeLoaded: () => {
       cy.get(`[data-test="data-view-table"]`).should('be.visible');
     },
+    shouldExist: (resourceName: string) =>
+      cy.get(`[data-test="data-view-cell-${resourceName}-name"]`).contains(resourceName),
+    shouldNotExist: (resourceName: string) =>
+      cy
+        .get(`[data-test="data-view-cell-${resourceName}-name"]`, { timeout: 90000 })
+        .should('not.exist'),
     clickKebabAction: (resourceName: string, actionName: string) => {
       cy.get(`[data-test="data-view-cell-${resourceName}-name"]`)
         .contains(resourceName)