fix(tableSkeleton): allow table with zero rows (#390)

RedHatInsights · Sep 10, 2020 · 00c001b · 00c001b
1 parent ef0333a
commit 00c001b
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 2 deletions.
diff --git a/src/components/table/__tests__/__snapshots__/tableSkeleton.test.js.snap b/src/components/table/__tests__/__snapshots__/tableSkeleton.test.js.snap
@@ -192,6 +192,134 @@ exports[`TableSkeleton Component should allow variations in table layout: column
 />
 `;
 
+exports[`TableSkeleton Component should allow variations in table layout: no table header and zero rows 1`] = `
+<Table
+  ariaLabel="t(curiosity-inventory.tableSkeletonAriaLabel)"
+  borders={false}
+  className="curiosity-skeleton-table curiosity-skeleton-table__hidden-rows lorem-ipsum-class"
+  columnHeaders={
+    Array [
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+    ]
+  }
+  isHeader={false}
+  rows={
+    Array [
+      Object {
+        "cells": Array [
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+        ],
+      },
+    ]
+  }
+  summary={null}
+  t={[Function]}
+  variant="compact"
+/>
+`;
+
+exports[`TableSkeleton Component should allow variations in table layout: table header and zero rows 1`] = `
+<Table
+  ariaLabel="t(curiosity-inventory.tableSkeletonAriaLabel)"
+  borders={false}
+  className="curiosity-skeleton-table curiosity-skeleton-table__hidden-rows lorem-ipsum-class"
+  columnHeaders={
+    Array [
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+      <Skeleton
+        isDark={false}
+        size="md"
+      />,
+    ]
+  }
+  isHeader={true}
+  rows={
+    Array [
+      Object {
+        "cells": Array [
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+          <Skeleton
+            isDark={false}
+            size="md"
+          />,
+        ],
+      },
+    ]
+  }
+  summary={null}
+  t={[Function]}
+  variant="compact"
+/>
+`;
+
 exports[`TableSkeleton Component should render a non-connected component: non-connected 1`] = `
 <Table
   ariaLabel="t(curiosity-inventory.tableSkeletonAriaLabel)"

diff --git a/src/components/table/__tests__/tableSkeleton.test.js b/src/components/table/__tests__/tableSkeleton.test.js
@@ -31,5 +31,15 @@ describe('TableSkeleton Component', () => {
       variant: TableVariant.compact
     });
     expect(component).toMatchSnapshot('className and variant');
+
+    component.setProps({
+      rowCount: 0
+    });
+    expect(component).toMatchSnapshot('no table header and zero rows');
+
+    component.setProps({
+      isHeader: true
+    });
+    expect(component).toMatchSnapshot('table header and zero rows');
   });
 });
diff --git a/src/components/table/tableSkeleton.js b/src/components/table/tableSkeleton.js
@@ -20,16 +20,19 @@ import { translate } from '../i18n/i18n';
  */
 const TableSkeleton = ({ className, borders, colCount, isHeader, rowCount, t, variant }) => {
   const updatedColumnHeaders = [...new Array(colCount)].map(() => <Skeleton size={SkeletonSize.md} />);
+  const updatedRowCount = rowCount || 1;
 
-  const updatedRows = [...new Array(rowCount)].map(() => ({
+  const updatedRows = [...new Array(updatedRowCount)].map(() => ({
     cells: [...new Array(colCount)].map(() => <Skeleton size={SkeletonSize.md} />)
   }));
 
   return (
     <Table
       ariaLabel={t('curiosity-inventory.tableSkeletonAriaLabel')}
       borders={borders}
-      className={`curiosity-skeleton-table ${className || ''}`}
+      className={`curiosity-skeleton-table${(!rowCount && ' curiosity-skeleton-table__hidden-rows') || ''} ${
+        className || ''
+      }`}
       columnHeaders={updatedColumnHeaders}
       isHeader={isHeader}
       rows={updatedRows}

diff --git a/src/styles/_skeleton.scss b/src/styles/_skeleton.scss
@@ -16,4 +16,12 @@
       height: 200px;
     }
   }
+
+  .curiosity-skeleton-table {
+    &.curiosity-skeleton-table__hidden-rows {
+      tbody {
+        display: none
+      }
+    }
+  }
 }