fix(web): restructure internals of layout

A step forward to simplify or at least improve how the application is laid out with full header and sidebar or not depending on the route or the action the installer is displaying or triggering. There are a lot of changes here and there, but basically what this commit does is * Drop SimpleLayout component * Rename Main to Layout and add two convenience predefined variants: Full and Plain. * Adapt layout/Header for displaying more or less things depending on props, sent via Layout component. * Remove the installer options "cog button" in favor of a dropdown in the header right corner and move the installer options as an element inside. Such a dropdown will hold the "Download logs" actions in the short term. * Adapt needed parts to accommodate above changes.
agama-project · Oct 24, 2024 · f10153b · f10153b
1 parent 9cf3608
commit f10153b
Show file tree

Hide file tree

Showing 16 changed files with 459 additions and 351 deletions.
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -22,19 +22,19 @@
 
 import React from "react";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
-import { Loading } from "./components/layout";
+import { ServerError } from "~/components/core";
+import { Loading, PlainLayout } from "~/components/layout";
 import { Questions } from "~/components/questions";
-import { ServerError, Installation } from "~/components/core";
-import { useInstallerL10n } from "./context/installerL10n";
+import { useInstallerL10n } from "~/context/installerL10n";
 import { useInstallerClientStatus } from "~/context/installer";
-import { useProduct, useProductChanges } from "./queries/software";
+import { useProduct, useProductChanges } from "~/queries/software";
 import { useL10nConfigChanges } from "~/queries/l10n";
-import { useIssuesChanges } from "./queries/issues";
-import { useInstallerStatus, useInstallerStatusChanges } from "./queries/status";
-import { useDeprecatedChanges } from "./queries/storage";
-import { PATHS as PRODUCT_PATHS } from "./routes/products";
-import SimpleLayout from "./SimpleLayout";
-import { InstallationPhase } from "./types/status";
+import { useIssuesChanges } from "~/queries/issues";
+import { useInstallerStatus, useInstallerStatusChanges } from "~/queries/status";
+import { useDeprecatedChanges } from "~/queries/storage";
+import { PATHS as PRODUCT_PATHS } from "~/routes/products";
+import { PATHS as ROOT_PATHS } from "~/router";
+import { InstallationPhase } from "~/types/status";
 
 /**
  * Main application component.
@@ -56,25 +56,33 @@ function App() {
   useDeprecatedChanges();
 
   const Content = () => {
-    if (error) return <ServerError />;
+    if (error)
+      return (
+        <PlainLayout>
+          <ServerError />
+        </PlainLayout>
+      );
+
+    if (phase === InstallationPhase.Install && isBusy) {
+      return <Navigate to={ROOT_PATHS.installationProgress} />;
+    }
 
-    if (phase === InstallationPhase.Install) {
-      return <Installation isBusy={isBusy} />;
+    if (phase === InstallationPhase.Install && !isBusy) {
+      return <Navigate to={ROOT_PATHS.installationFinished} />;
     }
 
-    if (!products || !connected)
+    if (!products || !connected) return <Loading />;
+
+    if (phase === InstallationPhase.Startup && isBusy) {
       return (
-        <SimpleLayout showOutlet={false}>
+        <PlainLayout>
           <Loading />
-        </SimpleLayout>
+        </PlainLayout>
       );
-
-    if (phase === InstallationPhase.Startup && isBusy) {
-      return <Loading />;
     }
 
     if (selectedProduct === undefined && location.pathname !== PRODUCT_PATHS.root) {
-      return <Navigate to="/products" />;
+      return <Navigate to={PRODUCT_PATHS.products} />;
     }
 
     if (

diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx
@@ -88,7 +88,6 @@ jest.mock("~/context/installer", () => ({
 // Mock some components,
 // See https://www.chakshunyu.com/blog/how-to-mock-a-react-component-in-jest/#default-export
 jest.mock("~/components/questions/Questions", () => () => <div>Questions Mock</div>);
-jest.mock("~/components/core/Installation", () => () => <div>Installation Mock</div>);
 jest.mock("~/components/layout/Loading", () => () => <div>Loading Mock</div>);
 jest.mock("~/components/product/ProductSelectionProgress", () => () => <div>Product progress</div>);
 
@@ -163,15 +162,29 @@ describe("App", () => {
     });
   });
 
-  describe("on the installaiton phase", () => {
+  describe("on the busy installaiton phase", () => {
     beforeEach(() => {
       mockClientStatus.phase = InstallationPhase.Install;
+      mockClientStatus.isBusy = true;
+      mockSelectedProduct = { id: "Fake product" };
+    });
+
+    it("navigates to installation progress", async () => {
+      installerRender(<App />, { withL10n: true });
+      await screen.findByText("Navigating to /installation/progress");
+    });
+  });
+
+  describe("on the idle installaiton phase", () => {
+    beforeEach(() => {
+      mockClientStatus.phase = InstallationPhase.Install;
+      mockClientStatus.isBusy = false;
       mockSelectedProduct = { id: "Fake product" };
     });
 
-    it("renders the application content", async () => {
+    it("navigates to installation finished", async () => {
       installerRender(<App />, { withL10n: true });
-      await screen.findByText("Installation Mock");
+      await screen.findByText("Navigating to /installation/finished");
     });
   });
 });
diff --git a/web/src/SimpleLayout.jsx b/web/src/SimpleLayout.jsx
diff --git a/web/src/components/core/Installation.jsx b/web/src/components/core/Installation.jsx
diff --git a/web/src/components/core/InstallationFinished.tsx b/web/src/components/core/InstallationFinished.tsx
@@ -37,14 +37,16 @@ import {
   Stack,
   Text,
 } from "@patternfly/react-core";
-import SimpleLayout from "~/SimpleLayout";
 import { Center, Icon } from "~/components/layout";
 import { EncryptionMethods } from "~/types/storage";
 import { _ } from "~/i18n";
 import alignmentStyles from "@patternfly/react-styles/css/utilities/Alignment/alignment";
 import { useInstallerStatus } from "~/queries/status";
 import { useProposalResult } from "~/queries/storage";
 import { finishInstallation } from "~/api/manager";
+import { InstallationPhase } from "~/types/status";
+import { Navigate } from "react-router-dom";
+import { PATHS } from "~/router";
 
 const TpmHint = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -76,55 +78,62 @@ the machine needs to boot directly to the new boot loader.",
 const SuccessIcon = () => <Icon name="check_circle" className="icon-xxxl color-success" />;
 
 function InstallationFinished() {
-  const { useIguana } = useInstallerStatus({ suspense: true });
+  const { phase, isBusy, useIguana } = useInstallerStatus({ suspense: true });
   const {
     settings: { encryptionPassword, encryptionMethod },
   } = useProposalResult();
+
+  if (phase !== InstallationPhase.Install) {
+    return <Navigate to={PATHS.root} />;
+  }
+
+  if (isBusy) {
+    return <Navigate to={PATHS.installationProgress} />;
+  }
+
   const usingTpm = encryptionPassword?.length > 0 && encryptionMethod === EncryptionMethods.TPM;
 
   return (
-    <SimpleLayout showOutlet={false}>
-      <Center>
-        <Grid hasGutter>
-          <GridItem sm={8} smOffset={2}>
-            <Card isRounded>
-              <CardBody>
-                <Stack hasGutter>
-                  <EmptyState variant="xl">
-                    <EmptyStateHeader
-                      titleText={_("Congratulations!")}
-                      headingLevel="h2"
-                      icon={<EmptyStateIcon icon={SuccessIcon} />}
-                    />
-                    <EmptyStateBody>
-                      <Flex
-                        rowGap={{ default: "rowGapMd" }}
-                        justifyContent={{ default: "justifyContentCenter" }}
-                      >
-                        <Text>{_("The installation on your machine is complete.")}</Text>
-                        <Text>
-                          {useIguana
-                            ? _("At this point you can power off the machine.")
-                            : _(
-                                "At this point you can reboot the machine to log in to the new system.",
-                              )}
-                        </Text>
-                        {usingTpm && <TpmHint />}
-                      </Flex>
-                    </EmptyStateBody>
-                  </EmptyState>
-                  <Flex direction={{ default: "rowReverse" }}>
-                    <Button size="lg" variant="primary" onClick={finishInstallation}>
-                      {useIguana ? _("Finish") : _("Reboot")}
-                    </Button>
-                  </Flex>
-                </Stack>
-              </CardBody>
-            </Card>
-          </GridItem>
-        </Grid>
-      </Center>
-    </SimpleLayout>
+    <Center>
+      <Grid hasGutter>
+        <GridItem sm={8} smOffset={2}>
+          <Card isRounded>
+            <CardBody>
+              <Stack hasGutter>
+                <EmptyState variant="xl">
+                  <EmptyStateHeader
+                    titleText={_("Congratulations!")}
+                    headingLevel="h2"
+                    icon={<EmptyStateIcon icon={SuccessIcon} />}
+                  />
+                  <EmptyStateBody>
+                    <Flex
+                      rowGap={{ default: "rowGapMd" }}
+                      justifyContent={{ default: "justifyContentCenter" }}
+                    >
+                      <Text>{_("The installation on your machine is complete.")}</Text>
+                      <Text>
+                        {useIguana
+                          ? _("At this point you can power off the machine.")
+                          : _(
+                              "At this point you can reboot the machine to log in to the new system.",
+                            )}
+                      </Text>
+                      {usingTpm && <TpmHint />}
+                    </Flex>
+                  </EmptyStateBody>
+                </EmptyState>
+                <Flex direction={{ default: "rowReverse" }}>
+                  <Button size="lg" variant="primary" onClick={finishInstallation}>
+                    {useIguana ? _("Finish") : _("Reboot")}
+                  </Button>
+                </Flex>
+              </Stack>
+            </CardBody>
+          </Card>
+        </GridItem>
+      </Grid>
+    </Center>
   );
 }
 

diff --git a/web/src/components/core/InstallationProgress.jsx b/web/src/components/core/InstallationProgress.jsx
@@ -23,14 +23,23 @@
 import React from "react";
 import { _ } from "~/i18n";
 import ProgressReport from "./ProgressReport";
-import SimpleLayout from "~/SimpleLayout";
+import { InstallationPhase } from "~/types/status";
+import { PATHS } from "~/router";
+import { Navigate } from "react-router-dom";
+import { useInstallerClientStatus } from "~/context/installer";
 
 function InstallationProgress() {
-  return (
-    <SimpleLayout showOutlet={false}>
-      <ProgressReport title={_("Installing the system, please wait ...")} />
-    </SimpleLayout>
-  );
+  const { isBusy, phase } = useInstallerClientStatus({ suspense: true });
+
+  if (phase !== InstallationPhase.Install) {
+    return <Navigate to={PATHS.root} replace />;
+  }
+
+  if (!isBusy) {
+    return <Navigate to={PATHS.installationFinished} replace />;
+  }
+
+  return <ProgressReport title={_("Installing the system, please wait ...")} />;
 }
 
 export default InstallationProgress;