feat(sidebar): implement new design [EE-3447] (#7118)

app/react/sidebar/EnvironmentSidebar.tsx

@@ -1,5 +1,6 @@
-import { useCurrentStateAndParams } from '@uirouter/react';
+import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 import { useEffect, useState } from 'react';
+import { X } from 'react-feather';
 
 import {
   PlatformType,
@@ -9,59 +10,61 @@ import {
 import { getPlatformType } from '@/portainer/environments/utils';
 import { useEnvironment } from '@/portainer/environments/queries/useEnvironment';
 
+import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon';
+
 import { AzureSidebar } from './AzureSidebar';
 import { DockerSidebar } from './DockerSidebar';
 import { KubernetesSidebar } from './KubernetesSidebar';
 import { SidebarSection } from './SidebarSection';
-import styles from './EnvironmentSidebar.module.css';
+import { useSidebarState } from './useSidebarState';
 
 export function EnvironmentSidebar() {
-  const currentEnvironmentQuery = useCurrentEnvironment();
+  const { query: currentEnvironmentQuery, clearEnvironment } =
+    useCurrentEnvironment();
   const environment = currentEnvironmentQuery.data;
-
   if (!environment) {
     return null;
   }
 
   const platform = getPlatformType(environment.Type);
-  const sidebar = getSidebar(environment);
+  const Sidebar = getSidebar(platform);
 
   return (
-    <SidebarSection
-      title={
-        <div className={styles.title}>
-          <i className="fa fa-plug space-right" />
-          {environment.Name}
-        </div>
-      }
-      label={PlatformType[platform]}
-    >
-      {sidebar}
-    </SidebarSection>
+    <div className="rounded border border-dotted py-2 be:bg-gray-10 bg-blue-11 be:border-gray-8 border-blue-9">
+      <SidebarSection
+        title={PlatformType[platform]}
+        renderTitle={(className) => (
+          <Title
+            className={className}
+            environment={environment}
+            onClear={clearEnvironment}
+          />
+        )}
+      >
+        <Sidebar environmentId={environment.Id} environment={environment} />
+      </SidebarSection>
+    </div>
   );
 
-  function getSidebar(environment: Environment) {
-    switch (platform) {
-      case PlatformType.Azure:
-        return <AzureSidebar environmentId={environment.Id} />;
-      case PlatformType.Docker:
-        return (
-          <DockerSidebar
-            environmentId={environment.Id}
-            environment={environment}
-          />
-        );
-      case PlatformType.Kubernetes:
-        return <KubernetesSidebar environmentId={environment.Id} />;
-      default:
-        return null;
-    }
+  function getSidebar(platform: PlatformType) {
+    const sidebar: {
+      [key in PlatformType]: React.ComponentType<{
+        environmentId: EnvironmentId;
+        environment: Environment;
+      }>;
+    } = {
+      [PlatformType.Azure]: AzureSidebar,
+      [PlatformType.Docker]: DockerSidebar,
+      [PlatformType.Kubernetes]: KubernetesSidebar,
+    };
+
+    return sidebar[platform];
   }
 }
 
 function useCurrentEnvironment() {
   const { params } = useCurrentStateAndParams();
-
+  const router = useRouter();
   const [environmentId, setEnvironmentId] = useState<EnvironmentId>();
 
   useEffect(() => {
@@ -71,5 +74,50 @@ function useCurrentEnvironment() {
     }
   }, [params.endpointId]);
 
-  return useEnvironment(environmentId);
+  return { query: useEnvironment(environmentId), clearEnvironment };
+
+  function clearEnvironment() {
+    if (params.endpointId) {
+      router.stateService.go('portainer.home');
+    }
+
+    setEnvironmentId(undefined);
+  }
+}
+
+interface TitleProps {
+  className: string;
+  environment: Environment;
+  onClear(): void;
+}
+
+function Title({ className, environment, onClear }: TitleProps) {
+  const { isOpen } = useSidebarState();
+  const EnvironmentIcon = getPlatformIcon(environment.Type);
+
+  if (!isOpen) {
+    return (
+      <li className="w-full flex justify-center" title={environment.Name}>
+        <EnvironmentIcon className="text-2xl" />
+      </li>
+    );
+  }
+
+  return (
+    <li className={className}>
+      <div className="flex items-center gap-2">
+        <span>Environment</span>
+        <EnvironmentIcon className="text-2xl" />
+        <span className="text-white">{environment.Name}</span>
+
+        <button
+          type="button"
+          onClick={onClear}
+          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"
+        >
+          <X />
+        </button>
+      </div>
+    </li>
+  );
 }