Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Oct 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 21 additions & 86 deletions src/components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>

Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
44 changes: 12 additions & 32 deletions src/components/authentication/authentication.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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 };
31 changes: 5 additions & 26 deletions src/components/bannerMessages/bannerMessages.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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();
Expand All @@ -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 };
39 changes: 10 additions & 29 deletions src/components/i18n/i18n.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);

/**
Expand Down Expand Up @@ -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 };
Loading
Loading