1import { createFileRoute } from "@tanstack/react-router";
2import { EnvironmentId, ProviderInstanceId } from "@t3tools/contracts";
3
4import { ProviderSettingsPanel } from "../components/settings/ProviderSettingsPanel";
5import { useSettingsScope } from "../components/settings/SettingsScopeContext";
6
7/**
8 * Providers are machine state, so the page shows one environment at a time:
9 * the chosen one from the settings scope selector.
10 * A project crumb narrows candidates to where that project is registered.
11 */
12function SettingsProvidersRoute() {
13 const target = Route.useSearch();
14 const { environment, scope } = useSettingsScope();
15 if (!environment) {
16 return (
17 <p className="p-8 text-sm text-muted-foreground">
18 {scope.kind === "environment"
19 ? `Reconnect ${scope.label} to set up its providers.`
20 : "Connect an environment to set up its providers."}
21 </p>
22 );
23 }
24 return (
25 <ProviderSettingsPanel
26 environmentId={environment.environmentId}
27 {...(target.instanceId ? { instanceId: target.instanceId } : {})}
28 projectIds={
29 scope.kind === "project" || scope.kind === "checkout"
30 ? scope.members
31 .filter((member) => member.environmentId === environment.environmentId)
32 .map((member) => member.id)
33 : []
34 }
35 scoped
36 />
37 );
38}
39
40export const Route = createFileRoute("/settings/providers")({
41 validateSearch: (raw: Record<string, unknown>) => ({
42 ...(typeof raw.environmentId === "string" && raw.environmentId.trim()
43 ? { environmentId: EnvironmentId.make(raw.environmentId) }
44 : {}),
45 ...(typeof raw.instanceId === "string" && raw.instanceId.trim()
46 ? { instanceId: ProviderInstanceId.make(raw.instanceId) }
47 : {}),
48 }),
49 component: SettingsProvidersRoute,
50});