fix(site): hide empty model provider configuration (#26690)

site/src/pages/AISettingsPage/ModelsPage/AddModelPage/AddModelPageView.stories.tsx

@@ -3,6 +3,7 @@ import { expect, fn, userEvent, within } from "storybook/test";
 import { withToaster } from "#/testHelpers/storybook";
 import {
 	MockAnthropicProviderState,
+	MockCopilotProviderState,
 	MockOpenAIProviderState,
 } from "../testFixtures";
 import AddModelPageView from "./AddModelPageView";
@@ -54,6 +55,19 @@ export const WebSearchDependentFields: Story = {
 	},
 };
 
+export const NoProviderConfigurationFields: Story = {
+	args: {
+		providerStates: [MockCopilotProviderState],
+		selectedProviderState: MockCopilotProviderState,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(
+			canvas.queryByRole("button", { name: /provider configuration/i }),
+		).not.toBeInTheDocument();
+	},
+};
+
 export const ProviderNotFound: Story = {
 	args: { selectedProviderState: null },
 	play: async ({ canvasElement }) => {

site/src/pages/AISettingsPage/ModelsPage/components/ModelFormFields.tsx

@@ -2,6 +2,7 @@ import type { FormikContextType } from "formik";
 import { ChevronDownIcon, ChevronRightIcon, InfoIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { Link } from "react-router";
+import { getVisibleProviderFields } from "#/api/chatModelOptions";
 import type * as TypesGen from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { Checkbox } from "#/components/Checkbox/Checkbox";
@@ -132,6 +133,9 @@ export const ModelFormFields: FC<{
 	showAdvanced,
 	setShowAdvanced,
 }) => {
+	const hasProviderConfigFields =
+		getVisibleProviderFields(selectedProviderState.provider).length > 0;
+
 	return (
 		<div className="border border-solid p-6 rounded-lg">
 			<form
@@ -253,21 +257,23 @@ export const ModelFormFields: FC<{
 						/>
 					</CollapsibleSection>
 
-					<CollapsibleSection
-						title="Provider configuration"
-						description="Tune provider-specific behavior like reasoning, tool calling, and web search."
-						open={showProviderConfig}
-						onOpenChange={setShowProviderConfig}
-						className="border-0 border-t border-solid border-border"
-						contentClassName="pt-3 pl-6"
-					>
-						<ModelConfigFields
-							provider={selectedProviderState.provider}
-							form={form}
-							fieldErrors={modelConfigFormBuildResult.fieldErrors}
-							disabled={isSaving}
-						/>
-					</CollapsibleSection>
+					{hasProviderConfigFields && (
+						<CollapsibleSection
+							title="Provider configuration"
+							description="Tune provider-specific behavior like reasoning, tool calling, and web search."
+							open={showProviderConfig}
+							onOpenChange={setShowProviderConfig}
+							className="border-0 border-t border-solid border-border"
+							contentClassName="pt-3 pl-6"
+						>
+							<ModelConfigFields
+								provider={selectedProviderState.provider}
+								form={form}
+								fieldErrors={modelConfigFormBuildResult.fieldErrors}
+								disabled={isSaving}
+							/>
+						</CollapsibleSection>
+					)}
 
 					<CollapsibleSection
 						title="Advanced"

site/src/pages/AISettingsPage/ModelsPage/testFixtures.ts

@@ -82,3 +82,17 @@ export const MockAnthropicProviderState: ProviderState = {
 	providerConfig: MockAnthropicProviderConfig,
 	modelConfigs: [mockClaude],
 };
+
+export const MockCopilotProviderState: ProviderState = {
+	...MockOpenAIProviderState,
+	key: "prov-copilot",
+	provider: "copilot",
+	label: "GitHub Copilot",
+	providerConfig: {
+		...MockOpenAIProviderConfig,
+		id: "prov-copilot",
+		provider: "copilot",
+		display_name: "GitHub Copilot",
+	},
+	modelConfigs: [],
+};