From 7316f82838e3a827328732bad89c4650b6ea3c49 Mon Sep 17 00:00:00 2001
From: System233 <cdkeylzh@outlook.com>
Date: Tue, 18 Feb 2025 01:14:47 +0800
Subject: [PATCH] Fix the `DialogContent/DialogTitle` error displayed in the
 console.

---
 webview-ui/src/components/settings/ApiConfigManager.tsx     | 6 ++----
 .../components/settings/__tests__/ApiConfigManager.test.tsx | 1 +
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx
index 62aae27642..15c9a2b0c0 100644
--- a/webview-ui/src/components/settings/ApiConfigManager.tsx
+++ b/webview-ui/src/components/settings/ApiConfigManager.tsx
@@ -3,7 +3,7 @@ import { memo, useEffect, useRef, useState } from "react"
 import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
 import { Dropdown } from "vscrui"
 import type { DropdownOption } from "vscrui"
-import { Dialog, DialogContent } from "../ui/dialog"
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
 
 interface ApiConfigManagerProps {
 	currentApiConfigName?: string
@@ -298,9 +298,7 @@ const ApiConfigManager = ({
 					}}
 					aria-labelledby="new-profile-title">
 					<DialogContent className="p-4 max-w-sm">
-						<h2 id="new-profile-title" className="text-lg font-semibold mb-4">
-							New Configuration Profile
-						</h2>
+						<DialogTitle>New Configuration Profile</DialogTitle>
 						<button className="absolute right-4 top-4" aria-label="Close dialog" onClick={resetCreateState}>
 							<span className="codicon codicon-close" />
 						</button>
diff --git a/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx b/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx
index 24e62215ec..92a6a1cd03 100644
--- a/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx
+++ b/webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx
@@ -41,6 +41,7 @@ jest.mock("@/components/ui/dialog", () => ({
 		</div>
 	),
 	DialogContent: ({ children }: any) => <div data-testid="dialog-content">{children}</div>,
+	DialogTitle: ({ children }: any) => <div data-testid="dialog-title">{children}</div>,
 }))
 
 describe("ApiConfigManager", () => {