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/AzureSidebar/AzureSidebar.test.tsx

@@ -0,0 +1,42 @@
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { render, within } from '@/react-tools/test-utils';
+
+import { AzureSidebar } from './AzureSidebar';
+
+test('dashboard items should render correctly', () => {
+  const { getByLabelText } = renderComponent();
+  const dashboardItem = getByLabelText('Dashboard');
+  expect(dashboardItem).toBeVisible();
+  expect(dashboardItem).toHaveTextContent('Dashboard');
+
+  const dashboardItemElements = within(dashboardItem);
+  expect(dashboardItemElements.getByLabelText('itemIcon')).toBeVisible();
+  expect(dashboardItemElements.getByLabelText('itemIcon')).toHaveClass(
+    'fa-tachometer-alt',
+    'fa-fw'
+  );
+
+  const containerInstancesItem = getByLabelText(/Container Instances/i);
+  expect(containerInstancesItem).toBeVisible();
+  expect(containerInstancesItem).toHaveTextContent('Container instances');
+
+  const containerInstancesItemElements = within(containerInstancesItem);
+  expect(
+    containerInstancesItemElements.getByLabelText('itemIcon')
+  ).toBeVisible();
+  expect(containerInstancesItemElements.getByLabelText('itemIcon')).toHaveClass(
+    'fa-cubes',
+    'fa-fw'
+  );
+});
+
+function renderComponent() {
+  const user = new UserViewModel({ Username: 'user' });
+
+  return render(
+    <UserContext.Provider value={{ user }}>
+      <AzureSidebar environmentId={1} />
+    </UserContext.Provider>
+  );
+}

app/react/sidebar/AzureSidebar/AzureSidebar.tsx

@@ -0,0 +1,26 @@
+import { EnvironmentId } from '@/portainer/environments/types';
+
+import { SidebarItem } from '../SidebarItem';
+
+interface Props {
+  environmentId: EnvironmentId;
+}
+
+export function AzureSidebar({ environmentId }: Props) {
+  return (
+    <>
+      <SidebarItem
+        to="azure.dashboard"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-tachometer-alt fa-fw"
+        label="Dashboard"
+      />
+      <SidebarItem
+        to="azure.containerinstances"
+        params={{ endpointId: environmentId }}
+        iconClass="fa-cubes fa-fw"
+        label="Container instances"
+      />
+    </>
+  );
+}

app/react/sidebar/AzureSidebar/index.ts

@@ -0,0 +1 @@
+export { AzureSidebar } from './AzureSidebar';