From f6000cc867a78bb16339b9a7bda9cbebee1f48fd Mon Sep 17 00:00:00 2001
From: Petr <petr@keboola.com>
Date: Thu, 12 Mar 2026 15:20:10 +0100
Subject: [PATCH] Fix: URL-encode metric FQN in catalog modal request

When metric FQN contains spaces (e.g. 'Active2 Customers'), JavaScript
was creating invalid URLs with literal spaces. Now properly encoding FQN
with encodeURIComponent() to convert spaces to %20 before sending to API.

Flask automatically decodes the path parameter back to original FQN.
---
 webapp/static/js/metric_modal.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/webapp/static/js/metric_modal.js b/webapp/static/js/metric_modal.js
index 7326a9d..9e56f81 100644
--- a/webapp/static/js/metric_modal.js
+++ b/webapp/static/js/metric_modal.js
@@ -24,9 +24,13 @@ function openMetricModal(metricPath) {
     body.innerHTML = '<div class="metric-loading"><div class="metric-loading-spinner"></div><div class="metric-loading-text">Loading metric...</div></div>';
 
     // Route based on prefix: catalog:FQN uses /api/catalog/metrics, YAML paths use /api/metrics
-    const url = metricPath.startsWith('catalog:')
-        ? `/api/catalog/metrics/${metricPath.slice(8)}`  // Remove 'catalog:' prefix
-        : `/api/metrics/${metricPath}`;
+    let url;
+    if (metricPath.startsWith('catalog:')) {
+        const fqn = metricPath.slice(8);  // Remove 'catalog:' prefix
+        url = `/api/catalog/metrics/${encodeURIComponent(fqn)}`;  // URL-encode FQN
+    } else {
+        url = `/api/metrics/${metricPath}`;
+    }
 
     // Fetch metric data
     fetch(url)