102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|