From 615788ae622aece652d62043f1f06911a4cfea3a Mon Sep 17 00:00:00 2001 From: Lily Delalande <119957291+lily-de@users.noreply.github.com> Date: Tue, 25 Mar 2025 13:28:09 -0400 Subject: [PATCH] ui: add description field to modal (#1846) --- .../extensions/modal/ExtensionInfoFields.tsx | 75 ++++++++++++------- .../extensions/modal/ExtensionModal.tsx | 1 + .../subcomponents/ExtensionList.tsx | 4 +- .../settings_v2/extensions/utils.ts | 6 ++ 4 files changed, 56 insertions(+), 30 deletions(-) diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx index b0bf0b74..46ac6855 100644 --- a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx +++ b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx @@ -5,6 +5,7 @@ import React, { useState } from 'react'; interface ExtensionInfoFieldsProps { name: string; type: 'stdio' | 'sse' | 'builtin'; + description: string; onChange: (key: string, value: any) => void; submitAttempted: boolean; } @@ -12,6 +13,7 @@ interface ExtensionInfoFieldsProps { export default function ExtensionInfoFields({ name, type, + description, onChange, submitAttempted, }: ExtensionInfoFieldsProps) { @@ -20,37 +22,54 @@ export default function ExtensionInfoFields({ }; return ( -
-
- -
- onChange('name', e.target.value)} - placeholder="Enter extension name..." - className={`${!submitAttempted || isNameValid() ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`} +
+ {/* Top row with Name and Type side by side */} +
+
+ +
+ onChange('name', e.target.value)} + placeholder="Enter extension name..." + className={`${!submitAttempted || isNameValid() ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`} + /> + {submitAttempted && !isNameValid() && ( +
Name is required
+ )} +
+
+ + {/* Type Dropdown */} +
+ + { - if (option) { - onChange('type', option.value); - } - }} - options={[ - { value: 'stdio', label: 'Standard IO (STDIO)' }, - { value: 'sse', label: 'Security Service Edge (SSE)' }, - ]} - isSearchable={false} - /> + + {/* Bottom row with Description spanning full width */} +
+ +
+ onChange('description', e.target.value)} + placeholder="Optional description..." + className={`text-textStandard focus:border-borderStandard`} + /> +
); diff --git a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx index 49026af9..5434177a 100644 --- a/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx +++ b/ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx @@ -177,6 +177,7 @@ export default function ExtensionModal({ setFormData({ ...formData, [key]: value })} submitAttempted={submitAttempted} /> diff --git a/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx b/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx index 79cbcfcf..a36c7e60 100644 --- a/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx +++ b/ui/desktop/src/components/settings_v2/extensions/subcomponents/ExtensionList.tsx @@ -59,10 +59,10 @@ export function getSubtitle(config: ExtensionConfig): string { } if (config.type === 'stdio') { const full_command = combineCmdAndArgs(config.cmd, config.args); - return `STDIO extension${full_command ? `\n${full_command}` : ''}`; + return `STDIO extension${config.description ? `: ${config.description}` : ''}${full_command ? `\n${full_command}` : ''}`; } if (config.type === 'sse') { - return `SSE extension${config.uri ? ` (${config.uri})` : ''}`; + return `SSE extension${config.description ? `: ${config.description}` : ''}${config.uri ? ` (${config.uri})` : ''}`; } return `Unknown type of extension`; } diff --git a/ui/desktop/src/components/settings_v2/extensions/utils.ts b/ui/desktop/src/components/settings_v2/extensions/utils.ts index e68afefc..ecc5ba4e 100644 --- a/ui/desktop/src/components/settings_v2/extensions/utils.ts +++ b/ui/desktop/src/components/settings_v2/extensions/utils.ts @@ -3,6 +3,7 @@ import { ExtensionConfig } from '../../../api/types.gen'; export interface ExtensionFormData { name: string; + description: string; type: 'stdio' | 'sse' | 'builtin'; cmd?: string; endpoint?: string; @@ -13,6 +14,7 @@ export interface ExtensionFormData { export function getDefaultFormData(): ExtensionFormData { return { name: '', + description: '', type: 'stdio', cmd: '', endpoint: '', @@ -35,6 +37,8 @@ export function extensionToFormData(extension: FixedExtensionEntry): ExtensionFo return { name: extension.name, + description: + extension.type === 'stdio' || extension.type === 'sse' ? extension.description : undefined, type: extension.type, cmd: extension.type === 'stdio' ? combineCmdAndArgs(extension.cmd, extension.args) : undefined, endpoint: extension.type === 'sse' ? extension.uri : undefined, @@ -61,6 +65,7 @@ export function createExtensionConfig(formData: ExtensionFormData): ExtensionCon return { type: 'stdio', name: formData.name, + description: formData.description, cmd: cmd, args: args, ...(Object.keys(envs).length > 0 ? { envs } : {}), @@ -69,6 +74,7 @@ export function createExtensionConfig(formData: ExtensionFormData): ExtensionCon return { type: 'sse', name: formData.name, + description: formData.description, uri: formData.endpoint, // Assuming endpoint maps to uri for SSE type ...(Object.keys(envs).length > 0 ? { envs } : {}), };