refactor(graphCard): sw-2707 remove deprecated react (RedHatInsights#…

…1475)
cdcabrera · Nov 13, 2024 · ec6b23c · ec6b23c
1 parent f207855
commit ec6b23c
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 489 deletions.
diff --git a/src/components/README.md b/src/components/README.md
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -35,18 +35,8 @@ exports[`GraphCard Component should setup basic settings: settings, grouped 1`]
       }
     }
   >
-    <GraphCardMetricTotals
-      useGraphCardContext={[Function]}
-      useMetricsSelector={[Function]}
-      useProductGraphTallyQuery={[Function]}
-    >
-      <GraphCardChart
-        t={[Function]}
-        useGetMetrics={[Function]}
-        useGraphCardActions={[Function]}
-        useGraphCardContext={[Function]}
-        useProductGraphTallyQuery={[Function]}
-      />
+    <GraphCardMetricTotals>
+      <GraphCardChart />
     </GraphCardMetricTotals>
   </Context.Provider>,
 ]
@@ -83,18 +73,8 @@ exports[`GraphCard Component should setup basic settings: settings, standalone 1
       }
     }
   >
-    <GraphCardMetricTotals
-      useGraphCardContext={[Function]}
-      useMetricsSelector={[Function]}
-      useProductGraphTallyQuery={[Function]}
-    >
-      <GraphCardChart
-        t={[Function]}
-        useGetMetrics={[Function]}
-        useGraphCardActions={[Function]}
-        useGraphCardContext={[Function]}
-        useProductGraphTallyQuery={[Function]}
-      />
+    <GraphCardMetricTotals>
+      <GraphCardChart />
     </GraphCardMetricTotals>
   </Context.Provider>,
 ]

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChart.test.js.snap
@@ -16,10 +16,7 @@ exports[`GraphCardChart Component should handle API response states: error 1`] =
         size="lg"
       >
         t(curiosity-graph.cardHeading, {})
-        <GraphCardChartTitleTooltip
-          t={[Function]}
-          useGraphCardContext={[Function]}
-        />
+        <GraphCardChartTitleTooltip />
       </Title>
     </CardTitle>
   </CardHeader>
@@ -51,10 +48,7 @@ exports[`GraphCardChart Component should handle API response states: fulfilled 1
         size="lg"
       >
         t(curiosity-graph.cardHeading, {})
-        <GraphCardChartTitleTooltip
-          t={[Function]}
-          useGraphCardContext={[Function]}
-        />
+        <GraphCardChartTitleTooltip />
       </Title>
     </CardTitle>
   </CardHeader>
@@ -109,10 +103,7 @@ exports[`GraphCardChart Component should handle API response states: pending 1`]
         size="lg"
       >
         t(curiosity-graph.cardHeading, {})
-        <GraphCardChartTitleTooltip
-          t={[Function]}
-          useGraphCardContext={[Function]}
-        />
+        <GraphCardChartTitleTooltip />
       </Title>
     </CardTitle>
   </CardHeader>
@@ -148,10 +139,7 @@ exports[`GraphCardChart Component should render a basic component: basic 1`] = `
         size="lg"
       >
         t(curiosity-graph.cardHeading, {})
-        <GraphCardChartTitleTooltip
-          t={[Function]}
-          useGraphCardContext={[Function]}
-        />
+        <GraphCardChartTitleTooltip />
       </Title>
     </CardTitle>
   </CardHeader>

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartTooltip.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartTooltip.test.js.snap
@@ -3,7 +3,6 @@
 exports[`GraphCardChartTooltip Component should render a basic component: basic 1`] = `
 <graphcardcharttooltip
   props="{
-  "datum": {},
   "children": []
 }"
 >

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { helpers } from '../../common';
 import { GraphCardMetricTotals } from './graphCardMetricTotals';
 import { GraphCardChart } from './graphCardChart';
@@ -24,11 +23,14 @@ import { GraphCardContext, useParseFiltersSettings } from './graphCardContext';
  * Set up graph cards. Expand filters with base graph settings.
  *
  * @param {object} props
- * @param {boolean} props.isDisabled
- * @param {Function} props.useParseFiltersSettings
- * @returns {React.ReactNode}
+ * @param {boolean} [props.isDisabled=helpers.UI_DISABLED_GRAPH]
+ * @param {useParseFiltersSettings} [props.useParseFiltersSettings=useParseFiltersSettings]
+ * @returns {JSX.Element}
  */
-const GraphCard = ({ isDisabled, useParseFiltersSettings: useAliasParseFiltersSettings }) => {
+const GraphCard = ({
+  isDisabled = helpers.UI_DISABLED_GRAPH,
+  useParseFiltersSettings: useAliasParseFiltersSettings = useParseFiltersSettings
+}) => {
   const { filtersSettings } = useAliasParseFiltersSettings();
 
   if (isDisabled || !filtersSettings?.length) {
@@ -44,24 +46,4 @@ const GraphCard = ({ isDisabled, useParseFiltersSettings: useAliasParseFiltersSe
   ));
 };
 
-/**
- * Prop types.
- *
- * @type {{useParseFiltersSettings: Function, isDisabled: boolean}}
- */
-GraphCard.propTypes = {
-  isDisabled: PropTypes.bool,
-  useParseFiltersSettings: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useParseFiltersSettings: Function, isDisabled: boolean}}
- */
-GraphCard.defaultProps = {
-  isDisabled: helpers.UI_DISABLED_GRAPH,
-  useParseFiltersSettings
-};
-
 export { GraphCard as default, GraphCard };
diff --git a/src/components/graphCard/graphCardChart.js b/src/components/graphCard/graphCardChart.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   Card,
   CardBody,
@@ -32,19 +31,19 @@ import { translate } from '../i18n/i18n';
  * A chart/graph card.
  *
  * @param {object} props
- * @param {Function} props.t
- * @param {Function} props.useGetMetrics
- * @param {Function} props.useGraphCardActions
- * @param {Function} props.useGraphCardContext
- * @param {Function} props.useProductGraphTallyQuery
- * @returns {React.ReactNode}
+ * @param {translate} [props.t=translate]
+ * @param {useGetMetrics} [props.useGetMetrics=useGetMetrics]
+ * @param {useGraphCardActions} [props.useGraphCardActions=useGraphCardActions]
+ * @param {useGraphCardContext} [props.useGraphCardContext=useGraphCardContext]
+ * @param {useProductGraphTallyQuery} [props.useProductGraphTallyQuery=useProductGraphTallyQuery]
+ * @returns {JSX.Element}
  */
 const GraphCardChart = ({
-  t,
-  useGetMetrics: useAliasGetMetrics,
-  useGraphCardActions: useAliasGraphCardActions,
-  useGraphCardContext: useAliasGraphCardContext,
-  useProductGraphTallyQuery: useAliasProductGraphTallyQuery
+  t = translate,
+  useGetMetrics: useAliasGetMetrics = useGetMetrics,
+  useGraphCardActions: useAliasGraphCardActions = useGraphCardActions,
+  useGraphCardContext: useAliasGraphCardContext = useGraphCardContext,
+  useProductGraphTallyQuery: useAliasProductGraphTallyQuery = useProductGraphTallyQuery
 }) => {
   const updatedActionDisplay = useAliasGraphCardActions();
   const { settings = {} } = useAliasGraphCardContext();
@@ -99,32 +98,4 @@ const GraphCardChart = ({
   );
 };
 
-/**
- * Prop types.
- *
- * @type {{useGraphCardContext: Function, useProductGraphTallyQuery: Function, t: Function,
- *     useGetMetrics: Function, useGraphCardActions: Function}}
- */
-GraphCardChart.propTypes = {
-  t: PropTypes.func,
-  useGetMetrics: PropTypes.func,
-  useGraphCardActions: PropTypes.func,
-  useGraphCardContext: PropTypes.func,
-  useProductGraphTallyQuery: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useGraphCardContext: Function, useProductGraphTallyQuery: Function, t: translate,
- *     useGetMetrics: Function, useGraphCardActions: Function}}
- */
-GraphCardChart.defaultProps = {
-  t: translate,
-  useGetMetrics,
-  useGraphCardActions,
-  useGraphCardContext,
-  useProductGraphTallyQuery
-};
-
 export { GraphCardChart as default, GraphCardChart };
diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { useMount } from 'react-use';
 import { useProduct } from '../productView/productViewContext';
@@ -24,23 +23,25 @@ import { ChartIcon } from '../chart/chartIcon';
  *
  * @fires onClick
  * @param {object} props
- * @param {object} props.chart
- * @param {object} props.datum
- * @param {Function} props.t
- * @param {Function} props.useDispatch
- * @param {Function} props.useGraphCardContext
- * @param {Function} props.useProduct
- * @param {Function} props.useSelectors
- * @returns {React.ReactNode}
+ * @param {{ hide: Function, toggle: Function,
+ *     isToggled: Function }} [props.chart={ hide:helpers.noop, toggle:helpers.noop, isToggled:helpers.noop}]
+ * @param {{ dataSets: Array<{ data: Array|undefined, id: string,
+ *     isThreshold: boolean|undefined, stroke: string }>}} [props.datum={ dataSets:[] }]
+ * @param {translate} [props.t=translate]
+ * @param {storeHooks.reactRedux.useDispatch} [props.useDispatch=storeHooks.reactRedux.useDispatch]
+ * @param {useGraphCardContext} [props.useGraphCardContext=useGraphCardContext]
+ * @param {useProduct} [props.useProduct=useProduct]
+ * @param {storeHooks.reactRedux.useSelectors} [props.useSelectors=storeHooks.reactRedux.useSelectors]
+ * @returns {JSX.Element}
  */
 const GraphCardChartLegend = ({
-  chart,
-  datum,
-  t,
-  useDispatch: useAliasDispatch,
-  useGraphCardContext: useAliasGraphCardContext,
-  useSelectors: useAliasSelectors,
-  useProduct: useAliasProduct
+  chart = { hide: helpers.noop, toggle: helpers.noop, isToggled: helpers.noop },
+  datum = { dataSets: [] },
+  t = translate,
+  useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
+  useGraphCardContext: useAliasGraphCardContext = useGraphCardContext,
+  useProduct: useAliasProduct = useProduct,
+  useSelectors: useAliasSelectors = storeHooks.reactRedux.useSelectors
 }) => {
   const { settings = {} } = useAliasGraphCardContext();
   const { productLabel, viewId } = useAliasProduct();
@@ -160,55 +161,4 @@ const GraphCardChartLegend = ({
   );
 };
 
-/**
- * Prop types.
- *
- * @type {{datum: object, useProduct: Function, t: Function, useGraphCardContext: Function, useDispatch: Function,
- *     useSelectors: Function, chart: object}}
- */
-GraphCardChartLegend.propTypes = {
-  chart: PropTypes.shape({
-    hide: PropTypes.func,
-    toggle: PropTypes.func,
-    isToggled: PropTypes.func
-  }),
-  datum: PropTypes.shape({
-    dataSets: PropTypes.arrayOf(
-      PropTypes.shape({
-        data: PropTypes.array,
-        id: PropTypes.string.isRequired,
-        isThreshold: PropTypes.bool,
-        stroke: PropTypes.string.isRequired
-      })
-    )
-  }),
-  t: PropTypes.func,
-  useDispatch: PropTypes.func,
-  useGraphCardContext: PropTypes.func,
-  useProduct: PropTypes.func,
-  useSelectors: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{datum: {dataSets: Array}, useProduct: Function, t: Function, useGraphCardContext: Function,
- *     useDispatch: Function, useSelectors: Function, chart: {hide: Function, toggle: Function, isToggled: Function}}}
- */
-GraphCardChartLegend.defaultProps = {
-  chart: {
-    hide: helpers.noop,
-    toggle: helpers.noop,
-    isToggled: helpers.noop
-  },
-  datum: {
-    dataSets: []
-  },
-  t: translate,
-  useDispatch: storeHooks.reactRedux.useDispatch,
-  useGraphCardContext,
-  useProduct,
-  useSelectors: storeHooks.reactRedux.useSelectors
-};
-
 export { GraphCardChartLegend as default, GraphCardChartLegend };
diff --git a/src/components/graphCard/graphCardChartTitleTooltip.js b/src/components/graphCard/graphCardChartTitleTooltip.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { useGraphCardContext } from './graphCardContext';
@@ -14,11 +13,14 @@ import { translate } from '../i18n/i18n';
  * Graph card title tooltip.
  *
  * @param {object} props
- * @param {Function} props.t
- * @param {Function} props.useGraphCardContext
- * @returns {React.ReactNode}
+ * @param {translate} [props.t=translate]
+ * @param {useGraphCardContext} [props.useGraphCardContext=useGraphCardContext]
+ * @returns {JSX.Element}
  */
-const GraphCardChartTitleTooltip = ({ t, useGraphCardContext: useAliasGraphCardContext }) => {
+const GraphCardChartTitleTooltip = ({
+  t = translate,
+  useGraphCardContext: useAliasGraphCardContext = useGraphCardContext
+}) => {
   const { settings = {} } = useAliasGraphCardContext();
   const { isCardTitleDescription, stringId } = settings;
 
@@ -41,24 +43,4 @@ const GraphCardChartTitleTooltip = ({ t, useGraphCardContext: useAliasGraphCardC
   );
 };
 
-/**
- * Prop types.
- *
- * @type {{useGraphCardContext: Function, t: Function}}
- */
-GraphCardChartTitleTooltip.propTypes = {
-  t: PropTypes.func,
-  useGraphCardContext: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useGraphCardContext: Function, t: Function}}
- */
-GraphCardChartTitleTooltip.defaultProps = {
-  t: translate,
-  useGraphCardContext
-};
-
 export { GraphCardChartTitleTooltip as default, GraphCardChartTitleTooltip };