refactor(containers): migrate create view to react [EE-2307] (#9175)

app/react/portainer/webhooks/build-url.ts

@@ -0,0 +1,11 @@
+import { Webhook } from './types';
+
+export function buildUrl(id?: Webhook['Id']) {
+  const url = '/webhooks';
+
+  if (id) {
+    return `${url}/${id}`;
+  }
+
+  return url;
+}

app/react/portainer/webhooks/createWebhook.ts

@@ -0,0 +1,23 @@
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { EnvironmentId } from '../environments/types';
+import { RegistryId } from '../registries/types/registry';
+
+import { buildUrl } from './build-url';
+import { Webhook, WebhookType } from './types';
+
+interface CreateWebhookPayload {
+  resourceId: string;
+  environmentId: EnvironmentId;
+  registryId?: RegistryId;
+  webhookType: WebhookType;
+}
+
+export async function createWebhook(payload: CreateWebhookPayload) {
+  try {
+    const { data } = await axios.post<Webhook>(buildUrl(), payload);
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error, 'Unable to create webhook');
+  }
+}

app/react/portainer/webhooks/query-keys.ts

@@ -0,0 +1,6 @@
+import { Filters } from './types';
+
+export const queryKeys = {
+  base: () => ['webhooks'] as const,
+  list: (filters: Filters) => [...queryKeys.base(), { filters }],
+};

app/react/portainer/webhooks/types.ts

@@ -0,0 +1,21 @@
+import { EnvironmentId } from '../environments/types';
+import { RegistryId } from '../registries/types/registry';
+
+export enum WebhookType {
+  DockerService = 1,
+  DockerContainer = 2,
+}
+
+export interface Webhook {
+  Id: number;
+  Token: string;
+  ResourceId: string;
+  EndpointId: EnvironmentId;
+  RegistryId: RegistryId;
+  Type: WebhookType;
+}
+
+export interface Filters {
+  endpointId: EnvironmentId;
+  resourceId?: string;
+}

app/react/portainer/webhooks/useWebhooks.ts

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+import { Filters, Webhook } from './types';
+
+export function useWebhooks(
+  filters: Filters,
+  { enabled }: { enabled?: boolean } = {}
+) {
+  return useQuery(queryKeys.list(filters), () => getWebhooks(filters), {
+    enabled,
+  });
+}
+
+async function getWebhooks(filters: Filters) {
+  try {
+    const { data } = await axios.get<Array<Webhook>>(buildUrl(), {
+      params: { filters },
+    });
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'failed fetching webhooks');
+  }
+}