Dynamic Endpoints to method routings

Author: simonredfern

src/lib/components/DynamicEndpointOperationsTable.svelte

@@ -331,6 +331,7 @@
             <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Operation ID</th>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Resolves to</th>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">JSON Schema</th>
+            <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Method Routing</th>
             <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Try it</th>
           </tr>
         </thead>
@@ -406,6 +407,21 @@
                   {/if}
                 {/if}
               </td>
+              <td class="whitespace-nowrap px-4 py-3 align-top text-xs">
+                {#if op.operationId}
+                  {@const mrParams = new URLSearchParams({
+                    prefill_method_name: op.operationId,
+                    ...(bankId ? { prefill_bank_id_pattern: bankId, prefill_is_bank_id_exact_match: "true" } : {}),
+                  })}
+                  <a
+                    href={`/integration/method-routings?${mrParams.toString()}`}
+                    data-testid="configure-routing-link"
+                    class="text-blue-600 hover:underline dark:text-blue-400"
+                  >Configure routing →</a>
+                {:else}
+                  <span class="text-gray-400 dark:text-gray-500">—</span>
+                {/if}
+              </td>
               <td class="whitespace-nowrap px-4 py-3 align-top text-xs">
                 <button
                   type="button"
@@ -417,7 +433,7 @@
             </tr>
             {#if isSchemaOpen}
               <tr data-testid="validation-editor-row">
-                <td colspan="7" class="px-4 py-4 bg-gray-50 dark:bg-gray-900/40">
+                <td colspan="8" class="px-4 py-4 bg-gray-50 dark:bg-gray-900/40">
                   <div class="space-y-3">
                     <div class="flex items-baseline justify-between">
                       <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
@@ -468,7 +484,7 @@
             {/if}
             {#if isTryOpen}
               <tr data-testid="try-it-row">
-                <td colspan="7" class="px-4 py-4 bg-gray-50 dark:bg-gray-900/40">
+                <td colspan="8" class="px-4 py-4 bg-gray-50 dark:bg-gray-900/40">
                   <div class="space-y-3">
                     <div class="flex items-baseline justify-between">
                       <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">

src/routes/(protected)/integration/method-routings/+page.svelte

@@ -312,11 +312,46 @@
     return !routing.method_routing_id || routing.method_routing_id === "";
   }
 
-  onMount(() => {
+  // Read deep-link query params (e.g. from Dynamic Endpoint operations table)
+  // and pre-open the create form with fields pre-filled.
+  let prefillBanner = $state<string | null>(null);
+  function applyPrefillFromUrl() {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const prefillMethod = params.get("prefill_method_name");
+    if (!prefillMethod) return;
+
+    const prefillConnector = params.get("prefill_connector_name") || "";
+    const prefillBankPattern = params.get("prefill_bank_id_pattern") || "";
+    const prefillExact = params.get("prefill_is_bank_id_exact_match") === "true";
+
+    // Dynamic Endpoint operationIds are not part of /system/connector-method-names,
+    // so add the prefilled name to the options list. Without this, bind:value on the
+    // <select> can't match any <option> and the field resets to empty.
+    if (!methodNames.includes(prefillMethod)) {
+      methodNames = [prefillMethod, ...methodNames];
+    }
+
+    formData = {
+      method_name: prefillMethod,
+      connector_name: prefillConnector,
+      is_bank_id_exact_match: prefillExact,
+      bank_id_pattern: prefillBankPattern,
+      parameters: "",
+    };
+    showCreateForm = true;
+    prefillBanner = `Pre-filled from a Dynamic Endpoint operation: ${prefillMethod}. Edit the connector and parameters before saving.`;
+    scrollToForm();
+  }
+
+  onMount(async () => {
     fetchMethodRoutings();
-    fetchMethodNames();
     fetchConnectorNames();
     fetchBankIds();
+    // Await method names before applying the URL prefill so the <select> options
+    // are populated when we set formData.method_name.
+    await fetchMethodNames();
+    applyPrefillFromUrl();
   });
 </script>
 
@@ -344,6 +379,15 @@
     {/if}
   </div>
 
+  <!-- Prefill banner (from Dynamic Endpoint deep-link) -->
+  {#if prefillBanner}
+    <div class="alert alert-info mb-6" data-testid="prefill-banner">
+      <strong>ℹ️</strong>
+      {prefillBanner}
+      <button onclick={() => (prefillBanner = null)} class="alert-close">×</button>
+    </div>
+  {/if}
+
   <!-- Messages -->
   {#if error}
     <div class="alert alert-error mb-6">
@@ -1050,6 +1094,18 @@
     border-color: rgb(var(--color-success-800));
   }
 
+  .alert-info {
+    background: #dbeafe;
+    color: #1e40af;
+    border: 1px solid #bfdbfe;
+  }
+
+  :global([data-mode="dark"]) .alert-info {
+    background: rgba(59, 130, 246, 0.15);
+    color: #93c5fd;
+    border-color: rgba(59, 130, 246, 0.3);
+  }
+
   .alert-close {
     background: transparent;
     border: none;