feat(graphCardChart): sw-690 config, action toolbar (#1020)

* config, products to new secondary, item, graph settings syntax * graphCardChart, Context, useGraphCardActions hook * productViewContext, remove unused secondaryFilters * styling, minor adjustments for graphCard toolbar * toolbar, Context, useToolbarFields, combined content, filters * toolbarFieldSelectCategory, secondary, item checks
RedHatInsights · Dec 13, 2022 · 01971f4 · 01971f4
1 parent 42b2782
commit 01971f4
Show file tree

Hide file tree

Showing 39 changed files with 761 additions and 229 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -32,6 +32,7 @@ exports[`GraphCard Component should setup basic settings: settings, grouped 1`]
     <GraphCardChart
       t={[Function]}
       useGetMetrics={[Function]}
+      useGraphCardActions={[Function]}
       useGraphCardContext={[Function]}
       useProduct={[Function]}
       useProductGraphTallyQuery={[Function]}
@@ -48,6 +49,7 @@ exports[`GraphCard Component should setup basic settings: settings, standalone 1
     <GraphCardChart
       t={[Function]}
       useGetMetrics={[Function]}
+      useGraphCardActions={[Function]}
       useGraphCardContext={[Function]}
       useProduct={[Function]}
       useProductGraphTallyQuery={[Function]}
@@ -101,6 +103,7 @@ exports[`GraphCard Component should setup basic settings: settings, standalone 1
       <GraphCardChart
         t={[Function]}
         useGetMetrics={[Function]}
+        useGraphCardActions={[Function]}
         useGraphCardContext={[Function]}
         useProduct={[Function]}
         useProductGraphTallyQuery={[Function]}

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap
@@ -1,6 +1,185 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`GraphCardChart Component should render a basic component: basic 1`] = `
+exports[`GraphCardChart Component should handle API response states: error 1`] = `
+<Card
+  className="curiosity-usage-graph"
+>
+  <MinHeight
+    key="headerMinHeight"
+    minHeight={0}
+    updateOnContent={false}
+    updateOnResize={true}
+  >
+    <CardHeader>
+      <CardTitle>
+        <Title
+          headingLevel="h2"
+          size="lg"
+        >
+          t(curiosity-graph.cardHeading, {})
+          <GraphCardChartTitleTooltip
+            t={[Function]}
+            useGraphCardContext={[Function]}
+            useProduct={[Function]}
+          />
+        </Title>
+      </CardTitle>
+    </CardHeader>
+  </MinHeight>
+  <MinHeight
+    key="bodyMinHeight"
+    minHeight={0}
+    updateOnContent={false}
+    updateOnResize={true}
+  >
+    <CardBody>
+      <div
+        className="blur"
+      >
+        <Chart
+          chartLegend={[Function]}
+          chartTooltip={[Function]}
+          dataSets={[]}
+          padding={
+            {
+              "bottom": 75,
+              "left": 55,
+              "right": 55,
+              "top": 50,
+            }
+          }
+          themeColor="blue"
+          xAxisChartLabel={null}
+          xAxisFixLabelOverlap={true}
+          xAxisLabelIncrement={1}
+          xAxisTickFormat={[Function]}
+          xValueFormat={null}
+          yAxisChartLabel={null}
+          yAxisTickFormat={[Function]}
+          yValueFormat={null}
+        />
+      </div>
+    </CardBody>
+  </MinHeight>
+</Card>
+`;
+
+exports[`GraphCardChart Component should handle API response states: fulfilled 1`] = `
+<Card
+  className="curiosity-usage-graph"
+>
+  <MinHeight
+    key="headerMinHeight"
+    minHeight={0}
+    updateOnContent={false}
+    updateOnResize={true}
+  >
+    <CardHeader>
+      <CardTitle>
+        <Title
+          headingLevel="h2"
+          size="lg"
+        >
+          t(curiosity-graph.cardHeading, {})
+          <GraphCardChartTitleTooltip
+            t={[Function]}
+            useGraphCardContext={[Function]}
+            useProduct={[Function]}
+          />
+        </Title>
+      </CardTitle>
+    </CardHeader>
+  </MinHeight>
+  <MinHeight
+    key="bodyMinHeight"
+    minHeight={0}
+    updateOnContent={false}
+    updateOnResize={true}
+  >
+    <CardBody>
+      <div
+        className=""
+      >
+        <Chart
+          chartLegend={[Function]}
+          chartTooltip={[Function]}
+          dataSets={[]}
+          padding={
+            {
+              "bottom": 75,
+              "left": 55,
+              "right": 55,
+              "top": 50,
+            }
+          }
+          themeColor="blue"
+          xAxisChartLabel={null}
+          xAxisFixLabelOverlap={true}
+          xAxisLabelIncrement={1}
+          xAxisTickFormat={[Function]}
+          xValueFormat={null}
+          yAxisChartLabel={null}
+          yAxisTickFormat={[Function]}
+          yValueFormat={null}
+        />
+      </div>
+    </CardBody>
+  </MinHeight>
+</Card>
+`;
+
+exports[`GraphCardChart Component should handle API response states: pending 1`] = `
+<Card
+  className="curiosity-usage-graph"
+>
+  <MinHeight
+    key="headerMinHeight"
+    minHeight={0}
+    updateOnContent={false}
+    updateOnResize={true}
+  >
+    <CardHeader>
+      <CardTitle>
+        <Title
+          headingLevel="h2"
+          size="lg"
+        >
+          t(curiosity-graph.cardHeading, {})
+          <GraphCardChartTitleTooltip
+            t={[Function]}
+            useGraphCardContext={[Function]}
+            useProduct={[Function]}
+          />
+        </Title>
+      </CardTitle>
+    </CardHeader>
+  </MinHeight>
+  <MinHeight
+    key="bodyMinHeight"
+    minHeight={0}
+    updateOnContent={false}
+    updateOnResize={true}
+  >
+    <CardBody>
+      <div
+        className="fadein"
+      >
+        <Loader
+          skeletonProps={
+            {
+              "size": "sm",
+            }
+          }
+          tableProps={{}}
+          variant="graph"
+        />
+      </div>
+    </CardBody>
+  </MinHeight>
+</Card>
+`;
+
+exports[`GraphCardChart Component should render a default component: default 1`] = `
 <Card
   className="curiosity-usage-graph"
 >

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap
@@ -146,6 +146,7 @@ exports[`GraphCardContext should parse configuration: configuration, standalone
   "standaloneFiltersSettings": [
     {
       "settings": {
+        "actions": undefined,
         "isStandalone": true,
         "metric": {
           "chartType": "area",
@@ -232,6 +233,7 @@ exports[`GraphCardContext should return specific properties: specific properties
     "_threadCount": 0,
   },
   "useGetMetrics": [Function],
+  "useGraphCardActions": [Function],
   "useGraphCardContext": [Function],
   "useMetricsSelector": [Function],
   "useParseFiltersSettings": [Function],

diff --git a/src/components/graphCard/__tests__/graphCardChart.test.js b/src/components/graphCard/__tests__/graphCardChart.test.js
@@ -2,10 +2,27 @@ import React from 'react';
 import { GraphCardChart } from '../graphCardChart';
 
 describe('GraphCardChart Component', () => {
-  it('should render a basic component', async () => {
+  it('should render a default component', async () => {
     const props = {};
     const component = await shallowHookComponent(<GraphCardChart {...props} />);
 
-    expect(component).toMatchSnapshot('basic');
+    expect(component).toMatchSnapshot('default');
+  });
+
+  it('should handle API response states', async () => {
+    const props = {
+      useGetMetrics: () => ({ pending: true, error: false, fulfilled: false, dataSets: [] })
+    };
+
+    const componentPending = await shallowHookComponent(<GraphCardChart {...props} />);
+    expect(componentPending).toMatchSnapshot('pending');
+
+    props.useGetMetrics = () => ({ pending: false, error: true, fulfilled: false, dataSets: [] });
+    const componentError = await shallowHookComponent(<GraphCardChart {...props} />);
+    expect(componentError).toMatchSnapshot('error');
+
+    props.useGetMetrics = () => ({ pending: false, error: false, fulfilled: true, dataSets: [] });
+    const componentFulfilled = await shallowHookComponent(<GraphCardChart {...props} />);
+    expect(componentFulfilled).toMatchSnapshot('fulfilled');
   });
 });
diff --git a/src/components/graphCard/graphCardChart.js b/src/components/graphCard/graphCardChart.js
@@ -1,8 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card, CardActions, CardBody, CardHeader, CardTitle, Title } from '@patternfly/react-core';
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup
+} from '@patternfly/react-core';
 import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext';
-import { useGraphCardContext, useGetMetrics } from './graphCardContext';
+import { useGraphCardActions, useGraphCardContext, useGetMetrics } from './graphCardContext';
 import { graphCardHelpers } from './graphCardHelpers';
 import { Chart } from '../chart/chart';
 import { GraphCardChartLegend } from './graphCardChartLegend';
@@ -19,6 +29,7 @@ import { translate } from '../i18n/i18n';
  * @param {object} props
  * @param {Function} props.t
  * @param {Function} props.useGetMetrics
+ * @param {Function} props.useGraphCardActions
  * @param {Function} props.useGraphCardContext
  * @param {Function} props.useProduct
  * @param {Function} props.useProductGraphTallyQuery
@@ -27,23 +38,19 @@ import { translate } from '../i18n/i18n';
 const GraphCardChart = ({
   t,
   useGetMetrics: useAliasGetMetrics,
+  useGraphCardActions: useAliasGraphCardActions,
   useGraphCardContext: useAliasGraphCardContext,
   useProduct: useAliasProduct,
   useProductGraphTallyQuery: useAliasProductGraphTallyQuery
 }) => {
   const { productId } = useAliasProduct();
+  const updatedActionDisplay = useAliasGraphCardActions();
   const { settings = {} } = useAliasGraphCardContext();
-  const { actionDisplay, isStandalone, metric } = settings;
+  const { isStandalone, metric } = settings;
 
   const { [RHSM_API_QUERY_SET_TYPES.GRANULARITY]: granularity } = useAliasProductGraphTallyQuery();
   const { pending, error, dataSets = [] } = useAliasGetMetrics();
 
-  let updatedActionDisplay = null;
-
-  if (typeof actionDisplay === 'function') {
-    updatedActionDisplay = actionDisplay({ data: dataSets });
-  }
-
   return (
     <Card className="curiosity-usage-graph">
       <MinHeight key="headerMinHeight">
@@ -55,7 +62,13 @@ const GraphCardChart = ({
             </Title>
           </CardTitle>
           {updatedActionDisplay && (
-            <CardActions className={(error && 'blur') || ''}>{updatedActionDisplay}</CardActions>
+            <CardActions className={(error && 'blur') || ''}>
+              <Toolbar collapseListedFiltersBreakpoint="sm">
+                <ToolbarContent>
+                  <ToolbarGroup alignment={{ default: 'alignRight' }}>{updatedActionDisplay}</ToolbarGroup>
+                </ToolbarContent>
+              </Toolbar>
+            </CardActions>
           )}
         </CardHeader>
       </MinHeight>
@@ -81,12 +94,13 @@ const GraphCardChart = ({
 /**
  * Prop types.
  *
- * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function,
- *     t: Function, useGetMetrics: Function}}
+ * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function, t: Function,
+ *     useGetMetrics: Function, useGraphCardActions: Function}}
  */
 GraphCardChart.propTypes = {
   t: PropTypes.func,
   useGetMetrics: PropTypes.func,
+  useGraphCardActions: PropTypes.func,
   useGraphCardContext: PropTypes.func,
   useProduct: PropTypes.func,
   useProductGraphTallyQuery: PropTypes.func
@@ -95,12 +109,13 @@ GraphCardChart.propTypes = {
 /**
  * Default props.
  *
- * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function,
- *     t: translate, useGetMetrics: Function}}
+ * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function, t: translate,
+ *     useGetMetrics: Function, useGraphCardActions: Function}}
  */
 GraphCardChart.defaultProps = {
   t: translate,
   useGetMetrics,
+  useGraphCardActions,
   useGraphCardContext,
   useProduct,
   useProductGraphTallyQuery