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/ContainersDatatable.tsx

@@ -0,0 +1,216 @@
+import { useEffect } from 'react';
+import {
+  useTable,
+  useSortBy,
+  useGlobalFilter,
+  usePagination,
+} from 'react-table';
+import { useRowSelectColumn } from '@lineup-lite/hooks';
+import { Box, Plus, Trash2 } from 'react-feather';
+
+import { useDebounce } from '@/portainer/hooks/useDebounce';
+import { ContainerGroup } from '@/react/azure/types';
+import { Authorized } from '@/portainer/hooks/useUser';
+import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
+
+import { PaginationControls } from '@@/PaginationControls';
+import {
+  Table,
+  TableActions,
+  TableContainer,
+  TableHeaderRow,
+  TableRow,
+  TableTitle,
+} from '@@/datatables';
+import { multiple } from '@@/datatables/filter-types';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';
+import { useRowSelect } from '@@/datatables/useRowSelect';
+import { Checkbox } from '@@/form-components/Checkbox';
+import { TableFooter } from '@@/datatables/TableFooter';
+import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+
+import { TableSettings } from './types';
+import { useColumns } from './columns';
+
+export interface Props {
+  tableKey: string;
+  dataset: ContainerGroup[];
+  onRemoveClick(containerIds: string[]): void;
+}
+
+export function ContainersDatatable({
+  dataset,
+  tableKey,
+  onRemoveClick,
+}: Props) {
+  const { settings, setTableSettings } = useTableSettings<TableSettings>();
+  const [searchBarValue, setSearchBarValue] = useSearchBarState(tableKey);
+
+  const columns = useColumns();
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    prepareRow,
+    selectedFlatRows,
+    gotoPage,
+    setPageSize,
+    setGlobalFilter,
+    state: { pageIndex, pageSize },
+  } = useTable<ContainerGroup>(
+    {
+      defaultCanFilter: false,
+      columns,
+      data: dataset,
+      filterTypes: { multiple },
+      initialState: {
+        pageSize: settings.pageSize || 10,
+        sortBy: [settings.sortBy],
+        globalFilter: searchBarValue,
+      },
+      selectCheckboxComponent: Checkbox,
+      autoResetSelectedRows: false,
+      getRowId(row) {
+        return row.id;
+      },
+    },
+    useGlobalFilter,
+    useSortBy,
+    usePagination,
+    useRowSelect,
+    useRowSelectColumn
+  );
+
+  const debouncedSearchValue = useDebounce(searchBarValue);
+
+  useEffect(() => {
+    setGlobalFilter(debouncedSearchValue);
+  }, [debouncedSearchValue, setGlobalFilter]);
+
+  const tableProps = getTableProps();
+  const tbodyProps = getTableBodyProps();
+
+  return (
+    <div className="row">
+      <div className="col-sm-12">
+        <TableContainer>
+          <TableTitle icon={Box} label="Containers">
+            <SearchBar
+              value={searchBarValue}
+              onChange={handleSearchBarChange}
+            />
+
+            <TableActions>
+              <Authorized authorizations="AzureContainerGroupDelete">
+                <Button
+                  color="dangerlight"
+                  disabled={selectedFlatRows.length === 0}
+                  onClick={() =>
+                    handleRemoveClick(
+                      selectedFlatRows.map((row) => row.original.id)
+                    )
+                  }
+                  icon={Trash2}
+                >
+                  Remove
+                </Button>
+              </Authorized>
+
+              <Authorized authorizations="AzureContainerGroupCreate">
+                <Link to="azure.containerinstances.new" className="space-left">
+                  <Button icon={Plus}>Add container</Button>
+                </Link>
+              </Authorized>
+            </TableActions>
+          </TableTitle>
+          <Table
+            className={tableProps.className}
+            role={tableProps.role}
+            style={tableProps.style}
+          >
+            <thead>
+              {headerGroups.map((headerGroup) => {
+                const { key, className, role, style } =
+                  headerGroup.getHeaderGroupProps();
+
+                return (
+                  <TableHeaderRow<ContainerGroup>
+                    key={key}
+                    className={className}
+                    role={role}
+                    style={style}
+                    headers={headerGroup.headers}
+                    onSortChange={handleSortChange}
+                  />
+                );
+              })}
+            </thead>
+            <tbody
+              className={tbodyProps.className}
+              role={tbodyProps.role}
+              style={tbodyProps.style}
+            >
+              <Table.Content
+                prepareRow={prepareRow}
+                renderRow={(row, { key, className, role, style }) => (
+                  <TableRow<ContainerGroup>
+                    cells={row.cells}
+                    key={key}
+                    className={className}
+                    role={role}
+                    style={style}
+                  />
+                )}
+                rows={page}
+                emptyContent="No container available."
+              />
+            </tbody>
+          </Table>
+
+          <TableFooter>
+            <SelectedRowsCount value={selectedFlatRows.length} />
+            <PaginationControls
+              showAll
+              pageLimit={pageSize}
+              page={pageIndex + 1}
+              onPageChange={(p) => gotoPage(p - 1)}
+              totalCount={dataset.length}
+              onPageLimitChange={handlePageSizeChange}
+            />
+          </TableFooter>
+        </TableContainer>
+      </div>
+    </div>
+  );
+
+  async function handleRemoveClick(containerIds: string[]) {
+    const confirmed = await confirmDeletionAsync(
+      'Are you sure you want to delete the selected containers?'
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    return onRemoveClick(containerIds);
+  }
+
+  function handlePageSizeChange(pageSize: number) {
+    setPageSize(pageSize);
+    setTableSettings((settings) => ({ ...settings, pageSize }));
+  }
+
+  function handleSearchBarChange(value: string) {
+    setSearchBarValue(value);
+  }
+
+  function handleSortChange(id: string, desc: boolean) {
+    setTableSettings((settings) => ({
+      ...settings,
+      sortBy: { id, desc },
+    }));
+  }
+}

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

@@ -0,0 +1,97 @@
+import { useMutation, useQueryClient } from 'react-query';
+
+import { deleteContainerGroup } from '@/react/azure/services/container-groups.service';
+import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { EnvironmentId } from '@/portainer/environments/types';
+import { promiseSequence } from '@/portainer/helpers/promise-utils';
+import { useContainerGroups } from '@/react/azure/queries/useContainerGroups';
+import { useSubscriptions } from '@/react/azure/queries/useSubscriptions';
+
+import { PageHeader } from '@@/PageHeader';
+import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+
+import { ContainersDatatable } from './ContainersDatatable';
+import { TableSettings } from './types';
+
+export function ListView() {
+  const defaultSettings: TableSettings = {
+    pageSize: 10,
+    sortBy: { id: 'state', desc: false },
+  };
+
+  const tableKey = 'containergroups';
+
+  const environmentId = useEnvironmentId();
+
+  const subscriptionsQuery = useSubscriptions(environmentId);
+
+  const groupsQuery = useContainerGroups(
+    environmentId,
+    subscriptionsQuery.data,
+    subscriptionsQuery.isSuccess
+  );
+
+  const { handleRemove } = useRemoveMutation(environmentId);
+
+  if (groupsQuery.isLoading || subscriptionsQuery.isLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <PageHeader
+        breadcrumbs="Container instances"
+        reload
+        title="Container list"
+      />
+      <TableSettingsProvider defaults={defaultSettings} storageKey={tableKey}>
+        <ContainersDatatable
+          tableKey={tableKey}
+          dataset={groupsQuery.containerGroups}
+          onRemoveClick={handleRemove}
+        />
+      </TableSettingsProvider>
+    </>
+  );
+}
+
+function useRemoveMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+
+  const deleteMutation = useMutation(
+    (containerGroupIds: string[]) =>
+      promiseSequence(
+        containerGroupIds.map(
+          (id) => () => deleteContainerGroup(environmentId, id)
+        )
+      ),
+
+    {
+      onSuccess() {
+        return queryClient.invalidateQueries([
+          'azure',
+          environmentId,
+          'subscriptions',
+        ]);
+      },
+      onError(err) {
+        notifyError(
+          'Failure',
+          err as Error,
+          'Unable to remove container groups'
+        );
+      },
+    }
+  );
+
+  return { handleRemove };
+
+  async function handleRemove(groupIds: string[]) {
+    deleteMutation.mutate(groupIds, {
+      onSuccess: () => {
+        notifySuccess('Container groups successfully removed');
+      },
+    });
+  }
+}

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>
+  ));
+}

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

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

app/react/azure/container-instances/ListView/types.ts

@@ -0,0 +1,8 @@
+import {
+  PaginationTableSettings,
+  SortableTableSettings,
+} from '@@/datatables/types';
+
+export interface TableSettings
+  extends PaginationTableSettings,
+    SortableTableSettings {}