refactor(azure/aci): migrate sidebar to react [EE-2569] (#6593)

* refactor(azure/aci): migrate sidebar to react [EE-2569]

* add test files

* add story

* fix(sidebar): get styles from sidebar

* make suggested changes + update icon story

* use template in second story + change some english

* use camel case in test

* use icon instead of span

* refactor(types): use existing environmentid type

Co-authored-by: Chaim Lev-Ari <chiptus@gmail.com>

app/azure/AzureSidebar/AzureSidebar.test.tsx

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,36 @@
+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

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

app/azure/_module.js

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

app/azure/components/azure-sidebar/azure-sidebar.html

@@ -1,19 +0,0 @@
-<sidebar-menu-item
-  path="azure.dashboard"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-tachometer-alt fa-fw"
-  class-name="sidebar-list"
-  data-cy="azureSidebar-dashboard"
->
-  Dashboard
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  path="azure.containerinstances"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-cubes fa-fw"
-  class-name="sidebar-list"
-  data-cy="azureSidebar-containerInstances"
->
-  Container instances
-</sidebar-menu-item>

app/azure/components/azure-sidebar/index.js

@@ -1,8 +0,0 @@
-import angular from 'angular';
-
-angular.module('portainer.azure').component('azureSidebar', {
-  templateUrl: './azure-sidebar.html',
-  bindings: {
-    endpointId: '<',
-  },
-});