fix(integrations): enhance combobox to support custom values (#1969)

Author: Marfuen

apps/app/src/components/integrations/ConnectIntegrationDialog.tsx

@@ -96,7 +96,10 @@ function CredentialInput({
         label: opt.label,
       })) || [];
 
-    const selectedItem = items.find((item) => item.id === value);
+    // Find existing item or create synthetic one for custom values
+    const selectedItem = value
+      ? items.find((item) => item.id === value) ?? { id: value, label: value }
+      : undefined;
 
     return (
       <ComboboxDropdown

apps/app/src/components/integrations/ManageIntegrationDialog.tsx

@@ -633,27 +633,40 @@ function ConfigurationContent({
               className="bg-background border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
             />
           ) : field.type === 'combobox' && field.options ? (
-            <ComboboxDropdown
-              items={field.options.map((opt) => ({
+            (() => {
+              const items = field.options.map((opt) => ({
                 id: opt.value,
                 label: opt.label,
-              }))}
-              selectedItem={field.options
-                .map((opt) => ({ id: opt.value, label: opt.label }))
-                .find((item) => item.id === credentialValues[field.id])}
-              onSelect={(item) => setCredentialValues((prev) => ({ ...prev, [field.id]: item.id }))}
-              onCreate={(customValue) =>
-                setCredentialValues((prev) => ({ ...prev, [field.id]: customValue }))
-              }
-              placeholder={field.placeholder || `Select ${field.label.toLowerCase()}...`}
-              searchPlaceholder="Search or type custom value..."
-              renderOnCreate={(customValue) => (
-                <div className="flex items-center gap-2">
-                  <span className="text-sm">Use custom value:</span>
-                  <span className="font-medium">{customValue}</span>
-                </div>
-              )}
-            />
+              }));
+              const currentValue = credentialValues[field.id];
+              // Find existing item or create synthetic one for custom values
+              const selectedItem = currentValue
+                ? items.find((item) => item.id === currentValue) ?? {
+                    id: currentValue,
+                    label: currentValue,
+                  }
+                : undefined;
+              return (
+                <ComboboxDropdown
+                  items={items}
+                  selectedItem={selectedItem}
+                  onSelect={(item) =>
+                    setCredentialValues((prev) => ({ ...prev, [field.id]: item.id }))
+                  }
+                  onCreate={(customValue) =>
+                    setCredentialValues((prev) => ({ ...prev, [field.id]: customValue }))
+                  }
+                  placeholder={field.placeholder || `Select ${field.label.toLowerCase()}...`}
+                  searchPlaceholder="Search or type custom value..."
+                  renderOnCreate={(customValue) => (
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm">Use custom value:</span>
+                      <span className="font-medium">{customValue}</span>
+                    </div>
+                  )}
+                />
+              );
+            })()
           ) : field.type === 'select' && field.options ? (
             <Select
               value={credentialValues[field.id] || ''}

packages/integration-platform/src/manifests/aws/credentials.ts

@@ -29,16 +29,44 @@ export const awsCredentialFields = [
     placeholder: 'Select or type a region...',
     helpText: 'Select a common region or type your own (e.g., us-east-1, eu-west-1)',
     options: [
+      // US Regions
       { value: 'us-east-1', label: 'US East (N. Virginia)' },
       { value: 'us-east-2', label: 'US East (Ohio)' },
       { value: 'us-west-1', label: 'US West (N. California)' },
       { value: 'us-west-2', label: 'US West (Oregon)' },
+      // Europe Regions
       { value: 'eu-west-1', label: 'Europe (Ireland)' },
       { value: 'eu-west-2', label: 'Europe (London)' },
+      { value: 'eu-west-3', label: 'Europe (Paris)' },
       { value: 'eu-central-1', label: 'Europe (Frankfurt)' },
+      { value: 'eu-central-2', label: 'Europe (Zurich)' },
+      { value: 'eu-north-1', label: 'Europe (Stockholm)' },
+      { value: 'eu-south-1', label: 'Europe (Milan)' },
+      { value: 'eu-south-2', label: 'Europe (Spain)' },
+      // Asia Pacific Regions
+      { value: 'ap-east-1', label: 'Asia Pacific (Hong Kong)' },
+      { value: 'ap-south-1', label: 'Asia Pacific (Mumbai)' },
+      { value: 'ap-south-2', label: 'Asia Pacific (Hyderabad)' },
       { value: 'ap-northeast-1', label: 'Asia Pacific (Tokyo)' },
+      { value: 'ap-northeast-2', label: 'Asia Pacific (Seoul)' },
+      { value: 'ap-northeast-3', label: 'Asia Pacific (Osaka)' },
       { value: 'ap-southeast-1', label: 'Asia Pacific (Singapore)' },
       { value: 'ap-southeast-2', label: 'Asia Pacific (Sydney)' },
+      { value: 'ap-southeast-3', label: 'Asia Pacific (Jakarta)' },
+      { value: 'ap-southeast-4', label: 'Asia Pacific (Melbourne)' },
+      { value: 'ap-southeast-5', label: 'Asia Pacific (Malaysia)' },
+      // Canada
+      { value: 'ca-central-1', label: 'Canada (Central)' },
+      { value: 'ca-west-1', label: 'Canada (Calgary)' },
+      // South America
+      { value: 'sa-east-1', label: 'South America (São Paulo)' },
+      // Middle East
+      { value: 'me-south-1', label: 'Middle East (Bahrain)' },
+      { value: 'me-central-1', label: 'Middle East (UAE)' },
+      // Africa
+      { value: 'af-south-1', label: 'Africa (Cape Town)' },
+      // Israel
+      { value: 'il-central-1', label: 'Israel (Tel Aviv)' },
     ],
   },
 ];