Refactor empty state handling across tables; implement tests

compiled-lang/en.json

@@ -60,7 +60,7 @@
   "noMatchingRecommendationsTitle": "No matching recommendations found",
   "noRecommendations": "The cluster is not affected by any known recommendations",
   "noRecommendationsDesc": "No known recommendations affect this cluster.",
-  "noRecsError": "No recommendations available.",
+  "noRecsError": "No recommendations available",
   "noRecsErrorDesc": "There was an error fetching recommendations for this cluster. Refresh your page to try again.",
   "noRecsForClusterListBody": "To get started, create or register your cluster to get recommendations from Insights Advisor.",
   "noRecsForClusterListTitle": "No clusters yet",

cypress/utils/components.js

@@ -15,6 +15,7 @@ const DROPDOWN_ITEM = '[data-ouia-component-type="PF4/DropdownItem"]';
 const TBODY = 'tbody[role=rowgroup]';
 const TOOLBAR_FILTER = '.ins-c-primary-toolbar__filter';
 const TABLE = 'table';
+const TITLE = '[data-ouia-component-type="PF4/Title"]';
 
 const ouiaId = (id) => `[data-ouia-component-id="${id}"]`;
 
@@ -35,4 +36,5 @@ export {
   TBODY,
   TOOLBAR_FILTER,
   TABLE,
+  TITLE,
 };

cypress/utils/table.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import { ROW, TBODY } from './components';
+import { ROW, TABLE, TBODY, TITLE } from './components';
 
 function checkTableHeaders(expectedHeaders) {
   /* patternfly/react-table-4.71.16, for some reason, renders extra empty `th` container;
@@ -18,8 +18,10 @@ function checkTableHeaders(expectedHeaders) {
 
 // TODO fucntion to get rowgroup
 
-function checkRowCounts(n) {
-  return cy.get('table').find(TBODY).find(ROW).should('have.length', n);
+function checkRowCounts(n, isSelectableTable = false) {
+  return isSelectableTable
+    ? cy.get('table').find(TBODY).should('have.length', n)
+    : cy.get('table').find(TBODY).find(ROW).should('have.length', n);
 }
 
 function columnName2UrlParam(name) {
@@ -33,9 +35,34 @@ function tableIsSortedBy(columnTitle) {
     .should('have.class', 'pf-c-table__sort pf-m-selected');
 }
 
+function checkEmptyState(title, checkIcon = false) {
+  checkRowCounts(1);
+  cy.get(TABLE)
+    .find('[ouiaid=empty-state]')
+    .should('have.length', 1)
+    .within(() => {
+      cy.get('.pf-c-empty-state__icon').should(
+        'have.length',
+        checkIcon ? 1 : 0
+      );
+      cy.get(`h5${TITLE}`).should('have.text', title);
+    });
+}
+
+function checkNoMatchingClusters() {
+  return checkEmptyState('No matching clusters found');
+}
+
+function checkNoMatchingRecs() {
+  return checkEmptyState('No matching recommendations found');
+}
+
 export {
   checkTableHeaders,
   checkRowCounts,
   columnName2UrlParam,
   tableIsSortedBy,
+  checkEmptyState,
+  checkNoMatchingClusters,
+  checkNoMatchingRecs,
 };

src/Components/AffectedClustersTable/AffectedClustersTable.js

@@ -8,20 +8,11 @@ import uniqBy from 'lodash/uniqBy';
 
 import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter/conditionalFilterConstants';
 import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
-import { EmptyTable } from '@redhat-cloud-services/frontend-components/EmptyTable';
 import { TableToolbar } from '@redhat-cloud-services/frontend-components/TableToolbar';
 import { DateFormat } from '@redhat-cloud-services/frontend-components/DateFormat';
-import {
-  Card,
-  CardBody,
-  Tooltip,
-  Bullseye,
-  Pagination,
-} from '@patternfly/react-core';
+import { Tooltip, Pagination } from '@patternfly/react-core';
 import { PaginationVariant } from '@patternfly/react-core/dist/js/components/Pagination/Pagination';
-import { Table } from '@patternfly/react-table/dist/js/components/Table/Table';
-import { TableBody } from '@patternfly/react-table/dist/js/components/Table/Body';
-import { TableHeader } from '@patternfly/react-table/dist/js/components/Table/Header';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 
 import {
   ErrorState,
@@ -69,12 +60,17 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
        clusters that are affected by the rec */
     data = { disabled: [], enabled: [] },
   } = query;
-  const rows = data.enabled;
+  const rows = data?.enabled || [];
   const filters = useSelector(({ filters }) => filters.affectedClustersState);
   const perPage = filters.limit;
   const page = filters.offset / filters.limit + 1;
   const allSelected =
     filteredRows.length !== 0 && selected.length === filteredRows.length;
+  const loadingState = isUninitialized || isFetching;
+  const errorState = isError;
+  const successState = isSuccess;
+  const noInput = successState && rows.length === 0;
+  const noMatch = rows.length > 0 && filteredRows.length === 0;
 
   const updateFilters = (filters) =>
     dispatch(updateAffectedClustersFilters(filters));
@@ -342,7 +338,35 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
         ouiaId="clusters"
         variant="compact"
         cells={AFFECTED_CLUSTERS_COLUMNS}
-        rows={displayedRows}
+        rows={
+          errorState || loadingState || noMatch || noInput ? (
+            [
+              {
+                fullWidth: true,
+                cells: [
+                  {
+                    props: {
+                      colSpan: AFFECTED_CLUSTERS_COLUMNS.length + 1,
+                    },
+                    title: errorState ? (
+                      <ErrorState />
+                    ) : loadingState ? (
+                      <Loading />
+                    ) : noInput ? (
+                      <NoAffectedClusters />
+                    ) : (
+                      <NoMatchingClusters />
+                    ),
+                  },
+                ],
+              },
+            ]
+          ) : successState ? (
+            displayedRows
+          ) : (
+            <ErrorState />
+          )
+        }
         sortBy={{
           index: filters.sortIndex,
           direction: filters.sortDirection,
@@ -359,35 +383,7 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
         ]}
       >
         <TableHeader />
-        {(isUninitialized || isFetching) && <Loading />}
-        {isError && (
-          // TODO: fix crooked message container
-          <Card id="error-state-message" ouiaId="error-state">
-            <CardBody>
-              <ErrorState />
-            </CardBody>
-          </Card>
-        )}
-        {isSuccess && rows.length === 0 && (
-          // TODO: fix crooked message container
-          <Card id="empty-state-message" ouiaId="empty-state">
-            <CardBody>
-              <NoAffectedClusters />
-            </CardBody>
-          </Card>
-        )}
-        {isSuccess &&
-          rows.length > 0 &&
-          (filteredRows.length > 0 ? (
-            <TableBody />
-          ) : (
-            // TODO: fix crooked message container
-            <EmptyTable>
-              <Bullseye>
-                <NoMatchingClusters />
-              </Bullseye>
-            </EmptyTable>
-          ))}
+        <TableBody />
       </Table>
       <TableToolbar isFooter className="ins-c-inventory__table--toolbar">
         <Pagination
@@ -411,7 +407,10 @@ AffectedClustersTable.propTypes = {
     isUninitialized: PropTypes.bool.isRequired,
     isFetching: PropTypes.bool.isRequired,
     isSuccess: PropTypes.bool.isRequired,
-    data: PropTypes.array,
+    data: PropTypes.shape({
+      enabled: PropTypes.array,
+      disabled: PropTypes.array,
+    }),
   }),
   rule: PropTypes.object,
   afterDisableFn: PropTypes.func,

src/Components/AffectedClustersTable/AffectedClustersTable.spec.ct.js

@@ -30,6 +30,8 @@ import {
   checkTableHeaders,
   checkRowCounts,
   tableIsSortedBy,
+  checkEmptyState,
+  checkNoMatchingClusters,
 } from '../../../cypress/utils/table';
 import {
   itemsPerPage,
@@ -112,6 +114,8 @@ describe('test data', () => {
   });
 });
 
+// TODO: when checking empty state, also check toolbar available and not disabled
+
 describe('non-empty successful affected clusters table', () => {
   beforeEach(() => {
     mount(
@@ -477,8 +481,8 @@ describe('non-empty successful affected clusters table', () => {
             let sortedNames = _.map(filterData(filters), 'name');
             filterApply(filters);
             if (sortedNames.length === 0) {
-              // TODO check empty table view
-              // TODO headers are displayed
+              checkNoMatchingClusters();
+              checkTableHeaders(TABLE_HEADERS);
             } else {
               cy.get(`td[data-label="Name"]`)
                 .then(($els) => {
@@ -514,7 +518,7 @@ describe('non-empty successful affected clusters table', () => {
           let sortedNames = _.map(filterData(filters), 'name');
           filterApply(filters);
           if (sortedNames.length === 0) {
-            // TODO check empty table view
+            checkNoMatchingClusters;
           } else {
             cy.get(`td[data-label="Name"]`)
               .then(($els) => {
@@ -554,8 +558,8 @@ describe('non-empty successful affected clusters table', () => {
 
     it('empty state is displayed when filters do not match any rule', () => {
       cy.get('#name-filter').type('Not existing cluster');
-      // TODO check empty table view
-      // TODO headers are displayed
+      checkNoMatchingClusters();
+      checkTableHeaders(TABLE_HEADERS);
     });
   });
 
@@ -691,9 +695,7 @@ describe('empty successful affected clusters table', () => {
   });
 
   it('renders no clusters message', () => {
-    cy.get('#empty-state-message')
-      .find('h4')
-      .should('have.text', 'No clusters');
+    checkEmptyState('No clusters', true);
   });
 
   it('renders table headers', () => {
@@ -728,8 +730,8 @@ describe('empty failed affected clusters table', () => {
   });
 
   it('renders error message', () => {
-    cy.get('#error-state-message')
-      .find('h4')
+    cy.get('[ouiaid="empty-state"]')
+      .find('h5')
       .should('have.text', 'Something went wrong');
   });
 

src/Components/Cluster/Cluster.js

@@ -10,6 +10,7 @@ import Breadcrumbs from '../Breadcrumbs';
 import Main from '@redhat-cloud-services/frontend-components/Main';
 
 export const Cluster = ({ cluster, match }) => {
+  // TODO: make breadcrumbs take display name from GET /cluster/id/info
   return (
     <React.Fragment>
       <PageHeader className="pf-m-light ins-inventory-detail">

src/Components/Cluster/Cluster.spec.ct.js

@@ -7,7 +7,10 @@ import { Cluster } from './Cluster';
 import { Provider } from 'react-redux';
 import getStore from '../../Store';
 import singleClusterPageReport from '../../../cypress/fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/reports-disabled-false.json';
-import { checkRowCounts } from '../../../cypress/utils/table';
+import {
+  checkNoMatchingRecs,
+  checkRowCounts,
+} from '../../../cypress/utils/table';
 
 // selectors
 const CLUSTER_HEADER = '#cluster-header';
@@ -62,7 +65,7 @@ describe('cluster page', () => {
     // renders table component
     cy.get(RULES_TABLE).should('have.length', 1);
     // test how many rows were rendered
-    checkRowCounts(singleClusterPageReport.report.data.length);
+    checkRowCounts(singleClusterPageReport.report.data.length, true);
   });
 
   it('cluster page in the loading state', () => {
@@ -90,7 +93,7 @@ describe('cluster page', () => {
     cy.get(CLUSTER_HEADER).should('have.length', 1);
     // renders table component
     cy.get(RULES_TABLE).should('have.length', 1);
-    cy.get('#loading-skeleton').should('have.length', 1);
+    cy.ouiaId('loading-skeleton').should('have.length', 1);
   });
 
   it('cluster page in the error state', () => {
@@ -138,7 +141,7 @@ describe('cluster page', () => {
     cy.get(FILTER_CHIPS).each(($el) =>
       expect($el.text()).to.be.oneOf(['foo bar', 'Low', 'Performance'])
     );
-    checkRowCounts(0);
+    checkNoMatchingRecs();
   });
 
   it('adds additional filters passed by the query parameters №2', () => {
@@ -161,7 +164,7 @@ describe('cluster page', () => {
         'Service Availability',
       ])
     );
-    checkRowCounts(0);
+    checkNoMatchingRecs();
   });
 });
 
@@ -206,7 +209,9 @@ describe('Cluster page display name test №1', () => {
       <MemoryRouter>
         <Intl>
           <Provider store={getStore()}>
-            <Cluster cluster="" match={props.match} />
+            <Cluster
+              {...{ ...props, cluster: { ...props.cluster, data: null } }}
+            />
           </Provider>
         </Intl>
       </MemoryRouter>