refactor(sidebar): migrate sidebar to react [EE-2907] (#6725)

* refactor(sidebar): migrate sidebar to react [EE-2907]

fixes [EE-2907]

feat(sidebar): show label for help

fix(sidebar): apply changes from ddExtension

fix(sidebar): resolve conflicts

style(ts): add explanation for ddExtension

fix(sidebar): use enum for status

refactor(sidebar): rename to EdgeComputeSidebar

refactor(sidebar): removed the need of `ident` prop

style(sidebar): add ref for mobile breakpoint

refactor(app): document testing props

refactor(sidebar): use single sidebar item

refactor(sidebar): use section for nav

refactor(sidebar): rename sidebarlink to link

refactor(sidebar): memoize menu paths

fix(kubectl-shell): infinite loop on hooks dependencies

refactor(sidebar): use authorized element

feat(k8s/shell): track open shell

refactor(k8s/shell): remove memoization

refactor(settings): move settings queries to queries

fix(sidebar): close sidebar on mobile

refactor(settings): use mutation helpers

refactor(sidebar): remove memo

refactor(sidebar): rename sidebar item for storybook

refactor(sidebar): move to react

gprefactor(sidebar): remove dependence on EndProvider

feat(environments): rename settings type

feat(kube): move kubeconfig button

fix(sidebar): open submenus

fix(sidebar): open on expand

fix(sibebar): show kube shell correctly

* fix(sidebar): import from react component

* chore(tests): fix missing prop

app/react/sidebar/EnvironmentSidebar.tsx

@@ -0,0 +1,75 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { useEffect, useState } from 'react';
+
+import {
+  PlatformType,
+  EnvironmentId,
+  Environment,
+} from '@/portainer/environments/types';
+import { getPlatformType } from '@/portainer/environments/utils';
+import { useEnvironment } from '@/portainer/environments/queries/useEnvironment';
+
+import { AzureSidebar } from './AzureSidebar';
+import { DockerSidebar } from './DockerSidebar';
+import { KubernetesSidebar } from './KubernetesSidebar';
+import { SidebarSection } from './SidebarSection';
+import styles from './EnvironmentSidebar.module.css';
+
+export function EnvironmentSidebar() {
+  const currentEnvironmentQuery = useCurrentEnvironment();
+  const environment = currentEnvironmentQuery.data;
+
+  if (!environment) {
+    return null;
+  }
+
+  const platform = getPlatformType(environment.Type);
+  const sidebar = getSidebar(environment);
+
+  return (
+    <SidebarSection
+      title={
+        <div className={styles.title}>
+          <i className="fa fa-plug space-right" />
+          {environment.Name}
+        </div>
+      }
+      label={PlatformType[platform]}
+    >
+      {sidebar}
+    </SidebarSection>
+  );
+
+  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 useCurrentEnvironment() {
+  const { params } = useCurrentStateAndParams();
+
+  const [environmentId, setEnvironmentId] = useState<EnvironmentId>();
+
+  useEffect(() => {
+    const environmentId = parseInt(params.endpointId, 10);
+    if (params.endpointId && !Number.isNaN(environmentId)) {
+      setEnvironmentId(environmentId);
+    }
+  }, [params.endpointId]);
+
+  return useEnvironment(environmentId);
+}