sts-sponsors team mailing list archive
-
sts-sponsors team
-
Mailing list archive
-
Message #07102
[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