refactor(toolbar): sw-2707 remove deprecated react (#1467)

RedHatInsights · Oct 30, 2024 · 3fe20cb · 3fe20cb
1 parent 64ec035
commit 3fe20cb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 212 deletions.
diff --git a/src/components/README.md b/src/components/README.md
@@ -5538,75 +5538,51 @@ Primary view toolbar.
 
 
 * [Toolbar](#Components.module_Toolbar)
-    * [~Toolbar(props)](#Components.module_Toolbar..Toolbar) ⇒ <code>React.ReactNode</code>
-        * _static_
-            * [.propTypes](#Components.module_Toolbar..Toolbar.propTypes) : <code>Object</code>
-            * [.defaultProps](#Components.module_Toolbar..Toolbar.defaultProps) : <code>Object</code>
-        * _inner_
-            * [~setSelectedOptions(params)](#Components.module_Toolbar..Toolbar..setSelectedOptions) ⇒ <code>Array</code>
+    * [~Toolbar(props)](#Components.module_Toolbar..Toolbar) ⇒ <code>JSX.Element</code>
+        * [~setSelectedOptions(params)](#Components.module_Toolbar..Toolbar..setSelectedOptions) ⇒ <code>Array</code>
     * ["onClearFilter" (params)](#event_onClearFilter) ⇒ <code>void</code>
     * ["onClearAll"](#event_onClearAll) ⇒ <code>void</code>
 
 <a name="Components.module_Toolbar..Toolbar"></a>
 
-### Toolbar~Toolbar(props) ⇒ <code>React.ReactNode</code>
+### Toolbar~Toolbar(props) ⇒ <code>JSX.Element</code>
 Application filter toolbar.
 
 **Kind**: inner method of [<code>Toolbar</code>](#Components.module_Toolbar)  
 **Emits**: [<code>onClearFilter</code>](#event_onClearFilter), [<code>onClearAll</code>](#event_onClearAll)  
 <table>
   <thead>
     <tr>
-      <th>Param</th><th>Type</th><th>Description</th>
+      <th>Param</th><th>Type</th><th>Default</th><th>Description</th>
     </tr>
   </thead>
   <tbody>
 <tr>
-    <td>props</td><td><code>object</code></td><td></td>
+    <td>props</td><td><code>object</code></td><td></td><td></td>
     </tr><tr>
-    <td>props.hardFilterReset</td><td><code>boolean</code></td><td><p>On clearing all fields allow the category to reset as well.</p>
+    <td>[props.hardFilterReset]</td><td><code>boolean</code></td><td><code>false</code></td><td><p>On clearing all fields allow the category to reset as well.</p>
 </td>
     </tr><tr>
-    <td>props.isDisabled</td><td><code>boolean</code></td><td></td>
+    <td>[props.isDisabled]</td><td><code>boolean</code></td><td><code>helpers.UI_DISABLED_TOOLBAR</code></td><td></td>
     </tr><tr>
-    <td>props.isGroupVariantDisabled</td><td><code>boolean</code></td><td></td>
+    <td>[props.isGroupVariantDisabled]</td><td><code>boolean</code></td><td><code>helpers.UI_DISABLED_TOOLBAR_GROUP_VARIANT</code></td><td></td>
     </tr><tr>
-    <td>props.t</td><td><code>function</code></td><td></td>
+    <td>[props.t]</td><td><code>translate</code></td><td><code>translate</code></td><td></td>
     </tr><tr>
-    <td>props.useProduct</td><td><code>function</code></td><td></td>
+    <td>[props.useProduct]</td><td><code>useProduct</code></td><td><code>useProduct</code></td><td></td>
     </tr><tr>
-    <td>props.useProductToolbarQuery</td><td><code>function</code></td><td></td>
+    <td>[props.useProductToolbarQuery]</td><td><code>useProductToolbarQuery</code></td><td><code>useProductToolbarQuery</code></td><td></td>
     </tr><tr>
-    <td>props.useSelectCategoryOptions</td><td><code>function</code></td><td></td>
+    <td>[props.useSelectCategoryOptions]</td><td><code>useSelectCategoryOptions</code></td><td><code>useSelectCategoryOptions</code></td><td></td>
     </tr><tr>
-    <td>props.useToolbarFieldClear</td><td><code>function</code></td><td></td>
+    <td>[props.useToolbarFieldClear]</td><td><code>useToolbarFieldClear</code></td><td><code>useToolbarFieldClear</code></td><td></td>
     </tr><tr>
-    <td>props.useToolbarFieldClearAll</td><td><code>function</code></td><td></td>
+    <td>[props.useToolbarFieldClearAll]</td><td><code>useToolbarFieldClearAll</code></td><td><code>useToolbarFieldClearAll</code></td><td></td>
     </tr><tr>
-    <td>props.useToolbarFields</td><td><code>function</code></td><td></td>
+    <td>[props.useToolbarFields]</td><td><code>useToolbarFields</code></td><td><code>useToolbarFields</code></td><td></td>
     </tr>  </tbody>
 </table>
 
-
-* [~Toolbar(props)](#Components.module_Toolbar..Toolbar) ⇒ <code>React.ReactNode</code>
-    * _static_
-        * [.propTypes](#Components.module_Toolbar..Toolbar.propTypes) : <code>Object</code>
-        * [.defaultProps](#Components.module_Toolbar..Toolbar.defaultProps) : <code>Object</code>
-    * _inner_
-        * [~setSelectedOptions(params)](#Components.module_Toolbar..Toolbar..setSelectedOptions) ⇒ <code>Array</code>
-
-<a name="Components.module_Toolbar..Toolbar.propTypes"></a>
-
-#### Toolbar.propTypes : <code>Object</code>
-Prop types
-
-**Kind**: static property of [<code>Toolbar</code>](#Components.module_Toolbar..Toolbar)  
-<a name="Components.module_Toolbar..Toolbar.defaultProps"></a>
-
-#### Toolbar.defaultProps : <code>Object</code>
-Default props.
-
-**Kind**: static property of [<code>Toolbar</code>](#Components.module_Toolbar..Toolbar)  
 <a name="Components.module_Toolbar..Toolbar..setSelectedOptions"></a>
 
 #### Toolbar~setSelectedOptions(params) ⇒ <code>Array</code>

diff --git a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap
@@ -23,18 +23,7 @@ exports[`ProductView Component should allow custom inventory displays via config
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -104,18 +93,7 @@ exports[`ProductView Component should allow custom inventory displays via config
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -180,18 +158,7 @@ exports[`ProductView Component should allow custom inventory displays via config
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -255,18 +222,7 @@ exports[`ProductView Component should allow custom product views via productDisp
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -324,18 +280,7 @@ exports[`ProductView Component should allow custom product views via productDisp
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -393,18 +338,7 @@ exports[`ProductView Component should allow custom product views via productDisp
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -462,18 +396,7 @@ exports[`ProductView Component should allow custom product views via productDisp
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -531,18 +454,7 @@ exports[`ProductView Component should allow custom product views via productDisp
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"
@@ -599,18 +511,7 @@ exports[`ProductView Component should render a basic component: basic 1`] = `
         <BannerMessages />
       </PageMessages>
       <PageToolbar>
-        <Toolbar
-          hardFilterReset={false}
-          isDisabled={false}
-          isGroupVariantDisabled={false}
-          t={[Function]}
-          useProduct={[Function]}
-          useProductToolbarQuery={[Function]}
-          useSelectCategoryOptions={[Function]}
-          useToolbarFieldClear={[Function]}
-          useToolbarFieldClearAll={[Function]}
-          useToolbarFields={[Function]}
-        />
+        <Toolbar />
       </PageToolbar>
       <PageSection
         className="curiosity-page-section__graphs"

diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   Toolbar as PfToolbar,
   ToolbarContent,
@@ -36,32 +35,32 @@ import { translate } from '../i18n/i18n';
 /**
  * Application filter toolbar.
  *
+ * @param {object} props
+ * @param {boolean} [props.hardFilterReset=false] On clearing all fields allow the category to reset as well.
+ * @param {boolean} [props.isDisabled=helpers.UI_DISABLED_TOOLBAR]
+ * @param {boolean} [props.isGroupVariantDisabled=helpers.UI_DISABLED_TOOLBAR_GROUP_VARIANT]
+ * @param {translate} [props.t=translate]
+ * @param {useProduct} [props.useProduct=useProduct]
+ * @param {useProductToolbarQuery} [props.useProductToolbarQuery=useProductToolbarQuery]
+ * @param {useSelectCategoryOptions} [props.useSelectCategoryOptions=useSelectCategoryOptions]
+ * @param {useToolbarFieldClear} [props.useToolbarFieldClear=useToolbarFieldClear]
+ * @param {useToolbarFieldClearAll} [props.useToolbarFieldClearAll=useToolbarFieldClearAll]
+ * @param {useToolbarFields} [props.useToolbarFields=useToolbarFields]
  * @fires onClearFilter
  * @fires onClearAll
- * @param {object} props
- * @param {boolean} props.hardFilterReset On clearing all fields allow the category to reset as well.
- * @param {boolean} props.isDisabled
- * @param {boolean} props.isGroupVariantDisabled
- * @param {Function} props.t
- * @param {Function} props.useProduct
- * @param {Function} props.useProductToolbarQuery
- * @param {Function} props.useSelectCategoryOptions
- * @param {Function} props.useToolbarFieldClear
- * @param {Function} props.useToolbarFieldClearAll
- * @param {Function} props.useToolbarFields
- * @returns {React.ReactNode}
+ * @returns {JSX.Element}
  */
 const Toolbar = ({
-  hardFilterReset,
-  isDisabled,
-  isGroupVariantDisabled,
-  t,
-  useProduct: useAliasProduct,
-  useProductToolbarQuery: useAliasProductToolbarQuery,
-  useSelectCategoryOptions: useAliasSelectCategoryOptions,
-  useToolbarFieldClear: useAliasToolbarFieldClear,
-  useToolbarFieldClearAll: useAliasToolbarFieldClearAll,
-  useToolbarFields: useAliasToolbarFields
+  hardFilterReset = false,
+  isDisabled = helpers.UI_DISABLED_TOOLBAR,
+  isGroupVariantDisabled = helpers.UI_DISABLED_TOOLBAR_GROUP_VARIANT,
+  t = translate,
+  useProduct: useAliasProduct = useProduct,
+  useProductToolbarQuery: useAliasProductToolbarQuery = useProductToolbarQuery,
+  useSelectCategoryOptions: useAliasSelectCategoryOptions = useSelectCategoryOptions,
+  useToolbarFieldClear: useAliasToolbarFieldClear = useToolbarFieldClear,
+  useToolbarFieldClearAll: useAliasToolbarFieldClearAll = useToolbarFieldClearAll,
+  useToolbarFields: useAliasToolbarFields = useToolbarFields
 }) => {
   const { productGroup } = useAliasProduct();
   const toolbarFieldQueries = useAliasProductToolbarQuery();
@@ -162,46 +161,4 @@ const Toolbar = ({
   );
 };
 
-/**
- * Prop types
- *
- * @type {{useToolbarFieldClear: Function, t: Function, useSelectCategoryOptions: Function,
- *     hardFilterReset: boolean, useToolbarFields: Function, isGroupVariantDisabled: boolean,
- *     useProduct: Function, useProductToolbarQuery: Function, isDisabled: boolean,
- *     useToolbarFieldClearAll: Function}}
- */
-Toolbar.propTypes = {
-  hardFilterReset: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isGroupVariantDisabled: PropTypes.bool,
-  t: PropTypes.func,
-  useProduct: PropTypes.func,
-  useProductToolbarQuery: PropTypes.func,
-  useSelectCategoryOptions: PropTypes.func,
-  useToolbarFieldClear: PropTypes.func,
-  useToolbarFieldClearAll: PropTypes.func,
-  useToolbarFields: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useToolbarFieldClear: Function, t: translate, useSelectCategoryOptions: Function,
- *     hardFilterReset: boolean, useToolbarFields: Function, isGroupVariantDisabled: boolean,
- *     useProduct: Function, useProductToolbarQuery: Function, isDisabled: boolean,
- *     useToolbarFieldClearAll: Function}}
- */
-Toolbar.defaultProps = {
-  hardFilterReset: false,
-  isDisabled: helpers.UI_DISABLED_TOOLBAR,
-  isGroupVariantDisabled: helpers.UI_DISABLED_TOOLBAR_GROUP_VARIANT,
-  t: translate,
-  useProduct,
-  useProductToolbarQuery,
-  useSelectCategoryOptions,
-  useToolbarFieldClear,
-  useToolbarFieldClearAll,
-  useToolbarFields
-};
-
 export { Toolbar as default, Toolbar };