From 62ebd728c60c0e7f2c5e7e39c8494dcad276844a Mon Sep 17 00:00:00 2001
From: Huw Wilkins <huw.wilkins@canonical.com>
Date: Wed, 15 May 2024 12:12:21 +1000
Subject: [PATCH] Use application layout from react-components.

---
 src/app/App.tsx                               | 35 ++++---
 .../AppSideNavItems/AppSideNavItems.tsx       |  6 +-
 .../AppSideNavigation/AppSideNavigation.tsx   | 98 ++++++++++---------
 .../components/AppSidePanel/AppSidePanel.tsx  | 14 +--
 .../components/PageContent/PageContent.tsx    |  5 +-
 5 files changed, 83 insertions(+), 75 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 315db92551..8a81dccee6 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,7 +1,13 @@
 import type { ReactNode } from "react";
 import { Suspense, useEffect } from "react";
 
-import { Notification } from "@canonical/react-components";
+import {
+  AppNavigationBar,
+  AppStatus,
+  Application,
+  Notification,
+  Panel,
+} from "@canonical/react-components";
 import { usePrevious } from "@canonical/react-components/dist/hooks";
 import * as Sentry from "@sentry/browser";
 import { useDispatch, useSelector } from "react-redux";
@@ -168,21 +174,20 @@ export const App = (): JSX.Element => {
   }
 
   return (
-    <div className="l-application" id={MAAS_UI_ID}>
-      <ThemePreviewContextProvider>
+    <ThemePreviewContextProvider>
+      <Application id={MAAS_UI_ID}>
         <ConnectionStatus />
         {authLoaded && authenticated ? (
           <AppSideNavigation />
         ) : (
-          <header className="l-navigation-bar is-pinned">
-            <div className="p-panel is-dark is-maas-default">
-              <div className="p-panel__header">
-                <NavigationBanner />
-              </div>
-            </div>
-          </header>
+          <AppNavigationBar className="is-pinned">
+            <Panel
+              className="is-maas-default"
+              dark
+              logo={<NavigationBanner />}
+            />
+          </AppNavigationBar>
         )}
-
         <Suspense
           fallback={
             <PageContent
@@ -194,11 +199,11 @@ export const App = (): JSX.Element => {
         >
           {content}
         </Suspense>
-        <aside className="l-status">
+        <AppStatus>
           <StatusBar />
-        </aside>
-      </ThemePreviewContextProvider>
-    </div>
+        </AppStatus>
+      </Application>
+    </ThemePreviewContextProvider>
   );
 };
 
diff --git a/src/app/base/components/AppSideNavigation/AppSideNavItems/AppSideNavItems.tsx b/src/app/base/components/AppSideNavigation/AppSideNavItems/AppSideNavItems.tsx
index 7f83b65f37..c120c50457 100644
--- a/src/app/base/components/AppSideNavigation/AppSideNavItems/AppSideNavItems.tsx
+++ b/src/app/base/components/AppSideNavigation/AppSideNavItems/AppSideNavItems.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { Navigation } from "@canonical/maas-react-components";
-import { Button, Icon } from "@canonical/react-components";
+import { Button, Icon, SideNavigation } from "@canonical/react-components";
 
 import AppSideNavItem from "../AppSideNavItem";
 import type { SideNavigationProps } from "../AppSideNavigation";
@@ -93,7 +93,7 @@ export const AppSideNavItems = ({
   vaultIncomplete,
 }: Props): JSX.Element => {
   return (
-    <>
+    <SideNavigation hasIcons>
       {showLinks ? (
         <ul className="p-side-navigation__list">
           {groups.map((group, i) => (
@@ -147,7 +147,7 @@ export const AppSideNavItems = ({
           </ul>
         </>
       ) : null}
-    </>
+    </SideNavigation>
   );
 };
 
diff --git a/src/app/base/components/AppSideNavigation/AppSideNavigation.tsx b/src/app/base/components/AppSideNavigation/AppSideNavigation.tsx
index d1840c5a5d..1ca56c6d3e 100644
--- a/src/app/base/components/AppSideNavigation/AppSideNavigation.tsx
+++ b/src/app/base/components/AppSideNavigation/AppSideNavigation.tsx
@@ -1,6 +1,11 @@
 import { useEffect, useMemo } from "react";
 
 import { Navigation, NavigationBar } from "@canonical/maas-react-components";
+import {
+  AppNavigation,
+  AppNavigationBar,
+  Panel,
+} from "@canonical/react-components";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useLocation, useMatch } from "react-router-dom";
 import { useStorageState } from "react-storage-hooks";
@@ -55,54 +60,51 @@ export const AppSideNavigation = ({
   vaultIncomplete,
 }: SideNavigationProps) => (
   <>
-    <NavigationBar className={`is-maas-${theme}`}>
-      <Navigation.Header>
-        <NavigationBanner />
-        <Navigation.Controls>
-          <NavigationBar.MenuButton
-            onClick={() => {
-              setIsCollapsed(!isCollapsed);
-            }}
-          >
-            Menu
-          </NavigationBar.MenuButton>
-        </Navigation.Controls>
-      </Navigation.Header>
-    </NavigationBar>
-    <Navigation className={`is-maas-${theme}`} isCollapsed={isCollapsed}>
-      <Navigation.Drawer>
-        <Navigation.Header>
-          <NavigationBanner>
-            <Navigation.Controls>
-              <NavigationBar.MenuButton
-                onClick={() => {
-                  setIsCollapsed(!isCollapsed);
-                }}
-              >
-                Close menu
-              </NavigationBar.MenuButton>
-              <Navigation.CollapseToggle
-                isCollapsed={isCollapsed}
-                setIsCollapsed={setIsCollapsed}
-              />
-            </Navigation.Controls>
-          </NavigationBanner>
-        </Navigation.Header>
-        <Navigation.Content>
-          <AppSideNavItems
-            authUser={authUser}
-            groups={filteredGroups}
-            isAdmin={isAdmin}
-            isAuthenticated={isAuthenticated}
-            logout={logout}
-            path={path}
-            setIsCollapsed={setIsCollapsed}
-            showLinks={showLinks}
-            vaultIncomplete={vaultIncomplete}
-          />
-        </Navigation.Content>
-      </Navigation.Drawer>
-    </Navigation>
+    <AppNavigationBar className={`is-maas-${theme}`}>
+      <Panel
+        dark
+        logo={<NavigationBanner />}
+        toggle={{
+          label: "Menu",
+          onClick: () => setIsCollapsed(!isCollapsed),
+        }}
+      />
+    </AppNavigationBar>
+    <AppNavigation className={`is-maas-${theme}`} collapsed={isCollapsed}>
+      <Panel
+        controls={
+          <>
+            <NavigationBar.MenuButton
+              onClick={() => {
+                setIsCollapsed(!isCollapsed);
+              }}
+            >
+              Close menu
+            </NavigationBar.MenuButton>
+            <Navigation.CollapseToggle
+              isCollapsed={isCollapsed}
+              setIsCollapsed={setIsCollapsed}
+            />
+          </>
+        }
+        controlsClassName="u-no-margin--top"
+        dark
+        logo={<NavigationBanner />}
+        stickyHeader
+      >
+        <AppSideNavItems
+          authUser={authUser}
+          groups={filteredGroups}
+          isAdmin={isAdmin}
+          isAuthenticated={isAuthenticated}
+          logout={logout}
+          path={path}
+          setIsCollapsed={setIsCollapsed}
+          showLinks={showLinks}
+          vaultIncomplete={vaultIncomplete}
+        />
+      </Panel>
+    </AppNavigation>
   </>
 );
 
diff --git a/src/app/base/components/AppSidePanel/AppSidePanel.tsx b/src/app/base/components/AppSidePanel/AppSidePanel.tsx
index 8c881c82c3..0a80c92379 100644
--- a/src/app/base/components/AppSidePanel/AppSidePanel.tsx
+++ b/src/app/base/components/AppSidePanel/AppSidePanel.tsx
@@ -1,7 +1,7 @@
 import { useEffect, type ReactNode } from "react";
 
 import { ContentSection } from "@canonical/maas-react-components";
-import { useOnEscapePressed } from "@canonical/react-components";
+import { AppAside, useOnEscapePressed } from "@canonical/react-components";
 import classNames from "classnames";
 
 import type { SidePanelSize } from "@/app/base/side-panel-context";
@@ -49,16 +49,16 @@ const AppSidePanelContent = ({
   content,
 }: AppSidePanelProps): JSX.Element => {
   return (
-    <aside
+    <AppAside
       aria-label={title ?? undefined}
-      className={classNames("l-aside", {
-        "is-collapsed": !content,
-        "is-narrow": size === "narrow",
+      className={classNames({
         "is-large": size === "large",
-        "is-wide": size === "wide",
       })}
+      collapsed={!content}
       data-testid="app-side-panel"
       id="aside-panel"
+      narrow={size === "narrow"}
+      wide={size === "wide"}
     >
       <ContentSection>
         {title ? (
@@ -72,7 +72,7 @@ const AppSidePanelContent = ({
         ) : null}
         {content}
       </ContentSection>
-    </aside>
+    </AppAside>
   );
 };
 
diff --git a/src/app/base/components/PageContent/PageContent.tsx b/src/app/base/components/PageContent/PageContent.tsx
index 853b9e388b..00c17b63c9 100644
--- a/src/app/base/components/PageContent/PageContent.tsx
+++ b/src/app/base/components/PageContent/PageContent.tsx
@@ -1,5 +1,6 @@
 import type { HTMLProps, ReactNode } from "react";
 
+import { AppMain } from "@canonical/react-components";
 import classNames from "classnames";
 import { useSelector } from "react-redux";
 import { matchPath, useLocation } from "react-router-dom";
@@ -44,7 +45,7 @@ const PageContent = ({
 
   return (
     <>
-      <main className="l-main">
+      <AppMain>
         {isSecondaryNavVisible ? (
           <div
             className={classNames("l-main__nav", `is-maas-${theme}--accent`)}
@@ -73,7 +74,7 @@ const PageContent = ({
             <ErrorBoundary>{children}</ErrorBoundary>
           </MainContentSection>
         </div>
-      </main>
+      </AppMain>
       <AppSidePanel content={sidePanelContent} title={sidePanelTitle} />
     </>
   );