Refactor API configuration management handlers and standardize UI labels and discard confirmation messages throughout the application

- current behavior regarding api configurations: user can view the list of api configurations and set defaults. expected bahavior: user can only set defaults, replace the list with [list of configurations] placeholder. Remove now obsolete logic.
- current behavior: in the api configuration editing UI, when changing model provider, user is not asked to select model. expected behavior: user should be asked to select model whenever they change model provider.
- in settings, allow managing api configurations. We allow code duplications in handlers and messages. Re-use `apps/editor/src/views/actions`.
- in settings: finish listing api configurations and editing them via `apps/editor/src/views/components/EditApiConfigurationForm/EditApiConfigurationForm.tsx`
- Type '{ providers: Provider[]; api_configurations: ApiConfiguration[]; defaults: Record<ToolType, string | null>; edit_context_system_instructions: string; ... 52 more ...; scroll_to_section_on_load: NavItem | undefined; }' is missing the following properties from type 'Props': on_reorder_api_configurations, on_add_api_configuration, on_edit_api_configuration, on_delete_api_configuration
- fix `apps/editor/src/views/settings/backend/message-handlers/handle-get-api-configurations.ts`
- on <DefaultConfigurationSelector, we can't just pass props.api_configurations to 'configurations' prop beacuse api configuration is of type [Fragment]
- we noticed updating api configuration in panel is more advanced, e.g. it validates reasoning effort or requires model selection when changing 'model provider'
- when cancelling, the primary action should be 'Discard' instead of 'Save', secondary action (the always shown Cancel) should let user continue editing. Update texts accordingly.
- when api configuration was modified but user clicks 'cancel', the modal appears correctly but form gets closed - should not.

Author: robertpiosik

apps/editor/src/views/actions/update-api-configuration/interactions/edit-reasoning-effort-for-api-config.ts

@@ -14,7 +14,7 @@ export const edit_reasoning_effort_for_api_config = async (
   return await new Promise<string | undefined>((resolve) => {
     const quick_pick = vscode.window.createQuickPick()
     quick_pick.items = effort_options
-    quick_pick.title = 'Edit API Configuration'
+    quick_pick.title = 'Edit Configuration'
     quick_pick.placeholder = 'Select reasoning effort'
     const close_button: vscode.QuickInputButton = {
       iconPath: new vscode.ThemeIcon('close'),

apps/editor/src/views/actions/update-api-configuration/update-api-configuration.ts

@@ -54,9 +54,9 @@ export const update_api_configuration = async (params: {
   }
 
   if (params.origin == 'cancel') {
-    const save_changes_button = 'Save'
+    const discard_button = 'Discard'
     const result = await vscode.window.showWarningMessage(
-      dictionary.information_message.CONFIRM_SAVE_CHANGES_TO_ITEM(
+      dictionary.information_message.CONFIRM_DISCARD_UNSAVED_CHANGES(
         'API configuration'
       ),
       {
@@ -66,12 +66,14 @@ export const update_api_configuration = async (params: {
             'API configuration'
           )
       },
-      save_changes_button
+      discard_button
     )
 
-    if (result != save_changes_button) {
-      return { success: true, has_changes: false }
+    if (result != discard_button) {
+      return { success: false, has_changes: true }
     }
+
+    return { success: true, has_changes: false }
   }
 
   const new_config = {

apps/editor/src/views/actions/update-web-configuration.ts

@@ -57,9 +57,9 @@ export const update_web_configuration = async (params: {
   }
 
   if (params.origin == 'cancel') {
-    const save_changes_button = 'Save'
+    const discard_button = 'Discard'
     const result = await vscode.window.showWarningMessage(
-      dictionary.information_message.CONFIRM_SAVE_CHANGES_TO_ITEM(
+      dictionary.information_message.CONFIRM_DISCARD_UNSAVED_CHANGES(
         'web configuration'
       ),
       {
@@ -69,12 +69,14 @@ export const update_web_configuration = async (params: {
             'web configuration'
           )
       },
-      save_changes_button
+      discard_button
     )
 
-    if (result != save_changes_button) {
-      return { success: true, has_changes: false }
+    if (result != discard_button) {
+      return { success: false, has_changes: true }
     }
+
+    return { success: true, has_changes: false }
   }
 
   const updated_ui_web_configuration = { ...final_updated_web_configuration }

apps/editor/src/views/panel/backend/message-handlers/handle-pick-model-provider.ts

@@ -1,7 +1,11 @@
 import { PanelProvider } from '@/views/panel/backend/panel-provider'
 import { PickModelProviderMessage } from '@/views/panel/types/messages'
-import { edit_model_provider_for_api_configuration } from '@/views/actions/update-api-configuration/interactions'
+import {
+  edit_model_provider_for_api_configuration,
+  edit_model_for_api_configuration
+} from '@/views/actions/update-api-configuration/interactions'
 import { ModelProvidersManager } from '@/services/model-providers-manager'
+import { ModelFetcher } from '@/services/model-fetcher'
 
 export const handle_pick_model_provider = async (
   panel_provider: PanelProvider,
@@ -13,9 +17,29 @@ export const handle_pick_model_provider = async (
     message.current_model_provider_name
   )
   if (result) {
-    panel_provider.send_message({
-      command: 'NEWLY_PICKED_MODEL_PROVIDER',
-      model_provider_name: result.model_provider_name
+    const model_fetcher = new ModelFetcher()
+    const temp_api_configuration = {
+      id: '',
+      model_provider_name: result.model_provider_name,
+      model: ''
+    }
+
+    const new_model = await edit_model_for_api_configuration({
+      api_configuration: temp_api_configuration,
+      providers_manager,
+      model_fetcher,
+      tool_type: message.tool_type
     })
+
+    if (new_model !== undefined) {
+      panel_provider.send_message({
+        command: 'NEWLY_PICKED_MODEL_PROVIDER',
+        model_provider_name: result.model_provider_name
+      })
+      panel_provider.send_message({
+        command: 'NEWLY_PICKED_API_MODEL',
+        model_id: new_model
+      })
+    }
   }
 }

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -571,15 +571,16 @@ export const Panel = () => {
                   </UiButton>
                 </div>
               }
-              title="Edit API Configuration"
+              title="Edit Configuration"
             >
               <EditApiConfigurationForm
                 api_configuration={updating_api_configuration}
                 on_update={set_updated_api_configuration}
                 pick_model_provider={(current) => {
                   post_message(vscode, {
                     command: 'PICK_MODEL_PROVIDER',
-                    current_model_provider_name: current
+                    current_model_provider_name: current,
+                    tool_type: api_prompt_type
                   })
                 }}
                 pick_model={(provider, current) => {

apps/editor/src/views/panel/types/messages.ts

@@ -588,6 +588,7 @@ export interface UpdateApiConfigurationMessage extends BaseMessage {
 export interface PickModelProviderMessage extends BaseMessage {
   command: 'PICK_MODEL_PROVIDER'
   current_model_provider_name?: string
+  tool_type: ToolType
 }
 
 export interface PickApiModelMessage extends BaseMessage {

apps/editor/src/views/settings/backend/message-handlers/handle-create-api-configuration.ts

@@ -0,0 +1,28 @@
+import { SettingsProvider } from '../settings-provider'
+import { create_api_configuration } from '@/views/actions/create-api-configuration/create-api-configuration'
+import { get_api_configuration_id } from '@/services/model-providers-manager'
+import { CreateApiConfigurationMessage } from '../../types/messages'
+
+export const handle_create_api_configuration = async (
+  provider: SettingsProvider,
+  message: CreateApiConfigurationMessage
+): Promise<void> => {
+  const result = await create_api_configuration({
+    context: provider.context,
+    tool_type: message.tool_type || 'intelligent-update',
+    create_on_top: message.create_on_top,
+    insertion_index: message.insertion_index
+  })
+
+  if (result) {
+    provider.postMessage({
+      command: 'START_API_CONFIGURATION_CREATION',
+      api_configuration: {
+        ...result.config,
+        id: get_api_configuration_id(result.config)
+      },
+      insertion_index: result.insertion_index,
+      tool_type: message.tool_type
+    })
+  }
+}

apps/editor/src/views/settings/backend/message-handlers/handle-delete-api-configuration.ts

@@ -1,12 +1,12 @@
-import { SettingsProvider } from '@/views/settings/backend/settings-provider'
-import { delete_api_configuration } from '../../../actions/delete-api-configuration'
+import { SettingsProvider } from '../settings-provider'
+import { delete_api_configuration } from '@/views/actions/delete-api-configuration'
 
 export const handle_delete_api_configuration = async (
   provider: SettingsProvider,
-  api_configuration_id: string
+  message: any
 ): Promise<void> => {
   await delete_api_configuration({
     context: provider.context,
-    api_configuration_id
+    api_configuration_id: message.api_configuration_id
   })
 }

apps/editor/src/views/settings/backend/message-handlers/handle-get-api-configurations.ts

@@ -1,49 +1,39 @@
 import { SettingsProvider } from '@/views/settings/backend/settings-provider'
 import {
   ModelProvidersManager,
-  ApiConfiguration,
   get_api_configuration_id
 } from '@/services/model-providers-manager'
-import { ApiConfigurationForClient } from '@/views/settings/types/messages'
-
-const create_description = (api_configuration: ApiConfiguration): string => {
-  const description_parts = [api_configuration.model_provider_name]
-  if (api_configuration.temperature != null) {
-    description_parts.push(`${api_configuration.temperature}`)
-  }
-  if (api_configuration.reasoning_effort) {
-    description_parts.push(`${api_configuration.reasoning_effort}`)
-  }
-  return description_parts.join(' · ')
-}
+import { ApiConfiguration } from '@/views/settings/types/messages'
 
 export const handle_get_api_configurations = async (
   provider: SettingsProvider
 ): Promise<void> => {
   const providers_manager = new ModelProvidersManager(provider.context)
 
-  const saved_api_configurations = await providers_manager.get_api_configurations()
+  const saved_api_configurations =
+    await providers_manager.get_api_configurations()
+
+  const api_configurations: ApiConfiguration[] = saved_api_configurations.map(
+    (api_configuration) => ({
+      ...api_configuration,
+      id: get_api_configuration_id(api_configuration)
+    })
+  )
 
-  const def_cac = await providers_manager.get_default_code_completions_api_configuration()
-  const def_iu = await providers_manager.get_default_intelligent_update_api_configuration()
-  const def_cm = await providers_manager.get_default_commit_messages_api_configuration()
+  const def_cac =
+    await providers_manager.get_default_code_completions_api_configuration()
+  const def_iu =
+    await providers_manager.get_default_intelligent_update_api_configuration()
+  const def_cm =
+    await providers_manager.get_default_commit_messages_api_configuration()
   const def_frf =
     await providers_manager.get_default_find_relevant_files_api_configuration()
-  const def_vi = await providers_manager.get_default_voice_input_api_configuration()
-
-  const api_configurations_for_client: ApiConfigurationForClient[] = saved_api_configurations.map(
-    (api_configuration) => {
-      return {
-        id: get_api_configuration_id(api_configuration),
-        model: api_configuration.model,
-        description: create_description(api_configuration)
-      }
-    }
-  )
+  const def_vi =
+    await providers_manager.get_default_voice_input_api_configuration()
 
   provider.postMessage({
     command: 'API_CONFIGURATIONS',
-    api_configurations: api_configurations_for_client,
+    api_configurations,
     defaults: {
       'code-at-cursor': def_cac ? get_api_configuration_id(def_cac) : null,
       'intelligent-update': def_iu ? get_api_configuration_id(def_iu) : null,

apps/editor/src/views/settings/backend/message-handlers/handle-pick-api-model.ts

@@ -0,0 +1,29 @@
+import { SettingsProvider } from '../settings-provider'
+import { ModelProvidersManager } from '@/services/model-providers-manager'
+import { ModelFetcher } from '@/services/model-fetcher'
+import { edit_model_for_api_configuration } from '@/views/actions/update-api-configuration/interactions'
+
+export const handle_pick_api_model = async (
+  provider: SettingsProvider,
+  message: any
+): Promise<void> => {
+  const providers_manager = new ModelProvidersManager(provider.context)
+  const model_fetcher = new ModelFetcher()
+
+  const model = await edit_model_for_api_configuration({
+    api_configuration: {
+      model_provider_name: message.model_provider_name,
+      model: message.current_model
+    } as any,
+    providers_manager,
+    model_fetcher,
+    tool_type: message.tool_type
+  })
+
+  if (model) {
+    provider.postMessage({
+      command: 'NEWLY_PICKED_API_MODEL',
+      model_id: model
+    })
+  }
+}