ui: better env var ux (#2006)

ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx

@@ -86,8 +86,12 @@ export default function ExtensionsSection() {
       extensionConfig: extensionConfig,
       addToConfig: addExtension,
     });
-    handleModalClose();
+
+    // First refresh the extensions list
     await fetchExtensions();
+
+    // Then close the modal after data is refreshed
+    handleModalClose();
   };
 
   const handleDeleteExtension = async (name: string) => {

ui/desktop/src/components/settings_v2/extensions/extension-manager.ts

@@ -1,5 +1,5 @@
 import type { ExtensionConfig } from '../../../api/types.gen';
-import { ToastServiceOptions } from '../../../toasts';
+import { toastService, ToastServiceOptions } from '../../../toasts';
 import { addToAgent, removeFromAgent } from './agent-api';
 
 interface ActivateExtensionProps {
@@ -147,6 +147,11 @@ export async function updateExtension({
       console.error('[updateExtension]: Failed to update disabled extension in config:', error);
       throw error;
     }
+    // show a toast that it was successfully updated
+    toastService.success({
+      title: `Update extension`,
+      msg: `Successfully updated ${extensionConfig.name} extension`,
+    });
   }
 }
 

ui/desktop/src/components/settings_v2/extensions/modal/EnvVarsSection.tsx

@@ -17,6 +17,7 @@ export default function EnvVarsSection({
   onAdd,
   onRemove,
   onChange,
+  submitAttempted,
 }: EnvVarsSectionProps) {
   const [newKey, setNewKey] = React.useState('');
   const [newValue, setNewValue] = React.useState('');
@@ -51,12 +52,22 @@ export default function EnvVarsSection({
     setInvalidFields({ key: false, value: false });
   };
 
+  const isFieldInvalid = (index: number, field: 'key' | 'value') => {
+    if (!submitAttempted) return false;
+    const value = envVars[index][field].trim();
+    return value === '';
+  };
+
   return (
     <div>
       <div className="relative mb-2">
         <label className="text-sm font-medium text-textStandard mb-2 block">
           Environment Variables
         </label>
+        <p className="text-xs text-textSubtle mb-2">
+          Add key-value pairs for environment variables. Click the "+" button to add after filling
+          both fields.
+        </p>
       </div>
       <div className="grid grid-cols-[1fr_1fr_auto] gap-2 items-center">
         {/* Existing environment variables */}
@@ -67,8 +78,10 @@ export default function EnvVarsSection({
                 value={envVar.key}
                 onChange={(e) => onChange(index, 'key', e.target.value)}
                 placeholder="Variable name"
-                className={`w-full border-borderSubtle text-textStandard`}
-                disabled
+                className={cn(
+                  'w-full border-borderSubtle text-textStandard',
+                  isFieldInvalid(index, 'key') && 'border-red-500 focus:border-red-500'
+                )}
               />
             </div>
             <div className="relative">
@@ -76,8 +89,10 @@ export default function EnvVarsSection({
                 value={envVar.value}
                 onChange={(e) => onChange(index, 'value', e.target.value)}
                 placeholder="Value"
-                className={`w-full border-borderSubtle text-textStandard`}
-                disabled
+                className={cn(
+                  'w-full border-borderSubtle text-textStandard',
+                  isFieldInvalid(index, 'value') && 'border-red-500 focus:border-red-500'
+                )}
               />
             </div>
             <Button
@@ -120,7 +135,7 @@ export default function EnvVarsSection({
           variant="ghost"
           className="flex items-center justify-start gap-1 px-2 pr-4 text-s font-medium rounded-full dark:bg-slate-400 dark:text-gray-300 bg-gray-300 dark:bg-slate text-slate-400 dark:hover:bg-slate-300 hover:bg-gray-500 hover:text-white dark:hover:text-gray-900 transition-colors min-w-[60px] h-9"
         >
-          <Plus className="h-3 w-3" /> Submit
+          <Plus className="h-3 w-3" /> Add
         </Button>
       </div>
       {validationError && <div className="mt-2 text-red-500 text-sm">{validationError}</div>}