Merge 6c00c8c into 921d28c

openSUSE · Apr 25, 2023 · fa9005b · fa9005b
2 parents 921d28c + 6c00c8c
commit fa9005b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -27,7 +27,7 @@ import { STARTUP, INSTALL } from "~/client/phase";
 import { BUSY } from "~/client/status";
 
 import { Layout, Title, DBusError } from "~/components/layout";
-import { Installation, LoadingEnvironment } from "~/components/core";
+import { Installation, LoadingEnvironment, Sidebar } from "~/components/core";
 
 function App() {
   const client = useInstallerClient();
@@ -71,10 +71,13 @@ function App() {
   };
 
   return (
-    <Layout>
-      <Title>Agama</Title>
-      <Content />
-    </Layout>
+    <>
+      <Sidebar />
+      <Layout>
+        <Title>Agama</Title>
+        <Content />
+      </Layout>
+    </>
   );
 }
 

diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx
@@ -36,6 +36,7 @@ jest.mock("~/components/layout/DBusError", () => mockComponent("D-BusError Mock"
 jest.mock("~/components/core/LoadingEnvironment", () => mockComponent("LoadingEnvironment Mock"));
 jest.mock("~/components/questions/Questions", () => mockComponent("Questions Mock"));
 jest.mock("~/components/core/Installation", () => mockComponent("Installation Mock"));
+jest.mock("~/components/core/Sidebar", () => mockComponent("Sidebar Mock"));
 
 // this object holds the mocked callbacks
 const callbacks = {};

diff --git a/web/src/components/core/Sidebar.jsx b/web/src/components/core/Sidebar.jsx
@@ -21,8 +21,16 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
+import {
+  About,
+  Disclosure,
+  LogsButton,
+  NotificationMark,
+  ShowLogButton,
+  ShowTerminalButton
+} from "~/components/core";
 import { Icon, AppActions } from "~/components/layout";
-import { NotificationMark } from "~/components/core";
+import { ChangeProductLink } from "~/components/software";
 
 /**
  * Agama sidebar navigation
@@ -119,7 +127,14 @@ export default function Sidebar ({ children }) {
         </header>
 
         <div className="flex-stack" onClick={onClick}>
+          <ChangeProductLink />
           { children }
+          <Disclosure label="Diagnostic tools" data-keep-sidebar-open>
+            <ShowLogButton />
+            <LogsButton data-keep-sidebar-open="true" />
+            <ShowTerminalButton />
+          </Disclosure>
+          <About />
         </div>
 
         <footer className="split justify-between" data-state="reversed">

diff --git a/web/src/components/core/Sidebar.test.jsx b/web/src/components/core/Sidebar.test.jsx
@@ -21,11 +21,15 @@
 
 import React from "react";
 import { screen, within } from "@testing-library/react";
-import { plainRender, mockLayout } from "~/test-utils";
+import { plainRender, mockComponent, mockLayout } from "~/test-utils";
 import { Sidebar } from "~/components/core";
 
 jest.mock("~/components/layout/Layout", () => mockLayout());
 
+// Mock some components using contexts and not relevant for below tests
+jest.mock("~/components/core/LogsButton", () => mockComponent("LogsButton Mock"));
+jest.mock("~/components/software/ChangeProductLink", () => mockComponent("ChangeProductLink Mock"));
+
 it("renders the sidebar initially hidden", async () => {
   plainRender(<Sidebar />);
   const nav = await screen.findByRole("navigation", { name: /options/i });

diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
@@ -23,8 +23,6 @@ import React from "react";
 
 import logoUrl from "~/assets/suse-horizontal-logo.svg";
 import { createTeleporter } from "react-teleporter";
-import { ChangeProductLink } from "~/components/software";
-import { About, Disclosure, LogsButton, Sidebar, ShowLogButton, ShowTerminalButton } from "~/components/core";
 
 const PageTitle = createTeleporter();
 const PageActions = createTeleporter();
@@ -81,19 +79,8 @@ function Layout({ children }) {
           <PageActions.Target as="span" />
           <HeaderActions.Target as="span" />
         </div>
-      </header>
 
-      <Sidebar>
-        <>
-          <ChangeProductLink />
-          <Disclosure label="Diagnostic tools" data-keep-sidebar-open>
-            <ShowLogButton />
-            <LogsButton data-keep-sidebar-open="true" />
-            <ShowTerminalButton />
-          </Disclosure>
-          <About />
-        </>
-      </Sidebar>
+      </header>
 
       <main className="stack">
         {children}