From ee403b664f40facb9676ac38a8720e765d69b888 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 4 May 2023 16:35:04 -0400 Subject: [PATCH] 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 --- public/locales/en-US.json | 6 +++--- .../graphCardContext.test.js.snap | 12 ------------ .../graphCardHelpers.test.js.snap | 6 ------ .../graphCardMetricTotals.test.js.snap | 9 ++++++++- src/components/graphCard/graphCardHelpers.js | 19 +++++++++++++------ .../graphCard/graphCardMetricTotals.js | 6 +++++- .../product.openshiftContainer.test.js.snap | 6 ------ .../product.openshiftDedicated.test.js.snap | 6 ------ .../product.openshiftMetrics.test.js.snap | 6 ------ .../__snapshots__/product.rhel.test.js.snap | 6 ------ .../product.satellite.test.js.snap | 6 ------ src/styles/_usage-graph.scss | 6 ++++++ 12 files changed, 35 insertions(+), 59 deletions(-) diff --git a/public/locales/en-US.json b/public/locales/en-US.json index ba9401676..60c946f8e 100644 --- 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", "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", + "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", "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 index 6fea1994a..e05763262 100644 --- 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 index ca0ea1056..4e075b263 100644 --- 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 index f7adafe33..5507abc41 100644 --- 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: `; -exports[`GraphCardMetricTotals Component should render a basic component: basic 1`] = `"lorem ipsum"`; +exports[`GraphCardMetricTotals Component should render a basic component: basic 1`] = ` +
+ lorem ipsum +
+`; diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js index 4e4c97541..36c93e56b 100644 --- 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 index b823a2035..f9f0d566d 100644 --- a/src/components/graphCard/graphCardMetricTotals.js +++ b/src/components/graphCard/graphCardMetricTotals.js @@ -113,7 +113,11 @@ const GraphCardMetricTotals = ({ ); } - return children; + return ( +
+ {children} +
+ ); }; /** diff --git a/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap index ddc275204..784170329 100644 --- 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 index e0de9bee9..0f5330fd8 100644 --- 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 index b0052eb65..c7f05ee27 100644 --- 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 index d6088b37a..29cff65ba 100644 --- 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 index 1246228f7..24aae5792 100644 --- 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 index 7fab7eede..e37e599b8 100644 --- 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;