mirror of
https://github.com/coder/coder.git
synced 2026-09-21 20:51:01 +08:00
feat(site): add AI settings providers pages and routes (#25583)
> 🤖 This PR was written by Coder Agents on behalf of Jake Howell. Linear: [DEVEX-355](https://linear.app/coder/issue/DEVEX-355) Fourth PR in a 5-PR stack splitting #25328. Wires the new `/ai/settings` provider management UI. - `AISettingsLayout` hosts the section under `/ai/settings` with a sidebar outlet. - `AISettingsSidebar(View)` shows a single "Providers" nav entry. The remaining sidebar entries arrive with the broader AI settings section reshuffle in the next PR. - `ProvidersPage` lists configured AI providers via the queries added in PR 2. - `AddProviderPage` walks through provider-type selection and form submission, with type-specific credential fields. - `UpdateProviderPage` edits an existing provider with the same form components. - Storybook stories cover each view's loading, empty, populated, error, and form states using the mock providers from `testHelpers/entities.ts`. - `router.tsx` mounts the new `/ai/settings` layout with index, `add`, and `:providerId` child routes. The `governance` child route lands together with the dashboard navigation changes in the next PR. Removes the now-unused knip ignore entries for `src/api/queries/aiProviders.ts` and `src/pages/AISettingsPage/ProvidersPage/components/addableProviderTypes.ts`, and drops the matching `@lintignore` tags on `getProviderIcon` and `MockAIProviders` since the pages and page stories now consume them. <details> <summary>Stack</summary> 1. #25579 jakehwll/DEVEX-355/01-primitives, primitives 2. #25580 jakehwll/DEVEX-355/02-api, API client and query layer 3. #25581 jakehwll/DEVEX-355/03-components, provider form components 4. **jakehwll/DEVEX-355/04-pages, pages and routes (this PR)** 5. jakehwll/DEVEX-355/05-section, section reshuffle Replaces #25328 once the stack lands. </details>
This commit is contained in:
Jake Howell
@@ -11,14 +11,6 @@
|
||||
"ignore": [
|
||||
"**/*Generated.ts",
|
||||
"src/api/chatModelOptions.ts",
|
||||
// TODO(ai-settings): aiProviders.ts queries are staged in PR 2 of the
|
||||
// AI settings stack; they are consumed by the provider pages in PR 4.
|
||||
// Remove this exclusion once those pages land.
|
||||
"src/api/queries/aiProviders.ts",
|
||||
// TODO(ai-settings): addableProviderTypes.ts is staged in PR 3 of the
|
||||
// AI settings stack; its exports are consumed by the provider pages
|
||||
// in PR 4. Remove this exclusion once those pages land.
|
||||
"src/pages/AISettingsPage/ProvidersPage/components/addableProviderTypes.ts",
|
||||
// TODO(devtools): debugPanelUtils.ts is staged in PR 7; its exports are
|
||||
// consumed by the Debug panel components in PRs 8 and 9. Remove this
|
||||
// exclusion once the panel components land.
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import AISettingsSidebarView from "#/modules/management/AISettingsSidebarView";
|
||||
|
||||
/**
|
||||
* A sidebar for AI settings.
|
||||
*/
|
||||
export const AISettingsSidebar: React.FC = () => {
|
||||
return <AISettingsSidebarView />;
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
import {
|
||||
Sidebar as BaseSidebar,
|
||||
SettingsSidebarNavItem as SidebarNavItem,
|
||||
} from "#/components/Sidebar/Sidebar";
|
||||
|
||||
const AISettingsSidebarView: React.FC = () => {
|
||||
return (
|
||||
<BaseSidebar>
|
||||
<div className="flex flex-col gap-1">
|
||||
<SidebarNavItem href="/ai/settings">Providers</SidebarNavItem>
|
||||
</div>
|
||||
</BaseSidebar>
|
||||
);
|
||||
};
|
||||
|
||||
export default AISettingsSidebarView;
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Suspense } from "react";
|
||||
import { Outlet } from "react-router";
|
||||
import { Loader } from "#/components/Loader/Loader";
|
||||
import { AISettingsSidebar } from "#/modules/management/AISettingsSidebar";
|
||||
|
||||
const AISettingsLayout = () => {
|
||||
return (
|
||||
<section className="px-10 w-full max-w-screen-2xl mx-auto">
|
||||
<div className="flex flex-row gap-28 py-10">
|
||||
<AISettingsSidebar />
|
||||
<div className="grow">
|
||||
<Suspense fallback={<Loader />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AISettingsLayout;
|
||||
@@ -0,0 +1,49 @@
|
||||
import { ArrowLeftIcon } from "lucide-react";
|
||||
import { Link, useSearchParams } from "react-router";
|
||||
import { Alert, AlertDescription, AlertTitle } from "#/components/Alert/Alert";
|
||||
import { Button } from "#/components/Button/Button";
|
||||
import { useAuthenticated } from "#/hooks/useAuthenticated";
|
||||
import { RequirePermission } from "#/modules/permissions/RequirePermission";
|
||||
import { pageTitle } from "#/utils/page";
|
||||
import { addableProviders } from "../components/addableProviderTypes";
|
||||
import AddProviderPageView from "./AddProviderPageView";
|
||||
|
||||
const AddProviderPage: React.FC = () => {
|
||||
const { permissions } = useAuthenticated();
|
||||
const hasPermission = permissions.viewAnyAIProvider;
|
||||
const [searchParams] = useSearchParams();
|
||||
const typeParam = searchParams.get("type");
|
||||
|
||||
const provider = addableProviders.find((p) => p.value === typeParam);
|
||||
if (!provider) {
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-4 pt-4 px-6">
|
||||
<Link to="/ai/settings">
|
||||
<Button variant="subtle">
|
||||
<ArrowLeftIcon />
|
||||
<span>Back to providers</span>
|
||||
</Button>
|
||||
</Link>
|
||||
<Alert severity="warning">
|
||||
<AlertTitle>Provider type not found</AlertTitle>
|
||||
<AlertDescription>
|
||||
The provider type you are trying to add is not valid. Please try
|
||||
again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<RequirePermission isFeatureVisible={hasPermission}>
|
||||
<title>
|
||||
{pageTitle(`New ${provider.label} Provider`, "AI Providers")}
|
||||
</title>
|
||||
|
||||
<AddProviderPageView provider={provider} />
|
||||
</RequirePermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProviderPage;
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { reactRouterParameters } from "storybook-addon-remix-react-router";
|
||||
import { withToaster } from "#/testHelpers/storybook";
|
||||
import { addableProviders } from "../components/addableProviderTypes";
|
||||
import AddProviderPageView from "./AddProviderPageView";
|
||||
|
||||
const meta: Meta<typeof AddProviderPageView> = {
|
||||
title: "pages/AISettingsPage/AddProviderPage",
|
||||
component: AddProviderPageView,
|
||||
decorators: [withToaster],
|
||||
parameters: {
|
||||
reactRouter: reactRouterParameters({
|
||||
location: { path: "/ai/settings/add" },
|
||||
routing: [
|
||||
{ path: "/ai/settings", useStoryElement: true },
|
||||
{ path: "/ai/settings/add", useStoryElement: true },
|
||||
],
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof AddProviderPageView>;
|
||||
|
||||
export const AddAnthropic: Story = {
|
||||
args: {
|
||||
provider: addableProviders.find((p) => p.value === "anthropic")!,
|
||||
},
|
||||
};
|
||||
|
||||
export const AddOpenAI: Story = {
|
||||
args: {
|
||||
provider: addableProviders.find((p) => p.value === "openai")!,
|
||||
},
|
||||
};
|
||||
|
||||
export const AddBedrock: Story = {
|
||||
args: {
|
||||
provider: addableProviders.find((p) => p.value === "bedrock")!,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,81 @@
|
||||
import { ArrowLeftIcon } from "lucide-react";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { getErrorMessage } from "#/api/errors";
|
||||
import { createAIProviderMutation } from "#/api/queries/aiProviders";
|
||||
import { Avatar } from "#/components/Avatar/Avatar";
|
||||
import { Button } from "#/components/Button/Button";
|
||||
import { SettingsHeaderTitle } from "#/components/SettingsHeader/SettingsHeader";
|
||||
import type { AddableProvider } from "../components/addableProviderTypes";
|
||||
import { ProviderForm } from "../components/ProviderForm";
|
||||
import { getProviderIcon } from "../components/ProviderIcon";
|
||||
import { providerFormValuesToCreate } from "../components/providerFormApiMap";
|
||||
|
||||
interface AddProviderPageViewProps {
|
||||
provider: AddableProvider;
|
||||
}
|
||||
|
||||
const AddProviderPageView: React.FC<AddProviderPageViewProps> = ({
|
||||
provider,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const createMutation = useMutation(createAIProviderMutation(queryClient));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link to="/ai/settings" className="-ml-3">
|
||||
<Button variant="subtle">
|
||||
<ArrowLeftIcon />
|
||||
<span>Back to providers</span>
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex flex-col gap-6 pt-6">
|
||||
<div className="flex items-center gap-4 min-w-0">
|
||||
<Avatar
|
||||
variant="icon"
|
||||
size="lg"
|
||||
src={getProviderIcon(provider.value)}
|
||||
/>
|
||||
<SettingsHeaderTitle>{`Add a ${provider.label} provider`}</SettingsHeaderTitle>
|
||||
</div>
|
||||
<p className="text-sm text-content-secondary m-0">
|
||||
Configure connection details and credentials.
|
||||
</p>
|
||||
<div className="border border-solid p-6 rounded-lg">
|
||||
<ProviderForm
|
||||
editing={false}
|
||||
initialValues={{ type: provider.value }}
|
||||
isLoading={createMutation.isPending}
|
||||
submitError={createMutation.error}
|
||||
onSubmit={async (values) => {
|
||||
const request = providerFormValuesToCreate(values);
|
||||
try {
|
||||
const res = await createMutation.mutateAsync(request);
|
||||
toast.success(
|
||||
`Provider "${res.display_name || res.name}" added.`,
|
||||
);
|
||||
// Awaited so the form's submitting state stays true through
|
||||
// navigation, keeping the unsaved-changes prompt suppressed.
|
||||
await navigate(`/ai/settings/${res.name}`);
|
||||
} catch (error) {
|
||||
const name = values.name.trim();
|
||||
toast.error(
|
||||
getErrorMessage(
|
||||
error,
|
||||
name
|
||||
? `Failed to add provider "${name}".`
|
||||
: "Failed to add provider.",
|
||||
),
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProviderPageView;
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useQuery } from "react-query";
|
||||
import { aiProvidersList } from "#/api/queries/aiProviders";
|
||||
import { useAuthenticated } from "#/hooks/useAuthenticated";
|
||||
import { RequirePermission } from "#/modules/permissions/RequirePermission";
|
||||
import ProvidersPageView from "#/pages/AISettingsPage/ProvidersPage/ProvidersPageView";
|
||||
import { pageTitle } from "#/utils/page";
|
||||
|
||||
const ProvidersPage: React.FC = () => {
|
||||
const { permissions } = useAuthenticated();
|
||||
const hasPermission = permissions.viewAnyAIProvider;
|
||||
|
||||
const providersQuery = useQuery(aiProvidersList());
|
||||
|
||||
return (
|
||||
<RequirePermission isFeatureVisible={hasPermission}>
|
||||
<title>{pageTitle("AI Providers")}</title>
|
||||
|
||||
<ProvidersPageView
|
||||
isLoading={providersQuery.isLoading}
|
||||
isFetching={providersQuery.isFetching}
|
||||
error={providersQuery.error}
|
||||
providers={providersQuery.data ?? []}
|
||||
/>
|
||||
</RequirePermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProvidersPage;
|
||||
@@ -0,0 +1,63 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { reactRouterParameters } from "storybook-addon-remix-react-router";
|
||||
import { MockAIProviders } from "#/testHelpers/entities";
|
||||
import ProvidersPageView from "./ProvidersPageView";
|
||||
|
||||
const meta: Meta<typeof ProvidersPageView> = {
|
||||
title: "pages/AISettingsPage/ProvidersPageView",
|
||||
component: ProvidersPageView,
|
||||
args: {
|
||||
isLoading: false,
|
||||
isFetching: false,
|
||||
error: null,
|
||||
providers: MockAIProviders,
|
||||
},
|
||||
parameters: {
|
||||
reactRouter: reactRouterParameters({
|
||||
location: { path: "/ai/settings" },
|
||||
routing: [
|
||||
{ path: "/ai/settings", useStoryElement: true },
|
||||
{ path: "/ai/settings/add", useStoryElement: true },
|
||||
{ path: "/ai/settings/:providerId", useStoryElement: true },
|
||||
],
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ProvidersPageView>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const Loading: Story = {
|
||||
args: {
|
||||
isLoading: true,
|
||||
isFetching: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptyProviders: Story = {
|
||||
args: {
|
||||
providers: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const LoadError: Story = {
|
||||
args: {
|
||||
isLoading: false,
|
||||
isFetching: false,
|
||||
error: new Error("Failed to load providers"),
|
||||
providers: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const AddProviderDropdownOpen: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const trigger = await canvas.findByRole("button", {
|
||||
name: /add provider/i,
|
||||
});
|
||||
await userEvent.click(trigger);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,126 @@
|
||||
import { ChevronDownIcon, PlusIcon } from "lucide-react";
|
||||
import { useNavigate } from "react-router";
|
||||
import type { AIProvider } from "#/api/typesGenerated";
|
||||
import { ErrorAlert } from "#/components/Alert/ErrorAlert";
|
||||
import { Button } from "#/components/Button/Button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "#/components/DropdownMenu/DropdownMenu";
|
||||
import {
|
||||
SettingsHeader,
|
||||
SettingsHeaderDescription,
|
||||
SettingsHeaderTitle,
|
||||
} from "#/components/SettingsHeader/SettingsHeader";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "#/components/Table/Table";
|
||||
import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
|
||||
import { TableLoader } from "#/components/TableLoader/TableLoader";
|
||||
import { addableProviders } from "#/pages/AISettingsPage/ProvidersPage/components/addableProviderTypes";
|
||||
import { ProviderIcon } from "#/pages/AISettingsPage/ProvidersPage/components/ProviderIcon";
|
||||
import { ProviderRow } from "#/pages/AISettingsPage/ProvidersPage/components/ProviderRow";
|
||||
|
||||
interface ProvidersPageViewProps {
|
||||
isLoading: boolean;
|
||||
isFetching: boolean;
|
||||
error: unknown;
|
||||
providers: AIProvider[];
|
||||
}
|
||||
|
||||
const AddProviderDropdown: React.FC<{ align?: "start" | "end" }> = ({
|
||||
align = "end",
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<PlusIcon />
|
||||
<span>Add provider</span>
|
||||
<ChevronDownIcon className="ml-1 size-icon-xs" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align={align} className="min-w-56">
|
||||
<div className="px-2 py-1.5 text-xs font-medium text-content-secondary">
|
||||
Select a provider
|
||||
</div>
|
||||
{addableProviders.map((entry) => (
|
||||
<DropdownMenuItem
|
||||
key={entry.value}
|
||||
onSelect={() =>
|
||||
void navigate(
|
||||
`/ai/settings/add?type=${encodeURIComponent(entry.value)}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<ProviderIcon provider={entry.value} />
|
||||
<span>{entry.label}</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
|
||||
const ProvidersPageView: React.FC<ProvidersPageViewProps> = ({
|
||||
isLoading,
|
||||
isFetching,
|
||||
error,
|
||||
providers,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SettingsHeader actions={<AddProviderDropdown />}>
|
||||
<SettingsHeaderTitle>Providers</SettingsHeaderTitle>
|
||||
<SettingsHeaderDescription>
|
||||
Connect third-party LLM services like OpenAI, Anthropic, or Amazon
|
||||
Bedrock. Each provider supplies models that users can select for their
|
||||
conversations.
|
||||
</SettingsHeaderDescription>
|
||||
</SettingsHeader>
|
||||
{Boolean(error) && (
|
||||
<div className="mb-4">
|
||||
<ErrorAlert error={error} />
|
||||
</div>
|
||||
)}
|
||||
<Table className="table-fixed" aria-label="AI providers">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-1/3">Name</TableHead>
|
||||
<TableHead className="w-1/3">Base URL</TableHead>
|
||||
<TableHead className="w-22">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading || isFetching ? (
|
||||
<TableLoader />
|
||||
) : providers.length === 0 ? (
|
||||
<TableEmpty
|
||||
message="No providers configured"
|
||||
cta={<AddProviderDropdown align="start" />}
|
||||
/>
|
||||
) : (
|
||||
providers.map((provider) => (
|
||||
<ProviderRow
|
||||
key={provider.name}
|
||||
provider={provider}
|
||||
onClick={() => navigate(`/ai/settings/${provider.name}`)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProvidersPageView;
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useAuthenticated } from "#/hooks/useAuthenticated";
|
||||
import { RequirePermission } from "#/modules/permissions/RequirePermission";
|
||||
import UpdateProviderPageView from "./UpdateProviderPageView";
|
||||
|
||||
const UpdateProviderPage: React.FC = () => {
|
||||
const { permissions } = useAuthenticated();
|
||||
const hasPermission = permissions.viewAnyAIProvider;
|
||||
|
||||
return (
|
||||
<RequirePermission isFeatureVisible={hasPermission}>
|
||||
<UpdateProviderPageView />
|
||||
</RequirePermission>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateProviderPage;
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { expect, screen, userEvent, within } from "storybook/test";
|
||||
import { reactRouterParameters } from "storybook-addon-remix-react-router";
|
||||
import type { AIProvider } from "#/api/typesGenerated";
|
||||
import {
|
||||
MockAIProviderAnthropic,
|
||||
MockAIProviderBedrock,
|
||||
MockAIProviderOpenAI,
|
||||
} from "#/testHelpers/entities";
|
||||
import { withToaster } from "#/testHelpers/storybook";
|
||||
import UpdateProviderPageView from "./UpdateProviderPageView";
|
||||
|
||||
const routingFor = (path: string) =>
|
||||
reactRouterParameters({
|
||||
location: { path },
|
||||
routing: [
|
||||
{ path: "/ai/settings", useStoryElement: true },
|
||||
{ path: "/ai/settings/:providerId", useStoryElement: true },
|
||||
],
|
||||
});
|
||||
|
||||
const seed = (provider: AIProvider) => ({
|
||||
queries: [{ key: ["ai", "providers", provider.name], data: provider }],
|
||||
});
|
||||
|
||||
const meta: Meta<typeof UpdateProviderPageView> = {
|
||||
title: "pages/AISettingsPage/UpdateProviderPageView",
|
||||
component: UpdateProviderPageView,
|
||||
decorators: [withToaster],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof UpdateProviderPageView>;
|
||||
|
||||
export const OpenAI: Story = {
|
||||
parameters: {
|
||||
reactRouter: routingFor(`/ai/settings/${MockAIProviderOpenAI.name}`),
|
||||
...seed(MockAIProviderOpenAI),
|
||||
},
|
||||
};
|
||||
|
||||
export const Anthropic: Story = {
|
||||
parameters: {
|
||||
reactRouter: routingFor(`/ai/settings/${MockAIProviderAnthropic.name}`),
|
||||
...seed(MockAIProviderAnthropic),
|
||||
},
|
||||
};
|
||||
|
||||
export const Bedrock: Story = {
|
||||
parameters: {
|
||||
reactRouter: routingFor(`/ai/settings/${MockAIProviderBedrock.name}`),
|
||||
...seed(MockAIProviderBedrock),
|
||||
},
|
||||
};
|
||||
|
||||
// No seeded query: the page renders the loader while useQuery fetches.
|
||||
export const Loading: Story = {
|
||||
parameters: {
|
||||
reactRouter: routingFor("/ai/settings/loading-provider"),
|
||||
},
|
||||
};
|
||||
|
||||
export const DeleteDialogOpen: Story = {
|
||||
parameters: {
|
||||
reactRouter: routingFor(`/ai/settings/${MockAIProviderOpenAI.name}`),
|
||||
...seed(MockAIProviderOpenAI),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const deleteButton = await canvas.findByRole("button", {
|
||||
name: /^delete$/i,
|
||||
});
|
||||
await userEvent.click(deleteButton);
|
||||
// DeleteDialog renders via Radix portal, so search the document, not
|
||||
// just the story canvas.
|
||||
await expect(await screen.findByRole("dialog")).toBeInTheDocument();
|
||||
await expect(await screen.findByText(/irreversible/i)).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
import { isAxiosError } from "axios";
|
||||
import { ArrowLeftIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { Link, Navigate, useNavigate, useParams } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { getErrorMessage } from "#/api/errors";
|
||||
import {
|
||||
aiProvider,
|
||||
deleteAIProviderMutation,
|
||||
updateAIProviderMutation,
|
||||
} from "#/api/queries/aiProviders";
|
||||
import { Avatar } from "#/components/Avatar/Avatar";
|
||||
import { Badge } from "#/components/Badge/Badge";
|
||||
import { Button } from "#/components/Button/Button";
|
||||
import { DeleteDialog } from "#/components/Dialogs/DeleteDialog/DeleteDialog";
|
||||
import { Loader } from "#/components/Loader/Loader";
|
||||
import { SettingsHeaderTitle } from "#/components/SettingsHeader/SettingsHeader";
|
||||
import { Switch } from "#/components/Switch/Switch";
|
||||
import { pageTitle } from "#/utils/page";
|
||||
import { ProviderForm } from "../components/ProviderForm";
|
||||
import { getProviderIcon } from "../components/ProviderIcon";
|
||||
import {
|
||||
aiProviderToFormValues,
|
||||
getProviderDisplayType,
|
||||
hasBedrockStoredCredentials,
|
||||
isBedrockProvider,
|
||||
providerFormValuesToUpdate,
|
||||
} from "../components/providerFormApiMap";
|
||||
|
||||
const BACK_HREF = "/ai/settings";
|
||||
|
||||
const UpdateProviderPageView: React.FC = () => {
|
||||
const { providerId } = useParams<{ providerId: string }>();
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
|
||||
const providerQuery = useQuery({
|
||||
...aiProvider(providerId ?? ""),
|
||||
enabled: Boolean(providerId),
|
||||
});
|
||||
|
||||
const provider = providerQuery.data;
|
||||
const providerIsOpenAiAnthropic =
|
||||
provider !== undefined && !isBedrockProvider(provider);
|
||||
|
||||
const updateMutation = useMutation(
|
||||
updateAIProviderMutation(queryClient, providerId ?? ""),
|
||||
);
|
||||
|
||||
const deleteMutation = useMutation(
|
||||
deleteAIProviderMutation(queryClient, providerId ?? ""),
|
||||
);
|
||||
|
||||
// Rendered into every non-redirect return so the document title reflects
|
||||
// the provider as soon as we know it; falls back to a placeholder while
|
||||
// the query is in flight.
|
||||
const title = (
|
||||
<title>
|
||||
{pageTitle(
|
||||
(provider?.display_name || provider?.name) ?? "Loading...",
|
||||
"AI Providers",
|
||||
)}
|
||||
</title>
|
||||
);
|
||||
|
||||
if (!providerId) {
|
||||
return <Navigate to={BACK_HREF} replace />;
|
||||
}
|
||||
|
||||
if (providerQuery.isLoading) {
|
||||
return (
|
||||
<>
|
||||
{title}
|
||||
<Loader fullscreen />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (providerQuery.isError) {
|
||||
const status = isAxiosError(providerQuery.error)
|
||||
? providerQuery.error.response?.status
|
||||
: undefined;
|
||||
if (status === 404) {
|
||||
return <Navigate to={BACK_HREF} replace />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{title}
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-content-secondary">
|
||||
{getErrorMessage(providerQuery.error, "Failed to load provider.")}
|
||||
</p>
|
||||
<Link to={BACK_HREF} className="-ml-3">
|
||||
<Button variant="subtle">
|
||||
<ArrowLeftIcon />
|
||||
<span>Back to providers</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!provider) {
|
||||
return <Navigate to={BACK_HREF} replace />;
|
||||
}
|
||||
|
||||
const openAiAnthropicSavedApiKey =
|
||||
providerIsOpenAiAnthropic && provider.api_keys.length > 0;
|
||||
const openAiAnthropicMaskedApiKey = providerIsOpenAiAnthropic
|
||||
? provider.api_keys[0]?.masked
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
{title}
|
||||
<div className="flex justify-between items-center">
|
||||
<Link to={BACK_HREF} className="-ml-3">
|
||||
<Button variant="subtle">
|
||||
<ArrowLeftIcon />
|
||||
<span>Back to providers</span>
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
disabled={updateMutation.isPending || deleteMutation.isPending}
|
||||
onClick={() => {
|
||||
setDeleteDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 pt-6">
|
||||
<div className="flex items-center gap-4 min-w-0">
|
||||
<Avatar
|
||||
variant="icon"
|
||||
size="lg"
|
||||
src={getProviderIcon(getProviderDisplayType(provider))}
|
||||
/>
|
||||
<SettingsHeaderTitle>
|
||||
<span className="block min-w-0 truncate">
|
||||
{provider.display_name || provider.name}
|
||||
</span>
|
||||
</SettingsHeaderTitle>
|
||||
{!provider.enabled && <Badge variant="default">Disabled</Badge>}
|
||||
</div>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-sm text-content-secondary m-0">
|
||||
Add or update models for this provider.{" "}
|
||||
<a
|
||||
href="/agents/settings/models"
|
||||
className="text-content-link no-underline hover:underline"
|
||||
>
|
||||
Model settings
|
||||
</a>
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={provider.enabled}
|
||||
onCheckedChange={(checked) => {
|
||||
updateMutation.mutate(
|
||||
{ enabled: checked },
|
||||
{
|
||||
onSuccess: (updated) => {
|
||||
toast.success(
|
||||
`Provider "${updated.display_name || updated.name}" ${checked ? "enabled" : "disabled"}.`,
|
||||
);
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
disabled={updateMutation.isPending}
|
||||
aria-label="Provider enabled"
|
||||
/>
|
||||
<span className="text-sm">Enable</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-solid p-6 rounded-lg">
|
||||
<ProviderForm
|
||||
editing
|
||||
key={provider.id}
|
||||
bedrockSavedAccessCredentials={hasBedrockStoredCredentials(
|
||||
provider,
|
||||
)}
|
||||
openAiAnthropicSavedApiKey={openAiAnthropicSavedApiKey}
|
||||
openAiAnthropicMaskedApiKey={openAiAnthropicMaskedApiKey}
|
||||
initialValues={aiProviderToFormValues(provider)}
|
||||
isLoading={updateMutation.isPending}
|
||||
submitError={updateMutation.error}
|
||||
onSubmit={async (values) => {
|
||||
const request = providerFormValuesToUpdate(values, provider);
|
||||
try {
|
||||
const updated = await updateMutation.mutateAsync(request);
|
||||
toast.success(
|
||||
`Provider "${updated.display_name || updated.name}" updated.`,
|
||||
);
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
getErrorMessage(
|
||||
error,
|
||||
`Failed to update provider "${provider.display_name || provider.name}".`,
|
||||
),
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<DeleteDialog
|
||||
key={provider.name}
|
||||
isOpen={deleteDialogOpen}
|
||||
title="Delete provider"
|
||||
entity="provider"
|
||||
name={provider.name}
|
||||
confirmLoading={deleteMutation.isPending}
|
||||
onCancel={() => {
|
||||
setDeleteDialogOpen(false);
|
||||
}}
|
||||
onConfirm={() => {
|
||||
deleteMutation.mutate(undefined, {
|
||||
onSuccess: () => {
|
||||
toast.success(
|
||||
`Provider "${provider.display_name || provider.name}" deleted.`,
|
||||
);
|
||||
setDeleteDialogOpen(false);
|
||||
void navigate(BACK_HREF, { replace: true });
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(
|
||||
getErrorMessage(
|
||||
error,
|
||||
`Failed to delete provider "${provider.display_name || provider.name}".`,
|
||||
),
|
||||
);
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateProviderPageView;
|
||||
@@ -5,7 +5,6 @@ type ProviderIconProps = {
|
||||
provider: string;
|
||||
};
|
||||
|
||||
/** @lintignore Consumed by provider pages landing in the next PR of the AI settings stack. */
|
||||
export const getProviderIcon = (provider: string): string | undefined => {
|
||||
switch (provider) {
|
||||
case "openai":
|
||||
|
||||
@@ -429,6 +429,25 @@ const AIBridgeSessionThreadsPage = lazy(
|
||||
() => import("./pages/AIBridgePage/SessionThreadsPage/SessionThreadsPage"),
|
||||
);
|
||||
|
||||
const AISettingsLayout = lazy(
|
||||
() => import("./pages/AISettingsPage/AISettingsLayout"),
|
||||
);
|
||||
const AISettingsProvidersPage = lazy(
|
||||
() => import("./pages/AISettingsPage/ProvidersPage/ProvidersPage"),
|
||||
);
|
||||
const AISettingsUpdateProviderPage = lazy(
|
||||
() =>
|
||||
import(
|
||||
"./pages/AISettingsPage/ProvidersPage/UpdateProviderPage/UpdateProviderPage"
|
||||
),
|
||||
);
|
||||
const AISettingsAddProviderPage = lazy(
|
||||
() =>
|
||||
import(
|
||||
"./pages/AISettingsPage/ProvidersPage/AddProviderPage/AddProviderPage"
|
||||
),
|
||||
);
|
||||
|
||||
const GlobalLayout = () => {
|
||||
return (
|
||||
<Suspense fallback={<Loader fullscreen />}>
|
||||
@@ -678,6 +697,15 @@ export const router = createBrowserRouter(
|
||||
<Route path=":sessionId" element={<AIBridgeSessionThreadsPage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/ai/settings" element={<AISettingsLayout />}>
|
||||
<Route index element={<AISettingsProvidersPage />} />
|
||||
<Route path="add" element={<AISettingsAddProviderPage />} />
|
||||
<Route
|
||||
path=":providerId"
|
||||
element={<AISettingsUpdateProviderPage />}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
<Route path="/health" element={<HealthLayout />}>
|
||||
<Route index element={<Navigate to="access-url" replace />} />
|
||||
<Route path="access-url" element={<AccessURLPage />} />
|
||||
|
||||
@@ -5574,7 +5574,6 @@ export const MockAIProviderBedrock: TypesGen.AIProvider = {
|
||||
updated_at: "2026-05-14T10:00:00Z",
|
||||
};
|
||||
|
||||
/** @lintignore Consumed by page stories landing in PR 4 of the AI settings stack. */
|
||||
export const MockAIProviders: TypesGen.AIProvider[] = [
|
||||
MockAIProviderOpenAI,
|
||||
MockAIProviderAnthropic,
|
||||
|
||||
Reference in New Issue
Block a user