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

@@ -1,34 +0,0 @@
-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('ContainerInstances');
-  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() {
-  return render(<AzureSidebar environmentId={1} />);
-}

app/azure/AzureSidebar/AzureSidebar.tsx

@@ -1,36 +0,0 @@
-import { r2a } from '@/react-tools/react2angular';
-import { SidebarMenuItem } from '@/portainer/components/sidebar/SidebarMenuItem';
-import type { EnvironmentId } from '@/portainer/environments/types';
-
-interface Props {
-  environmentId: EnvironmentId;
-}
-
-export function AzureSidebar({ environmentId }: Props) {
-  return (
-    <>
-      <SidebarMenuItem
-        path="azure.dashboard"
-        pathParams={{ endpointId: environmentId }}
-        iconClass="fa-tachometer-alt fa-fw"
-        className="sidebar-list"
-        itemName="Dashboard"
-        data-cy="azureSidebar-dashboard"
-      >
-        Dashboard
-      </SidebarMenuItem>
-      <SidebarMenuItem
-        path="azure.containerinstances"
-        pathParams={{ endpointId: environmentId }}
-        iconClass="fa-cubes fa-fw"
-        className="sidebar-list"
-        itemName="ContainerInstances"
-        data-cy="azureSidebar-containerInstances"
-      >
-        Container instances
-      </SidebarMenuItem>
-    </>
-  );
-}
-
-export const AzureSidebarAngular = r2a(AzureSidebar, ['environmentId']);

app/azure/AzureSidebar/index.ts

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

app/azure/_module.js

@@ -1,6 +1,5 @@
 import angular from 'angular';
 
-import { AzureSidebarAngular } from './AzureSidebar/AzureSidebar';
 import { DashboardViewAngular } from './Dashboard/DashboardView';
 import { containerInstancesModule } from './ContainerInstances';
 import { reactModule } from './react';
@@ -84,5 +83,4 @@ angular
       $stateRegistryProvider.register(dashboard);
     },
   ])
-  .component('azureSidebar', AzureSidebarAngular)
   .component('dashboardView', DashboardViewAngular);