← Back to team overview

sts-sponsors team mailing list archive

[Merge] ~nickdv99/maas-site-manager:feat-bottom-links-MAASENG-1544 into maas-site-manager:main

 

Nick De Villiers has proposed merging ~nickdv99/maas-site-manager:feat-bottom-links-MAASENG-1544 into maas-site-manager:main.

Commit message:
feat(nav): Add bottom links MAASENG-1544

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~nickdv99/maas-site-manager/+git/site-manager/+merge/441195

Added links at the bottom of the side nav to Documentation, Community, and Bug Report.

Note: The "Report a bug" link does not currently lead to anything, and will be updated in the future once we have a link for this. The other two links currently just link to maas.io (docs and discourse respectively)
-- 
Your team MAAS Committers is requested to review the proposed merge of ~nickdv99/maas-site-manager:feat-bottom-links-MAASENG-1544 into maas-site-manager:main.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 2d7748f..0073817 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -33,6 +33,8 @@
 @include vf-p-icon-status-waiting-small;
 @include vf-p-icon-status-succeeded-small;
 @include vf-p-icon-settings;
+@include vf-p-icon-submit-bug;
+@include vf-p-icon-comments;
 
 // Utilities
 @include vf-u-text-muted;
diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss
index 59a93da..fcad1dc 100644
--- a/frontend/src/_utils.scss
+++ b/frontend/src/_utils.scss
@@ -18,6 +18,9 @@
 .u-flex--grow {
   flex-grow: 1 !important;
 }
+.u-flex--between {
+  justify-content: space-between !important;
+}
 .u-capitalize {
   text-transform: capitalize !important;
 }
diff --git a/frontend/src/components/Navigation/Navigation.test.tsx b/frontend/src/components/Navigation/Navigation.test.tsx
index e0609fc..1869406 100644
--- a/frontend/src/components/Navigation/Navigation.test.tsx
+++ b/frontend/src/components/Navigation/Navigation.test.tsx
@@ -1,6 +1,6 @@
 import { MemoryRouter } from "react-router-dom";
 
-import Navigation, { navItems, navBottomItems } from "./Navigation";
+import Navigation, { navItems, navMiddleItems } from "./Navigation";
 
 import { render, screen, userEvent } from "@/test-utils";
 
@@ -14,7 +14,7 @@ describe("Navigation", () => {
     expect(screen.getByRole("navigation")).toBeInTheDocument();
   });
 
-  [...navItems, ...navBottomItems].forEach(({ label, url }) => {
+  [...navItems, ...navMiddleItems].forEach(({ label, url }) => {
     it(`highlights ${label} navigation item when active`, () => {
       render(
         <MemoryRouter initialEntries={[{ pathname: url, key: "testKey" }]}>
diff --git a/frontend/src/components/Navigation/Navigation.tsx b/frontend/src/components/Navigation/Navigation.tsx
index a61ee34..156b616 100644
--- a/frontend/src/components/Navigation/Navigation.tsx
+++ b/frontend/src/components/Navigation/Navigation.tsx
@@ -16,21 +16,27 @@ export const navItems: NavLink[] = [
   },
 ];
 
-export const navBottomItems: NavLink[] = [
+export const navMiddleItems: NavLink[] = [
   { label: "Tokens", url: "/tokens" },
   { label: "Requests", url: "/requests" },
 ];
 
-const navItemsBottom: NavGroup[] = [
+const navItemsMiddle: NavGroup[] = [
   {
     groupTitle: "Enrolment",
     groupIcon: "settings",
-    navLinks: navBottomItems,
+    navLinks: navMiddleItems,
   },
 ];
 
 const navItemsAccount = [{ label: "Log out", url: "/logout" }];
 
+export const navItemsBottom: NavLink[] = [
+  { icon: "information", label: "Documentation", url: "https://maas.io/docs"; },
+  { icon: "comments", label: "Community", url: "https://discourse.maas.io/"; },
+  { icon: "submit-bug", label: "Report a bug", url: "/nowhere" }, // TODO: Replace this with actual link once known
+];
+
 const Navigation = (): JSX.Element => {
   const [isCollapsed, setIsCollapsed] = useLocalStorageState<boolean>("appSideNavIsCollapsed", { defaultValue: true });
   const location = useLocation();
@@ -61,19 +67,22 @@ const Navigation = (): JSX.Element => {
         className={classNames("l-navigation", { "is-collapsed": isCollapsed, "is-pinned": !isCollapsed })}
       >
         <div className="l-navigation__drawer">
-          <div className="p-panel is-dark">
-            <div className="p-panel__header is-sticky">
-              <NavigationBanner>
-                <div className="l-navigation__controls">
-                  <NavigationCollapseToggle isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
-                </div>
-              </NavigationBanner>
-            </div>
-            <div className="p-panel__content">
-              <NavigationList hasIcons isDark items={navItems} path={path} />
-              <NavigationList hasIcons isDark items={navItemsBottom} path={path} />
-              <NavigationList hasIcons isDark items={navItemsAccount} path={path} />
-            </div>
+          <div className="p-panel is-dark u-flex u-flex--column u-flex--between">
+            <span>
+              <div className="p-panel__header is-sticky">
+                <NavigationBanner>
+                  <div className="l-navigation__controls">
+                    <NavigationCollapseToggle isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
+                  </div>
+                </NavigationBanner>
+              </div>
+              <div className="p-panel__content">
+                <NavigationList hasIcons isDark items={navItems} path={path} />
+                <NavigationList hasIcons isDark items={navItemsMiddle} path={path} />
+                <NavigationList hasIcons isDark items={navItemsAccount} path={path} />
+              </div>
+            </span>
+            <NavigationList hasIcons isDark items={navItemsBottom} path={path} />
           </div>
         </div>
       </nav>

Follow ups