From 74733e5b446c3f6406ed12dc0526dccd300667e7 Mon Sep 17 00:00:00 2001 From: olav Date: Wed, 2 Feb 2022 12:32:30 +0100 Subject: [PATCH] refactor: port ApiDetails to useSWR and TS (#653) * refactor: add missing react-test-renderer types * refactor: make IVersionInfo match backend type * refactor: allow falsy conditions in ConditionallyRender * refactor: port ApiDetails to useSWR and TS * refactor: use arrow functions * refactor: move useUiConfig to Footer * refactor: add component name to props type * refactor: move ApiDetails helpers to own file * refactor: combine ApiDetails helper components * refactor: move ApiDetails to the Footer dir * Revert "refactor: allow falsy conditions in ConditionallyRender" This reverts commit 70d75951eb4d0611e80b015a97243404618493ed. * refactor: use booleans for ConditionallyRender * refactor: use a subdir for ApiDetails * refactor: fix ApiDetails helpers filename * refactor: reformat using correct prettier settings --- frontend/package.json | 1 + .../show-api-details-component-test.jsx | 38 ------------- .../api/show-api-details-component.jsx | 45 ---------------- .../api/show-api-details-container.jsx | 10 ---- .../menu/Footer/ApiDetails/ApiDetails.tsx | 46 ++++++++++++++++ .../Footer/ApiDetails/apidetails.helpers.tsx | 38 +++++++++++++ frontend/src/component/menu/Footer/Footer.jsx | 8 +-- .../__snapshots__/apidetails.test.tsx.snap} | 21 ++++++++ .../__snapshots__/footer-test.jsx.snap | 12 +++-- .../menu/__tests__/apidetails.test.tsx | 53 +++++++++++++++++++ .../component/menu/__tests__/footer-test.jsx | 38 ++++--------- frontend/src/interfaces/uiConfig.ts | 6 +-- frontend/yarn.lock | 7 +++ 13 files changed, 191 insertions(+), 132 deletions(-) delete mode 100644 frontend/src/component/api/__tests__/show-api-details-component-test.jsx delete mode 100644 frontend/src/component/api/show-api-details-component.jsx delete mode 100644 frontend/src/component/api/show-api-details-container.jsx create mode 100644 frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx create mode 100644 frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx rename frontend/src/component/{api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap => menu/__tests__/__snapshots__/apidetails.test.tsx.snap} (71%) create mode 100644 frontend/src/component/menu/__tests__/apidetails.test.tsx diff --git a/frontend/package.json b/frontend/package.json index b801e01474..d271cbbbe1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -52,6 +52,7 @@ "@types/react": "17.0.38", "@types/react-dom": "17.0.11", "@types/react-router-dom": "5.3.3", + "@types/react-test-renderer": "^17.0.1", "@types/react-timeago": "4.1.3", "@welldone-software/why-did-you-render": "6.2.3", "array-move": "3.0.1", diff --git a/frontend/src/component/api/__tests__/show-api-details-component-test.jsx b/frontend/src/component/api/__tests__/show-api-details-component-test.jsx deleted file mode 100644 index 993f263016..0000000000 --- a/frontend/src/component/api/__tests__/show-api-details-component-test.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -import ShowApiDetailsComponent from '../show-api-details-component'; -import renderer from 'react-test-renderer'; - -test('renders correctly with empty version', () => { - const uiConfig = { - name: 'Unleash', - slogan: 'We are the best!', - environment: 'test', - version: '', - }; - - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); -}); - -test('renders correctly with ui-config', () => { - const uiConfig = { - name: 'Unleash', - slogan: 'We are the best!', - environment: 'test', - version: '1.1.0', - }; - - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); -}); - -test('renders correctly without uiConfig', () => { - const uiConfig = { - name: 'Unleash', - version: '1.1.0', - }; - - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); -}); diff --git a/frontend/src/component/api/show-api-details-component.jsx b/frontend/src/component/api/show-api-details-component.jsx deleted file mode 100644 index 6947bbc405..0000000000 --- a/frontend/src/component/api/show-api-details-component.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import ConditionallyRender from '../common/ConditionallyRender/ConditionallyRender'; - -class ShowApiDetailsComponent extends Component { - static propTypes = { - uiConfig: PropTypes.object.isRequired, - }; - - render() { - const { slogan, environment, version, versionInfo, name } = this.props.uiConfig; - let versionStr; - let updateNotification; - let instanceId; - if (versionInfo) { - if (versionInfo.current.enterprise) { - versionStr = `${name} ${versionInfo.current.enterprise}`; - if (Object.keys(versionInfo.latest).includes('enterprise') && !versionInfo.isLatest) { - updateNotification = `Upgrade available - Latest Enterprise release: ${versionInfo.latest.enterprise}`; - } - } else { - versionStr = `${name} ${versionInfo.current.oss}`; - if (Object.keys(versionInfo.latest).includes('oss') && !versionInfo.isLatest) { - updateNotification = `Upgrade available - Latest OSS release: ${versionInfo.latest.oss}`; - } - } - instanceId = versionInfo.instanceId; - } else { - versionStr = `${name} ${version}`; - } - return ( -
-

{`${versionStr}`} ({environment})} />

- - {updateNotification}
} /> -
- {slogan} -
- {`${instanceId}`}} /> -
- ); - } -} - -export default ShowApiDetailsComponent; diff --git a/frontend/src/component/api/show-api-details-container.jsx b/frontend/src/component/api/show-api-details-container.jsx deleted file mode 100644 index 0a21dbb29f..0000000000 --- a/frontend/src/component/api/show-api-details-container.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { connect } from 'react-redux'; -import ShowApiDetailsComponent from './show-api-details-component'; - -const mapDispatchToProps = {}; - -const mapStateToProps = state => ({ - uiConfig: state.uiConfig.toJS(), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(ShowApiDetailsComponent); diff --git a/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx b/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx new file mode 100644 index 0000000000..ed9bacc4ec --- /dev/null +++ b/frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx @@ -0,0 +1,46 @@ +import { ReactElement } from 'react'; +import ConditionallyRender from '../../../common/ConditionallyRender'; +import { + formatCurrentVersion, + formatUpdateNotification, + IPartialUiConfig, +} from './apidetails.helpers'; + +interface IApiDetailsProps { + uiConfig: IPartialUiConfig; +} + +export const ApiDetails = (props: IApiDetailsProps): ReactElement => { + const instanceId = props.uiConfig.versionInfo?.instanceId; + const currentVersion = formatCurrentVersion(props.uiConfig); + const environment = props.uiConfig.environment; + const updateNotification = formatUpdateNotification(props.uiConfig); + + return ( +
+

+ {currentVersion}{' '} + ({environment})} + /> +

+ + {updateNotification} +
+ + } + /> +
+ {props.uiConfig.slogan} +
+ {`${instanceId}`}} + /> +
+ ); +}; diff --git a/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx b/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx new file mode 100644 index 0000000000..92b1652d47 --- /dev/null +++ b/frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx @@ -0,0 +1,38 @@ +import { IVersionInfo } from '../../../../interfaces/uiConfig'; + +export interface IPartialUiConfig { + name: string; + version: string; + slogan?: string; + environment?: string; + versionInfo?: IVersionInfo; +} + +export const formatCurrentVersion = (uiConfig: IPartialUiConfig): string => { + const current = uiConfig.versionInfo?.current; + + if (current?.enterprise) { + return `${uiConfig.name} ${current.enterprise}`; + } + + if (current?.oss) { + return `${uiConfig.name} ${current.oss}`; + } + + return `${uiConfig.name} ${uiConfig.version}`; +}; + +export const formatUpdateNotification = ( + uiConfig: IPartialUiConfig +): string | undefined => { + const latest = uiConfig.versionInfo?.latest; + const isLatest = uiConfig.versionInfo?.isLatest; + + if (latest?.enterprise && !isLatest) { + return `Upgrade available - Latest Enterprise release: ${latest.enterprise}`; + } + + if (latest?.oss && !isLatest) { + return `Upgrade available - Latest OSS release: ${latest.oss}`; + } +}; diff --git a/frontend/src/component/menu/Footer/Footer.jsx b/frontend/src/component/menu/Footer/Footer.jsx index 74985b60b9..3eb2034fcd 100644 --- a/frontend/src/component/menu/Footer/Footer.jsx +++ b/frontend/src/component/menu/Footer/Footer.jsx @@ -1,19 +1,19 @@ /* eslint-disable react/jsx-no-target-blank */ import { List, ListItem, ListItemText, Grid } from '@material-ui/core'; - -import ShowApiDetailsContainer from '../../api/show-api-details-container'; - +import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; +import { ApiDetails } from './ApiDetails/ApiDetails'; import { useStyles } from './Footer.styles'; export const Footer = () => { const styles = useStyles(); + const { uiConfig } = useUiConfig(); return (