mirror of
https://github.com/docmost/docmost.git
synced 2026-08-28 09:17:06 +08:00
feat(integrations): add integration framework with link unfurling
This commit is contained in:
Philipinho
@@ -0,0 +1,93 @@
|
||||
import { Group, Text, Button, Box } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IntegrationDefinition, UserConnection } from "../types/integration.types";
|
||||
import { getIntegrationIcon } from "./integration-icons";
|
||||
|
||||
type ConnectionRowProps = {
|
||||
definition: IntegrationDefinition;
|
||||
connection?: UserConnection;
|
||||
onConnect: (type: string) => void;
|
||||
onDisconnect: (integrationId: string) => void;
|
||||
disconnectingId?: string;
|
||||
};
|
||||
|
||||
export default function ConnectionRow({
|
||||
definition,
|
||||
connection,
|
||||
onConnect,
|
||||
onDisconnect,
|
||||
disconnectingId,
|
||||
}: ConnectionRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const connectedLabel =
|
||||
connection?.providerDisplayName || connection?.providerUserId;
|
||||
|
||||
return (
|
||||
<Box
|
||||
py="sm"
|
||||
px="xs"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
{getIntegrationIcon(definition.type, 28)}
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
{definition.name}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{definition.description}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
|
||||
{connection ? (
|
||||
<>
|
||||
{connection.invalidatedAt ? (
|
||||
<>
|
||||
<Text size="xs" c="orange">
|
||||
{t("Connection expired")}
|
||||
</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="orange"
|
||||
onClick={() => onConnect(definition.type)}
|
||||
>
|
||||
{t("Reconnect")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Text size="xs" c="green">
|
||||
{connectedLabel
|
||||
? t("Connected as {{label}}", { label: connectedLabel })
|
||||
: t("Connected")}
|
||||
</Text>
|
||||
)}
|
||||
<Button
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
color="red"
|
||||
onClick={() => onDisconnect(connection.integrationId)}
|
||||
loading={disconnectingId === connection.integrationId}
|
||||
>
|
||||
{t("Disconnect")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
onClick={() => onConnect(definition.type)}
|
||||
>
|
||||
{t("Connect")}
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { ReactNode } from "react";
|
||||
import {
|
||||
FigmaIcon,
|
||||
GithubIcon,
|
||||
GitlabIcon,
|
||||
GoogleDocsIcon,
|
||||
JiraIcon,
|
||||
LinearIcon,
|
||||
SlackIcon,
|
||||
} from "@/components/icons";
|
||||
import { IconPuzzle } from "@tabler/icons-react";
|
||||
|
||||
const integrationIconMap: Record<string, (size: number) => ReactNode> = {
|
||||
github: (size) => <GithubIcon size={size} />,
|
||||
gitlab: (size) => <GitlabIcon size={size} />,
|
||||
slack: (size) => <SlackIcon size={size} />,
|
||||
linear: (size) => <LinearIcon size={size} />,
|
||||
jira: (size) => <JiraIcon size={size} />,
|
||||
figma: (size) => <FigmaIcon size={size} />,
|
||||
google_docs: (size) => <GoogleDocsIcon size={size} />,
|
||||
};
|
||||
|
||||
export function getIntegrationIcon(
|
||||
type: string,
|
||||
size: number,
|
||||
): ReactNode {
|
||||
const renderIcon = integrationIconMap[type];
|
||||
if (renderIcon) return renderIcon(size);
|
||||
return <IconPuzzle size={size} stroke={1.5} />;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Box, Group, Skeleton, Stack } from "@mantine/core";
|
||||
|
||||
const TITLE_WIDTHS = [64, 52, 60, 44, 58, 96, 56];
|
||||
const DESCRIPTION_WIDTHS = [300, 250, 320, 180, 290, 270, 260];
|
||||
|
||||
type IntegrationListSkeletonProps = {
|
||||
rows?: number;
|
||||
withBadges?: boolean;
|
||||
};
|
||||
|
||||
export default function IntegrationListSkeleton({
|
||||
rows = 7,
|
||||
withBadges = true,
|
||||
}: IntegrationListSkeletonProps) {
|
||||
return (
|
||||
<Stack gap={0} aria-hidden="true">
|
||||
{Array.from({ length: rows }, (_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
py="sm"
|
||||
px="xs"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
|
||||
<Skeleton height={28} circle style={{ flexShrink: 0 }} />
|
||||
<Stack gap={2} style={{ minWidth: 0 }}>
|
||||
<Group gap="xs" wrap="nowrap" h={20}>
|
||||
<Skeleton
|
||||
height={12}
|
||||
width={TITLE_WIDTHS[index % TITLE_WIDTHS.length]}
|
||||
radius="xs"
|
||||
/>
|
||||
{withBadges && (
|
||||
<>
|
||||
<Skeleton height={16} width={52} radius="xl" />
|
||||
<Skeleton height={16} width={52} radius="xl" />
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
<Group h={17}>
|
||||
<Skeleton
|
||||
height={10}
|
||||
width={
|
||||
DESCRIPTION_WIDTHS[index % DESCRIPTION_WIDTHS.length]
|
||||
}
|
||||
maw="100%"
|
||||
radius="xs"
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Skeleton
|
||||
height={30}
|
||||
width={64}
|
||||
radius="sm"
|
||||
style={{ flexShrink: 0 }}
|
||||
/>
|
||||
</Group>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import {
|
||||
Group,
|
||||
Text,
|
||||
Badge,
|
||||
Button,
|
||||
Box,
|
||||
Stack,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
IntegrationDefinition,
|
||||
Integration,
|
||||
} from "../types/integration.types";
|
||||
import { getIntegrationIcon } from "./integration-icons";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature";
|
||||
import { Feature } from "@/ee/features";
|
||||
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
|
||||
|
||||
type IntegrationRowProps = {
|
||||
definition: IntegrationDefinition;
|
||||
installation?: Integration;
|
||||
onInstall: (type: string) => void;
|
||||
onUninstall: (integrationId: string) => void;
|
||||
};
|
||||
|
||||
export default function IntegrationRow({
|
||||
definition,
|
||||
installation,
|
||||
onInstall,
|
||||
onUninstall,
|
||||
}: IntegrationRowProps) {
|
||||
const { t } = useTranslation();
|
||||
const isInstalled = !!installation;
|
||||
const hasAccess = useHasFeature(Feature.INTEGRATIONS);
|
||||
const locked = !!definition.requiresLicense && !hasAccess;
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
|
||||
return (
|
||||
<Box
|
||||
py="sm"
|
||||
px="xs"
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
|
||||
{getIntegrationIcon(definition.type, 28)}
|
||||
<Stack gap={2} style={{ minWidth: 0 }}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Text size="sm" fw={500}>
|
||||
{definition.name}
|
||||
</Text>
|
||||
{locked && (
|
||||
<Badge size="xs" variant="light" color="violet">
|
||||
{t("Paid")}
|
||||
</Badge>
|
||||
)}
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed" truncate>
|
||||
{definition.description}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
|
||||
{isInstalled ? (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="subtle"
|
||||
color="red"
|
||||
onClick={() => onUninstall(installation.id)}
|
||||
>
|
||||
{t("Uninstall")}
|
||||
</Button>
|
||||
) : (
|
||||
<Tooltip label={upgradeLabel} disabled={!locked}>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
disabled={locked}
|
||||
onClick={() => onInstall(definition.type)}
|
||||
>
|
||||
{t("Install")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import { Text, Alert, Stack } from "@mantine/core";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import ConnectionRow from "../components/connection-row";
|
||||
import IntegrationListSkeleton from "../components/integration-list-skeleton";
|
||||
import {
|
||||
useAvailableIntegrations,
|
||||
useInstalledIntegrations,
|
||||
useMyConnections,
|
||||
useDisconnectIntegration,
|
||||
} from "../queries/integration-query";
|
||||
import * as integrationService from "../services/integration-service";
|
||||
|
||||
export default function Connections() {
|
||||
const { t } = useTranslation();
|
||||
const { data: available, isLoading: loadingAvailable } =
|
||||
useAvailableIntegrations();
|
||||
const { data: installed, isLoading: loadingInstalled } =
|
||||
useInstalledIntegrations();
|
||||
const { data: myConnections, isLoading: loadingConnections } =
|
||||
useMyConnections();
|
||||
const disconnectMutation = useDisconnectIntegration();
|
||||
|
||||
const isLoading = loadingAvailable || loadingInstalled || loadingConnections;
|
||||
|
||||
const handleConnect = async (type: string) => {
|
||||
const integration = installed?.find((i) => i.type === type);
|
||||
if (!integration) return;
|
||||
|
||||
try {
|
||||
// Workspace-scoped providers default the OAuth return to the admin
|
||||
// integrations page; members connecting here must come back here.
|
||||
const result = await integrationService.getOAuthAuthorizeUrl({
|
||||
integrationId: integration.id,
|
||||
returnPath: "/settings/account/connections",
|
||||
});
|
||||
window.location.href = result.authorizationUrl;
|
||||
} catch (error) {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to start OAuth connection"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnect = (integrationId: string) => {
|
||||
const installation = installed?.find((i) => i.id === integrationId);
|
||||
const name =
|
||||
available?.find((d) => d.type === installation?.type)?.name ??
|
||||
installation?.type ??
|
||||
"";
|
||||
modals.openConfirmModal({
|
||||
title: t("Disconnect {{name}}", { name }),
|
||||
centered: true,
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"This disconnects your {{name}} account. Links are not enriched for you until you reconnect.",
|
||||
{ name },
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: t("Disconnect"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => disconnectMutation.mutate({ integrationId }),
|
||||
});
|
||||
};
|
||||
|
||||
// Only the row being disconnected shows a loader; isPending alone is shared by every row.
|
||||
const disconnectingId = disconnectMutation.isPending
|
||||
? disconnectMutation.variables?.integrationId
|
||||
: undefined;
|
||||
|
||||
const error = new URLSearchParams(window.location.search).get("error");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Connections")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
<SettingsTitle title={t("Connections")} />
|
||||
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
{t("Manage the apps you have connected to your account.")}
|
||||
</Text>
|
||||
|
||||
{error === "oauth_failed" && (
|
||||
<Alert color="red" mb="md">
|
||||
{t("OAuth connection failed. Please try again.")}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<IntegrationListSkeleton rows={3} withBadges={false} />
|
||||
) : !available?.length ? (
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("No integrations available.")}
|
||||
</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{available
|
||||
.filter((def) => {
|
||||
if (!def.capabilities.includes("oauth")) return false;
|
||||
return installed?.some((i) => i.type === def.type);
|
||||
})
|
||||
.map((def) => {
|
||||
const connection = myConnections?.find(
|
||||
(c) => c.type === def.type,
|
||||
);
|
||||
|
||||
return (
|
||||
<ConnectionRow
|
||||
key={def.type}
|
||||
definition={def}
|
||||
connection={connection}
|
||||
onConnect={handleConnect}
|
||||
onDisconnect={handleDisconnect}
|
||||
disconnectingId={disconnectingId}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Text, Alert, Stack } from "@mantine/core";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCallback } from "react";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import IntegrationRow from "../components/integration-row";
|
||||
import IntegrationListSkeleton from "../components/integration-list-skeleton";
|
||||
import {
|
||||
useAvailableIntegrations,
|
||||
useInstalledIntegrations,
|
||||
useInstallIntegration,
|
||||
useUninstallIntegration,
|
||||
} from "../queries/integration-query";
|
||||
import { getOAuthInstallUrl } from "../services/integration-service";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
|
||||
export default function Integrations() {
|
||||
const { t } = useTranslation();
|
||||
const { data: available, isLoading: loadingAvailable } =
|
||||
useAvailableIntegrations();
|
||||
const { data: installed, isLoading: loadingInstalled } =
|
||||
useInstalledIntegrations();
|
||||
const installMutation = useInstallIntegration();
|
||||
const uninstallMutation = useUninstallIntegration();
|
||||
|
||||
const handleInstall = useCallback(
|
||||
async (type: string) => {
|
||||
const definition = available?.find((d) => d.type === type);
|
||||
|
||||
// OAuth providers only become installed once the admin's OAuth
|
||||
// callback succeeds; a cancelled or failed flow persists nothing.
|
||||
if (definition?.capabilities?.includes("oauth")) {
|
||||
try {
|
||||
const { authorizationUrl } = await getOAuthInstallUrl({ type });
|
||||
window.location.href = authorizationUrl;
|
||||
} catch (err: any) {
|
||||
notifications.show({
|
||||
message:
|
||||
err?.response?.data?.message ?? t("Failed to start installation"),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
installMutation.mutate({ type });
|
||||
},
|
||||
[installMutation, available, t],
|
||||
);
|
||||
|
||||
const handleUninstall = useCallback(
|
||||
(integrationId: string) => {
|
||||
const installation = installed?.find((i) => i.id === integrationId);
|
||||
const name =
|
||||
available?.find((d) => d.type === installation?.type)?.name ??
|
||||
installation?.type ??
|
||||
"";
|
||||
modals.openConfirmModal({
|
||||
title: t("Uninstall {{name}}", { name }),
|
||||
centered: true,
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"This disables the {{name}} integration for the entire workspace. Members' connections are removed and links are not enriched.",
|
||||
{ name },
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: t("Uninstall"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => uninstallMutation.mutate({ integrationId }),
|
||||
});
|
||||
},
|
||||
[uninstallMutation, installed, available, t],
|
||||
);
|
||||
|
||||
const isLoading = loadingAvailable || loadingInstalled;
|
||||
const error = new URLSearchParams(window.location.search).get("error");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Integrations")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
<SettingsTitle title={t("Integrations")} />
|
||||
|
||||
<Text size="sm" c="dimmed" mb="md">
|
||||
{t("Manage workspace integrations.")}
|
||||
</Text>
|
||||
|
||||
{error === "oauth_failed" && (
|
||||
<Alert color="red" mb="md">
|
||||
{t("OAuth connection failed. Please try again.")}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<IntegrationListSkeleton />
|
||||
) : !available?.length ? (
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("No integrations available.")}
|
||||
</Text>
|
||||
) : (
|
||||
<Stack gap={0}>
|
||||
{available.map((def) => {
|
||||
const installation = installed?.find((i) => i.type === def.type);
|
||||
return (
|
||||
<IntegrationRow
|
||||
key={def.type}
|
||||
definition={def}
|
||||
installation={installation}
|
||||
onInstall={handleInstall}
|
||||
onUninstall={handleUninstall}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams, useNavigate } from "react-router-dom";
|
||||
import { Alert, Button, Card, Group, Loader, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtomValue } from "jotai";
|
||||
import {
|
||||
decodeSlackLinkState,
|
||||
confirmSlackLink,
|
||||
SlackLinkStateInfo,
|
||||
} from "../services/slack-link-service";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import APP_ROUTE from "@/lib/app-route";
|
||||
|
||||
export default function SlackLinkPage() {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const state = searchParams.get("state");
|
||||
const currentUser = useAtomValue(currentUserAtom);
|
||||
|
||||
const [info, setInfo] = useState<SlackLinkStateInfo | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [done, setDone] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser) {
|
||||
const redirectPath = window.location.pathname + window.location.search;
|
||||
navigate(`${APP_ROUTE.AUTH.LOGIN}?redirect=${encodeURIComponent(redirectPath)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state) {
|
||||
setError(t("Missing state parameter"));
|
||||
return;
|
||||
}
|
||||
|
||||
decodeSlackLinkState(state)
|
||||
.then(setInfo)
|
||||
.catch((e) => setError(e?.response?.data?.message ?? e.message));
|
||||
}, [state, t, currentUser, navigate]);
|
||||
|
||||
async function onConfirm() {
|
||||
if (!state) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await confirmSlackLink(state);
|
||||
setDone(true);
|
||||
} catch (e: any) {
|
||||
setError(e?.response?.data?.message ?? e.message);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (done) {
|
||||
return (
|
||||
<Card maw={500} mx="auto" mt={80} p="lg">
|
||||
<Stack>
|
||||
<Text fw={600}>{t("Connected")}</Text>
|
||||
<Text c="dimmed">{t("You can close this tab and return to Slack.")}</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card maw={500} mx="auto" mt={80} p="lg">
|
||||
<Alert color="red" title={t("Could not link account")}>
|
||||
{error}
|
||||
</Alert>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!info || !currentUser) {
|
||||
return (
|
||||
<div style={{ display: "flex", justifyContent: "center", marginTop: 80 }}>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card maw={500} mx="auto" mt={80} p="lg">
|
||||
<Stack>
|
||||
<Text fw={600}>{t("Link your Docmost account to Slack")}</Text>
|
||||
<Text>
|
||||
{t("Connect Docmost account")}{" "}
|
||||
<b>{currentUser.user.email}</b>{" "}
|
||||
{t("to Slack user")} <b>@{info.slackUserName}</b>
|
||||
{info.slackTeamName && (
|
||||
<>
|
||||
{" "}
|
||||
{t("in")} <b>{info.slackTeamName}</b>
|
||||
</>
|
||||
)}
|
||||
?
|
||||
</Text>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => window.close()}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button onClick={onConfirm} loading={submitting}>
|
||||
{t("Confirm")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import * as integrationService from "../services/integration-service";
|
||||
|
||||
export function useAvailableIntegrations() {
|
||||
return useQuery({
|
||||
queryKey: ["available-integrations"],
|
||||
queryFn: integrationService.getAvailableIntegrations,
|
||||
});
|
||||
}
|
||||
|
||||
export function useInstalledIntegrations() {
|
||||
return useQuery({
|
||||
queryKey: ["installed-integrations"],
|
||||
queryFn: integrationService.getInstalledIntegrations,
|
||||
});
|
||||
}
|
||||
|
||||
export function useInstallIntegration() {
|
||||
const qc = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: integrationService.installIntegration,
|
||||
onSuccess: () => {
|
||||
notifications.show({ message: t("Integration installed successfully") });
|
||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to install integration"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUninstallIntegration() {
|
||||
const qc = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: integrationService.uninstallIntegration,
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
message: t("Integration uninstalled successfully"),
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ["installed-integrations"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to uninstall integration"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useMyConnections() {
|
||||
return useQuery({
|
||||
queryKey: ["my-connections"],
|
||||
queryFn: integrationService.getMyConnections,
|
||||
});
|
||||
}
|
||||
|
||||
export function useConnectionStatus(integrationId: string | undefined) {
|
||||
return useQuery({
|
||||
queryKey: ["integration-connection", integrationId],
|
||||
queryFn: () =>
|
||||
integrationService.getConnectionStatus({
|
||||
integrationId: integrationId!,
|
||||
}),
|
||||
enabled: !!integrationId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useDisconnectIntegration() {
|
||||
const qc = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: integrationService.disconnectIntegration,
|
||||
onSuccess: (_data, variables) => {
|
||||
notifications.show({ message: t("Integration disconnected") });
|
||||
qc.invalidateQueries({
|
||||
queryKey: ["integration-connection", variables.integrationId],
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ["my-connections"] });
|
||||
// removeQueries, not invalidate: refetchOnMount false leaves invalidated inactive queries unrefreshed
|
||||
qc.removeQueries({ queryKey: ["unfurl"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
message: errorMessage || t("Failed to disconnect integration"),
|
||||
color: "red",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import api from "@/lib/api-client";
|
||||
import {
|
||||
IntegrationDefinition,
|
||||
Integration,
|
||||
ConnectionStatus,
|
||||
UserConnection,
|
||||
UnfurlResult,
|
||||
UnfurlNeedsConnection,
|
||||
} from "../types/integration.types";
|
||||
|
||||
export async function getAvailableIntegrations(): Promise<
|
||||
IntegrationDefinition[]
|
||||
> {
|
||||
const req = await api.post<IntegrationDefinition[]>(
|
||||
"/integrations/available",
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getInstalledIntegrations(): Promise<Integration[]> {
|
||||
const req = await api.post<Integration[]>("/integrations/list");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function installIntegration(data: {
|
||||
type: string;
|
||||
}): Promise<Integration> {
|
||||
const req = await api.post<Integration>("/integrations/install", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function uninstallIntegration(data: {
|
||||
integrationId: string;
|
||||
}): Promise<void> {
|
||||
await api.post("/integrations/uninstall", data);
|
||||
}
|
||||
|
||||
export async function getMyConnections(): Promise<UserConnection[]> {
|
||||
const req = await api.post<UserConnection[]>("/integrations/connections/mine");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getConnectionStatus(data: {
|
||||
integrationId: string;
|
||||
}): Promise<ConnectionStatus> {
|
||||
const req = await api.post<ConnectionStatus>(
|
||||
"/integrations/connection/status",
|
||||
data,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getOAuthAuthorizeUrl(data: {
|
||||
integrationId: string;
|
||||
returnPath?: string;
|
||||
}): Promise<{ authorizationUrl: string }> {
|
||||
const req = await api.post<{ authorizationUrl: string }>(
|
||||
"/integrations/oauth/authorize",
|
||||
data,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* For workspace-scoped providers: returns the authorize URL WITHOUT creating
|
||||
* the integration row. The row is created atomically when the OAuth callback
|
||||
* succeeds; a cancelled OAuth leaves no half-installed state.
|
||||
*/
|
||||
export async function getOAuthInstallUrl(data: {
|
||||
type: string;
|
||||
}): Promise<{ authorizationUrl: string }> {
|
||||
const req = await api.post<{ authorizationUrl: string }>(
|
||||
"/integrations/oauth/install",
|
||||
data,
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function disconnectIntegration(data: {
|
||||
integrationId: string;
|
||||
}): Promise<void> {
|
||||
await api.post("/integrations/oauth/disconnect", data);
|
||||
}
|
||||
|
||||
export async function unfurlUrl(data: {
|
||||
url: string;
|
||||
}): Promise<UnfurlResult | UnfurlNeedsConnection | null> {
|
||||
const req = await api.post<{
|
||||
data: UnfurlResult | UnfurlNeedsConnection | null;
|
||||
}>("/integrations/unfurl", data);
|
||||
return req.data.data;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import api from "@/lib/api-client";
|
||||
|
||||
export type SlackLinkStateInfo = {
|
||||
slackUserName: string;
|
||||
slackUserId: string;
|
||||
slackTeamId: string;
|
||||
slackTeamName: string | null;
|
||||
integrationWorkspaceId: string | undefined;
|
||||
};
|
||||
|
||||
export async function decodeSlackLinkState(
|
||||
state: string,
|
||||
): Promise<SlackLinkStateInfo> {
|
||||
const req = await api.post<SlackLinkStateInfo>(
|
||||
"/integrations/slack/link/state",
|
||||
{ state },
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function confirmSlackLink(state: string): Promise<void> {
|
||||
await api.post("/integrations/slack/link", { state });
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
export type IntegrationCapability = "oauth" | "unfurl" | "actions";
|
||||
|
||||
export type OAuthConfig = {
|
||||
authUrl: string;
|
||||
tokenUrl: string;
|
||||
scopes: string[];
|
||||
connectionScope?: 'workspace' | 'user';
|
||||
};
|
||||
|
||||
export type IntegrationDefinition = {
|
||||
type: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
capabilities: IntegrationCapability[];
|
||||
oauth?: OAuthConfig;
|
||||
requiresLicense?: boolean;
|
||||
};
|
||||
|
||||
export type Integration = {
|
||||
id: string;
|
||||
workspaceId: string;
|
||||
type: string;
|
||||
settings: Record<string, any> | null;
|
||||
installedById: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type ConnectionStatus = {
|
||||
connected: boolean;
|
||||
providerUserId?: string;
|
||||
};
|
||||
|
||||
export type UserConnection = {
|
||||
integrationId: string;
|
||||
type: string;
|
||||
providerUserId: string | null;
|
||||
providerDisplayName: string | null;
|
||||
connectedAt: string;
|
||||
invalidatedAt: string | null;
|
||||
};
|
||||
|
||||
export type UnfurlResult = {
|
||||
title: string;
|
||||
description?: string;
|
||||
url: string;
|
||||
provider: string;
|
||||
providerIcon?: string;
|
||||
status?: string;
|
||||
statusColor?: string;
|
||||
author?: string;
|
||||
authorAvatarUrl?: string;
|
||||
metadata?: Record<string, any>;
|
||||
};
|
||||
|
||||
// Returned when the link's provider needs a per-user connection the
|
||||
// requesting user has not authorized yet.
|
||||
export type UnfurlNeedsConnection = {
|
||||
needsConnection: true;
|
||||
integrationId: string;
|
||||
integrationType: string;
|
||||
integrationName: string;
|
||||
// false for workspace-scoped providers (Slack): linking happens on the
|
||||
// provider's side, so no Docmost-initiated OAuth button.
|
||||
oauthConnect: boolean;
|
||||
title: string;
|
||||
description?: string;
|
||||
};
|
||||
Reference in New Issue
Block a user