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/portainer/components/sidebar/SidebarMenuItem/SidebarMenuItem.module.css

@@ -0,0 +1,4 @@
+.sidebar-menu-item > a {
+  display: flex;
+  justify-content: space-between;
+}

app/portainer/components/sidebar/SidebarMenuItem/SidebarMenuItem.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, Story } from '@storybook/react';
+
+import { SidebarMenuItem } from './SidebarMenuItem';
+
+const meta: Meta = {
+  title: 'Components/SidebarMenuItem',
+  component: SidebarMenuItem,
+};
+export default meta;
+
+interface StoryProps {
+  iconClass?: string;
+  className: string;
+  itemName: string;
+  linkName: string;
+}
+
+function Template({ iconClass, className, itemName, linkName }: StoryProps) {
+  return (
+    <ul className="sidebar">
+      <div className="sidebar-list">
+        <SidebarMenuItem
+          path="example.path"
+          pathParams={{ endpointId: 1 }}
+          iconClass={iconClass}
+          className={className}
+          itemName={itemName}
+        >
+          {linkName}
+        </SidebarMenuItem>
+      </div>
+    </ul>
+  );
+}
+
+export const Primary: Story<StoryProps> = Template.bind({});
+Primary.args = {
+  iconClass: 'fa-tachometer-alt fa-fw',
+  className: 'exampleItemClass',
+  itemName: 'ExampleItem',
+  linkName: 'Item with icon',
+};
+
+export const WithoutIcon: Story<StoryProps> = Template.bind({});
+WithoutIcon.args = {
+  className: 'exampleItemClass',
+  itemName: 'ExampleItem',
+  linkName: 'Item without icon',
+};

app/portainer/components/sidebar/SidebarMenuItem/SidebarMenuItem.test.tsx

@@ -0,0 +1,51 @@
+import { render } from '@/react-tools/test-utils';
+
+import { SidebarMenuItem } from './SidebarMenuItem';
+
+test('should be visible & have expected class', () => {
+  const { getByLabelText } = renderComponent('testClass');
+  const listItem = getByLabelText('sidebarItem');
+  expect(listItem).toBeVisible();
+  expect(listItem).toHaveClass('testClass');
+});
+
+test('icon should with correct icon if iconClass is provided', () => {
+  const { getByLabelText } = renderComponent('', 'testIconClass');
+  const sidebarIcon = getByLabelText('itemIcon');
+  expect(sidebarIcon).toBeVisible();
+  expect(sidebarIcon).toHaveClass('testIconClass');
+});
+
+test('icon should not be rendered if iconClass is not provided', () => {
+  const { queryByLabelText } = renderComponent();
+  expect(queryByLabelText('itemIcon')).not.toBeInTheDocument();
+});
+
+test('should render children', () => {
+  const { getByLabelText } = renderComponent('', '', 'Test');
+  expect(getByLabelText('sidebarItem')).toHaveTextContent('Test');
+});
+
+test('li element should have correct accessibility label', () => {
+  const { queryByLabelText } = renderComponent('', '', '', 'testItemLabel');
+  expect(queryByLabelText('testItemLabel')).toBeInTheDocument();
+});
+
+function renderComponent(
+  className = '',
+  iconClass = '',
+  linkText = '',
+  itemName = 'sidebarItem'
+) {
+  return render(
+    <SidebarMenuItem
+      path=""
+      pathParams={{ endpointId: 1 }}
+      iconClass={iconClass}
+      className={className}
+      itemName={itemName}
+    >
+      {linkText}
+    </SidebarMenuItem>
+  );
+}

app/portainer/components/sidebar/SidebarMenuItem/SidebarMenuItem.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { UISrefActive } from '@uirouter/react';
+
+import { Link } from '@/portainer/components/Link';
+
+import '../sidebar.css';
+import styles from './SidebarMenuItem.module.css';
+
+interface Props {
+  path: string;
+  pathParams: object;
+  iconClass?: string;
+  className: string;
+  itemName: string;
+}
+
+export function SidebarMenuItem({
+  path,
+  pathParams,
+  iconClass,
+  className,
+  itemName,
+  children,
+}: PropsWithChildren<Props>) {
+  return (
+    <li
+      className={clsx('sidebar-menu-item', styles.sidebarMenuItem, className)}
+      aria-label={itemName}
+    >
+      <UISrefActive class="active">
+        <Link to={path} params={pathParams} title={itemName}>
+          {children}
+          {iconClass && (
+            <i
+              className={clsx('menu-icon fa', iconClass)}
+              aria-label="itemIcon"
+            />
+          )}
+        </Link>
+      </UISrefActive>
+    </li>
+  );
+}

app/portainer/components/sidebar/SidebarMenuItem/index.ts

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

app/portainer/views/sidebar/sidebar.html

@@ -23,7 +23,7 @@
           admin-access="isAdmin"
         ></kubernetes-sidebar>
 
-        <azure-sidebar ng-if="applicationState.endpoint.mode.provider === 'AZURE'" endpoint-id="endpointId"> </azure-sidebar>
+        <azure-sidebar ng-if="applicationState.endpoint.mode.provider === 'AZURE'" environment-id="endpointId"> </azure-sidebar>
 
         <docker-sidebar
           ng-if="applicationState.endpoint.mode.provider !== 'AZURE' && applicationState.endpoint.mode.provider !== 'KUBERNETES'"