CONSOLE-4718: update Administrator list pages to use ResourceDataView

Author: rhamilto

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

@@ -49,6 +49,25 @@ export type ResourceDataViewProps<TData, TCustomRowData, TFilters> = {
   mock?: boolean;
 };
 
+export const BodyLoading: React.FCC<{ columns: number }> = ({ columns }) => {
+  return <SkeletonTableBody rowsCount={5} columnsCount={columns} />;
+};
+
+export const BodyEmpty: React.FCC<{ label: string; colSpan: number }> = ({ label, colSpan }) => {
+  const { t } = useTranslation();
+  return (
+    <Tbody>
+      <Tr>
+        <Td colSpan={colSpan}>
+          <Bullseye>
+            {label ? t('public~No {{label}} found', { label }) : t('public~None found')}
+          </Bullseye>
+        </Td>
+      </Tr>
+    </Tbody>
+  );
+};
+
 /**
  * Console DataView component based on PatternFly DataView.
  */
@@ -100,24 +119,13 @@ export const ResourceDataView = <
     customRowData,
   });
 
-  const bodyLoading = React.useMemo(
-    () => <SkeletonTableBody rowsCount={5} columnsCount={dataViewColumns.length} />,
-    [dataViewColumns.length],
-  );
+  const bodyLoading = React.useMemo(() => <BodyLoading columns={dataViewColumns.length} />, [
+    dataViewColumns.length,
+  ]);
 
   const bodyEmpty = React.useMemo(
-    () => (
-      <Tbody>
-        <Tr>
-          <Td colSpan={dataViewColumns.length}>
-            <Bullseye>
-              {label ? t('public~No {{label}} found', { label }) : t('public~None found')}
-            </Bullseye>
-          </Td>
-        </Tr>
-      </Tbody>
-    ),
-    [t, dataViewColumns.length, label],
+    () => <BodyEmpty label={label} colSpan={dataViewColumns.length} />,
+    [dataViewColumns.length, label],
   );
 
   const activeState = React.useMemo(() => {

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

@@ -74,11 +74,11 @@ describe('Alertmanager', () => {
     cy.byTestID('webhook-url').type(webhookURL);
     cy.byTestID('label-0').type(label);
     alertmanager.save();
-    alertmanager.validateCreation(receiverName, receiverType, label);
-    listPage.rows.clickKebabAction(receiverName, 'Delete Receiver');
+    alertmanager.validateCreation(receiverName, 'integration-types', 'routing-labels');
+    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,8 +100,7 @@ receivers:
     yamlEditor.clickSaveCreateButton();
     cy.byTestID('alert-success').should('exist');
     detailsPage.selectTab('Details');
-    cy.get('[data-test-rows="resource-row"]')
-      .contains('team-X-pager')
+    cy.get('[data-test="data-view-cell-team-X-pager-name"]')
       .parents('tr')
       .within(() => {
         cy.get('[data-test-id="kebab-button"]').click();
@@ -180,7 +179,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/email.cy.ts

@@ -49,7 +49,7 @@ describe('Alertmanager: Email Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify Email Receiver was created correctly');
-    alertmanager.validateCreation(receiverName, receiverType, label);
+    alertmanager.validateCreation(receiverName);
     alertmanager.visitYAMLPage();
     yamlEditor.getEditorContent().then((content) => {
       const configs = getGlobalsAndReceiverConfig(receiverName, configName, content);

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

@@ -50,10 +50,10 @@ describe('Alertmanager: PagerDuty Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify PagerDuty Receiver was created correctly');
-    alertmanager.validateCreation(receiverName, receiverType, label);
+    alertmanager.validateCreation(receiverName);
 
     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/cluster-settings/alertmanager/receivers/slack.cy.ts

@@ -52,7 +52,7 @@ describe('Alertmanager: Slack Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify Slack Receiver was created correctly');
-    alertmanager.validateCreation(receiverName, receiverType, label);
+    alertmanager.validateCreation(receiverName);
     alertmanager.visitYAMLPage();
     yamlEditor.getEditorContent().then((content) => {
       const configs = getGlobalsAndReceiverConfig(receiverName, configName, content);

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

@@ -34,7 +34,7 @@ describe('Alertmanager: Webhook Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify Webhook Receiver was created correctly');
-    alertmanager.validateCreation(receiverName, receiverType, label);
+    alertmanager.validateCreation(receiverName);
     alertmanager.visitYAMLPage();
     yamlEditor.getEditorContent().then((content) => {
       const configs = getGlobalsAndReceiverConfig(receiverName, configName, content);

frontend/packages/integration-tests-cypress/tests/crud/quotas.cy.ts

@@ -72,9 +72,9 @@ const deleteClusterExamples = () => {
   cy.log('delete ClusterResourceQuota instance');
   projectDropdown.selectProject(allProjectsDropdownLabel);
   nav.sidenav.clickNavLink(['Administration', 'ResourceQuotas']);
-  listPage.rows.shouldBeLoaded();
-  listPage.filter.byName(clusterQuotaName);
-  listPage.rows.clickRowByName(clusterQuotaName);
+  listPage.dvRows.shouldBeLoaded();
+  listPage.dvFilter.byName(clusterQuotaName);
+  listPage.dvRows.clickRowByName(clusterQuotaName);
   detailsPage.isLoaded();
   detailsPage.clickPageActionFromDropdown('Delete ClusterResourceQuota');
   modal.shouldBeOpened();
@@ -103,37 +103,37 @@ describe('Quotas', () => {
   it(`'All Projects' shows ResourceQuotas`, () => {
     nav.sidenav.clickNavLink(['Administration', 'ResourceQuotas']);
     projectDropdown.selectProject(allProjectsDropdownLabel);
-    listPage.rows.shouldBeLoaded();
-    listPage.filter.byName(quotaName);
-    listPage.rows.shouldExist(quotaName);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvFilter.byName(quotaName);
+    listPage.dvRows.shouldExist(quotaName);
   });
 
   it(`'All Projects' shows ClusterResourceQuotas`, () => {
     nav.sidenav.clickNavLink(['Administration', 'ResourceQuotas']);
     projectDropdown.selectProject(allProjectsDropdownLabel);
-    listPage.rows.shouldBeLoaded();
-    listPage.filter.byName(clusterQuotaName);
-    listPage.rows.shouldExist(clusterQuotaName);
-    listPage.rows.clickRowByName(clusterQuotaName);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvFilter.byName(clusterQuotaName);
+    listPage.dvRows.shouldExist(clusterQuotaName);
+    listPage.dvRows.clickRowByName(clusterQuotaName);
     detailsPage.isLoaded();
     detailsPage.breadcrumb(0).contains('ClusterResourceQuota');
   });
 
   it(`Test namespace shows ResourceQuotas`, () => {
     nav.sidenav.clickNavLink(['Administration', 'ResourceQuotas']);
     projectDropdown.selectProject(testName);
-    listPage.rows.shouldBeLoaded();
-    listPage.filter.byName(quotaName);
-    listPage.rows.shouldExist(quotaName);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvFilter.byName(quotaName);
+    listPage.dvRows.shouldExist(quotaName);
   });
 
   it(`Test namespace shows AppliedClusterResourceQuotas`, () => {
     nav.sidenav.clickNavLink(['Administration', 'ResourceQuotas']);
     projectDropdown.selectProject(testName);
-    listPage.rows.shouldBeLoaded();
-    listPage.filter.byName(clusterQuotaName);
-    listPage.rows.shouldExist(clusterQuotaName);
-    listPage.rows.clickRowByName(clusterQuotaName);
+    listPage.dvRows.shouldBeLoaded();
+    listPage.dvFilter.byName(clusterQuotaName);
+    listPage.dvRows.shouldExist(clusterQuotaName);
+    listPage.dvRows.clickRowByName(clusterQuotaName);
     detailsPage.isLoaded();
     detailsPage.breadcrumb(0).contains('AppliedClusterResourceQuota');
   });

frontend/packages/integration-tests-cypress/tests/crud/resource-crud.cy.ts

@@ -109,8 +109,10 @@ describe('Kubernetes resource CRUD operations', () => {
   const dataViewResources = new Set([
     'HorizontalPodAutoscaler',
     'Job',
+    'LimitRange',
     'Pod',
     'ReplicaSet',
+    'ResourceQuota',
     'ReplicationController',
     'StatefulSet',
   ]);

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

@@ -70,12 +70,11 @@ export const alertmanager = {
     ),
   save: () => cy.byTestID('save-changes').should('be.enabled').click(),
   showAdvancedConfiguration: () => cy.byTestID('advanced-configuration').find('button').click(),
-  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);
+  validateCreation: (receiverName: string, typeCellName: string, labelCellName: string) => {
+    listPage.dvFilter.byName(receiverName);
+    listPage.dvRows.shouldExist(receiverName);
+    listPage.dvRows.shouldExist(receiverName, typeCellName);
+    listPage.dvRows.shouldExist(receiverName, labelCellName);
   },
   visitAlertmanagerPage: () => {
     cy.visit('/settings/cluster/alertmanagerconfig');

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

@@ -148,10 +148,8 @@ export const listPage = {
           cy.byTestID('popover-status-button').click();
         });
     },
-    shouldExist: (resourceName: string) => {
-      cy.get(`[data-test="data-view-cell-${resourceName}-name"]`)
-        .contains(resourceName)
-        .should('exist');
+    shouldExist: (resourceName: string, cellName: string = 'name') => {
+      cy.get(`[data-test="data-view-cell-${resourceName}-${cellName}"]`).should('exist');
     },
     shouldNotExist: (resourceName: string) => {
       cy.get(`[data-test="data-view-cell-${resourceName}-name"]`).should('not.exist');