feat(console): test webhook (#3886)

packages/console/src/pages/WebhookDetails/WebhookSettings/components/TestWebhook/index.module.scss

@@ -0,0 +1,14 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-divider);
+  border-radius: _.unit(2);
+  padding: _.unit(4);
+}
+
+.description {
+  font: var(--font-body-2);
+  margin-right: _.unit(3);
+}

packages/console/src/pages/WebhookDetails/WebhookSettings/components/TestWebhook/index.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+
+import Button from '@/components/Button';
+import DynamicT from '@/components/DynamicT';
+import FormField from '@/components/FormField';
+import useApi from '@/hooks/use-api';
+import { type WebhookDetailsFormType } from '@/pages/WebhookDetails/types';
+import { webhookDetailsParser } from '@/pages/WebhookDetails/utils';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  hookId: string;
+};
+
+function TestWebhook({ hookId }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const {
+    getValues,
+    formState: { isValid },
+  } = useFormContext<WebhookDetailsFormType>();
+
+  const [isSendingPayload, setIsSendingPayload] = useState(false);
+  const api = useApi();
+
+  const sendTestPayload = async () => {
+    if (isSendingPayload) {
+      return;
+    }
+
+    setIsSendingPayload(true);
+
+    try {
+      const formData = getValues();
+      const { events, config } = webhookDetailsParser.toRemoteModel(formData);
+      await api.post(`api/hooks/${hookId}/test`, { json: { events, config } });
+      toast.success(t('webhook_details.settings.test_payload_sent'));
+    } finally {
+      setIsSendingPayload(false);
+    }
+  };
+
+  return (
+    <FormField title="webhook_details.settings.test_webhook">
+      <div className={styles.container}>
+        <div className={styles.description}>
+          <DynamicT forKey="webhook_details.settings.test_webhook_description" />
+        </div>
+        <Button
+          type="outline"
+          title="webhook_details.settings.send_test_payload"
+          disabled={!isValid}
+          isLoading={isSendingPayload}
+          onClick={async () => {
+            await sendTestPayload();
+          }}
+        />
+      </div>
+    </FormField>
+  );
+}
+
+export default TestWebhook;

packages/console/src/pages/WebhookDetails/WebhookSettings/index.tsx

@@ -16,6 +16,7 @@ import { webhookDetailsParser } from '../utils';
 
 import CustomHeaderField from './components/CustomHeaderField';
 import SigningKeyField from './components/SigningKeyField';
+import TestWebhook from './components/TestWebhook';
 
 function WebhookSettings() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -50,11 +51,11 @@ function WebhookSettings() {
         onSubmit={onSubmit}
         onDiscard={reset}
       >
-        <FormCard
-          title="webhook_details.settings.settings"
-          description="webhook_details.settings.settings_description"
-        >
-          <FormProvider {...formMethods}>
+        <FormProvider {...formMethods}>
+          <FormCard
+            title="webhook_details.settings.settings"
+            description="webhook_details.settings.settings_description"
+          >
             <BasicWebhookForm />
             <SigningKeyField
               hookId={hook.id}
@@ -62,8 +63,11 @@ function WebhookSettings() {
               onSigningKeyUpdated={setSigningKey}
             />
             <CustomHeaderField />
-          </FormProvider>
-        </FormCard>
+          </FormCard>
+          <FormCard title="webhook_details.settings.test">
+            <TestWebhook hookId={hook.id} />
+          </FormCard>
+        </FormProvider>
       </DetailsForm>
       <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleting && isDirty} />
     </>