A better layout mechanism

web/jest.config.js

@@ -183,15 +183,16 @@ module.exports = {
   // A map from regular expressions to paths to transformers
   // transform: undefined,
   transform: {
-    "\\.jsx?$": "babel-jest",
+    "\\.m?jsx?$": "babel-jest",
     "\\.(css|svg)$": "jest-transform-stub"
-  }
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/",
-  //   "\\.pnp\\.[^\\/]+$"
-  // ],
+  transformIgnorePatterns: [
+    //   "/node_modules/",
+    //   "\\.pnp\\.[^\\/]+$"
+    "/node_modules/(?!(react-teleporter)/)"
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

web/package.json

@@ -68,6 +68,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "^6.3.0",
+    "react-teleporter": "^3.0.2",
     "regenerator-runtime": "^0.13.9"
   }
 }

web/src/App.jsx

@@ -23,14 +23,17 @@ import React, { useEffect, useReducer } from "react";
 import { useInstallerClient } from "./context/installer";
 import { Outlet } from "react-router-dom";
 
-import { PROBING, PROBED, INSTALLING, INSTALLED } from "./client/status";
-
+import Layout, { Title, AdditionalInfo } from "./Layout";
+import About from "./About";
+import TargetIpsPopup from "./TargetIpsPopup";
 import DBusError from "./DBusError";
 import ProbingProgress from "./ProbingProgress";
 import InstallationProgress from "./InstallationProgress";
 import InstallationFinished from "./InstallationFinished";
 import LoadingEnvironment from "./LoadingEnvironment";
 
+import { PROBING, PROBED, INSTALLING, INSTALLED } from "./client/status";
+
 const init = status => ({
   loading: status === null,
   probing: status === PROBING,
@@ -78,13 +81,26 @@ function App() {
     });
   }, [client.monitor]);
 
-  if (state.dbusError) return <DBusError />;
-  if (state.loading) return <LoadingEnvironment />;
-  if (state.probing) return <ProbingProgress />;
-  if (state.installing) return <InstallationProgress />;
-  if (state.finished) return <InstallationFinished />;
+  const Content = () => {
+    if (state.dbusError) return <DBusError />;
+    if (state.loading) return <LoadingEnvironment />;
+    if (state.probing) return <ProbingProgress />;
+    if (state.installing) return <InstallationProgress />;
+    if (state.finished) return <InstallationFinished />;
+
+    return <Outlet />;
+  };
 
-  return <Outlet />;
+  return (
+    <Layout>
+      <Title>D-Installer</Title>
+      <Content />
+      <AdditionalInfo>
+        <About />
+        <TargetIpsPopup />
+      </AdditionalInfo>
+    </Layout>
+  );
 }
 
 export default App;

web/src/DBusError.jsx

@@ -22,11 +22,15 @@
 import React from "react";
 import { Button, Title, EmptyState, EmptyStateIcon, EmptyStateBody } from "@patternfly/react-core";
 
-import Layout from "./Layout";
+import {
+  Title as PageTitle,
+  PageIcon,
+  MainActions
+} from "./Layout";
 import Center from "./Center";
 
 import {
-  EOS_ANNOUNCEMENT as SectionIcon,
+  EOS_ANNOUNCEMENT as Icon,
   EOS_ENDPOINTS_DISCONNECTED as DisconnectionIcon
 } from "eos-icons-react";
 
@@ -39,7 +43,11 @@ const ReloadAction = () => (
 
 function DBusError() {
   return (
-    <Layout sectionTitle="D-Bus Error" SectionIcon={SectionIcon} FooterActions={ReloadAction}>
+    <>
+      <PageTitle>D-Bus Error</PageTitle>
+      <PageIcon><Icon /></PageIcon>
+      <MainActions><ReloadAction /></MainActions>
+
       <Center>
         <EmptyState>
           <EmptyStateIcon icon={DisconnectionIcon} />
@@ -51,7 +59,7 @@ function DBusError() {
           </EmptyStateBody>
         </EmptyState>
       </Center>
-    </Layout>
+    </>
   );
 }
 

web/src/InstallationFinished.jsx

@@ -30,7 +30,7 @@ import {
   EmptyStateSecondaryActions
 } from "@patternfly/react-core";
 
-import Layout from "./Layout";
+import { Title as SectionTitle, PageIcon, MainActions } from "./Layout";
 import Center from "./Center";
 import { useInstallerClient } from "./context/installer";
 
@@ -39,24 +39,20 @@ import {
   EOS_CHECK_CIRCLE as SectionIcon
 } from "eos-icons-react";
 
-const Actions = ({ onReboot }) => (
-  <>
-    <Button isLarge variant="primary" onClick={onReboot}>
-      Reboot
-    </Button>
-  </>
-);
-
 function InstallationFinished() {
   const client = useInstallerClient();
   const onRebootAction = () => client.manager.rebootSystem();
 
   return (
-    <Layout
-      sectionTitle="Installation Finished"
-      SectionIcon={SectionIcon}
-      FooterActions={() => <Actions onReboot={onRebootAction} />}
-    >
+    <>
+      <SectionTitle>Installation Finished</SectionTitle>
+      <PageIcon><SectionIcon /></PageIcon>
+      <MainActions>
+        <Button isLarge variant="primary" onClick={onRebootAction}>
+          Reboot
+        </Button>
+      </MainActions>
+
       <Center>
         <EmptyState>
           <EmptyStateIcon icon={InstallationFinishedIcon} className="success-icon" />
@@ -79,7 +75,7 @@ function InstallationFinished() {
           </EmptyStateBody>
         </EmptyState>
       </Center>
-    </Layout>
+    </>
   );
 }
 

web/src/InstallationProgress.jsx

@@ -22,18 +22,18 @@
 import React from "react";
 
 import Center from "./Center";
-import Layout from "./Layout";
+import { Title, PageIcon } from "./Layout";
 import ProgressReport from "./ProgressReport";
 
-import { EOS_DOWNLOADING as SectionIcon } from "eos-icons-react";
+import { EOS_DOWNLOADING as Icon } from "eos-icons-react";
 
 function InstallationProgress() {
   return (
-    <Layout sectionTitle="Installing" SectionIcon={SectionIcon}>
-      <Center>
-        <ProgressReport />
-      </Center>
-    </Layout>
+    <>
+      <Title>Installing</Title>
+      <PageIcon><Icon /></PageIcon>
+      <Center><ProgressReport /></Center>
+    </>
   );
 }
 

web/src/InstallationProgress.test.jsx

@@ -40,11 +40,4 @@ describe("InstallationProgress", () => {
 
     await screen.findByText("ProgressReport Mock");
   });
-
-  it("does not show actions", async () => {
-    installerRender(<InstallationProgress />);
-
-    const button = screen.queryByRole("navigation", { name: /Installer Actions/i });
-    expect(button).toBeNull();
-  });
 });