fix(RHINENG-11976): Fix table loading states (#843)

Fixes https://issues.redhat.com/browse/RHINENG-11976.
RedHatInsights · Dec 17, 2024 · 503cffc · 503cffc
1 parent 04b36fb
commit 503cffc
Show file tree

Hide file tree

Showing 12 changed files with 357 additions and 326 deletions.
diff --git a/cypress/utils/table.js b/cypress/utils/table.js
@@ -176,9 +176,9 @@ function checkSorting(
         }
       });
   } else {
+    cy.get(header).find('button').click();
     cy.get(header)
       .find('button')
-      .click()
       .click() // TODO dblclick fails for unknown reason in RecsListTable when sorting by Clusters
       .then(() => {
         if (validateURL) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "postinstall": "ts-patch install"
   },
   "dependencies": {
+    "@patternfly/react-component-groups": "^5.4.0",
     "@patternfly/react-core": "^5.4.8",
     "@patternfly/react-icons": "^5.4.2",
     "@patternfly/react-table": "^5.4.5",

diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.cy.js b/src/Components/AffectedClustersTable/AffectedClustersTable.cy.js
@@ -163,13 +163,14 @@ describe('non-empty successful affected clusters table', () => {
   });
 
   it('renders table header', () => {
+    cy.get('[data-ouia-component-id=SkeletonTable-tr-0]').should('not.exist');
     checkTableHeaders(TABLE_HEADERS);
   });
 
   it('rows show cluster names instead uuids when available', () => {
     const names = _.map(data, 'name');
     // Wait for skeleton to disappear
-    cy.get('[data-ouia-component-id=loading-skeleton]').should('not.exist');
+    cy.get('[data-ouia-component-id=SkeletonTable-tr-0]').should('not.exist');
     cy.get(`td[data-label="Name"]`)
       .then(($els) => {
         return _.map(Cypress.$.makeArray($els), 'innerText');
@@ -178,7 +179,7 @@ describe('non-empty successful affected clusters table', () => {
   });
 
   it('names of rows are links', () => {
-    cy.get('[data-ouia-component-id=loading-skeleton]').should('not.exist');
+    cy.get('[data-ouia-component-id=SkeletonTable-tr-0]').should('not.exist');
     cy.get(TABLE)
       .find(TABLE_ROW)
       .each(($el, index) => {
@@ -641,6 +642,7 @@ describe('empty successful affected clusters table', () => {
   });
 
   it('renders table headers', () => {
+    cy.get('[data-ouia-component-id=SkeletonTable-tr-0]').should('not.exist');
     checkTableHeaders(TABLE_HEADERS);
   });
 });

diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.js b/src/Components/AffectedClustersTable/AffectedClustersTable.js
@@ -30,7 +30,6 @@ import {
   AFFECTED_CLUSTERS_VERSION_CELL,
   FILTER_CATEGORIES,
 } from '../../AppConstants';
-import Loading from '../Loading/Loading';
 import {
   AFFECTED_CLUSTERS_INITIAL_STATE,
   resetFilters,
@@ -45,6 +44,7 @@ import {
   addFilterParam as _addFilterParam,
 } from '../Common/Tables';
 import { BASE_PATH } from '../../Routes';
+import { SkeletonTable } from '@patternfly/react-component-groups';
 
 const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
   const intl = useIntl();
@@ -97,7 +97,7 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
         type: conditionalFilterType.text,
         filterValues: {
           id: 'name-filter',
-          key: 'name-filter',
+          // key: 'name-filter',
           onChange: (event, value) => addFilterParam('text', value),
           value: filters.text,
         },
@@ -108,7 +108,7 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
         type: conditionalFilterType.checkbox,
         filterValues: {
           id: 'version-filter',
-          key: 'version-filter',
+          // key: 'version-filter',
           onChange: (event, value) => addFilterParam('version', value),
           value: filters.version,
           items: uniqBy(
@@ -384,59 +384,65 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
           ],
         }}
       />
-      <Table
-        aria-label="Table of affected clusters"
-        ouiaId="clusters"
-        ouiaSafe={!loadingState}
-        variant="compact"
-        cells={AFFECTED_CLUSTERS_COLUMNS}
-        rows={
-          errorState || loadingState || noMatch || noInput ? (
-            [
-              {
-                fullWidth: true,
-                cells: [
-                  {
-                    props: {
-                      colSpan: AFFECTED_CLUSTERS_COLUMNS.length + 1,
+      {loadingState ? (
+        <SkeletonTable
+          columns={AFFECTED_CLUSTERS_COLUMNS.map((c) => c.title)}
+          isSelectable
+          variant="compact"
+        />
+      ) : (
+        <Table
+          aria-label="Table of affected clusters"
+          ouiaId="clusters"
+          ouiaSafe={!loadingState}
+          variant="compact"
+          cells={AFFECTED_CLUSTERS_COLUMNS}
+          rows={
+            errorState || loadingState || noMatch || noInput ? (
+              [
+                {
+                  fullWidth: true,
+                  cells: [
+                    {
+                      props: {
+                        colSpan: AFFECTED_CLUSTERS_COLUMNS.length + 1,
+                      },
+                      title: errorState ? (
+                        <ErrorState />
+                      ) : noInput ? (
+                        <NoAffectedClusters />
+                      ) : (
+                        <NoMatchingClusters />
+                      ),
                     },
-                    title: errorState ? (
-                      <ErrorState />
-                    ) : loadingState ? (
-                      <Loading />
-                    ) : noInput ? (
-                      <NoAffectedClusters />
-                    ) : (
-                      <NoMatchingClusters />
-                    ),
-                  },
-                ],
-              },
-            ]
-          ) : successState ? (
-            displayedRows
-          ) : (
-            <ErrorState />
-          )
-        }
-        sortBy={{
-          index: filters.sortIndex,
-          direction: filters.sortDirection,
-        }}
-        onSort={onSort}
-        canSelectAll={false}
-        onSelect={displayedRows?.length > 0 ? onSelect : undefined}
-        actions={[
-          {
-            title: 'Disable recommendation for cluster',
-            onClick: (event, rowIndex) =>
-              handleModalToggle(true, filteredRows[rowIndex].id),
-          },
-        ]}
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>
+                  ],
+                },
+              ]
+            ) : successState ? (
+              displayedRows
+            ) : (
+              <ErrorState />
+            )
+          }
+          sortBy={{
+            index: filters.sortIndex,
+            direction: filters.sortDirection,
+          }}
+          onSort={onSort}
+          canSelectAll={false}
+          onSelect={displayedRows?.length > 0 ? onSelect : undefined}
+          actions={[
+            {
+              title: 'Disable recommendation for cluster',
+              onClick: (event, rowIndex) =>
+                handleModalToggle(true, filteredRows[rowIndex].id),
+            },
+          ]}
+        >
+          <TableHeader />
+          <TableBody />
+        </Table>
+      )}
       <Pagination
         variant={PaginationVariant.bottom}
         itemCount={filteredRows.length}

diff --git a/src/Components/ClusterRules/ClusterRules.cy.js b/src/Components/ClusterRules/ClusterRules.cy.js
@@ -190,11 +190,8 @@ describe('cluster rules table', () => {
 
   it('expand one row then sort', () => {
     cy.get('#expandable-toggle2').click();
-    cy.get(TABLE)
-      .find('th[data-label=Description]')
-      .find('button')
-      .click()
-      .click();
+    cy.get(TABLE).find('th[data-label=Description]').find('button').click();
+    cy.get(TABLE).find('th[data-label=Description]').find('button').click();
     cy.get(EXPANDABLES).should('have.length', 2);
   });
 
@@ -413,7 +410,8 @@ describe('cluster rules table testing the first query parameter', () => {
       if (order === 'ascending') {
         cy.get(header).find('button').click();
       } else {
-        cy.get(header).find('button').click().click();
+        cy.get(header).find('button').click();
+        cy.get(header).find('button').click();
       }
       let sortedDescriptions = _.map(
         _.orderBy(