feature(dashboard): add integrations and notifications

2024-10-02 22:12:05 +02:00
parent d920f6951c
commit f65a633403
94 changed files with 3692 additions and 127 deletions
--- a/apps/dashboard/src/modals/add-integration.tsx
+++ b/apps/dashboard/src/modals/add-integration.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { api } from '@/trpc/client';
+
+import { DiscordIntegrationForm } from '@/components/integrations/forms/discord-integration';
+import { SlackIntegrationForm } from '@/components/integrations/forms/slack-integration';
+import { WebhookIntegrationForm } from '@/components/integrations/forms/webhook-integration';
+import { IntegrationCardContent } from '@/components/integrations/integration-card';
+import { INTEGRATIONS } from '@/components/integrations/integrations';
+import { SheetContent } from '@/components/ui/sheet';
+import type { IIntegrationConfig } from '@openpanel/validation';
+import { useQueryClient } from '@tanstack/react-query';
+import { getQueryKey } from '@trpc/react-query';
+import { useQueryState } from 'nuqs';
+import { toast } from 'sonner';
+import { popModal } from '.';
+import { ModalHeader } from './Modal/Container';
+
+interface Props {
+  id?: string;
+  type: IIntegrationConfig['type'];
+}
+export default function AddIntegration(props: Props) {
+  const query = api.integration.get.useQuery(
+    {
+      id: props.id ?? '',
+    },
+    {
+      enabled: !!props.id,
+    },
+  );
+
+  const integration = INTEGRATIONS.find((i) => i.type === props.type);
+
+  const renderCard = () => {
+    if (!integration) {
+      return null;
+    }
+    return (
+      <div className="card bg-def-100">
+        <IntegrationCardContent {...integration} />
+      </div>
+    );
+  };
+
+  const [tab, setTab] = useQueryState('tab', {
+    shallow: false,
+  });
+  const client = useQueryClient();
+  const handleSuccess = () => {
+    toast.success('Integration created');
+    popModal();
+    client.refetchQueries([
+      getQueryKey(api.integration.list),
+      getQueryKey(api.integration.get, { id: props.id }),
+    ]);
+    if (tab !== undefined) {
+      setTab('installed');
+    }
+  };
+
+  const renderForm = () => {
+    if (props.id && query.isLoading) {
+      return null;
+    }
+
+    switch (integration?.type) {
+      case 'webhook':
+        return (
+          <WebhookIntegrationForm
+            defaultValues={query.data}
+            onSuccess={handleSuccess}
+          />
+        );
+      case 'discord':
+        return (
+          <DiscordIntegrationForm
+            defaultValues={query.data}
+            onSuccess={handleSuccess}
+          />
+        );
+      case 'slack':
+        return (
+          <SlackIntegrationForm
+            defaultValues={query.data}
+            onSuccess={handleSuccess}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <SheetContent className="[&>button.absolute]:hidden">
+      <ModalHeader title="Create an integration" />
+      {renderCard()}
+      {renderForm()}
+    </SheetContent>
+  );
+}