fix(inventoryList): issues483 column header subscribed copy (#497)

* locale, sockets, cores copy * inventoryListHelpers, apply PF table wrappable transform * openshiftView, rhelView, apply isWrappable to sockets, cores column
RedHatInsights · Nov 10, 2020 · c837279 · c837279
1 parent e91a4e7
commit c837279
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 105 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -61,13 +61,13 @@
     "hardwareType_physical": "Physical",
     "hardwareType_virtualized": "Virtual",
     "header": "{{context}}",
-    "header_cores": "Cores",
+    "header_cores": "Subscribed cores",
     "header_displayName": "Name",
     "header_guestsDisplayName": "Guest name",
     "header_hardwareType": "Type",
     "header_measurementType": "Type",
     "header_inventoryId": "UUID",
-    "header_sockets": "Sockets",
+    "header_sockets": "Subscribed sockets",
     "header_lastSeen": "Last seen",
     "measurementType": "{{context}}",
     "measurementType_cloud": "Public cloud",

diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryListHelpers.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryListHelpers.test.js.snap
@@ -42,6 +42,48 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers applyWrappableFilters should apply and return updated filters for table header wrapping: NOT wrappable header 1`] = `
+Array [
+  Object {
+    "id": "lorem",
+    "isWrappable": false,
+  },
+]
+`;
+
+exports[`InventoryListHelpers applyWrappableFilters should apply and return updated filters for table header wrapping: append/push a wrappable transform 1`] = `
+Object {
+  "id": "lorem",
+  "isWrappable": true,
+  "transforms": Array [
+    "lorem",
+    [Function],
+  ],
+}
+`;
+
+exports[`InventoryListHelpers applyWrappableFilters should apply and return updated filters for table header wrapping: apply default wrappable transform 1`] = `
+Object {
+  "id": "lorem",
+  "isWrappable": true,
+  "transforms": Array [
+    [Function],
+  ],
+}
+`;
+
+exports[`InventoryListHelpers applyWrappableFilters should apply and return updated filters for table header wrapping: wrappable header 1`] = `
+Array [
+  Object {
+    "id": "lorem",
+    "isWrappable": true,
+    "transforms": Array [
+      [Function],
+    ],
+  },
+]
+`;
+
 exports[`InventoryListHelpers parseInventoryFilters should parse and return updated filters for table cells: NOT sortable 1`] = `
 Array [
   Object {
@@ -197,6 +239,7 @@ Object {
 exports[`InventoryListHelpers should have specific functions: inventoryListHelpers 1`] = `
 Object {
   "applySortFilters": [Function],
+  "applyWrappableFilters": [Function],
   "parseInventoryFilters": [Function],
   "parseRowCellsListData": [Function],
 }

diff --git a/src/components/inventoryList/__tests__/inventoryListHelpers.test.js b/src/components/inventoryList/__tests__/inventoryListHelpers.test.js
@@ -1,6 +1,7 @@
 import {
   inventoryListHelpers,
   applySortFilters,
+  applyWrappableFilters,
   parseInventoryFilters,
   parseRowCellsListData
 } from '../inventoryListHelpers';
@@ -106,4 +107,22 @@ describe('InventoryListHelpers', () => {
       })
     ).toMatchSnapshot('sortable, active column');
   });
+
+  it('applyWrappableFilters should apply and return updated filters for table header wrapping', () => {
+    const filter = {
+      id: 'lorem',
+      isWrappable: false
+    };
+
+    expect(parseInventoryFilters({ filters: [filter] })).toMatchSnapshot('NOT wrappable header');
+
+    filter.isWrappable = true;
+    expect(parseInventoryFilters({ filters: [filter] })).toMatchSnapshot('wrappable header');
+
+    filter.transforms = undefined;
+    expect(applyWrappableFilters({ filter })).toMatchSnapshot('apply default wrappable transform');
+
+    filter.transforms = ['lorem'];
+    expect(applyWrappableFilters({ filter })).toMatchSnapshot('append/push a wrappable transform');
+  });
 });
diff --git a/src/components/inventoryList/inventoryListHelpers.js b/src/components/inventoryList/inventoryListHelpers.js
@@ -1,4 +1,5 @@
-import { cellWidth as PfCellWidth, SortByDirection } from '@patternfly/react-table';
+import React from 'react';
+import { cellWidth as PfCellWidth, SortByDirection, wrappable } from '@patternfly/react-table';
 import _camelCase from 'lodash/camelCase';
 import { translate } from '../i18n/i18n';
 import {
@@ -49,6 +50,18 @@ const applySortFilters = ({ filter = {}, onSort, query = {} }) => {
   return updatedFilter;
 };
 
+const applyWrappableFilters = ({ filter = {} }) => {
+  const updatedFilter = { ...filter };
+
+  if (Array.isArray(updatedFilter.transforms)) {
+    updatedFilter.transforms.push(wrappable);
+  } else {
+    updatedFilter.transforms = [wrappable];
+  }
+
+  return updatedFilter;
+};
+
 /**
  * Apply additional properties to filters.
  *
@@ -66,6 +79,10 @@ const parseInventoryFilters = ({ filters = [], onSort, query = {} }) =>
       Object.assign(updatedFilter, applySortFilters({ filter: updatedFilter, onSort, query }));
     }
 
+    if (updatedFilter.isWrappable) {
+      Object.assign(updatedFilter, applyWrappableFilters({ filter: updatedFilter }));
+    }
+
     return updatedFilter;
   });
 
@@ -113,7 +130,11 @@ const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} }) =>
         headerUpdated = (typeof header === 'function' && header({ ...allCells })) || header;
       }
 
-      if (typeof headerUpdated === 'string') {
+      if (
+        typeof headerUpdated === 'string' ||
+        typeof headerUpdated === 'number' ||
+        React.isValidElement(headerUpdated)
+      ) {
         headerUpdated = {
           title: headerUpdated
         };
@@ -143,7 +164,7 @@ const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} }) =>
         cellUpdated = (typeof cell === 'function' && cell({ ...allCells }, { ...session })) || cell;
       }
 
-      if (typeof cellUpdated === 'string') {
+      if (typeof cellUpdated === 'string' || typeof cellUpdated === 'number' || React.isValidElement(cellUpdated)) {
         cellUpdated = {
           title: cellUpdated
         };
@@ -163,6 +184,7 @@ const parseRowCellsListData = ({ filters = [], cellData = {}, session = {} }) =>
 
 const inventoryListHelpers = {
   applySortFilters,
+  applyWrappableFilters,
   parseInventoryFilters,
   parseRowCellsListData
 };
@@ -171,6 +193,7 @@ export {
   inventoryListHelpers as default,
   inventoryListHelpers,
   applySortFilters,
+  applyWrappableFilters,
   parseInventoryFilters,
   parseRowCellsListData
 };