From 27c620939a888d644fec775047d27bbc1fc5eee6 Mon Sep 17 00:00:00 2001 From: mgold1234 Date: Tue, 30 May 2023 13:34:22 +0300 Subject: [PATCH] LandingPage: Add edge images table This commit adds the edge images table as a federated module, gated behind a feature flag. the configuration is for dev environment to work with federation modules locally --- config/dev.webpack.config.js | 22 +- src/Components/LandingPage/LandingPage.js | 202 ++++++++++-------- src/Components/edge/ImagesTable.js | 38 ++++ .../ImagesTable/ImagesTable.test.js | 5 + .../LandingPage/LandingPage.test.js | 5 + 5 files changed, 185 insertions(+), 87 deletions(-) create mode 100644 src/Components/edge/ImagesTable.js diff --git a/config/dev.webpack.config.js b/config/dev.webpack.config.js index 393dc874..8574ecc4 100644 --- a/config/dev.webpack.config.js +++ b/config/dev.webpack.config.js @@ -15,6 +15,26 @@ const webpackProxy = { '/beta/insights/image-builder', '/preview/insights/image-builder', ], + routes: { + ...(process.env.CONFIG_PORT && { + [`${process.env.BETA ? '/beta' : ''}/config`]: { + host: `http://localhost:${process.env.CONFIG_PORT}`, + }, + }), + ...(process.env.LOCAL_API && { + ...(process.env.LOCAL_API.split(',') || []).reduce((acc, curr) => { + const [appName, appConfig] = (curr || '').split(':'); + const [appPort = 8003, protocol = 'http'] = appConfig.split('~'); + return { + ...acc, + [`/apps/${appName}`]: { host: `${protocol}://localhost:${appPort}` }, + [`/beta/apps/${appName}`]: { + host: `${protocol}://localhost:${appPort}`, + }, + }; + }, {}), + }), + }, }; const { config: webpackConfig, plugins } = config({ @@ -55,7 +75,7 @@ if (process.env.MSW) { will become its default scope. Setting the Service-Worker-Allowed header to '/' allows the worker's scope to be expanded to the root route '/'. - The default webpackConfig for stage does not contain any headers. + The default webpackConfig for stage does not contain any headers. Caution: The default webpackConfig for prod *does* contain headers, so this code will need to be modified if using MSW in prod-beta or prod-stable so that diff --git a/src/Components/LandingPage/LandingPage.js b/src/Components/LandingPage/LandingPage.js index f18af5fa..36b91ec6 100644 --- a/src/Components/LandingPage/LandingPage.js +++ b/src/Components/LandingPage/LandingPage.js @@ -6,6 +6,9 @@ import { Button, ExpandableSection, Popover, + Tabs, + Tab, + TabTitleText, Text, TextContent, } from '@patternfly/react-core'; @@ -17,11 +20,13 @@ import { PageHeaderTitle, } from '@redhat-cloud-services/frontend-components'; import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome'; +import { useFlag } from '@unleash/proxy-client-react'; import { Outlet } from 'react-router-dom'; import './LandingPage.scss'; import { useGetEnvironment } from '../../Utilities/useGetEnvironment'; +import EdgeImagesTable from '../edge/ImagesTable'; import ImagesTable from '../ImagesTable/ImagesTable'; import DocumentationButton from '../sharedComponents/DocumentationButton'; @@ -32,7 +37,97 @@ export const LandingPage = () => { const { quickStarts } = useChrome(); const { isBeta } = useGetEnvironment(); const activateQuickstart = (qs) => () => quickStarts.activateQuickstart(qs); - + const [activeTabKey, setActiveTabkey] = useState(0); + const handleTabClick = (_event, tabIndex) => setActiveTabkey(tabIndex); + const edgeParityFlag = useFlag('edgeParity.image-list'); + const traditionalImageList = ( +
+ {!isBeta() && showBetaAlert && ( + setShowBetaAlert(false)} /> + } + actionLinks={ + + } + > +

+ Launch Amazon Web Services or Microsoft Azure hosts to the cloud + from the console. +

+

+ Link custom repositories and build any supported image with custom + content. +

+ + )} + {isBeta() && ( + +

+ For help getting started, access the quick starts for our Preview + features. +

+

+ +

+

+ +

+

+ +

+ + )} + +
+ ); return ( @@ -59,95 +154,30 @@ export const LandingPage = () => { -
- {!isBeta() && showBetaAlert && ( - setShowBetaAlert(false)} /> - } - actionLinks={ - - } + {edgeParityFlag ? ( + + Traditional (RPM - DNF)} > -

- Launch Amazon Web Services or Microsoft Azure hosts to the cloud - from the console. -

-

- Link custom repositories and build any supported image with custom - content. -

- - )} - {isBeta() && ( - + Immutable (OSTree)} > -

- For help getting started, access the quick starts for our Preview - features. -

-

- -

-

- -

-

- -

- - )} - -
+ + + + ) : ( + traditionalImageList + )} ); }; - export default LandingPage; diff --git a/src/Components/edge/ImagesTable.js b/src/Components/edge/ImagesTable.js new file mode 100644 index 00000000..ed0769f1 --- /dev/null +++ b/src/Components/edge/ImagesTable.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; +import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState'; +import Unavailable from '@redhat-cloud-services/frontend-components/Unavailable'; +import { useFlag } from '@unleash/proxy-client-react'; +import { useDispatch } from 'react-redux'; +import { useNavigate, useLocation } from 'react-router-dom'; + +import { + getNotificationProp, + manageEdgeImagesUrlName, +} from '../../Utilities/edge'; +import { resolveRelPath } from '../../Utilities/path'; + +const ImagesTable = () => { + const dispatch = useDispatch(); + const notificationProp = getNotificationProp(dispatch); + const edgeParityFlag = useFlag('edgeParity.image-list'); + + return edgeParityFlag ? ( + } + navigateProp={useNavigate} + locationProp={useLocation} + showHeaderProp={false} + notificationProp={notificationProp} + pathPrefix={resolveRelPath('')} + urlName={manageEdgeImagesUrlName} + /> + ) : ( + + ); +}; + +export default ImagesTable; diff --git a/src/test/Components/ImagesTable/ImagesTable.test.js b/src/test/Components/ImagesTable/ImagesTable.test.js index 7d0ff927..4730d40c 100644 --- a/src/test/Components/ImagesTable/ImagesTable.test.js +++ b/src/test/Components/ImagesTable/ImagesTable.test.js @@ -26,6 +26,11 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ }), })); +jest.mock('@unleash/proxy-client-react', () => ({ + useUnleashContext: () => jest.fn(), + useFlag: jest.fn((flag) => (flag === 'edgeParity.image-list' ? false : true)), +})); + jest .spyOn(api, 'getComposes') .mockImplementation(() => Promise.resolve(mockComposes)); diff --git a/src/test/Components/LandingPage/LandingPage.test.js b/src/test/Components/LandingPage/LandingPage.test.js index af7eea98..0a8cfe30 100644 --- a/src/test/Components/LandingPage/LandingPage.test.js +++ b/src/test/Components/LandingPage/LandingPage.test.js @@ -18,6 +18,11 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ }), })); +jest.mock('@unleash/proxy-client-react', () => ({ + useUnleashContext: () => jest.fn(), + useFlag: jest.fn((flag) => (flag === 'edgeParity.image-list' ? false : true)), +})); + describe('Landing Page', () => { test('renders page heading', async () => { renderWithReduxRouter('', {});