fix(navigation): Prevent secondary navigation from displaying without auth MAASENG-1986

src/app/base/components/PageContent/PageContent.test.tsx

@@ -1,6 +1,15 @@
 import PageContent from "./PageContent";
 
-import { renderWithBrowserRouter, screen, within } from "testing/utils";
+import { preferencesNavItems } from "app/preferences/constants";
+import { settingsNavItems } from "app/settings/constants";
+import {
+  getTestState,
+  renderWithBrowserRouter,
+  screen,
+  within,
+} from "testing/utils";
+
+const state = getTestState();
 
 it("displays sidebar with provided content", () => {
   renderWithBrowserRouter(
@@ -29,3 +38,79 @@ it("displays hidden sidebar when no content provided", () => {
   );
   expect(screen.queryByRole("complementary")).toHaveClass("is-collapsed");
 });
+
+it("shows the secondary navigation for settings", () => {
+  state.status.authenticated = true;
+  state.status.connected = true;
+  renderWithBrowserRouter(
+    <PageContent
+      header="Settings"
+      sidePanelContent={null}
+      sidePanelTitle={null}
+    >
+      content
+    </PageContent>,
+    { route: "/settings/configuration/general", state }
+  );
+
+  expect(screen.getByRole("navigation")).toBeInTheDocument();
+
+  settingsNavItems.forEach((item) => {
+    expect(screen.getByText(item.label)).toBeInTheDocument();
+  });
+});
+
+it("shows the secondary navigation for preferences", () => {
+  state.status.authenticated = true;
+  state.status.connected = true;
+  renderWithBrowserRouter(
+    <PageContent
+      header="Preferences"
+      sidePanelContent={null}
+      sidePanelTitle={null}
+    >
+      content
+    </PageContent>,
+    { route: "/account/prefs/details", state }
+  );
+
+  expect(screen.getByRole("navigation")).toBeInTheDocument();
+
+  preferencesNavItems.forEach((item) => {
+    expect(screen.getByText(item.label)).toBeInTheDocument();
+  });
+});
+
+it("doesn't show the side nav if not authenticated", () => {
+  state.status.authenticated = false;
+  state.status.connected = true;
+  renderWithBrowserRouter(
+    <PageContent
+      header="Preferences"
+      sidePanelContent={null}
+      sidePanelTitle={null}
+    >
+      content
+    </PageContent>,
+    { route: "/account/prefs/details", state }
+  );
+
+  expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
+});
+
+it("doesn't show the side nav if not connected", () => {
+  state.status.authenticated = true;
+  state.status.connected = false;
+  renderWithBrowserRouter(
+    <PageContent
+      header="Preferences"
+      sidePanelContent={null}
+      sidePanelTitle={null}
+    >
+      content
+    </PageContent>,
+    { route: "/account/prefs/details", state }
+  );
+
+  expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
+});

src/app/base/components/PageContent/PageContent.tsx

@@ -1,6 +1,7 @@
 import type { HTMLProps, ReactNode } from "react";
 
 import classNames from "classnames";
+import { useSelector } from "react-redux";
 import { matchPath, useLocation } from "react-router-dom-v5-compat";
 
 import AppSidePanel from "../AppSidePanel";
@@ -11,6 +12,7 @@ import SecondaryNavigation from "../SecondaryNavigation";
 import { useThemeContext } from "app/base/theme-context";
 import { preferencesNavItems } from "app/preferences/constants";
 import { settingsNavItems } from "app/settings/constants";
+import status from "app/store/status/selectors";
 
 export type Props = {
   children?: ReactNode;
@@ -35,18 +37,21 @@ const PageContent = ({
   const { pathname } = useLocation();
   const isSettingsPage = matchPath("settings/*", pathname);
   const isPreferencesPage = matchPath("account/prefs/*", pathname);
-  const isSideNavVisible = isSettingsPage || isPreferencesPage;
+  const authenticated = useSelector(status.authenticated);
+  const connected = useSelector(status.connected);
+  const hasSecondaryNav = isSettingsPage || isPreferencesPage;
+  const isSecondaryNavVisible = hasSecondaryNav && authenticated && connected;
   const { theme } = useThemeContext();
 
   return (
     <>
       <main className="l-main">
-        {isSideNavVisible ? (
+        {isSecondaryNavVisible ? (
           <div
             className={classNames("l-main__nav", `is-maas-${theme}--accent`)}
           >
             <SecondaryNavigation
-              isOpen={!!isSideNavVisible}
+              isOpen={!!isSecondaryNavVisible}
               items={
                 isSettingsPage
                   ? settingsNavItems