feat(web): mount terminal in a bottom drawer

agama-project · Jun 21, 2024 · 4a56e6d · 4a56e6d
1 parent b0dfce3
commit 4a56e6d
Showing 1 changed file with 40 additions and 6 deletions.
diff --git a/web/src/MainLayout.jsx b/web/src/MainLayout.jsx
@@ -19,22 +19,23 @@
  * find current contact information at www.suse.com.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { Outlet, NavLink, useNavigate } from "react-router-dom";
 import {
   Button,
+  Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerHead, DrawerPanelBody, DrawerPanelContent,
   Masthead, MastheadContent, MastheadToggle, MastheadMain, MastheadBrand,
   Nav, NavItem, NavList,
   Page, PageSidebar, PageSidebarBody, PageToggleButton,
-  Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem
+  Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem,
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
-import { About, InstallerOptions } from "~/components/core";
+import { About, InstallerOptions, TerminalDialog, Terminal } from "~/components/core";
 import { _ } from "~/i18n";
 import { rootRoutes } from "~/router";
 import { useProduct } from "~/context/product";
 
-const Header = () => {
+const Header = ({ onTerminalClick }) => {
   const { selectedProduct } = useProduct();
   // NOTE: Agama is a name, do not translate
   const title = selectedProduct?.name || _("Agama");
@@ -60,6 +61,12 @@ const Header = () => {
           <ToolbarContent>
             <ToolbarGroup align={{ default: "alignRight" }}>
               <ToolbarItem>
+                <Button
+                  variant="plain"
+                  icon={<Icon name="terminal" />}
+                  onClick={onTerminalClick}
+                  aria-label={_("Show terminal")}
+                />
                 <InstallerOptions />
               </ToolbarItem>
             </ToolbarGroup>
@@ -122,13 +129,40 @@ const Sidebar = () => {
  * Root application component for laying out the content.
  */
 export default function Root() {
+  const [showTerminal, setShowTerminal] = useState();
+
+  const openTerminal = () => setShowTerminal(true);
+  const closeTerminal = () => setShowTerminal(false);
+
   return (
     <Page
       isManagedSidebar
-      header={<Header />}
+      header={<Header onTerminalClick={openTerminal} />}
       sidebar={<Sidebar />}
     >
-      <Outlet />
+      <Drawer isExpanded={showTerminal} position="bottom">
+        <DrawerContent
+          panelContent={
+            <DrawerPanelContent
+              isResizable
+              minSize="66%"
+              colorVariant="dark-200"
+            >
+              <DrawerHead>
+                <h2>{_("Terminal")}</h2>
+                <DrawerActions>
+                  <DrawerCloseButton onClick={closeTerminal} />
+                </DrawerActions>
+              </DrawerHead>
+              <DrawerPanelBody>
+                <Terminal />
+              </DrawerPanelBody>
+            </DrawerPanelContent>
+          }
+        >
+          <Outlet />
+        </DrawerContent>
+      </Drawer>
     </Page>
   );
 }