refactor(edge/groups): migrate view to react [EE-2219] (#11758)

app/react/edge/edge-groups/queries/query-keys.ts

@@ -1,3 +1,4 @@
 export const queryKeys = {
   base: () => ['edge', 'groups'] as const,
+  item: (id: number) => [...queryKeys.base(), id] as const,
 };

app/react/edge/edge-groups/queries/useCreateEdgeGroupMutation.ts

@@ -34,7 +34,7 @@ export async function createEdgeGroup(requestPayload: CreateGroupPayload) {
   }
 }
 
-export function useCreateGroupMutation() {
+export function useCreateEdgeGroupMutation() {
   const queryClient = useQueryClient();
 
   return useMutation(

app/react/edge/edge-groups/queries/useEdgeGroup.ts

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import {
+  EnvironmentId,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
+import { withError } from '@/react-tools/react-query';
+
+import { EdgeGroup } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export interface EdgeGroupListItemResponse extends EdgeGroup {
+  EndpointTypes: Array<EnvironmentType>;
+  HasEdgeStack?: boolean;
+  HasEdgeJob?: boolean;
+  HasEdgeConfig?: boolean;
+  TrustedEndpoints: Array<EnvironmentId>;
+}
+
+async function getEdgeGroup(id: EdgeGroup['Id']) {
+  try {
+    const { data } = await axios.get<EdgeGroup>(buildUrl({ id }));
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Failed fetching edge groups');
+  }
+}
+
+export function useEdgeGroup<T = EdgeGroup>(
+  id?: EdgeGroup['Id'],
+  {
+    select,
+  }: {
+    select?: (groups: EdgeGroup) => T;
+  } = {}
+) {
+  return useQuery({
+    queryKey: queryKeys.item(id!),
+    queryFn: () => getEdgeGroup(id!),
+    select,
+    enabled: !!id,
+    ...withError('Failed fetching edge group'),
+  });
+}

app/react/edge/edge-groups/queries/useUpdateEdgeGroupMutation.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { TagId } from '@/portainer/tags/types';
+import {
+  mutationOptions,
+  withError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeGroup } from '../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+interface UpdateGroupPayload {
+  id: EdgeGroup['Id'];
+  name: string;
+  dynamic: boolean;
+  tagIds?: TagId[];
+  endpoints?: EnvironmentId[];
+  partialMatch?: boolean;
+}
+
+export async function updateEdgeGroup({
+  id,
+  ...requestPayload
+}: UpdateGroupPayload) {
+  try {
+    const { data: group } = await axios.put<EdgeGroup>(
+      buildUrl({ id }),
+      requestPayload
+    );
+    return group;
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Failed to update Edge group');
+  }
+}
+
+export function useUpdateEdgeGroupMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    updateEdgeGroup,
+    mutationOptions(
+      withError('Failed to update Edge group'),
+      withInvalidate(queryClient, [queryKeys.base()])
+    )
+  );
+}