feat(inventoryList,guestsList): issues/494 fixed column widths

* inventoryList, guestsList, proptype expanded, loader colWidth * inventoryListHelpers, apply filter column widths * loader, pass colWidth * openshiftView, rhelView, inventory fixed column widths * table, check for valid cell contents, proptypes * tableSkeleton, allow fixed column widths * styling, fix guestsList padding
RedHatInsights · Nov 5, 2020 · 184f298 · 184f298
1 parent c670525
commit 184f298
Show file tree

Hide file tree

Showing 16 changed files with 531 additions and 196 deletions.
diff --git a/src/components/guestsList/__tests__/__snapshots__/guestsList.test.js.snap b/src/components/guestsList/__tests__/__snapshots__/guestsList.test.js.snap
@@ -19,7 +19,7 @@ exports[`GuestsList Component should handle multiple display states: fulfilled 1
       <Table
         ariaLabel={null}
         borders={false}
-        className="curiosity-inventory-list"
+        className="curiosity-guests-list"
         columnHeaders={
           Array [
             "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
@@ -60,6 +60,7 @@ exports[`GuestsList Component should handle multiple display states: initial pen
       Object {
         "borders": false,
         "colCount": 1,
+        "colWidth": Array [],
         "rowCount": 1,
         "variant": "compact",
       }
@@ -154,23 +155,30 @@ exports[`GuestsList Component should handle variations in data: filtered data 1`
       <Table
         ariaLabel={null}
         borders={false}
-        className="curiosity-inventory-list"
+        className="curiosity-guests-list"
         columnHeaders={
           Array [
-            "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+            Object {
+              "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+              "transforms": Array [],
+            },
           ]
         }
         isHeader={true}
         rows={
           Array [
             Object {
               "cells": Array [
-                "ipsum",
+                Object {
+                  "title": "ipsum",
+                },
               ],
             },
             Object {
               "cells": Array [
-                "amet",
+                Object {
+                  "title": "amet",
+                },
               ],
             },
           ]
@@ -203,7 +211,7 @@ exports[`GuestsList Component should handle variations in data: variable data 1`
       <Table
         ariaLabel={null}
         borders={false}
-        className="curiosity-inventory-list"
+        className="curiosity-guests-list"
         columnHeaders={
           Array [
             "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",

diff --git a/src/components/guestsList/guestsList.js b/src/components/guestsList/guestsList.js
@@ -148,7 +148,7 @@ class GuestsList extends React.Component {
             <Table
               borders={false}
               variant={TableVariant.compact}
-              className="curiosity-inventory-list"
+              className="curiosity-guests-list"
               columnHeaders={updatedColumnHeaders}
               rows={updatedRows}
             />
@@ -176,6 +176,7 @@ class GuestsList extends React.Component {
             tableProps={{
               borders: false,
               colCount: filterGuestsData?.length || (listData?.[0] && Object.keys(listData[0]).length) || 1,
+              colWidth: (filterGuestsData?.length && filterGuestsData.map(({ cellWidth }) => cellWidth)) || [],
               rowCount: numberOfGuests < perPageDefault ? numberOfGuests : perPageDefault,
               variant: TableVariant.compact
             }}
@@ -201,17 +202,17 @@ GuestsList.propTypes = {
       id: PropTypes.string,
       header: PropTypes.oneOfType([
         PropTypes.shape({
-          title: PropTypes.string
+          title: PropTypes.node.isRequired
         }),
         PropTypes.func,
-        PropTypes.string
+        PropTypes.node
       ]),
       cell: PropTypes.oneOfType([
         PropTypes.shape({
-          title: PropTypes.string
+          title: PropTypes.node.isRequired
         }),
         PropTypes.func,
-        PropTypes.string
+        PropTypes.node
       ])
     }).isRequired
   ),

diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
@@ -166,21 +166,28 @@ exports[`InventoryList Component should handle variations in data: filtered data
           className="curiosity-inventory-list"
           columnHeaders={
             Array [
-              "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+              Object {
+                "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+                "transforms": Array [],
+              },
             ]
           }
           isHeader={true}
           rows={
             Array [
               Object {
                 "cells": Array [
-                  "ipsum",
+                  Object {
+                    "title": "ipsum",
+                  },
                 ],
                 "expandedContent": false,
               },
               Object {
                 "cells": Array [
-                  "sit",
+                  Object {
+                    "title": "sit",
+                  },
                 ],
                 "expandedContent": false,
               },

diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryListHelpers.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryListHelpers.test.js.snap
@@ -87,10 +87,15 @@ Object {
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom callback data 1`] = `
 Object {
   "cells": Array [
-    "ipsum/sit",
+    Object {
+      "title": "ipsum/sit",
+    },
   ],
   "columnHeaders": Array [
-    "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})/t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})/t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "transforms": Array [],
+    },
   ],
   "data": Object {
     "dolor": Object {
@@ -116,7 +121,10 @@ Object {
     },
   ],
   "columnHeaders": Array [
-    "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "transforms": Array [],
+    },
   ],
   "data": Object {
     "dolor": Object {
@@ -134,14 +142,17 @@ Object {
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom header data 1`] = `
 Object {
   "cells": Array [
-    "ipsum",
+    Object {
+      "title": "ipsum",
+    },
   ],
   "columnHeaders": Array [
     Object {
       "props": Object {
         "textCenter": true,
       },
       "title": "object, header, lorem",
+      "transforms": Array [],
     },
   ],
   "data": Object {
@@ -160,10 +171,15 @@ Object {
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: filtered data 1`] = `
 Object {
   "cells": Array [
-    "ipsum",
+    Object {
+      "title": "ipsum",
+    },
   ],
   "columnHeaders": Array [
-    "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "transforms": Array [],
+    },
   ],
   "data": Object {
     "dolor": Object {

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -198,6 +198,8 @@ class InventoryList extends React.Component {
                   tableProps={{
                     className: 'curiosity-inventory-list',
                     colCount: filterInventoryData?.length || (listData?.[0] && Object.keys(listData[0]).length) || 1,
+                    colWidth:
+                      (filterInventoryData?.length && filterInventoryData.map(({ cellWidth }) => cellWidth)) || [],
                     rowCount: listData?.length || updatedPerPage,
                     variant: TableVariant.compact
                   }}
@@ -242,17 +244,17 @@ InventoryList.propTypes = {
       id: PropTypes.string,
       header: PropTypes.oneOfType([
         PropTypes.shape({
-          title: PropTypes.string
+          title: PropTypes.node.isRequired
         }),
         PropTypes.func,
-        PropTypes.string
+        PropTypes.node
       ]),
       cell: PropTypes.oneOfType([
         PropTypes.shape({
-          title: PropTypes.string
+          title: PropTypes.node.isRequired
         }),
         PropTypes.func,
-        PropTypes.string
+        PropTypes.node
       ])
     }).isRequired
   ),

diff --git a/src/components/inventoryList/inventoryListHelpers.js b/src/components/inventoryList/inventoryListHelpers.js
@@ -1,4 +1,4 @@
-import { SortByDirection } from '@patternfly/react-table';
+import { cellWidth as PfCellWidth, SortByDirection } from '@patternfly/react-table';
 import _camelCase from 'lodash/camelCase';
 import { translate } from '../i18n/i18n';
 import {
@@ -70,7 +70,7 @@ const parseInventoryFilters = ({ filters = [], onSort, query = {} }) =>
   });
 
 /**
- * Parse and return formatted/filtered table cells.
+ * Parse and return formatted/filtered table cells, and apply table filters.
  *
  * @param {object} params
  * @param {Array} params.filters
@@ -83,7 +83,7 @@ const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} }) =>
   const updatedCells = [];
   const allCells = {};
 
-  // Apply translation and value, "pre" filters/callbacks
+  // Apply basic translation and value
   Object.entries(cellData).forEach(([key, value]) => {
     allCells[key] = {
       title: translate('curiosity-inventory.header', { context: key }),
@@ -94,38 +94,61 @@ const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} }) =>
     updatedCells.push(value);
   });
 
-  // Apply header and cell values, apply filters/callbacks
+  // Apply filters to header and cell values
   if (filters?.length) {
     updatedColumnHeaders.length = 0;
     updatedCells.length = 0;
 
-    filters.forEach(({ id, cell, header, onSort, sortActive, sortDirection }) => {
+    filters.forEach(({ id, cell, cellWidth, header, onSort, sortActive, sortDirection, transforms }) => {
       let headerUpdated;
       let cellUpdated;
 
       if (allCells[id]) {
-        headerUpdated = allCells[id].title;
-        cellUpdated = allCells[id].value;
+        headerUpdated = allCells[id]?.title ?? id;
+        cellUpdated = allCells[id]?.value ?? '';
       }
 
+      // set table header cell filter params
       if (header) {
         headerUpdated = (typeof header === 'function' && header({ ...allCells })) || header;
       }
 
+      if (typeof headerUpdated === 'string') {
+        headerUpdated = {
+          title: headerUpdated
+        };
+      }
+
+      headerUpdated.transforms = [];
+
+      if (Array.isArray(transforms)) {
+        headerUpdated.transforms = headerUpdated.transforms.concat([...transforms]);
+      }
+
+      if (typeof cellWidth === 'number') {
+        headerUpdated.transforms.push(PfCellWidth(cellWidth));
+      }
+
       if (typeof onSort === 'function') {
         headerUpdated = {
-          ...(typeof headerUpdated !== 'string' && headerUpdated),
+          ...headerUpdated,
           onSort: obj => onSort({ ...allCells }, { ...obj, id }),
           sortActive,
-          sortDirection,
-          title: allCells[id].title
+          sortDirection
         };
       }
 
+      // set table row cell filter params
       if (cell) {
         cellUpdated = (typeof cell === 'function' && cell({ ...allCells }, { ...session })) || cell;
       }
 
+      if (typeof cellUpdated === 'string') {
+        cellUpdated = {
+          title: cellUpdated
+        };
+      }
+
       updatedColumnHeaders.push(headerUpdated);
       updatedCells.push(cellUpdated);
     });

diff --git a/src/components/loader/__tests__/__snapshots__/loader.test.js.snap b/src/components/loader/__tests__/__snapshots__/loader.test.js.snap
@@ -69,6 +69,7 @@ exports[`Loader Component should handle variant loader components: variant: tabl
   borders={true}
   className={null}
   colCount={1}
+  colWidth={Array []}
   isHeader={true}
   rowCount={5}
   t={[Function]}

diff --git a/src/components/loader/loader.js b/src/components/loader/loader.js
@@ -65,6 +65,7 @@ Loader.propTypes = {
     borders: PropTypes.bool,
     className: PropTypes.string,
     colCount: PropTypes.number,
+    colWidth: PropTypes.array,
     rowCount: PropTypes.number,
     variant: PropTypes.oneOf([...Object.values(TableVariant)])
   }),