feat(config): sw-922 product custom card metrics (#1077)

* config, rhacs, rhods, rhosak, card metrics to display * helpers, setImmutableData * graphCard, move isMetricDisplay check to totals comp * graphCardHelpers, set, or determine, isMetricDisplay * graphCardMetricTotals, passthrough, call card callbacks * pageColumns, adjust children isRequired
RedHatInsights · Mar 21, 2023 · c979301 · c979301
1 parent a242cbc
commit c979301
Show file tree

Hide file tree

Showing 35 changed files with 917 additions and 320 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
     '!src/app.js',
     '!src/bootstrap.js',
     '!src/entry.js',
-    '!src/index.js',
+    '!src/index*.js',
     '!src/components/**/index.js',
     '!src/common/index.js',
     '!src/redux/index.js',

diff --git a/src/common/README.md b/src/common/README.md
@@ -171,6 +171,7 @@ Download the debug log file.
 * [General](#Helpers.module_General)
     * [~noop](#Helpers.module_General..noop)
     * [~noopPromise](#Helpers.module_General..noopPromise) : <code>Promise.&lt;{}&gt;</code>
+    * [~setImmutableData](#Helpers.module_General..setImmutableData) ⇒ <code>\*</code>
     * [~DEV_MODE](#Helpers.module_General..DEV_MODE) : <code>boolean</code>
     * [~PROD_MODE](#Helpers.module_General..PROD_MODE) : <code>boolean</code>
     * [~REVIEW_MODE](#Helpers.module_General..REVIEW_MODE) : <code>boolean</code>
@@ -222,6 +223,24 @@ An empty promise.
 Typically used as a default prop, or during testing.
 
 **Kind**: inner constant of [<code>General</code>](#Helpers.module_General)  
+<a name="Helpers.module_General..setImmutableData"></a>
+
+### General~setImmutableData ⇒ <code>\*</code>
+Quick set data as "immutable-like". Used to pass object and array data through configuration callbacks.
+
+**Kind**: inner constant of [<code>General</code>](#Helpers.module_General)  
+<table>
+  <thead>
+    <tr>
+      <th>Param</th><th>Type</th>
+    </tr>
+  </thead>
+  <tbody>
+<tr>
+    <td>data</td><td><code>*</code></td>
+    </tr>  </tbody>
+</table>
+
 <a name="Helpers.module_General..DEV_MODE"></a>
 
 ### General~DEV\_MODE : <code>boolean</code>

diff --git a/src/common/__tests__/__snapshots__/helpers.test.js.snap b/src/common/__tests__/__snapshots__/helpers.test.js.snap
@@ -47,6 +47,7 @@ exports[`Helpers should expose a window object: limited window object 1`] = `
   "noopPromise": Promise {},
   "numberDisplay": [Function],
   "objFreeze": [Function],
+  "setImmutableData": [Function],
 }
 `;
 
@@ -91,6 +92,7 @@ exports[`Helpers should expose a window object: window object 1`] = `
   "noopPromise": Promise {},
   "numberDisplay": [Function],
   "objFreeze": [Function],
+  "setImmutableData": [Function],
 }
 `;
 
@@ -146,6 +148,7 @@ exports[`Helpers should have specific functions: helpers 1`] = `
   "noopPromise": Promise {},
   "numberDisplay": [Function],
   "objFreeze": [Function],
+  "setImmutableData": [Function],
 }
 `;
 

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -176,6 +176,14 @@ const objFreeze = obj => {
   return obj;
 };
 
+/**
+ * Quick set data as "immutable-like". Used to pass object and array data through configuration callbacks.
+ *
+ * @param {*} data
+ * @returns {*}
+ */
+const setImmutableData = memo(data => objFreeze(data));
+
 /**
  * Is dev mode active.
  * Associated with using the NPM script "start". See dotenv config files for activation.
@@ -413,6 +421,7 @@ const helpers = {
   noopPromise,
   numberDisplay,
   objFreeze,
+  setImmutableData,
   DEV_MODE,
   PROD_MODE,
   REVIEW_MODE,

diff --git a/src/components/README.md b/src/components/README.md
@@ -2602,7 +2602,7 @@ Display totals for a single metric.
     </tr><tr>
     <td>props.children</td><td><code>React.ReactNode</code></td>
     </tr><tr>
-    <td>props.t</td><td><code>function</code></td>
+    <td>props.useGraphCardContext</td><td><code>function</code></td>
     </tr><tr>
     <td>props.useMetricsSelector</td><td><code>function</code></td>
     </tr><tr>

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -8,6 +8,13 @@ exports[`GraphCard Component should setup basic settings: settings, grouped 1`]
   value={
     {
       "settings": {
+        "cards": [
+          {
+            "body": "ipsum",
+            "footer": "dolor sit",
+            "header": "lorem",
+          },
+        ],
         "isMetricDisplay": true,
         "loremIpsum": false,
         "metric": undefined,
@@ -29,7 +36,7 @@ exports[`GraphCard Component should setup basic settings: settings, grouped 1`]
   }
 >
   <GraphCardMetricTotals
-    t={[Function]}
+    useGraphCardContext={[Function]}
     useMetricsSelector={[Function]}
     useProductGraphTallyQuery={[Function]}
   >
@@ -75,12 +82,18 @@ exports[`GraphCard Component should setup basic settings: settings, standalone 1
     }
   }
 >
-  <GraphCardChart
-    t={[Function]}
-    useGetMetrics={[Function]}
-    useGraphCardActions={[Function]}
+  <GraphCardMetricTotals
     useGraphCardContext={[Function]}
+    useMetricsSelector={[Function]}
     useProductGraphTallyQuery={[Function]}
-  />
+  >
+    <GraphCardChart
+      t={[Function]}
+      useGetMetrics={[Function]}
+      useGraphCardActions={[Function]}
+      useGraphCardContext={[Function]}
+      useProductGraphTallyQuery={[Function]}
+    />
+  </GraphCardMetricTotals>
 </ContextProvider>
 `;
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap
@@ -119,6 +119,10 @@ exports[`GraphCardContext should parse configuration: configuration, grouped 1`]
   "filtersSettings": [
     {
       "settings": {
+        "groupMetric": [
+          "Core-seconds",
+        ],
+        "isMetricDisplay": false,
         "isMultiMetric": false,
         "isStandalone": undefined,
         "metric": undefined,
@@ -152,6 +156,10 @@ exports[`GraphCardContext should parse configuration: configuration, standalone
   "filtersSettings": [
     {
       "settings": {
+        "groupMetric": [
+          "Core-seconds",
+        ],
+        "isMetricDisplay": false,
         "isMultiMetric": false,
         "isStandalone": undefined,
         "loremIpsum": true,

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
@@ -12,6 +12,10 @@ exports[`GraphCardHelpers generateChartSettings should return base graph setting
     {
       "settings": {
         "dolor": "sit",
+        "groupMetric": [
+          "dolorSit",
+        ],
+        "isMetricDisplay": false,
         "isMultiMetric": false,
         "isStandalone": undefined,
         "metric": undefined,