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

@@ -0,0 +1,53 @@
+import { Package } from 'react-feather';
+
+import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
+
+import { PageHeader } from '@@/PageHeader';
+import { DashboardItem } from '@@/DashboardItem';
+import { DashboardGrid } from '@@/DashboardItem/DashboardGrid';
+
+import { useResourceGroups } from '../queries/useResourceGroups';
+import { useSubscriptions } from '../queries/useSubscriptions';
+
+import SubscriptionsIcon from './icon-subscription.svg?c';
+
+export function DashboardView() {
+  const environmentId = useEnvironmentId();
+
+  const subscriptionsQuery = useSubscriptions(environmentId);
+
+  const resourceGroupsQuery = useResourceGroups(
+    environmentId,
+    subscriptionsQuery.data
+  );
+
+  const subscriptionsCount = subscriptionsQuery.data?.length;
+  const resourceGroupsCount = Object.values(
+    resourceGroupsQuery.resourceGroups
+  ).flatMap((x) => Object.values(x)).length;
+
+  return (
+    <>
+      <PageHeader title="Home" breadcrumbs={[{ label: 'Dashboard' }]} />
+
+      <div className="mx-4">
+        {subscriptionsQuery.data && (
+          <DashboardGrid>
+            <DashboardItem
+              value={subscriptionsCount as number}
+              icon={SubscriptionsIcon}
+              type="Subscription"
+            />
+            {!resourceGroupsQuery.isError && !resourceGroupsQuery.isLoading && (
+              <DashboardItem
+                value={resourceGroupsCount}
+                icon={Package}
+                type="Resource group"
+              />
+            )}
+          </DashboardGrid>
+        )}
+      </div>
+    </>
+  );
+}