feat(inventoryCardHelpers): ent-4689 custom tooltip config (#884)

* inventoryCardHelpers, restructure, allow tooltips * tooltip, pf tooltip wrapper, styling
RedHatInsights · Feb 17, 2022 · fdeccfb · fdeccfb
1 parent 0cf556c
commit fdeccfb
Show file tree

Hide file tree

Showing 12 changed files with 597 additions and 92 deletions.
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -175,11 +175,11 @@ Array [
     "keys": Array [
       Object {
         "key": "curiosity-inventory.header",
-        "match": "translate('curiosity-inventory.header', { context: key })",
+        "match": "translate('curiosity-inventory.header', { context: id })",
       },
       Object {
         "key": "curiosity-inventory.header",
-        "match": "translate('curiosity-inventory.header', { context: id })",
+        "match": "translate('curiosity-inventory.header', { context: key })",
       },
     ],
   },

diff --git a/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHelpers.test.js.snap b/src/components/inventoryCard/__tests__/__snapshots__/inventoryCardHelpers.test.js.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InventoryListHelpers applyConfigProperty should determine if filter property is valid and return it or undefined: prop invalid, null 1`] = `undefined`;
+
+exports[`InventoryListHelpers applyConfigProperty should determine if filter property is valid and return it or undefined: prop valid, function 1`] = `"ipsum"`;
+
+exports[`InventoryListHelpers applyConfigProperty should determine if filter property is valid and return it or undefined: prop valid, number 1`] = `1000`;
+
+exports[`InventoryListHelpers applyConfigProperty should determine if filter property is valid and return it or undefined: prop valid, string 1`] = `"hello world"`;
+
 exports[`InventoryListHelpers applySortFilters should apply and return updated filters for table sorting: NOT sortable 1`] = `
 Object {
   "id": "lorem",
@@ -138,6 +146,35 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom and generated transforms 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "ipsum",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "transforms": Array [
+        [Function],
+        [Function],
+      ],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom callback data 1`] = `
 Object {
   "cells": Array [
@@ -193,6 +230,82 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom cell tooltips 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": <Tooltip
+        content="tooltip body content"
+        distance={5}
+        enableFlip={false}
+        entryDelay={100}
+        exitDelay={0}
+        isNoWrap={false}
+        position="top"
+      >
+        object, body, lorem
+      </Tooltip>,
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": <Tooltip
+        content="tooltip header content"
+        distance={5}
+        enableFlip={false}
+        entryDelay={100}
+        exitDelay={0}
+        isNoWrap={false}
+        position="top"
+      >
+        object, header, lorem
+      </Tooltip>,
+      "transforms": Array [],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom cell, hide cell and column header if data is missing 1`] = `
+Object {
+  "cells": Array [],
+  "columnHeaders": Array [],
+  "data": Object {},
+}
+`;
+
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom cell, use an empty cell if data is missing 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"missing\\"})",
+      "transforms": Array [],
+    },
+  ],
+  "data": Object {
+    "hello": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"hello\\"})",
+      "value": "world",
+    },
+  },
+}
+`;
+
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom header data 1`] = `
 Object {
   "cells": Array [
@@ -222,6 +335,63 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom sort 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "ipsum",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "onSort": [Function],
+      "sortActive": undefined,
+      "sortDirection": undefined,
+      "title": "header, lorem sort",
+      "transforms": Array [],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: custom transforms 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "ipsum",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "transforms": Array [
+        [Function],
+      ],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
 exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: filtered data 1`] = `
 Object {
   "cells": Array [
@@ -248,8 +418,38 @@ Object {
 }
 `;
 
+exports[`InventoryListHelpers parseRowCellsListData should parse and return formatted/filtered table cells.: generated transforms 1`] = `
+Object {
+  "cells": Array [
+    Object {
+      "title": "ipsum",
+    },
+  ],
+  "columnHeaders": Array [
+    Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "transforms": Array [
+        [Function],
+      ],
+    },
+  ],
+  "data": Object {
+    "dolor": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"dolor\\"})",
+      "value": "sit",
+    },
+    "lorem": Object {
+      "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
+      "value": "ipsum",
+    },
+  },
+}
+`;
+
 exports[`InventoryListHelpers should have specific functions: inventoryListHelpers 1`] = `
 Object {
+  "applyConfigProperty": [Function],
+  "applyHeaderRowCellFilters": [Function],
   "applySortFilters": [Function],
   "applyWrappableFilters": [Function],
   "parseInventoryFilters": [Function],

diff --git a/src/components/inventoryCard/__tests__/inventoryCardHelpers.test.js b/src/components/inventoryCard/__tests__/inventoryCardHelpers.test.js
@@ -1,5 +1,6 @@
 import {
   inventoryCardHelpers,
+  applyConfigProperty,
   applySortFilters,
   applyWrappableFilters,
   parseInventoryFilters,
@@ -51,6 +52,70 @@ describe('InventoryListHelpers', () => {
     expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom header data');
 
     filters[0] = {
+      id: 'lorem',
+      header: {
+        title: 'header, lorem sort'
+      },
+      onSort: () => {}
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom sort');
+
+    filters[0] = {
+      id: 'lorem',
+      transforms: [() => {}]
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom transforms');
+
+    filters[0] = {
+      id: 'lorem',
+      transforms: [() => {}],
+      cellWidth: 200
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom and generated transforms');
+
+    filters[0] = {
+      id: 'lorem',
+      cellWidth: 200
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('generated transforms');
+
+    filters[0] = {
+      id: 'missing'
+    };
+
+    expect(parseRowCellsListData({ filters, cellData: { hello: 'world' } })).toMatchSnapshot(
+      'custom cell, use an empty cell if data is missing'
+    );
+
+    filters[0] = {
+      id: 'missing',
+      showEmptyCell: false
+    };
+
+    expect(parseRowCellsListData({ filters, cellData: {} })).toMatchSnapshot(
+      'custom cell, hide cell and column header if data is missing'
+    );
+
+    filters[0] = {
+      id: 'lorem',
+      header: {
+        title: 'object, header, lorem',
+        tooltip: 'tooltip header content'
+      },
+      cell: {
+        title: 'object, body, lorem',
+        tooltip: 'tooltip body content'
+      }
+    };
+
+    expect(parseRowCellsListData({ filters, cellData })).toMatchSnapshot('custom cell tooltips');
+
+    filters[0] = {
+      id: 'lorem',
       header: ({ lorem, dolor }) => `${lorem.title}/${dolor.title}`,
       cell: ({ lorem, dolor }) => `${lorem.value}/${dolor.value}`
     };
@@ -72,6 +137,26 @@ describe('InventoryListHelpers', () => {
     expect(parseInventoryFilters({ filters, onSort: () => {} })).toMatchSnapshot('sortable');
   });
 
+  it('applyConfigProperty should determine if filter property is valid and return it or undefined', () => {
+    const filter = {
+      title: 'hello world'
+    };
+
+    expect(applyConfigProperty(filter.title, { params: { lorem: 'ipsum' } })).toMatchSnapshot('prop valid, string');
+
+    filter.title = 1000;
+
+    expect(applyConfigProperty(filter.title, { params: { lorem: 'ipsum' } })).toMatchSnapshot('prop valid, number');
+
+    filter.title = ({ lorem }) => lorem;
+
+    expect(applyConfigProperty(filter.title, { params: { lorem: 'ipsum' } })).toMatchSnapshot('prop valid, function');
+
+    filter.title = null;
+
+    expect(applyConfigProperty(filter.title, { params: { lorem: 'ipsum' } })).toMatchSnapshot('prop invalid, null');
+  });
+
   it('applySortFilters should apply and return updated filters for table sorting', () => {
     const filter = {
       id: 'lorem',