chore: incoming webhook hooks (#5788)

https://linear.app/unleash/issue/2-1813/create-new-incoming-webhook-hooks-on-the-frontend

Adds incoming webhook hooks to help us with CRUD operations on the
frontend.

frontend/src/hooks/api/actions/useIncomingWebhooksApi/useIncomingWebhooksApi.ts

@@ -0,0 +1,106 @@
+import { IIncomingWebhook } from 'interfaces/incomingWebhook';
+import useAPI from '../useApi/useApi';
+
+const ENDPOINT = 'api/admin/incoming-webhooks';
+
+export type AddOrUpdateIncomingWebhook = Omit<
+    IIncomingWebhook,
+    'id' | 'createdAt' | 'createdByUserId'
+>;
+
+export const useIncomingWebhooksApi = () => {
+    const { loading, makeRequest, createRequest, errors } = useAPI({
+        propagateErrors: true,
+    });
+
+    const addIncomingWebhook = async (
+        incomingWebhook: AddOrUpdateIncomingWebhook,
+    ) => {
+        const requestId = 'addIncomingWebhook';
+        const req = createRequest(
+            ENDPOINT,
+            {
+                method: 'POST',
+                body: JSON.stringify(incomingWebhook),
+            },
+            requestId,
+        );
+
+        const response = await makeRequest(req.caller, req.id);
+        return response.json();
+    };
+
+    const updateIncomingWebhook = async (
+        incomingWebhookId: number,
+        incomingWebhook: AddOrUpdateIncomingWebhook,
+    ) => {
+        const requestId = 'updateIncomingWebhook';
+        const req = createRequest(
+            `${ENDPOINT}/${incomingWebhookId}`,
+            {
+                method: 'PUT',
+                body: JSON.stringify(incomingWebhook),
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    const enableIncomingWebhook = async (incomingWebhookId: number) => {
+        const requestId = 'enableIncomingWebhook';
+        const req = createRequest(
+            `${ENDPOINT}/${incomingWebhookId}/on`,
+            {
+                method: 'POST',
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    const disableIncomingWebhook = async (incomingWebhookId: number) => {
+        const requestId = 'disableIncomingWebhook';
+        const req = createRequest(
+            `${ENDPOINT}/${incomingWebhookId}/off`,
+            {
+                method: 'POST',
+            },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    const toggleIncomingWebhook = async (
+        incomingWebhookId: number,
+        enabled: boolean,
+    ) => {
+        if (enabled) {
+            await enableIncomingWebhook(incomingWebhookId);
+        } else {
+            await disableIncomingWebhook(incomingWebhookId);
+        }
+    };
+
+    const removeIncomingWebhook = async (incomingWebhookId: number) => {
+        const requestId = 'removeIncomingWebhook';
+        const req = createRequest(
+            `${ENDPOINT}/${incomingWebhookId}`,
+            { method: 'DELETE' },
+            requestId,
+        );
+
+        await makeRequest(req.caller, req.id);
+    };
+
+    return {
+        addIncomingWebhook,
+        updateIncomingWebhook,
+        removeIncomingWebhook,
+        toggleIncomingWebhook,
+        errors,
+        loading,
+    };
+};

frontend/src/hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { formatApiPath } from 'utils/formatPath';
+import handleErrorResponses from '../httpErrorResponseHandler';
+import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR';
+import useUiConfig from '../useUiConfig/useUiConfig';
+import { IIncomingWebhook } from 'interfaces/incomingWebhook';
+
+const ENDPOINT = 'api/admin/incoming-webhooks';
+
+export const useIncomingWebhooks = () => {
+    const { isEnterprise } = useUiConfig();
+
+    const { data, error, mutate } = useConditionalSWR(
+        isEnterprise(),
+        { incomingWebhooks: [] },
+        formatApiPath(ENDPOINT),
+        fetcher,
+    );
+
+    return useMemo(
+        () => ({
+            incomingWebhooks: (data?.incomingWebhooks ??
+                []) as IIncomingWebhook[],
+            loading: !error && !data,
+            refetch: () => mutate(),
+            error,
+        }),
+        [data, error, mutate],
+    );
+};
+
+const fetcher = (path: string) => {
+    return fetch(path)
+        .then(handleErrorResponses('Incoming webhooks'))
+        .then((res) => res.json());
+};

frontend/src/interfaces/incomingWebhook.ts

@@ -0,0 +1,7 @@
+export interface IIncomingWebhook {
+    id: number;
+    enabled: boolean;
+    name: string;
+    createdAt: string;
+    createdByUserId: number;
+}