feat(sidebar): update menu structure [EE-5666] (#10418)

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.module.css

@@ -1,5 +0,0 @@
-.root {
-  display: block;
-  margin: -5px auto -8px auto;
-  padding-bottom: 5px;
-}

app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx

@@ -1,37 +1,53 @@
-import clsx from 'clsx';
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Terminal } from 'lucide-react';
+import clsx from 'clsx';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { useAnalytics } from '@/react/hooks/useAnalytics';
 
 import { Button } from '@@/buttons';
-import { Icon } from '@@/Icon';
+
+import { useSidebarState } from '../../useSidebarState';
+import { SidebarTooltip } from '../../SidebarItem/SidebarTooltip';
 
 import { KubeCtlShell } from './KubectlShell';
-import styles from './KubectlShellButton.module.css';
 
 interface Props {
   environmentId: EnvironmentId;
 }
 export function KubectlShellButton({ environmentId }: Props) {
+  const { isOpen: isSidebarOpen } = useSidebarState();
+
   const [open, setOpen] = useState(false);
   const { trackEvent } = useAnalytics();
+
+  const button = (
+    <Button
+      color="primary"
+      size="small"
+      disabled={open}
+      data-cy="k8sSidebar-shellButton"
+      onClick={() => handleOpen()}
+      className={clsx('sidebar', !isSidebarOpen && '!p-1')}
+      icon={Terminal}
+    >
+      {isSidebarOpen ? 'kubectl shell' : ''}
+    </Button>
+  );
+
   return (
     <>
-      <Button
-        color="primary"
-        size="small"
-        disabled={open}
-        data-cy="k8sSidebar-shellButton"
-        onClick={() => handleOpen()}
-        className={clsx(styles.root, '!flex')}
-      >
-        <Icon icon={Terminal} className="vertical-center" size="md" /> kubectl
-        shell
-      </Button>
-
+      {!isSidebarOpen && (
+        <SidebarTooltip
+          content={
+            <span className="text-sm whitespace-nowrap">Kubectl Shell</span>
+          }
+        >
+          <span className="flex w-full justify-center">{button}</span>
+        </SidebarTooltip>
+      )}
+      {isSidebarOpen && button}
       {open &&
         createPortal(
           <KubeCtlShell

app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx

@@ -1,13 +1,13 @@
-import { Box, Edit, Layers, Lock, Server, Shuffle } from 'lucide-react';
+import { Box, Edit, Layers, Lock, Network, Server } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { Authorized } from '@/react/hooks/useUser';
-import Route from '@/assets/ico/route.svg?c';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { DashboardLink } from '../items/DashboardLink';
 import { SidebarItem } from '../SidebarItem';
 import { VolumesLink } from '../items/VolumesLink';
-import { useSidebarState } from '../useSidebarState';
+import { SidebarParent } from '../SidebarItem/SidebarParent';
 
 import { KubectlShellButton } from './KubectlShell';
 
@@ -16,15 +16,11 @@ interface Props {
 }
 
 export function KubernetesSidebar({ environmentId }: Props) {
-  const { isOpen } = useSidebarState();
-
   return (
     <>
-      {isOpen && (
-        <div className="mb-3">
-          <KubectlShellButton environmentId={environmentId} />
-        </div>
-      )}
+      <div className="w-full flex mb-2 justify-center -mt-2">
+        <KubectlShellButton environmentId={environmentId} />
+      </div>
 
       <DashboardLink
         environmentId={environmentId}
@@ -56,21 +52,30 @@ export function KubernetesSidebar({ environmentId }: Props) {
         data-cy="k8sSidebar-applications"
       />
 
-      <SidebarItem
+      <SidebarParent
+        label="Networking"
+        icon={Network}
         to="kubernetes.services"
         params={{ endpointId: environmentId }}
-        label="Services"
-        data-cy="k8sSidebar-services"
-        icon={Shuffle}
-      />
+        pathOptions={{ includePaths: ['kubernetes.ingresses'] }}
+        data-cy="k8sSidebar-networking"
+      >
+        <SidebarItem
+          to="kubernetes.services"
+          params={{ endpointId: environmentId }}
+          label="Services"
+          isSubMenu
+          data-cy="k8sSidebar-services"
+        />
 
-      <SidebarItem
-        to="kubernetes.ingresses"
-        params={{ endpointId: environmentId }}
-        label="Ingresses"
-        data-cy="k8sSidebar-ingresses"
-        icon={Route}
-      />
+        <SidebarItem
+          to="kubernetes.ingresses"
+          params={{ endpointId: environmentId }}
+          label="Ingresses"
+          isSubMenu
+          data-cy="k8sSidebar-ingresses"
+        />
+      </SidebarParent>
 
       <SidebarItem
         to="kubernetes.configurations"
@@ -86,13 +91,25 @@ export function KubernetesSidebar({ environmentId }: Props) {
         data-cy="k8sSidebar-volumes"
       />
 
-      <SidebarItem
+      <SidebarParent
         label="Cluster"
-        to="kubernetes.cluster"
         icon={Server}
+        to="kubernetes.cluster"
         params={{ endpointId: environmentId }}
+        pathOptions={{ includePaths: ['kubernetes.registries'] }}
         data-cy="k8sSidebar-cluster"
       >
+        <SidebarItem
+          label="Details"
+          to="kubernetes.cluster"
+          ignorePaths={[
+            'kubernetes.cluster.setup',
+            'kubernetes.cluster.securityConstraint',
+          ]}
+          params={{ endpointId: environmentId }}
+          isSubMenu
+          data-cy="k8sSidebar-clusterDetails"
+        />
         <Authorized
           authorizations="K8sClusterSetupRW"
           adminOnlyCE
@@ -102,6 +119,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
             to="kubernetes.cluster.setup"
             params={{ endpointId: environmentId }}
             label="Setup"
+            isSubMenu
             data-cy="k8sSidebar-setup"
           />
         </Authorized>
@@ -115,17 +133,35 @@ export function KubernetesSidebar({ environmentId }: Props) {
             to="kubernetes.cluster.securityConstraint"
             params={{ endpointId: environmentId }}
             label="Security constraints"
+            isSubMenu
             data-cy="k8sSidebar-securityConstraints"
           />
         </Authorized>
 
+        {isBE && (
+          <Authorized
+            authorizations="K8sClusterSetupRW"
+            adminOnlyCE
+            environmentId={environmentId}
+          >
+            <SidebarItem
+              to="kubernetes.cluster.securityConstraint"
+              params={{ endpointId: environmentId }}
+              label="Security Constraints"
+              isSubMenu
+              data-cy="k8sSidebar-securityConstraints"
+            />
+          </Authorized>
+        )}
+
         <SidebarItem
           to="kubernetes.registries"
           params={{ endpointId: environmentId }}
           label="Registries"
+          isSubMenu
           data-cy="k8sSidebar-registries"
         />
-      </SidebarItem>
+      </SidebarParent>
     </>
   );
 }