chore: show important keys for provider configuration (#7265)

ui/desktop/src/api/types.gen.ts

@@ -90,6 +90,11 @@ export type ConfigKey = {
      * When true, the provider's configure_oauth() method will be called instead of prompting for manual input
      */
     oauth_flow: boolean;
+    /**
+     * Whether this key should be shown prominently during provider setup
+     * (onboarding, settings modal, CLI configure)
+     */
+    primary?: boolean;
     /**
      * Whether this key is required for the provider to function
      */

ui/desktop/src/components/settings/providers/modal/ProviderConfiguationModal.tsx

@@ -41,9 +41,10 @@ export default function ProviderConfigurationModal({
   const [error, setError] = useState<string | null>(null);
   const [isOAuthLoading, setIsOAuthLoading] = useState(false);
 
-  const requiredParameters = provider.metadata.config_keys.filter(
-    (param) => param.required === true
-  );
+  let primaryParameters = provider.metadata.config_keys.filter((param) => param.primary);
+  if (primaryParameters.length === 0) {
+    primaryParameters = provider.metadata.config_keys;
+  }
 
   // Check if this provider uses OAuth for configuration
   const isOAuthProvider = provider.metadata.config_keys.some((key) => key.oauth_flow);
@@ -238,7 +239,7 @@ export default function ProviderConfigurationModal({
                     validationErrors={validationErrors}
                   />
 
-                  {requiredParameters.length > 0 &&
+                  {primaryParameters.length > 0 &&
                     provider.metadata.config_keys &&
                     provider.metadata.config_keys.length > 0 && <SecureStorageNotice />}
                 </>
@@ -260,7 +261,7 @@ export default function ProviderConfigurationModal({
               </div>
             ) : (
               <ProviderSetupActions
-                requiredParameters={requiredParameters}
+                primaryParameters={primaryParameters}
                 onCancel={handleCancel}
                 onSubmit={handleSubmitForm}
                 onDelete={handleDelete}

ui/desktop/src/components/settings/providers/modal/subcomponents/ProviderSetupActions.tsx

@@ -12,7 +12,7 @@ interface ProviderSetupActionsProps {
   onCancelDelete?: () => void;
   canDelete?: boolean;
   providerName?: string;
-  requiredParameters?: ConfigKey[];
+  primaryParameters?: ConfigKey[];
   isActiveProvider?: boolean; // Made optional with default false
 }
 
@@ -29,7 +29,7 @@ export default function ProviderSetupActions({
   onCancelDelete,
   canDelete,
   providerName,
-  requiredParameters,
+  primaryParameters,
   isActiveProvider = false, // Default value provided
 }: ProviderSetupActionsProps) {
   // If we're showing delete confirmation, render the delete confirmation buttons
@@ -96,7 +96,7 @@ export default function ProviderSetupActions({
           <Trash2 className="h-4 w-4 mr-2" /> Delete Provider
         </Button>
       )}
-      {requiredParameters && requiredParameters.length > 0 ? (
+      {primaryParameters && primaryParameters.length > 0 ? (
         <>
           <Button
             type="submit"

ui/desktop/src/components/settings/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx

@@ -168,10 +168,11 @@ export default function DefaultProviderSetupForm({
     ));
   };
 
-  let aboveFoldParameters = parameters.filter((p) => p.required);
-  let belowFoldParameters = parameters.filter((p) => !p.required);
-  if (aboveFoldParameters.length === 0) {
-    aboveFoldParameters = belowFoldParameters;
+  let aboveFoldParameters = parameters.filter((p) => p.primary);
+  let belowFoldParameters = parameters.filter((p) => !p.primary);
+
+  if (aboveFoldParameters.length === 0 && parameters.length > 0) {
+    aboveFoldParameters = parameters;
     belowFoldParameters = [];
   }