console: pin the Admin nav group to the bottom of the side panel

The Admin group sat directly below the region-scoped nav items, so
whenever those items were hidden (no enabled environment, or a blocked
organization) it slid up to the top of the panel. Pin it to the bottom
instead, so account-scoped links keep a stable position regardless of
environment state.

Also hide the Create New button while no environment is ready. All of
its actions are disabled in that state, so it only added noise to the
pared-down panel.

Adds NavBar tests for the Admin group ordering and for the pared-down
no-environment state.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: jubrad

console/src/layouts/NavBar.test.tsx

@@ -0,0 +1,55 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0.
+
+import { screen } from "@testing-library/react";
+import React from "react";
+
+import server from "~/api/mocks/server";
+import {
+  disabledEnvironment,
+  healthyEnvironment,
+  renderComponent,
+  setFakeEnvironment,
+} from "~/test/utils";
+
+import { NavBar } from "./NavBar";
+
+describe("NavBar", () => {
+  afterEach(() => {
+    server.resetHandlers();
+    vi.clearAllMocks();
+  });
+
+  it("renders the Admin group after the region-scoped items", async () => {
+    await renderComponent(<NavBar isCollapsed={false} />, {
+      initializeState: ({ set }) =>
+        setFakeEnvironment(set, "aws/us-east-1", healthyEnvironment),
+    });
+    const clusters = await screen.findByText("Clusters");
+    const admin = screen.getByText("Admin");
+    // Admin is pinned to the bottom of the menu, so it must come after the
+    // region-scoped items in document order.
+    expect(
+      clusters.compareDocumentPosition(admin) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(screen.getByText("Create New")).toBeInTheDocument();
+  });
+
+  it("hides the create button and region items without an enabled environment", async () => {
+    await renderComponent(<NavBar isCollapsed={false} />, {
+      initializeState: ({ set }) =>
+        setFakeEnvironment(set, "aws/us-east-1", disabledEnvironment),
+    });
+    expect(await screen.findByText("Admin")).toBeInTheDocument();
+    expect(screen.queryByText("Create New")).not.toBeInTheDocument();
+    expect(screen.queryByText("Clusters")).not.toBeInTheDocument();
+    expect(screen.queryByText("SQL Shell")).not.toBeInTheDocument();
+  });
+});

console/src/layouts/NavBar.tsx

@@ -236,7 +236,9 @@ export const NavBar = ({ isCollapsed }: NavBarProps) => {
             />
           </Box>
         )}
-        <CreateObjectButton isCollapsed={isCollapsed} />
+        <HideIfEnvironmentDisabled>
+          <CreateObjectButton isCollapsed={isCollapsed} />
+        </HideIfEnvironmentDisabled>
         <AppConfigSwitch
           cloudConfigElement={({ runtimeConfig }) => (
             <CloudNavMenu
@@ -249,7 +251,6 @@ export const NavBar = ({ isCollapsed }: NavBarProps) => {
             <SelfManagedNavMenu isCollapsed={isCollapsed} isMobile={false} />
           }
         />
-        {!isMobile && <Spacer />}
         {!isMobile && !isCollapsed && (
           <FreeTrialNotice mb="4" mx={{ lg: "4" }} />
         )}

console/src/layouts/NavBar/NavMenu.tsx

@@ -50,6 +50,8 @@ export type NavItemType = {
   navItems?: NavItemType[];
   onClick?: () => void;
   forceShow?: boolean;
+  /** Renders the item at the bottom of the nav menu, below a spacer. */
+  pinToBottom?: boolean;
 };
 
 const getNavItems = ({
@@ -144,6 +146,7 @@ const getNavItems = ({
       icon: <AdminIcon />,
       label: "Admin",
       forceShow: true,
+      pinToBottom: true,
       navItems: [
         ...(canViewAppPasswords
           ? [
@@ -253,9 +256,17 @@ const useSelfManagedNavMenuItems = () => {
 };
 
 const NavMenu = (props: { isCollapsed?: boolean; items: NavItemType[] }) => {
+  const topItems = props.items.filter((item) => !item.pinToBottom);
+  const bottomItems = props.items.filter((item) => item.pinToBottom);
   return (
     <NavMenuContainer>
-      {props.items.map((item) => (
+      {topItems.map((item) => (
+        <HideIfEnvironmentDisabled key={item.label} forceShow={item.forceShow}>
+          <NavItem key={item.label} {...item} isCollapsed={props.isCollapsed} />
+        </HideIfEnvironmentDisabled>
+      ))}
+      <Spacer />
+      {bottomItems.map((item) => (
         <HideIfEnvironmentDisabled key={item.label} forceShow={item.forceShow}>
           <NavItem key={item.label} {...item} isCollapsed={props.isCollapsed} />
         </HideIfEnvironmentDisabled>
@@ -285,16 +296,30 @@ const NavMenuMobile = (props: {
       overflowY="auto"
     >
       <VStack px="4" py="6">
-        {props.items.map((item) => (
-          <HideIfEnvironmentDisabled
-            key={item.label}
-            forceShow={item.forceShow}
-          >
-            <NavItem key={item.label} closeMenu={props.closeMenu} {...item} />
-          </HideIfEnvironmentDisabled>
-        ))}
+        {props.items
+          .filter((item) => !item.pinToBottom)
+          .map((item) => (
+            <HideIfEnvironmentDisabled
+              key={item.label}
+              forceShow={item.forceShow}
+            >
+              <NavItem key={item.label} closeMenu={props.closeMenu} {...item} />
+            </HideIfEnvironmentDisabled>
+          ))}
       </VStack>
       <Spacer />
+      <VStack px="4" pb="2">
+        {props.items
+          .filter((item) => item.pinToBottom)
+          .map((item) => (
+            <HideIfEnvironmentDisabled
+              key={item.label}
+              forceShow={item.forceShow}
+            >
+              <NavItem key={item.label} closeMenu={props.closeMenu} {...item} />
+            </HideIfEnvironmentDisabled>
+          ))}
+      </VStack>
       <VStack align="stretch">
         <FreeTrialNotice />
         <VStack>