Add example URLs to Bedrock VPC endpoint section and update tests

Author: Kevin White

webview-ui/src/components/settings/providers/Bedrock.tsx

@@ -135,14 +135,21 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 				Use custom VPC endpoint
 			</Checkbox>
 			{awsEndpointSelected && (
-				<VSCodeTextField
-					value={apiConfiguration?.awsBedrockEndpoint || ""}
-					style={{ width: "100%", marginTop: 3, marginBottom: 5 }}
-					type="url"
-					onInput={handleInputChange("awsBedrockEndpoint")}
-					placeholder="Enter VPC Endpoint URL (optional)"
-					data-testid="vpc-endpoint-input"
-				/>
+				<>
+					<VSCodeTextField
+						value={apiConfiguration?.awsBedrockEndpoint || ""}
+						style={{ width: "100%", marginTop: 3, marginBottom: 5 }}
+						type="url"
+						onInput={handleInputChange("awsBedrockEndpoint")}
+						placeholder="Enter VPC Endpoint URL (optional)"
+						data-testid="vpc-endpoint-input"
+					/>
+					<div className="text-sm text-vscode-descriptionForeground ml-6 mt-1 mb-3">
+						Examples:
+						<div className="ml-2">• https://vpce-xxx.bedrock.region.vpce.amazonaws.com/</div>
+						<div className="ml-2">• https://gateway.my-company.com/route/app/bedrock</div>
+					</div>
+				</>
 			)}
 		</>
 	)

webview-ui/src/components/settings/providers/__tests__/Bedrock.test.tsx

@@ -250,6 +250,60 @@ describe("Bedrock Component", () => {
 		})
 	})
 
+	// Test Scenario 3: UI Elements Tests
+	describe("UI Elements", () => {
+		it("should display example URLs when VPC endpoint checkbox is checked", () => {
+			const apiConfiguration: Partial<ProviderSettings> = {
+				awsBedrockEndpoint: "https://example.com",
+				awsBedrockEndpointEnabled: true,
+				awsUseProfile: true,
+			}
+
+			render(
+				<Bedrock
+					apiConfiguration={apiConfiguration as ProviderSettings}
+					setApiConfigurationField={mockSetApiConfigurationField}
+				/>,
+			)
+
+			// Check that the VPC endpoint input is visible
+			expect(screen.getByTestId("vpc-endpoint-input")).toBeInTheDocument()
+
+			// Check for the example URLs section
+			// Since we don't have a specific testid for the examples section,
+			// we'll check for the text content
+			expect(screen.getByText("Examples:")).toBeInTheDocument()
+			expect(screen.getByText("• https://vpce-xxx.bedrock.region.vpce.amazonaws.com/")).toBeInTheDocument()
+			expect(screen.getByText("• https://gateway.my-company.com/route/app/bedrock")).toBeInTheDocument()
+		})
+
+		it("should hide example URLs when VPC endpoint checkbox is unchecked", () => {
+			const apiConfiguration: Partial<ProviderSettings> = {
+				awsBedrockEndpoint: "https://example.com",
+				awsBedrockEndpointEnabled: true,
+				awsUseProfile: true,
+			}
+
+			render(
+				<Bedrock
+					apiConfiguration={apiConfiguration as ProviderSettings}
+					setApiConfigurationField={mockSetApiConfigurationField}
+				/>,
+			)
+
+			// Initially the examples should be visible
+			expect(screen.getByText("Examples:")).toBeInTheDocument()
+
+			// Uncheck the VPC endpoint checkbox
+			fireEvent.click(screen.getByTestId("checkbox-input-use-custom-vpc-endpoint"))
+
+			// Now the examples should be hidden
+			expect(screen.queryByText("Examples:")).not.toBeInTheDocument()
+			expect(screen.queryByText("• https://vpce-xxx.bedrock.region.vpce.amazonaws.com/")).not.toBeInTheDocument()
+			expect(screen.queryByText("• https://gateway.my-company.com/route/app/bedrock")).not.toBeInTheDocument()
+		})
+	})
+
 	// Test Scenario 4: Error Handling Tests
 	describe("Error Handling", () => {
 		it("should handle invalid endpoint URLs gracefully", () => {