refactor(auth,banner,i18n): sw-2707 remove deprecated react (#1444)

* authentication, bannerMessages, i18n remove defaultProps, propTypes
RedHatInsights · Oct 15, 2024 · c4b7ce3 · c4b7ce3
1 parent 409a805
commit c4b7ce3
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 209 deletions.
diff --git a/src/components/README.md b/src/components/README.md
@@ -209,57 +209,34 @@ Authentication component wrapper.
     </tr>  </tbody>
 </table>
 
-
-* [Authentication](#Components.module_Authentication)
-    * [~Authentication(props)](#Components.module_Authentication..Authentication) ⇒ <code>React.ReactNode</code>
-        * [.propTypes](#Components.module_Authentication..Authentication.propTypes) : <code>Object</code>
-        * [.defaultProps](#Components.module_Authentication..Authentication.defaultProps) : <code>Object</code>
-
 <a name="Components.module_Authentication..Authentication"></a>
 
-### Authentication~Authentication(props) ⇒ <code>React.ReactNode</code>
+### Authentication~Authentication(props) ⇒ <code>JSX.Element</code>
 An authentication pass-through component.
 
 **Kind**: inner method of [<code>Authentication</code>](#Components.module_Authentication)  
 <table>
   <thead>
     <tr>
-      <th>Param</th><th>Type</th>
+      <th>Param</th><th>Type</th><th>Default</th>
     </tr>
   </thead>
   <tbody>
 <tr>
-    <td>props</td><td><code>object</code></td>
+    <td>props</td><td><code>object</code></td><td></td>
     </tr><tr>
-    <td>props.appName</td><td><code>string</code></td>
+    <td>[props.appName]</td><td><code>string</code></td><td><code>&quot;routerHelpers.appName&quot;</code></td>
     </tr><tr>
-    <td>props.children</td><td><code>React.ReactNode</code></td>
+    <td>props.children</td><td><code>React.ReactNode</code></td><td></td>
     </tr><tr>
-    <td>props.isDisabled</td><td><code>boolean</code></td>
+    <td>[props.isDisabled]</td><td><code>boolean</code></td><td><code>helpers.UI_DISABLED</code></td>
     </tr><tr>
-    <td>props.t</td><td><code>function</code></td>
+    <td>[props.t]</td><td><code>translate</code></td><td><code>translate</code></td>
     </tr><tr>
-    <td>props.useGetAuthorization</td><td><code>function</code></td>
+    <td>[props.useGetAuthorization]</td><td><code>useGetAuthorization</code></td><td><code>useGetAuthorization</code></td>
     </tr>  </tbody>
 </table>
 
-
-* [~Authentication(props)](#Components.module_Authentication..Authentication) ⇒ <code>React.ReactNode</code>
-    * [.propTypes](#Components.module_Authentication..Authentication.propTypes) : <code>Object</code>
-    * [.defaultProps](#Components.module_Authentication..Authentication.defaultProps) : <code>Object</code>
-
-<a name="Components.module_Authentication..Authentication.propTypes"></a>
-
-#### Authentication.propTypes : <code>Object</code>
-Prop types.
-
-**Kind**: static property of [<code>Authentication</code>](#Components.module_Authentication..Authentication)  
-<a name="Components.module_Authentication..Authentication.defaultProps"></a>
-
-#### Authentication.defaultProps : <code>Object</code>
-Default props.
-
-**Kind**: static property of [<code>Authentication</code>](#Components.module_Authentication..Authentication)  
 <a name="Authentication.module_AuthenticationContext"></a>
 
 ## AuthenticationContext
@@ -350,9 +327,7 @@ Banner alert messages for a product view.
 
 * [BannerMessages](#Components.module_BannerMessages)
     * [~BannerMessageVariant](#Components.module_BannerMessages..BannerMessageVariant) : <code>Object</code>
-    * [~BannerMessages(props)](#Components.module_BannerMessages..BannerMessages) ⇒ <code>React.ReactNode</code>
-        * [.propTypes](#Components.module_BannerMessages..BannerMessages.propTypes) : <code>Object</code>
-        * [.defaultProps](#Components.module_BannerMessages..BannerMessages.defaultProps) : <code>Object</code>
+    * [~BannerMessages(props)](#Components.module_BannerMessages..BannerMessages) ⇒ <code>JSX.Element</code>
 
 <a name="Components.module_BannerMessages..BannerMessageVariant"></a>
 
@@ -362,43 +337,26 @@ Banner message variants.
 **Kind**: inner constant of [<code>BannerMessages</code>](#Components.module_BannerMessages)  
 <a name="Components.module_BannerMessages..BannerMessages"></a>
 
-### BannerMessages~BannerMessages(props) ⇒ <code>React.ReactNode</code>
+### BannerMessages~BannerMessages(props) ⇒ <code>JSX.Element</code>
 Render banner messages.
 
 **Kind**: inner method of [<code>BannerMessages</code>](#Components.module_BannerMessages)  
 <table>
   <thead>
     <tr>
-      <th>Param</th><th>Type</th>
+      <th>Param</th><th>Type</th><th>Default</th>
     </tr>
   </thead>
   <tbody>
 <tr>
-    <td>props</td><td><code>object</code></td>
+    <td>props</td><td><code>object</code></td><td></td>
     </tr><tr>
-    <td>props.useBannerMessages</td><td><code>function</code></td>
+    <td>[props.useBannerMessages]</td><td><code>useBannerMessages</code></td><td><code>useBannerMessages</code></td>
     </tr><tr>
-    <td>props.useRemoveBannerMessages</td><td><code>function</code></td>
+    <td>[props.useRemoveBannerMessages]</td><td><code>useRemoveBannerMessages</code></td><td><code>useRemoveBannerMessages</code></td>
     </tr>  </tbody>
 </table>
 
-
-* [~BannerMessages(props)](#Components.module_BannerMessages..BannerMessages) ⇒ <code>React.ReactNode</code>
-    * [.propTypes](#Components.module_BannerMessages..BannerMessages.propTypes) : <code>Object</code>
-    * [.defaultProps](#Components.module_BannerMessages..BannerMessages.defaultProps) : <code>Object</code>
-
-<a name="Components.module_BannerMessages..BannerMessages.propTypes"></a>
-
-#### BannerMessages.propTypes : <code>Object</code>
-Prop types.
-
-**Kind**: static property of [<code>BannerMessages</code>](#Components.module_BannerMessages..BannerMessages)  
-<a name="Components.module_BannerMessages..BannerMessages.defaultProps"></a>
-
-#### BannerMessages.defaultProps : <code>Object</code>
-Default props.
-
-**Kind**: static property of [<code>BannerMessages</code>](#Components.module_BannerMessages..BannerMessages)  
 <a name="BannerMessages.module_BannerMessagesContext"></a>
 
 ## BannerMessagesContext
@@ -2701,55 +2659,32 @@ Populate, load, remote locale strings.
     </tr>  </tbody>
 </table>
 
-
-* [i18n](#Components.module_i18n)
-    * [~I18n(props)](#Components.module_i18n..I18n) ⇒ <code>React.ReactNode</code>
-        * [.propTypes](#Components.module_i18n..I18n.propTypes) : <code>Object</code>
-        * [.defaultProps](#Components.module_i18n..I18n.defaultProps) : <code>Object</code>
-
 <a name="Components.module_i18n..I18n"></a>
 
-### i18n~I18n(props) ⇒ <code>React.ReactNode</code>
+### i18n~I18n(props) ⇒ <code>JSX.Element</code>
 Load I18n.
 
 **Kind**: inner method of [<code>i18n</code>](#Components.module_i18n)  
 <table>
   <thead>
     <tr>
-      <th>Param</th><th>Type</th>
+      <th>Param</th><th>Type</th><th>Default</th>
     </tr>
   </thead>
   <tbody>
 <tr>
-    <td>props</td><td><code>object</code></td>
+    <td>props</td><td><code>object</code></td><td></td>
     </tr><tr>
-    <td>props.children</td><td><code>React.ReactNode</code></td>
+    <td>props.children</td><td><code>React.ReactNode</code></td><td></td>
     </tr><tr>
-    <td>props.fallbackLng</td><td><code>string</code></td>
+    <td>[props.fallbackLng]</td><td><code>string</code></td><td><code>&quot;process.env.REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG&quot;</code></td>
     </tr><tr>
-    <td>props.loadPath</td><td><code>string</code></td>
+    <td>[props.loadPath]</td><td><code>string</code></td><td><code>&quot;process.env.REACT_APP_CONFIG_SERVICE_LOCALES_PATH&quot;</code></td>
     </tr><tr>
-    <td>props.locale</td><td><code>string</code></td>
+    <td>[props.locale]</td><td><code>string</code></td><td></td>
     </tr>  </tbody>
 </table>
 
-
-* [~I18n(props)](#Components.module_i18n..I18n) ⇒ <code>React.ReactNode</code>
-    * [.propTypes](#Components.module_i18n..I18n.propTypes) : <code>Object</code>
-    * [.defaultProps](#Components.module_i18n..I18n.defaultProps) : <code>Object</code>
-
-<a name="Components.module_i18n..I18n.propTypes"></a>
-
-#### I18n.propTypes : <code>Object</code>
-Prop types.
-
-**Kind**: static property of [<code>I18n</code>](#Components.module_i18n..I18n)  
-<a name="Components.module_i18n..I18n.defaultProps"></a>
-
-#### I18n.defaultProps : <code>Object</code>
-Default props.
-
-**Kind**: static property of [<code>I18n</code>](#Components.module_i18n..I18n)  
 <a name="i18n.module_i18nHelpers"></a>
 
 ## i18nHelpers

diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { BinocularsIcon } from '@patternfly/react-icons';
 import { Maintenance } from '@redhat-cloud-services/frontend-components/Maintenance';
 import { NotAuthorized } from '@redhat-cloud-services/frontend-components/NotAuthorized';
@@ -23,14 +22,20 @@ import { AuthenticationContext, useGetAuthorization } from './authenticationCont
  * An authentication pass-through component.
  *
  * @param {object} props
- * @param {string} props.appName
+ * @param {string} [props.appName=routerHelpers.appName]
  * @param {React.ReactNode} props.children
- * @param {boolean} props.isDisabled
- * @param {Function} props.t
- * @param {Function} props.useGetAuthorization
- * @returns {React.ReactNode}
+ * @param {boolean} [props.isDisabled=helpers.UI_DISABLED]
+ * @param {translate} [props.t=translate]
+ * @param {useGetAuthorization} [props.useGetAuthorization=useGetAuthorization]
+ * @returns {JSX.Element}
  */
-const Authentication = ({ appName, children, isDisabled, t, useGetAuthorization: useAliasGetAuthorization }) => {
+const Authentication = ({
+  appName = routerHelpers.appName,
+  children,
+  isDisabled = helpers.UI_DISABLED,
+  t = translate,
+  useGetAuthorization: useAliasGetAuthorization = useGetAuthorization
+}) => {
   const { pending, data = {} } = useAliasGetAuthorization();
   const { authorized = {}, errorCodes, errorStatus } = data;
   const { [appName]: isAuthorized } = authorized;
@@ -75,29 +80,4 @@ const Authentication = ({ appName, children, isDisabled, t, useGetAuthorization:
   return <AuthenticationContext.Provider value={data}>{renderContent()}</AuthenticationContext.Provider>;
 };
 
-/**
- * Prop types.
- *
- * @type {{useGetAuthorization: Function, children: React.ReactNode, appName: string, isDisabled: boolean}}
- */
-Authentication.propTypes = {
-  appName: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  isDisabled: PropTypes.bool,
-  t: PropTypes.func,
-  useGetAuthorization: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useGetAuthorization: Function, t: Function, appName: string, isDisabled: boolean}}
- */
-Authentication.defaultProps = {
-  appName: routerHelpers.appName,
-  isDisabled: helpers.UI_DISABLED,
-  t: translate,
-  useGetAuthorization
-};
-
 export { Authentication as default, Authentication };
diff --git a/src/components/bannerMessages/bannerMessages.js b/src/components/bannerMessages/bannerMessages.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Alert, AlertActionCloseButton, AlertGroup, AlertVariant } from '@patternfly/react-core';
 import { useBannerMessages, useRemoveBannerMessages } from './bannerMessagesContext';
 
@@ -23,13 +22,13 @@ const BannerMessageVariant = { ...AlertVariant };
  * Render banner messages.
  *
  * @param {object} props
- * @param {Function} props.useBannerMessages
- * @param {Function} props.useRemoveBannerMessages
- * @returns {React.ReactNode}
+ * @param {useBannerMessages} [props.useBannerMessages=useBannerMessages]
+ * @param {useRemoveBannerMessages} [props.useRemoveBannerMessages=useRemoveBannerMessages]
+ * @returns {JSX.Element}
  */
 const BannerMessages = ({
-  useBannerMessages: useAliasBannerMessages,
-  useRemoveBannerMessages: useAliasRemoveBannerMessages
+  useBannerMessages: useAliasBannerMessages = useBannerMessages,
+  useRemoveBannerMessages: useAliasRemoveBannerMessages = useRemoveBannerMessages
 }) => {
   const bannerMessages = useAliasBannerMessages();
   const removeBannerMessages = useAliasRemoveBannerMessages();
@@ -55,24 +54,4 @@ const BannerMessages = ({
   return null;
 };
 
-/**
- * Prop types.
- *
- * @type {{useBannerMessages: Function, useRemoveBannerMessages: Function}}
- */
-BannerMessages.propTypes = {
-  useBannerMessages: PropTypes.func,
-  useRemoveBannerMessages: PropTypes.func
-};
-
-/**
- * Default props.
- *
- * @type {{useBannerMessages: Function, useRemoveBannerMessages: Function}}
- */
-BannerMessages.defaultProps = {
-  useBannerMessages,
-  useRemoveBannerMessages
-};
-
 export { BannerMessages as default, BannerMessages, BannerMessageVariant };
diff --git a/src/components/i18n/i18n.js b/src/components/i18n/i18n.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import i18next from 'i18next';
 import XHR from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
@@ -20,12 +19,17 @@ import { EMPTY_CONTEXT, translate, translateComponent } from './i18nHelpers';
  *
  * @param {object} props
  * @param {React.ReactNode} props.children
- * @param {string} props.fallbackLng
- * @param {string} props.loadPath
- * @param {string} props.locale
- * @returns {React.ReactNode}
+ * @param {string} [props.fallbackLng=process.env.REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG]
+ * @param {string} [props.loadPath=process.env.REACT_APP_CONFIG_SERVICE_LOCALES_PATH]
+ * @param {string} [props.locale]
+ * @returns {JSX.Element}
  */
-const I18n = ({ children, fallbackLng, loadPath, locale }) => {
+const I18n = ({
+  children,
+  fallbackLng = process.env.REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG,
+  loadPath = process.env.REACT_APP_CONFIG_SERVICE_LOCALES_PATH,
+  locale
+}) => {
   const [initialized, setInitialized] = useState(false);
 
   /**
@@ -73,27 +77,4 @@ const I18n = ({ children, fallbackLng, loadPath, locale }) => {
   return (initialized && children) || <React.Fragment />;
 };
 
-/**
- * Prop types.
- *
- * @type {{loadPath: string, children: React.ReactNode, locale: string, fallbackLng: string}}
- */
-I18n.propTypes = {
-  children: PropTypes.node.isRequired,
-  fallbackLng: PropTypes.string,
-  loadPath: PropTypes.string,
-  locale: PropTypes.string
-};
-
-/**
- * Default props.
- *
- * @type {{loadPath: string, locale: null, fallbackLng: string}}
- */
-I18n.defaultProps = {
-  fallbackLng: process.env.REACT_APP_CONFIG_SERVICE_LOCALES_DEFAULT_LNG,
-  loadPath: process.env.REACT_APP_CONFIG_SERVICE_LOCALES_PATH,
-  locale: null
-};
-
 export { I18n as default, I18n, i18next, translate, translateComponent, EMPTY_CONTEXT };