feat: Allow to add webhooks from Create Alert modal (#767)

![Screenshot 2025-04-19 at 11 34 19 AM](https://github.com/user-attachments/assets/9a3a87eb-9011-474c-ae8e-c26b13e17026)

Author: ernestii

packages/app/src/TeamPage.tsx

@@ -679,12 +679,12 @@ type WebhookForm = {
   body?: string;
 };
 
-function CreateWebhookForm({
+export function CreateWebhookForm({
   onClose,
   onSuccess,
 }: {
   onClose: VoidFunction;
-  onSuccess: VoidFunction;
+  onSuccess: (webhookId?: string) => void;
 }) {
   const saveWebhook = api.useSaveWebhook();
 
@@ -697,7 +697,7 @@ function CreateWebhookForm({
   const onSubmit: SubmitHandler<WebhookForm> = async values => {
     const { service, name, url, description, body } = values;
     try {
-      await saveWebhook.mutateAsync({
+      const response = await saveWebhook.mutateAsync({
         service,
         name,
         url,
@@ -711,7 +711,7 @@ function CreateWebhookForm({
         color: 'green',
         message: `Webhook created successfully`,
       });
-      onSuccess();
+      onSuccess(response.data?._id);
       onClose();
     } catch (e) {
       console.error(e);

packages/app/src/components/Alerts.tsx

@@ -1,13 +1,15 @@
 import { useMemo } from 'react';
-import Link from 'next/link';
-import { Control } from 'react-hook-form';
+import { Control, useController } from 'react-hook-form';
 import { Select, SelectProps } from 'react-hook-form-mantine';
 import { Label, ReferenceArea, ReferenceLine } from 'recharts';
-import type { Alert, AlertChannelType } from '@hyperdx/common-utils/dist/types';
-import { Button, ComboboxData, Group } from '@mantine/core';
+import type { AlertChannelType } from '@hyperdx/common-utils/dist/types';
+import { Button, ComboboxData, Group, Modal } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 
 import api from '@/api';
 
+import { CreateWebhookForm } from '../TeamPage';
+
 type Webhook = {
   _id: string;
   name: string;
@@ -16,7 +18,11 @@ type Webhook = {
 const WebhookChannelForm = <T extends object>(
   props: Partial<SelectProps<T>>,
 ) => {
-  const { data: webhooks } = api.useWebhooks(['slack', 'generic']);
+  const { data: webhooks, refetch: refetchWebhooks } = api.useWebhooks([
+    'slack',
+    'generic',
+  ]);
+  const [opened, { open, close }] = useDisclosure(false);
 
   const hasWebhooks = Array.isArray(webhooks?.data) && webhooks.data.length > 0;
 
@@ -37,6 +43,20 @@ const WebhookChannelForm = <T extends object>(
     ];
   }, [webhooks]);
 
+  const { field } = useController({
+    control: props.control,
+    name: props.name!,
+  });
+
+  const handleWebhookCreated = async (webhookId?: string) => {
+    await refetchWebhooks();
+    if (webhookId) {
+      field.onChange(webhookId);
+      field.onBlur();
+    }
+    close();
+  };
+
   return (
     <div>
       <Group gap="md" justify="space-between">
@@ -55,12 +75,21 @@ const WebhookChannelForm = <T extends object>(
           control={props.control}
           {...props}
         />
-        <Link href="/team" passHref>
-          <Button size="xs" variant="subtle" color="gray">
-            Add New Incoming Webhook
-          </Button>
-        </Link>
+        <Button size="xs" variant="subtle" color="gray" onClick={open}>
+          Add New Incoming Webhook
+        </Button>
       </Group>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Add New Webhook"
+        centered
+        zIndex={9999}
+        size="lg"
+      >
+        <CreateWebhookForm onClose={close} onSuccess={handleWebhookCreated} />
+      </Modal>
     </div>
   );
 };