feat: dashboard v2, esm, upgrades (#211)

* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/modals/add-integration.tsx
+++ b/apps/start/src/modals/add-integration.tsx
@@ -0,0 +1,101 @@
+import { useTRPC } from '@/integrations/trpc/react';
+
+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 { useQuery, useQueryClient } from '@tanstack/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 trpc = useTRPC();
+  const query = useQuery(
+    trpc.integration.get.queryOptions(
+      {
+        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.invalidateQueries(trpc.integration.list.queryFilter());
+    client.invalidateQueries(
+      trpc.integration.get.queryFilter({ 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>
+  );
+}