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/queries/useResourceGroups.ts

@@ -0,0 +1,72 @@
+import _ from 'lodash';
+import { useQueries } from 'react-query';
+
+import { EnvironmentId } from '@/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { withError } from '@/react-tools/react-query';
+
+import { azureErrorParser } from '../services/utils';
+import { Subscription, ResourceGroup } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildResourceGroupUrl } from './utils';
+
+export function useResourceGroups(
+  environmentId: EnvironmentId,
+  subscriptions: Subscription[] = []
+) {
+  const queries = useQueries(
+    subscriptions.map((subscription) => ({
+      queryKey: queryKeys.resourceGroups(
+        environmentId,
+        subscription.subscriptionId
+      ),
+      queryFn: async () => {
+        const groups = await getResourceGroups(
+          environmentId,
+          subscription.subscriptionId
+        );
+        return [subscription.subscriptionId, groups] as const;
+      },
+      ...withError('Unable to retrieve Azure resource groups'),
+    }))
+  );
+
+  return {
+    resourceGroups: Object.fromEntries(
+      _.compact(
+        queries.map((q) => {
+          if (q.data) {
+            return q.data;
+          }
+
+          return null;
+        })
+      )
+    ),
+    isLoading: queries.some((q) => q.isLoading),
+    isError: queries.some((q) => q.isError),
+  };
+}
+
+async function getResourceGroups(
+  environmentId: EnvironmentId,
+  subscriptionId: string
+) {
+  try {
+    const {
+      data: { value },
+    } = await axios.get<{ value: ResourceGroup[] }>(
+      buildResourceGroupUrl(environmentId, subscriptionId),
+      { params: { 'api-version': '2018-02-01' } }
+    );
+
+    return value;
+  } catch (err) {
+    throw parseAxiosError(
+      err as Error,
+      'Unable to retrieve resource groups',
+      azureErrorParser
+    );
+  }
+}