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

@@ -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({

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 = (
+    <section className="pf-l-page__main-section pf-c-page__main-section">
+      {!isBeta() && showBetaAlert && (
+        <Alert
+          className="pf-u-mb-xl"
+          isInline
+          variant="default"
+          title="Try new features in our Preview environment."
+          actionClose={
+            <AlertActionCloseButton onClose={() => setShowBetaAlert(false)} />
+          }
+          actionLinks={
+            <Button
+              isInline
+              component="a"
+              variant="link"
+              href="/preview/insights/image-builder/landing"
+            >
+              Enter Preview environment
+            </Button>
+          }
+        >
+          <p>
+            Launch Amazon Web Services or Microsoft Azure hosts to the cloud
+            from the console.
+          </p>
+          <p>
+            Link custom repositories and build any supported image with custom
+            content.
+          </p>
+        </Alert>
+      )}
+      {isBeta() && (
+        <ExpandableSection
+          className="pf-m-light pf-u-mb-xl expand-section"
+          toggleText="Help get started with Preview features"
+          onToggle={setShowHint}
+          isExpanded={showHint}
+          displaySize="large"
+        >
+          <p className="pf-u-pb-sm">
+            For help getting started, access the quick starts for our Preview
+            features.
+          </p>
+          <p className="pf-u-pt-sm">
+            <Button
+              icon={<ArrowRightIcon />}
+              iconPosition="right"
+              variant="link"
+              isInline
+              component="a"
+              onClick={activateQuickstart('insights-launch-aws')}
+              className="pf-u-font-weight-bold"
+            >
+              Launch an AWS Image
+            </Button>
+          </p>
+          <p className="pf-u-pt-sm">
+            <Button
+              icon={<ArrowRightIcon />}
+              iconPosition="right"
+              variant="link"
+              isInline
+              component="a"
+              onClick={activateQuickstart('insights-launch-azure')}
+              className="pf-u-font-weight-bold"
+            >
+              Launch an Azure Image
+            </Button>
+          </p>
+          <p className="pf-u-pt-sm">
+            <Button
+              icon={<ArrowRightIcon />}
+              iconPosition="right"
+              variant="link"
+              isInline
+              component="a"
+              onClick={activateQuickstart('insights-custom-repos')}
+              className="pf-u-font-weight-bold"
+            >
+              Build an Image with Custom Content
+            </Button>
+          </p>
+        </ExpandableSection>
+      )}
+      <ImagesTable />
+    </section>
+  );
   return (
     <React.Fragment>
       <PageHeader>
@@ -59,95 +154,30 @@ export const LandingPage = () => {
         </Popover>
         <OpenSourceBadge repositoriesURL="https://www.osbuild.org/guides/image-builder-service/architecture.html" />
       </PageHeader>
-      <section className="pf-l-page__main-section pf-c-page__main-section">
-        {!isBeta() && showBetaAlert && (
-          <Alert
-            className="pf-u-mb-xl"
-            isInline
-            variant="default"
-            title="Try new features in our Preview environment."
-            actionClose={
-              <AlertActionCloseButton onClose={() => setShowBetaAlert(false)} />
-            }
-            actionLinks={
-              <Button
-                isInline
-                component="a"
-                variant="link"
-                href="/preview/insights/image-builder/landing"
-              >
-                Enter Preview environment
-              </Button>
-            }
+      {edgeParityFlag ? (
+        <Tabs
+          className="pf-c-tabs pf-c-page-header pf-c-table"
+          activeKey={activeTabKey}
+          onSelect={handleTabClick}
+        >
+          <Tab
+            eventKey={0}
+            title={<TabTitleText>Traditional (RPM - DNF)</TabTitleText>}
           >
-            <p>
-              Launch Amazon Web Services or Microsoft Azure hosts to the cloud
-              from the console.
-            </p>
-            <p>
-              Link custom repositories and build any supported image with custom
-              content.
-            </p>
-          </Alert>
-        )}
-        {isBeta() && (
-          <ExpandableSection
-            className="pf-m-light pf-u-mb-xl expand-section"
-            toggleText="Help get started with Preview features"
-            onToggle={setShowHint}
-            isExpanded={showHint}
-            displaySize="large"
+            {traditionalImageList}
+          </Tab>
+          <Tab
+            eventKey={1}
+            title={<TabTitleText>Immutable (OSTree)</TabTitleText>}
           >
-            <p className="pf-u-pb-sm">
-              For help getting started, access the quick starts for our Preview
-              features.
-            </p>
-            <p className="pf-u-pt-sm">
-              <Button
-                icon={<ArrowRightIcon />}
-                iconPosition="right"
-                variant="link"
-                isInline
-                component="a"
-                onClick={activateQuickstart('insights-launch-aws')}
-                className="pf-u-font-weight-bold"
-              >
-                Launch an AWS Image
-              </Button>
-            </p>
-            <p className="pf-u-pt-sm">
-              <Button
-                icon={<ArrowRightIcon />}
-                iconPosition="right"
-                variant="link"
-                isInline
-                component="a"
-                onClick={activateQuickstart('insights-launch-azure')}
-                className="pf-u-font-weight-bold"
-              >
-                Launch an Azure Image
-              </Button>
-            </p>
-            <p className="pf-u-pt-sm">
-              <Button
-                icon={<ArrowRightIcon />}
-                iconPosition="right"
-                variant="link"
-                isInline
-                component="a"
-                onClick={activateQuickstart('insights-custom-repos')}
-                className="pf-u-font-weight-bold"
-              >
-                Build an Image with Custom Content
-              </Button>
-            </p>
-          </ExpandableSection>
-        )}
-        <ImagesTable />
-      </section>
+            <EdgeImagesTable />
+          </Tab>
+        </Tabs>
+      ) : (
+        traditionalImageList
+      )}
       <Outlet />
     </React.Fragment>
   );
 };
-
 export default LandingPage;

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 ? (
+    <AsyncComponent
+      appName="edge"
+      module="./Images"
+      ErrorComponent={<ErrorState />}
+      navigateProp={useNavigate}
+      locationProp={useLocation}
+      showHeaderProp={false}
+      notificationProp={notificationProp}
+      pathPrefix={resolveRelPath('')}
+      urlName={manageEdgeImagesUrlName}
+    />
+  ) : (
+    <Unavailable />
+  );
+};
+
+export default ImagesTable;

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));

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('', {});