fix(web): wraps ServerError into a plain layout

agama-project · Dec 10, 2024 · ec2f55c · ec2f55c
1 parent ccc3e34
commit ec2f55c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -23,7 +23,7 @@
 import React from "react";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 import { ServerError } from "~/components/core";
-import { Loading, PlainLayout } from "~/components/layout";
+import { Loading } from "~/components/layout";
 import { useInstallerL10n } from "~/context/installerL10n";
 import { useInstallerClientStatus } from "~/context/installer";
 import { useProduct, useProductChanges } from "~/queries/software";
@@ -53,12 +53,7 @@ function App() {
   useDeprecatedChanges();
 
   const Content = () => {
-    if (error)
-      return (
-        <PlainLayout>
-          <ServerError />
-        </PlainLayout>
-      );
+    if (!error) return <ServerError />;
 
     if (phase === InstallationPhase.Install && isBusy) {
       return <Navigate to={ROOT.installationProgress} />;

diff --git a/web/src/components/core/ServerError.test.tsx b/web/src/components/core/ServerError.test.tsx
@@ -27,9 +27,29 @@ import { plainRender } from "~/test-utils";
 import * as utils from "~/utils";
 import { ServerError } from "~/components/core";
 
+jest.mock("~/components/layout/Header", () => () => <div>Header Mock</div>);
+jest.mock("~/components/layout/Sidebar", () => () => <div>Sidebar Mock</div>);
+jest.mock("~/components/layout/Layout", () => {
+  const layout = jest.requireActual("~/components/layout/Layout");
+  const OriginalPlainLayout = layout.Plain;
+
+  return {
+    ...layout,
+    Plain: ({ ...props }) => (
+      <>
+        <div>PlainLayout Mock</div>
+        <OriginalPlainLayout {...props} />
+      </>
+    ),
+  };
+});
+
 describe("ServerError", () => {
-  it("includes a generic server problem message", () => {
+  it("wraps a generic server problem message into a plain layout with neither, header nor sidebar", () => {
     plainRender(<ServerError />);
+    expect(screen.queryByText("Header Mock")).toBeNull();
+    expect(screen.queryByText("Sidebar Mock")).toBeNull();
+    screen.getByText("PlainLayout Mock");
     screen.getByText(/Cannot connect to Agama server/i);
   });
 

diff --git a/web/src/components/core/ServerError.tsx b/web/src/components/core/ServerError.tsx
@@ -27,7 +27,7 @@ import {
   EmptyStateBody,
   EmptyStateHeader,
 } from "@patternfly/react-core";
-import { Center, Icon } from "~/components/layout";
+import { Center, Icon, PlainLayout } from "~/components/layout";
 import { Page } from "~/components/core";
 import { _ } from "~/i18n";
 import { locationReload } from "~/utils";
@@ -36,24 +36,26 @@ const ErrorIcon = () => <Icon name="error" className="icon-xxxl" />;
 
 function ServerError() {
   return (
-    <Page>
-      <Page.Content>
-        <Center>
-          <EmptyState variant="xl">
-            <EmptyStateHeader
-              titleText={_("Cannot connect to Agama server")}
-              headingLevel="h2"
-              icon={<EmptyStateIcon icon={ErrorIcon} />}
-            />
-            <EmptyStateBody>{_("Please, check whether it is running.")}</EmptyStateBody>
-          </EmptyState>
-        </Center>
-      </Page.Content>
+    <PlainLayout mountHeader={false} mountSidebar={false}>
+      <Page>
+        <Page.Content>
+          <Center>
+            <EmptyState variant="xl">
+              <EmptyStateHeader
+                titleText={_("Cannot connect to Agama server")}
+                headingLevel="h2"
+                icon={<EmptyStateIcon icon={ErrorIcon} />}
+              />
+              <EmptyStateBody>{_("Please, check whether it is running.")}</EmptyStateBody>
+            </EmptyState>
+          </Center>
+        </Page.Content>
 
-      <Page.Actions>
-        <Page.Action onClick={locationReload}>{_("Reload")}</Page.Action>
-      </Page.Actions>
-    </Page>
+        <Page.Actions>
+          <Page.Action onClick={locationReload}>{_("Reload")}</Page.Action>
+        </Page.Actions>
+      </Page>
+    </PlainLayout>
   );
 }