Carlos Florêncio
534 lines
18 KiB
TypeScript
534 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import {
|
|
IconAlertTriangle,
|
|
IconBrandGitlab,
|
|
IconCheck,
|
|
IconEye,
|
|
IconEyeOff,
|
|
IconKey,
|
|
IconRefresh,
|
|
IconTrash,
|
|
IconWorld,
|
|
IconX,
|
|
} from "@tabler/icons-react";
|
|
import { Alert, AlertDescription } from "@kandev/ui/alert";
|
|
import { Badge } from "@kandev/ui/badge";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { CardContent } from "@kandev/ui/card";
|
|
import { Input } from "@kandev/ui/input";
|
|
import { Separator } from "@kandev/ui/separator";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
|
|
import { Spinner } from "@kandev/ui/spinner";
|
|
import { WorkspaceScopedSection } from "@/components/integrations/workspace-scoped-section";
|
|
import { GitLabEnabledControl } from "@/components/gitlab/gitlab-enabled-control";
|
|
import { useToast } from "@/components/toast-provider";
|
|
import { SettingsSection } from "@/components/settings/settings-section";
|
|
import { SettingsCard } from "@/components/settings/settings-card";
|
|
import { useSettingsSaveContributor } from "@/components/settings/settings-save-provider";
|
|
import { clearGitLabToken, fetchGitLabStatus, setGitLabConfig } from "@/lib/api/domains/gitlab-api";
|
|
import type { GitLabConfig, GitLabStatus } from "@/lib/types/gitlab";
|
|
import { GitLabWatchSettings } from "./watch-settings";
|
|
import { GitLabActionPresetsSection } from "./action-presets-section";
|
|
import { Trans, useTranslation } from "react-i18next";
|
|
import type { TFunction } from "i18next";
|
|
import { settingsCredentialClassName } from "@/components/settings/settings-control";
|
|
import { INTEGRATION_SETTINGS_TARGETS } from "@/lib/settings-discovery/catalog/integrations";
|
|
|
|
const DEFAULT_HOST = "https://gitlab.com";
|
|
// The bare hostname as it reads mid-sentence. Interpolated rather than written
|
|
// into the catalog so no locale — including pseudo — can transliterate it into a
|
|
// hostname that does not resolve.
|
|
const DEFAULT_HOST_NAME = "gitlab.com";
|
|
|
|
function StatusBadge({ status }: { status: GitLabStatus | null }) {
|
|
const { t } = useTranslation();
|
|
if (!status) return null;
|
|
if (status.authenticated) {
|
|
return (
|
|
<Badge variant="secondary" className="gap-1">
|
|
<IconCheck className="h-3 w-3" /> {t("gitlab:connected")}
|
|
</Badge>
|
|
);
|
|
}
|
|
// A non-empty connection_error means the probe failed for transport reasons
|
|
// (network / 5xx / parse) — distinct from "no token configured", which has
|
|
// an empty connection_error and authenticated=false.
|
|
if (status.connection_error) {
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className="gap-1 border-amber-500/60 text-amber-700 dark:text-amber-300"
|
|
>
|
|
<IconAlertTriangle className="h-3 w-3" /> {t("gitlab:unreachable")}
|
|
</Badge>
|
|
);
|
|
}
|
|
if (status.token_configured || status.auth_method !== "none") {
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className="gap-1 border-amber-500/60 text-amber-700 dark:text-amber-300"
|
|
>
|
|
<IconAlertTriangle className="h-3 w-3" /> {t("gitlab:reconnectRequired")}
|
|
</Badge>
|
|
);
|
|
}
|
|
return (
|
|
<Badge variant="outline" className="gap-1">
|
|
<IconX className="h-3 w-3" /> {t("gitlab:notConnected")}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
// ConnectionErrorAlert renders the per-host transport failure separately from
|
|
// the "bad token" path so users see "GitLab is currently unreachable" instead
|
|
// of "your token is broken" during an outage. Hidden when the probe succeeded
|
|
// or when no token is configured (nothing to probe).
|
|
function ConnectionErrorAlert({ status }: { status: GitLabStatus | null }) {
|
|
const { t } = useTranslation();
|
|
if (!status?.connection_error) return null;
|
|
return (
|
|
<Alert variant="destructive">
|
|
<IconAlertTriangle className="h-4 w-4" />
|
|
<AlertDescription className="text-sm">
|
|
{/* One message rather than a stem plus the host: where the host and the
|
|
upstream error sit in the sentence is the translator's call. Both are
|
|
server data, so they travel through `values`. */}
|
|
<Trans
|
|
i18nKey="gitlab:couldNotReachHost"
|
|
values={{ host: status.host, error: status.connection_error }}
|
|
>
|
|
Couldn't reach <code className="font-mono text-xs">{status.host}</code>:{" "}
|
|
{status.connection_error}
|
|
</Trans>
|
|
<span className="block text-xs opacity-80 mt-1">
|
|
{t("gitlab:yourTokenMayStillBeValid")}
|
|
</span>
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
// The record keys are the wire `auth_method` values the backend sends and must
|
|
// never be translated; only the values are copy. Built inside the component so
|
|
// `t()` runs at render — a module-scope table would freeze at the boot locale.
|
|
// The `?? method` fallback deliberately echoes the raw wire value for a method
|
|
// this build does not know about.
|
|
function AuthMethodBadge({ method }: { method: GitLabStatus["auth_method"] }) {
|
|
const { t } = useTranslation();
|
|
const labels: Record<GitLabStatus["auth_method"], string> = {
|
|
glab_cli: t("gitlab:glabCli"),
|
|
pat: t("gitlab:personalAccessToken"),
|
|
environment: t("gitlab:environmentToken"),
|
|
none: t("gitlab:notConfigured"),
|
|
mock: t("gitlab:mockTest"),
|
|
};
|
|
return <Badge variant="outline">{labels[method] ?? method}</Badge>;
|
|
}
|
|
|
|
function HostForm({
|
|
host,
|
|
baseline,
|
|
onHostChange,
|
|
}: {
|
|
host: string;
|
|
baseline: string;
|
|
onHostChange: (host: string) => void;
|
|
}) {
|
|
const isDirty = host !== baseline;
|
|
return (
|
|
<div className="flex gap-2 items-center">
|
|
<IconWorld className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<Input
|
|
data-testid="gitlab-host-input"
|
|
type="url"
|
|
placeholder={DEFAULT_HOST}
|
|
value={host}
|
|
data-settings-dirty={isDirty}
|
|
onChange={(event) => onHostChange(event.target.value)}
|
|
className={settingsCredentialClassName()}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type GitLabCredentialsFormProps = {
|
|
initial: GitLabConfig["auth_method"];
|
|
initialHost: string;
|
|
host: string;
|
|
workspaceId: string;
|
|
hasToken: boolean;
|
|
onChange: (method: GitLabConfig["auth_method"]) => void;
|
|
onSaved: () => void;
|
|
onDirtyChange: (isDirty: boolean) => void;
|
|
onHostChange: (host: string) => void;
|
|
};
|
|
|
|
function isValidGitLabHost(host: string): boolean {
|
|
try {
|
|
const url = new URL(host.trim());
|
|
return (
|
|
(url.protocol === "http:" || url.protocol === "https:") && !url.username && !url.password
|
|
);
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// `t` is threaded in: this is a plain function, and the guard only inspects JSX,
|
|
// so a literal returned from here would never be reported.
|
|
function credentialInvalidReason(t: TFunction, validHost: boolean, patNeedsToken: boolean) {
|
|
if (!validHost) return t("gitlab:enterAValidHttpOrHttpsGitlabHost");
|
|
if (patNeedsToken) return t("gitlab:enterAPersonalAccessTokenToSwitch");
|
|
return undefined;
|
|
}
|
|
|
|
function useGitLabCredentialDraft({
|
|
initial,
|
|
initialHost,
|
|
host,
|
|
workspaceId,
|
|
hasToken,
|
|
onChange,
|
|
onSaved,
|
|
onDirtyChange,
|
|
onHostChange,
|
|
}: GitLabCredentialsFormProps) {
|
|
const { t } = useTranslation();
|
|
const [method, setMethod] = useState(initial);
|
|
const [baseline, setBaseline] = useState(initial);
|
|
const [syncedInitial, setSyncedInitial] = useState(initial);
|
|
const [hostBaseline, setHostBaseline] = useState(initialHost);
|
|
const [token, setToken] = useState("");
|
|
const { toast } = useToast();
|
|
const isDirty = method !== baseline || Boolean(token) || host.trim() !== hostBaseline;
|
|
useEffect(() => onDirtyChange(isDirty), [isDirty, onDirtyChange]);
|
|
if (initial !== syncedInitial && method === baseline) {
|
|
setSyncedInitial(initial);
|
|
setBaseline(initial);
|
|
setMethod(initial);
|
|
}
|
|
if (initialHost !== hostBaseline && !token && method === baseline) {
|
|
setHostBaseline(initialHost);
|
|
}
|
|
const save = useCallback(async () => {
|
|
try {
|
|
const submittedToken = token.trim();
|
|
await setGitLabConfig(
|
|
{
|
|
host: host.trim(),
|
|
auth_method: method,
|
|
...(method === "pat" && submittedToken ? { token: submittedToken } : {}),
|
|
},
|
|
{ workspaceId },
|
|
);
|
|
setBaseline(method);
|
|
setHostBaseline(host.trim());
|
|
setToken((current) => (current.trim() === submittedToken ? "" : current));
|
|
toast({ description: t("gitlab:gitlabAuthenticationMethodUpdated"), variant: "success" });
|
|
onSaved();
|
|
} catch (error) {
|
|
toast({
|
|
description:
|
|
error instanceof Error ? error.message : t("gitlab:failedToUpdateAuthenticationMethod"),
|
|
variant: "error",
|
|
});
|
|
throw error;
|
|
}
|
|
}, [host, method, onSaved, t, toast, token, workspaceId]);
|
|
const patNeedsToken = method === "pat" && !hasToken && !token.trim();
|
|
const validHost = isValidGitLabHost(host);
|
|
useSettingsSaveContributor({
|
|
id: "gitlab-credentials",
|
|
revision: JSON.stringify({ host: host.trim(), method, token }),
|
|
isDirty,
|
|
canSave: validHost && !patNeedsToken,
|
|
invalidReason: credentialInvalidReason(t, validHost, patNeedsToken),
|
|
save,
|
|
discard: () => {
|
|
setMethod(baseline);
|
|
setToken("");
|
|
onHostChange(hostBaseline);
|
|
onChange(baseline);
|
|
},
|
|
});
|
|
const selectMethod = (value: string) => {
|
|
const next = value as GitLabConfig["auth_method"];
|
|
setMethod(next);
|
|
onChange(next);
|
|
};
|
|
return { method, token, setToken, selectMethod, isDirty };
|
|
}
|
|
|
|
/** Credential form (PAT or OAuth) for connecting a workspace's GitLab account. */
|
|
export function GitLabCredentialsForm(props: GitLabCredentialsFormProps) {
|
|
const { t } = useTranslation();
|
|
const draft = useGitLabCredentialDraft(props);
|
|
const [showToken, setShowToken] = useState(false);
|
|
return (
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-muted-foreground">{t("gitlab:chooseAWorkspacePatTheLocal")}</p>
|
|
<Select value={draft.method} onValueChange={draft.selectMethod}>
|
|
<SelectTrigger
|
|
aria-label={t("gitlab:authenticationMethod")}
|
|
className="w-full cursor-pointer sm:w-64"
|
|
data-settings-dirty={draft.isDirty}
|
|
>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="pat" className="cursor-pointer">
|
|
{t("gitlab:personalAccessToken")}
|
|
</SelectItem>
|
|
<SelectItem value="glab_cli" className="cursor-pointer">
|
|
{t("gitlab:glabCli")}
|
|
</SelectItem>
|
|
<SelectItem value="environment" className="cursor-pointer">
|
|
{t("gitlab:environmentToken")}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{draft.method === "pat" ? (
|
|
<div className="flex items-center gap-2">
|
|
<IconKey className="h-4 w-4 shrink-0 text-muted-foreground" />
|
|
<div className="relative flex-1">
|
|
<Input
|
|
data-testid="gitlab-token-input"
|
|
type={showToken ? "text" : "password"}
|
|
placeholder="glpat-xxxxxxxxxxxxxxxxxxxx"
|
|
value={draft.token}
|
|
data-settings-dirty={Boolean(draft.token)}
|
|
onChange={(event) => draft.setToken(event.target.value)}
|
|
className={settingsCredentialClassName("pr-9")}
|
|
autoComplete="off"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowToken((value) => !value)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer text-muted-foreground hover:text-foreground"
|
|
aria-label={showToken ? t("gitlab:hideToken") : t("gitlab:showToken")}
|
|
>
|
|
{showToken ? <IconEyeOff className="h-4 w-4" /> : <IconEye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ClearTokenButton({
|
|
workspaceId,
|
|
onCleared,
|
|
}: {
|
|
workspaceId: string;
|
|
onCleared: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [busy, setBusy] = useState(false);
|
|
const { toast } = useToast();
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={busy}
|
|
onClick={async () => {
|
|
setBusy(true);
|
|
try {
|
|
await clearGitLabToken({ workspaceId });
|
|
toast({ description: t("gitlab:gitlabTokenCleared") });
|
|
onCleared();
|
|
} catch (err) {
|
|
toast({
|
|
description: err instanceof Error ? err.message : t("gitlab:failedToClearToken"),
|
|
variant: "error",
|
|
});
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}}
|
|
className="gap-1 cursor-pointer"
|
|
>
|
|
{busy ? <Spinner className="h-3 w-3" /> : <IconTrash className="h-3 w-3" />}
|
|
{t("gitlab:clearToken")}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
type GitLabIntegrationPageProps = {
|
|
workspaceId?: string;
|
|
};
|
|
|
|
/** GitLab's own settings page: connection, action presets, and watch settings. */
|
|
export function GitLabIntegrationPage({ workspaceId }: GitLabIntegrationPageProps = {}) {
|
|
return (
|
|
<WorkspaceScopedSection workspaceId={workspaceId}>
|
|
{(ws) => (
|
|
<div key={ws} className="space-y-8">
|
|
<GitLabConnectionSection workspaceId={ws} />
|
|
<GitLabActionPresetsSection workspaceId={ws} />
|
|
<GitLabWatchSettings workspaceId={ws} />
|
|
</div>
|
|
)}
|
|
</WorkspaceScopedSection>
|
|
);
|
|
}
|
|
|
|
function editableAuthMethod(status: GitLabStatus | null): GitLabConfig["auth_method"] {
|
|
return status?.auth_method === "glab_cli" || status?.auth_method === "environment"
|
|
? status.auth_method
|
|
: "pat";
|
|
}
|
|
|
|
type ConnectionCardProps = {
|
|
workspaceId: string;
|
|
status: GitLabStatus | null;
|
|
loading: boolean;
|
|
authMethodDirty: boolean;
|
|
hostDraft: string;
|
|
authMethodDraft: GitLabConfig["auth_method"];
|
|
setHostDraft: (host: string) => void;
|
|
setAuthMethodDraft: (method: GitLabConfig["auth_method"]) => void;
|
|
setAuthMethodDirty: (dirty: boolean) => void;
|
|
reload: () => Promise<void>;
|
|
};
|
|
|
|
function ConnectionStatusRow({ status }: { status: GitLabStatus | null }) {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<StatusBadge status={status} />
|
|
{status && <AuthMethodBadge method={status.auth_method} />}
|
|
{status?.glab_version ? (
|
|
<Badge variant="outline" className="font-mono text-xs">
|
|
glab {status.glab_version}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
{status?.username ? (
|
|
<span className="text-xs text-muted-foreground">
|
|
<Trans i18nKey="gitlab:loggedInAs" values={{ username: status.username }}>
|
|
Logged in as <span className="font-medium">{status.username}</span>
|
|
</Trans>
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GitLabConnectionCard(props: ConnectionCardProps) {
|
|
const { t } = useTranslation();
|
|
const {
|
|
workspaceId,
|
|
status,
|
|
loading,
|
|
authMethodDirty,
|
|
hostDraft,
|
|
authMethodDraft,
|
|
setHostDraft,
|
|
setAuthMethodDraft,
|
|
setAuthMethodDirty,
|
|
reload,
|
|
} = props;
|
|
return (
|
|
<SettingsSection
|
|
discoveryTargetId={INTEGRATION_SETTINGS_TARGETS.gitlab}
|
|
title="GitLab"
|
|
description={t("gitlab:connectAGitlabAccountSoKandev")}
|
|
icon={<IconBrandGitlab className="h-4 w-4" />}
|
|
action={
|
|
<div className="flex items-center gap-2">
|
|
<GitLabEnabledControl workspaceId={workspaceId} />
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => void reload()}
|
|
disabled={loading}
|
|
className="gap-1 cursor-pointer"
|
|
>
|
|
<IconRefresh className="h-3 w-3" /> {t("gitlab:refresh")}
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<SettingsCard isDirty={authMethodDirty}>
|
|
<CardContent className="space-y-4 py-4">
|
|
<ConnectionErrorAlert status={status} />
|
|
<ConnectionStatusRow status={status} />
|
|
<Separator />
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-muted-foreground">
|
|
{t("gitlab:gitlabHostUrlOverrideForSelf", { host: DEFAULT_HOST_NAME })}
|
|
</p>
|
|
<HostForm
|
|
host={hostDraft}
|
|
baseline={status?.host ?? DEFAULT_HOST}
|
|
onHostChange={setHostDraft}
|
|
/>
|
|
</div>
|
|
<Separator />
|
|
<GitLabCredentialsForm
|
|
initial={editableAuthMethod(status)}
|
|
initialHost={status?.host ?? DEFAULT_HOST}
|
|
host={hostDraft}
|
|
workspaceId={workspaceId}
|
|
hasToken={Boolean(status?.token_configured)}
|
|
onChange={setAuthMethodDraft}
|
|
onSaved={() => void reload()}
|
|
onDirtyChange={setAuthMethodDirty}
|
|
onHostChange={setHostDraft}
|
|
/>
|
|
{authMethodDraft === "pat" && status?.token_configured ? (
|
|
<div className="flex justify-end">
|
|
<ClearTokenButton workspaceId={workspaceId} onCleared={() => void reload()} />
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</SettingsCard>
|
|
</SettingsSection>
|
|
);
|
|
}
|
|
|
|
function GitLabConnectionSection({ workspaceId }: { workspaceId: string }) {
|
|
const [status, setStatus] = useState<GitLabStatus | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [authMethodDirty, setAuthMethodDirty] = useState(false);
|
|
const [hostDraft, setHostDraft] = useState(DEFAULT_HOST);
|
|
const [authMethodDraft, setAuthMethodDraft] = useState<GitLabConfig["auth_method"]>("pat");
|
|
|
|
const reload = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const next = await fetchGitLabStatus({ cache: "no-store", workspaceId });
|
|
setStatus(next);
|
|
setHostDraft(next?.host ?? DEFAULT_HOST);
|
|
setAuthMethodDraft(editableAuthMethod(next));
|
|
} catch {
|
|
setStatus(null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [workspaceId]);
|
|
|
|
useEffect(() => {
|
|
void reload();
|
|
}, [reload]);
|
|
|
|
return (
|
|
<GitLabConnectionCard
|
|
workspaceId={workspaceId}
|
|
status={status}
|
|
loading={loading}
|
|
authMethodDirty={authMethodDirty}
|
|
hostDraft={hostDraft}
|
|
authMethodDraft={authMethodDraft}
|
|
setHostDraft={setHostDraft}
|
|
setAuthMethodDraft={setAuthMethodDraft}
|
|
setAuthMethodDirty={setAuthMethodDirty}
|
|
reload={reload}
|
|
/>
|
|
);
|
|
}
|