fix(sidebar): qa feedback [EE-5666] (#10452)

app/assets/css/app.css

@@ -19,6 +19,12 @@ html {
   overflow-y: scroll;
 }
 
+html[theme='dark'],
+html[theme='highcontrast'] {
+  /* make the scrollbars dark theme when in the dark modes */
+  color-scheme: dark;
+}
+
 body {
   background: var(--bg-body-color);
   font-family: 'Inter';

app/react/sidebar/DockerSidebar.tsx

@@ -4,11 +4,11 @@ import {
   Layers,
   List,
   Lock,
-  Share2,
   Shuffle,
   Trello,
   Clipboard,
   Edit,
+  Network,
 } from 'lucide-react';
 
 import {
@@ -136,7 +136,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
       <SidebarItem
         to="docker.networks"
         params={{ endpointId: environmentId }}
-        icon={Share2}
+        icon={Network}
         label="Networks"
         data-cy="dockerSidebar-networks"
       />

app/react/sidebar/SettingsSidebar.tsx

@@ -29,7 +29,7 @@ export function SettingsSidebar({ isAdmin, isTeamLeader }: Props) {
     !window.ddExtension && (isAdmin || (isTeamLeader && !teamSyncQuery.data));
 
   return (
-    <SidebarSection title="Settings">
+    <SidebarSection title="Administration">
       {showUsersSection && (
         <SidebarParent
           label="User-related"

app/react/sidebar/SidebarItem/Menu.tsx

@@ -1,99 +0,0 @@
-import { useCurrentStateAndParams } from '@uirouter/react';
-import {
-  Children,
-  PropsWithChildren,
-  ReactNode,
-  useMemo,
-  useReducer,
-} from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-
-import { useSidebarState } from '../useSidebarState';
-
-import { getPaths } from './utils';
-
-interface Props {
-  head: ReactNode;
-  openOnPaths?: string[];
-}
-
-export function Menu({
-  children,
-  head,
-  openOnPaths = [],
-}: PropsWithChildren<Props>) {
-  const { isOpen: isSidebarOpen } = useSidebarState();
-
-  const paths = useMemo(
-    () => [...getPaths(head, []), ...openOnPaths],
-    [openOnPaths, head]
-  );
-
-  const { isOpen, toggleOpen } = useIsOpen(isSidebarOpen, paths);
-
-  const CollapseButtonIcon = isOpen ? ChevronUp : ChevronDown;
-
-  if (!isSidebarOpen) {
-    return head as JSX.Element;
-  }
-
-  return (
-    <div className="flex-1">
-      <div className="relative flex w-full items-center justify-between ">
-        {head}
-        {isSidebarOpen && Children.count(children) > 0 && (
-          <button
-            className="absolute right-2 flex h-6 w-6 items-center justify-center border-0 bg-transparent text-gray-5"
-            onClick={handleClickArrow}
-            type="button"
-            aria-label="Collapse button"
-          >
-            <CollapseButtonIcon className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-
-      {isOpen && <ul className="!pl-11">{children}</ul>}
-    </div>
-  );
-
-  function handleClickArrow(e: React.MouseEvent<HTMLButtonElement>) {
-    e.preventDefault();
-    e.stopPropagation();
-    toggleOpen();
-  }
-}
-
-function useIsOpen(
-  isSidebarOpen: boolean,
-
-  paths: string[] = []
-) {
-  const { state } = useCurrentStateAndParams();
-  const currentStateName = state.name || '';
-  const isOpenByState = paths.some((path) => currentStateName.startsWith(path));
-
-  const [forceOpen, toggleForceOpen] = useReducer((state) => !state, false);
-
-  const isOpen = checkIfOpen();
-
-  return { isOpen, toggleOpen };
-
-  function toggleOpen() {
-    if (!isOpenByState) {
-      toggleForceOpen();
-    }
-  }
-
-  function checkIfOpen() {
-    if (!isSidebarOpen) {
-      return false;
-    }
-
-    if (forceOpen) {
-      return true;
-    }
-
-    return isOpenByState;
-  }
-}

app/react/sidebar/SidebarItem/SidebarParent.tsx

@@ -63,7 +63,7 @@ export function SidebarParent({
             to={to}
             params={params}
             className={clsx(
-              'w-full h-full font-medium items-center flex list-none border-none text-gray-5 hover:text-gray-5 hover:no-underline focus:text-gray-5 focus:no-underline',
+              'w-full h-full font-medium items-center flex list-none border-none text-inherit hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
               {
                 'justify-start': isSidebarOpen,
                 'justify-center': !isSidebarOpen,

app/react/sidebar/SidebarItem/index.ts

@@ -1,14 +1,11 @@
 import { SidebarItem as MainComponent } from './SidebarItem';
-import { Menu } from './Menu';
 import { Wrapper } from './Wrapper';
 
 interface SubComponents {
-  Menu: typeof Menu;
   Wrapper: typeof Wrapper;
 }
 
 export const SidebarItem: typeof MainComponent & SubComponents =
   MainComponent as typeof MainComponent & SubComponents;
 
-SidebarItem.Menu = Menu;
 SidebarItem.Wrapper = Wrapper;