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 (