fix(graphCard): sw-747, sw-748 styling, copy (#1119)

* locale, variant OpenShift strings * graphCardHelpers, pad axes on label existence * graphCardMetricTotals, div test wrapper for standalone * styling, graph padding for standalone
RedHatInsights · May 25, 2023 · ee403b6 · ee403b6
1 parent fab2f03
commit ee403b6
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 59 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -326,9 +326,9 @@
     "title": "{{appName}}",
     "subtitle": "Monitor your usage based on your subscription terms. <0>Learn more about {{appName}} reporting</0>",
     "description": "Monitor your usage based on your subscription terms.",
-    "title_openshift": "$t(curiosity-view.title_OpenShift Container Platform)",
-    "subtitle_openshift": "$t(curiosity-view.subtitle_OpenShift Container Platform)",
-    "description_openshift": "$t(curiosity-view.description_OpenShift Container Platform)",
+    "title_openshift": "Red Hat OpenShift",
+    "subtitle_openshift": "Monitor your OpenShift usage for both Annual and On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
+    "description_openshift": "Monitor your OpenShift usage for both Annual and On-Demand subscriptions.",
     "title_OpenShift Container Platform": "OpenShift Container Platform",
     "subtitle_OpenShift Container Platform": "Monitor your OpenShift Container Platform usage for both Annual and On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
     "description_OpenShift Container Platform": "Monitor your OpenShift Container Platform usage for both Annual and On-Demand subscriptions.",

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap
@@ -138,12 +138,6 @@ exports[`GraphCardContext should parse configuration: configuration, grouped 1`]
             "strokeWidth": 2,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "stringId": "Core-seconds_loremIpsum",
       },
     },
@@ -177,12 +171,6 @@ exports[`GraphCardContext should parse configuration: configuration, standalone
             "strokeWidth": 2,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "stringId": "Core-seconds_loremIpsum",
       },
     },

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
@@ -32,12 +32,6 @@ exports[`GraphCardHelpers generateChartSettings should return base graph setting
             "strokeWidth": 2,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "stringId": "dolorSit",
       },
     },

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardMetricTotals.test.js.snap
@@ -261,4 +261,11 @@ exports[`GraphCardMetricTotals Component should handle multiple display states:
 </div>
 `;
 
-exports[`GraphCardMetricTotals Component should render a basic component: basic 1`] = `"lorem ipsum"`;
+exports[`GraphCardMetricTotals Component should render a basic component: basic 1`] = `
+<div
+  className="curiosity-usage-graph__standalone"
+  data-test="graphStandalone"
+>
+  lorem ipsum
+</div>
+`;
diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js
@@ -63,6 +63,11 @@ const generateChartSettings = ({ filters = [], settings: graphCardSettings = {},
     const { isMultiMetric, isFirst, isLast, ...remainingCombinedSettings } = combinedSettings;
     const updatedChartType = filterSettings?.chartType || ChartTypeVariant.area;
     const isThreshold = filterSettings?.chartType === ChartTypeVariant.threshold;
+    const isAxisLabel =
+      remainingCombinedSettings?.yAxisChartLabel ||
+      remainingCombinedSettings?.xAxisChartLabel ||
+      filterSettings?.yAxisChartLabel ||
+      filterSettings?.xAxisChartLabel;
     const baseFilterSettings = {
       chartType: updatedChartType,
       id: generateChartIds({ isCapacity: isThreshold, metric, productId, query: filterSettings?.query }),
@@ -83,12 +88,14 @@ const generateChartSettings = ({ filters = [], settings: graphCardSettings = {},
     if (isFirst) {
       filtersSettings.push({
         settings: {
-          padding: {
-            bottom: 75,
-            left: 75,
-            right: 45,
-            top: 45
-          },
+          ...(isAxisLabel && {
+            padding: {
+              bottom: 75,
+              left: 75,
+              right: 45,
+              top: 45
+            }
+          }),
           ...remainingCombinedSettings,
           isMetricDisplay: remainingCombinedSettings?.isMetricDisplay ?? remainingCombinedSettings?.cards?.length > 0,
           isMultiMetric,

diff --git a/src/components/graphCard/graphCardMetricTotals.js b/src/components/graphCard/graphCardMetricTotals.js
@@ -113,7 +113,11 @@ const GraphCardMetricTotals = ({
     );
   }
 
-  return children;
+  return (
+    <div data-test="graphStandalone" className="curiosity-usage-graph__standalone">
+      {children}
+    </div>
+  );
 };
 
 /**

diff --git a/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap
@@ -328,12 +328,6 @@ exports[`Product OpenShift Container config should apply graph configuration: fi
             "strokeWidth": 3,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "stringId": "Cores",
         "stroke": "#06c",
       },

diff --git a/src/config/__tests__/__snapshots__/product.openshiftDedicated.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftDedicated.test.js.snap
@@ -338,12 +338,6 @@ exports[`Product OpenShift Dedicated config should apply graph configuration: fi
             "yAxisUseDataSet": true,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "stringId": "Cores",
         "stroke": "#06c",
         "yAxisUseDataSet": true,

diff --git a/src/config/__tests__/__snapshots__/product.openshiftMetrics.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftMetrics.test.js.snap
@@ -269,12 +269,6 @@ exports[`Product OpenShift Metrics config should apply graph configuration: filt
             "strokeWidth": 2,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "stringId": "Cores",
         "stroke": "#06c",
       },

diff --git a/src/config/__tests__/__snapshots__/product.rhel.test.js.snap b/src/config/__tests__/__snapshots__/product.rhel.test.js.snap
@@ -412,12 +412,6 @@ exports[`Product RHEL config should apply graph configuration: filters 1`] = `
             "strokeWidth": 3,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "query": {
           "category": "physical",
         },

diff --git a/src/config/__tests__/__snapshots__/product.satellite.test.js.snap b/src/config/__tests__/__snapshots__/product.satellite.test.js.snap
@@ -384,12 +384,6 @@ exports[`Product Satellite config should apply graph configuration: filters 1`]
             "strokeWidth": 2,
           },
         ],
-        "padding": {
-          "bottom": 75,
-          "left": 75,
-          "right": 45,
-          "top": 45,
-        },
         "query": {
           "category": "physical",
         },

diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss
@@ -87,6 +87,12 @@
       }
     }
 
+    &__standalone {
+      margin-left: var(--pf-global--spacer--md);
+      margin-right: var(--pf-global--spacer--md);
+      margin-top: var(--pf-global--spacer--md);
+    }
+
     &__totals {
       background-color: var(--pf-global--BackgroundColor--100);
       display: flex;