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

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>
     </>
   );
 }