refactor(azure): migrate module to react [EE-2782] (#6689)

* refactor(azure): migrate module to react [EE-2782]

* fix(azure): remove optional chain

* feat(azure): apply new icons in dashboard

* feat(azure): apply new icons in dashboard

* feat(ui): allow single string for breadcrumbs

* refactor(azure/containers): use Table.content

* feat(azure/containers): implement new ui [EE-3538]

* fix(azure/containers): use correct icon

* chore(tests): mock svg as component

* fix(azure): fix tests

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>

app/react/azure/container-instances/ListView/columns/index.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+import { name } from './name';
+import { location } from './location';
+import { ports } from './ports';
+import { ownership } from './ownership';
+
+export function useColumns() {
+  return useMemo(() => [name, location, ports, ownership], []);
+}

app/react/azure/container-instances/ListView/columns/location.ts

@@ -0,0 +1,13 @@
+import { Column } from 'react-table';
+
+import { ContainerGroup } from '@/react/azure/types';
+
+export const location: Column<ContainerGroup> = {
+  Header: 'Location',
+  accessor: (container) => container.location,
+  id: 'location',
+  disableFilters: true,
+  Filter: () => null,
+  canHide: true,
+  sortType: 'string',
+};

app/react/azure/container-instances/ListView/columns/name.tsx

@@ -0,0 +1,31 @@
+import { CellProps, Column } from 'react-table';
+
+import { ContainerGroup } from '@/react/azure/types';
+
+import { Link } from '@@/Link';
+
+export const name: Column<ContainerGroup> = {
+  Header: 'Name',
+  accessor: (container) => container.name,
+  id: 'name',
+  Cell: NameCell,
+  disableFilters: true,
+  Filter: () => null,
+  canHide: true,
+  sortType: 'string',
+};
+
+export function NameCell({
+  value: name,
+  row: { original: container },
+}: CellProps<ContainerGroup, string>) {
+  return (
+    <Link
+      to="azure.containerinstances.container"
+      params={{ id: container.id }}
+      className="hover:underline"
+    >
+      {name}
+    </Link>
+  );
+}

app/react/azure/container-instances/ListView/columns/ownership.tsx

@@ -0,0 +1,37 @@
+import { Column } from 'react-table';
+import clsx from 'clsx';
+
+import { ownershipIcon } from '@/portainer/filters/filters';
+import { ResourceControlOwnership } from '@/portainer/access-control/types';
+import { ContainerGroup } from '@/react/azure/types';
+import { determineOwnership } from '@/portainer/access-control/models/ResourceControlViewModel';
+
+export const ownership: Column<ContainerGroup> = {
+  Header: 'Ownership',
+  id: 'ownership',
+  accessor: (row) =>
+    row.Portainer && row.Portainer.ResourceControl
+      ? determineOwnership(row.Portainer.ResourceControl)
+      : ResourceControlOwnership.ADMINISTRATORS,
+  Cell: OwnershipCell,
+  disableFilters: true,
+  canHide: true,
+  sortType: 'string',
+  Filter: () => null,
+};
+
+interface Props {
+  value: 'public' | 'private' | 'restricted' | 'administrators';
+}
+
+function OwnershipCell({ value }: Props) {
+  return (
+    <>
+      <i
+        className={clsx(ownershipIcon(value), 'space-right')}
+        aria-hidden="true"
+      />
+      {value}
+    </>
+  );
+}

app/react/azure/container-instances/ListView/columns/ports.tsx

@@ -0,0 +1,34 @@
+import { CellProps, Column } from 'react-table';
+
+import { ContainerGroup } from '@/react/azure/types';
+import { getPorts } from '@/react/azure/utils';
+
+export const ports: Column<ContainerGroup> = {
+  Header: 'Published Ports',
+  accessor: (container) => getPorts(container),
+  id: 'ports',
+  disableFilters: true,
+  Filter: () => null,
+  canHide: true,
+  sortType: 'string',
+  Cell: PortsCell,
+};
+
+function PortsCell({
+  value: ports,
+  row: { original: container },
+}: CellProps<ContainerGroup, ReturnType<typeof getPorts>>) {
+  const ip = container.properties.ipAddress
+    ? container.properties.ipAddress.ip
+    : '';
+  if (ports.length === 0 || !ip) {
+    return '-';
+  }
+
+  return ports.map((port) => (
+    <a className="image-tag" href={`http://${ip}:${port.host}`} key={port.host}>
+      <i className="fa fa-external-link-alt" aria-hidden="true" /> {ip}:
+      {port.host}
+    </a>
+  ));
+}