fix(sidebar): sort issues [EE-3447] (#7147)

app/react/sidebar/EnvironmentSidebar.tsx

@@ -1,6 +1,6 @@
 import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { useEffect, useState } from 'react';
-import { X } from 'react-feather';
+import { X, Slash } from 'react-feather';
 
 import {
   PlatformType,
@@ -15,35 +15,56 @@ import { getPlatformIcon } from '../portainer/environments/utils/get-platform-ic
 import { AzureSidebar } from './AzureSidebar';
 import { DockerSidebar } from './DockerSidebar';
 import { KubernetesSidebar } from './KubernetesSidebar';
-import { SidebarSection } from './SidebarSection';
+import { SidebarSection, SidebarSectionTitle } from './SidebarSection';
 import { useSidebarState } from './useSidebarState';
 
 export function EnvironmentSidebar() {
   const { query: currentEnvironmentQuery, clearEnvironment } =
     useCurrentEnvironment();
   const environment = currentEnvironmentQuery.data;
-  if (!environment) {
+
+  const { isOpen } = useSidebarState();
+
+  if (!isOpen && !environment) {
     return null;
   }
 
+  return (
+    <div className="rounded border border-dotted py-2 be:bg-gray-10 bg-blue-11 be:border-gray-8 border-blue-9">
+      {environment ? (
+        <Content environment={environment} onClear={clearEnvironment} />
+      ) : (
+        <SidebarSectionTitle>
+          <div className="flex items-center gap-1">
+            <span>Environment:</span>
+            <Slash size="1em" className="text-xl text-gray-6" />
+            <span className="text-gray-6 text-sm">None selected</span>
+          </div>
+        </SidebarSectionTitle>
+      )}
+    </div>
+  );
+}
+
+interface ContentProps {
+  environment: Environment;
+  onClear: () => void;
+}
+
+function Content({ environment, onClear }: ContentProps) {
   const platform = getPlatformType(environment.Type);
   const Sidebar = getSidebar(platform);
 
   return (
-    <div className="rounded border border-dotted py-2 be:bg-gray-10 bg-blue-11 be:border-gray-8 border-blue-9">
+    <SidebarSection
-      <SidebarSection
+      title={<Title environment={environment} onClear={onClear} />}
-        title={PlatformType[platform]}
+      aria-label={environment.Name}
-        renderTitle={(className) => (
+      showTitleWhenOpen
-          <Title
+    >
-            className={className}
+      <div className="mt-2">
-            environment={environment}
-            onClear={clearEnvironment}
-          />
-        )}
-      >
         <Sidebar environmentId={environment.Id} environment={environment} />
-      </SidebarSection>
+      </div>
-    </div>
+    </SidebarSection>
   );
 
   function getSidebar(platform: PlatformType) {
@@ -86,38 +107,38 @@ function useCurrentEnvironment() {
 }
 
 interface TitleProps {
-  className: string;
   environment: Environment;
   onClear(): void;
 }
 
-function Title({ className, environment, onClear }: TitleProps) {
+function Title({ environment, onClear }: TitleProps) {
   const { isOpen } = useSidebarState();
+
   const EnvironmentIcon = getPlatformIcon(environment.Type);
 
   if (!isOpen) {
     return (
-      <li className="w-full flex justify-center" title={environment.Name}>
+      <div className="w-8 flex justify-center -ml-3" title={environment.Name}>
         <EnvironmentIcon className="text-2xl" />
-      </li>
+      </div>
     );
   }
 
   return (
-    <li className={className}>
+    <div className="flex items-center">
-      <div className="flex items-center gap-2">
+      <EnvironmentIcon className="text-2xl mr-3" />
-        <span>Environment</span>
+      <span className="text-white text-ellipsis overflow-hidden whitespace-nowrap">
-        <EnvironmentIcon className="text-2xl" />
+        {environment.Name}
-        <span className="text-white">{environment.Name}</span>
+      </span>
 
-        <button
+      <button
-          type="button"
+        title="Clear environment"
-          onClick={onClear}
+        type="button"
-          className="flex items-center justify-center be:bg-gray-9 bg-blue-10 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white"
+        onClick={onClear}
-        >
+        className="flex items-center justify-center be:bg-gray-9 bg-blue-10 hover:bg-blue-9 be:hover:bg-gray-7 transition-colors duration-200 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white be:hover:text-white"
-          <X />
+      >
-        </button>
+        <X />
-      </div>
+      </button>
-    </li>
+    </div>
   );
 }

app/react/sidebar/Header.tsx

@@ -18,7 +18,7 @@ export function Header({ logo }: Props) {
       <Link
         to="portainer.home"
         data-cy="portainerSidebar-homeImage"
-        className="text-2xl text-white no-underline hover:no-underline hover:text-white"
+        className="text-2xl text-white no-underline hover:no-underline hover:text-white focus:no-underline focus:text-white focus:outline-none"
       >
         <img
           src={logo || defaultLogo}
@@ -31,7 +31,7 @@ export function Header({ logo }: Props) {
       <button
         type="button"
         onClick={() => toggle()}
-        className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm be:bg-gray-10 bg-blue-11 hover:text-white be:hover:text-white"
+        className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm bg-blue-11 hover:bg-blue-10 be:bg-gray-10 be:hover:bg-gray-8 transition-colors duration-200  hover:text-white be:hover:text-white"
         aria-label="Toggle Sidebar"
         title="Toggle Sidebar"
       >

app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx

@@ -19,7 +19,11 @@ export function KubernetesSidebar({ environmentId }: Props) {
 
   return (
     <>
-      {isOpen && <KubectlShellButton environmentId={environmentId} />}
+      {isOpen && (
+        <div className="mb-3">
+          <KubectlShellButton environmentId={environmentId} />
+        </div>
+      )}
 
       <DashboardLink
         environmentId={environmentId}

app/react/sidebar/SidebarItem/Head.tsx

@@ -5,6 +5,7 @@ import {
 } from '@uirouter/react';
 import clsx from 'clsx';
 import { ComponentProps } from 'react';
+import ReactTooltip from 'react-tooltip';
 
 import { AutomationTestingProps } from '@/types';
 
@@ -43,25 +44,32 @@ export function Head({
     <a
       href={anchorProps.href}
       onClick={anchorProps.onClick}
-      title={label}
       className={clsx(
         anchorProps.className,
-        'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit w-full flex-1 rounded-md',
+        'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit',
-        { 'px-3': isOpen }
+        'w-full flex-1 rounded-md flex items-center h-8 space-x-4 text-sm',
+        'hover:bg-blue-9 be:hover:bg-gray-9 transition-colors duration-200',
+        {
+          'px-3 justify-start w-full': isOpen,
+          'justify-center w-8': !isOpen,
+        }
       )}
+      data-tip={label}
       data-cy={dataCy}
     >
-      <div
+      {!!icon && (
-        className={clsx('flex items-center h-8 space-x-4 text-sm', {
+        <Icon icon={icon} feather className={clsx('flex [&>svg]:w-4')} />
-          'justify-start w-full': isOpen,
+      )}
-          'justify-center w-8': !isOpen,
+      {isOpen && <span>{label}</span>}
-        })}
+
-      >
+      <ReactTooltip
-        {!!icon && (
+        type="info"
-          <Icon icon={icon} feather className={clsx('flex [&>svg]:w-4')} />
+        place="right"
-        )}
+        effect="solid"
-        {isOpen && <span>{label}</span>}
+        className="!opacity-100 bg-blue-9 be:bg-gray-9 !rounded-md !py-1 !px-2"
-      </div>
+        arrowColor="transparent"
+        disable={isOpen}
+      />
     </a>
   );
 }
@@ -73,7 +81,7 @@ function useSrefActive(
   options: TransitionOptions = {},
   ignorePaths: string[] = []
 ) {
-  const { state } = useCurrentStateAndParams();
+  const { state: { name: stateName = '' } = {} } = useCurrentStateAndParams();
   const anchorProps = useUiRouterSrefActive(
     to,
     params || {},
@@ -81,7 +89,7 @@ function useSrefActive(
     options
   );
 
-  const className = ignorePaths.includes(state.name || '')
+  const className = ignorePaths.some((path) => stateName.includes(path))
     ? ''
     : anchorProps.className;
 

app/react/sidebar/SidebarItem/Wrapper.tsx

@@ -19,7 +19,6 @@ export function Wrapper({
         className,
         'text-gray-3 min-h-8 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
       )}
-      title={label}
       aria-label={label}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...ariaProps}

app/react/sidebar/SidebarSection.tsx

@@ -3,28 +3,50 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { useSidebarState } from './useSidebarState';
 
 interface Props {
-  title: string;
+  title: ReactNode;
-  renderTitle?: (className: string) => ReactNode;
+  showTitleWhenOpen?: boolean;
+  'aria-label'?: string;
 }
 
 export function SidebarSection({
   title,
-  renderTitle,
   children,
+  showTitleWhenOpen,
+  'aria-label': ariaLabel,
 }: PropsWithChildren<Props>) {
-  const { isOpen } = useSidebarState();
-  const titleClassName =
-    'ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out';
-
   return (
     <div>
-      {renderTitle
+      <SidebarSectionTitle showWhenOpen={showTitleWhenOpen}>
-        ? renderTitle(titleClassName)
+        {title}
-        : isOpen && <li className={titleClassName}>{title}</li>}
+      </SidebarSectionTitle>
 
-      <nav aria-label={title} className="mt-4">
+      <nav
+        aria-label={typeof title === 'string' ? title : ariaLabel}
+        className="mt-4"
+      >
         <ul>{children}</ul>
       </nav>
     </div>
   );
 }
+
+interface TitleProps {
+  showWhenOpen?: boolean;
+}
+
+export function SidebarSectionTitle({
+  showWhenOpen,
+  children,
+}: PropsWithChildren<TitleProps>) {
+  const { isOpen } = useSidebarState();
+
+  if (!isOpen && !showWhenOpen) {
+    return null;
+  }
+
+  return (
+    <li className="ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out">
+      {children}
+    </li>
+  );
+}