fix: flat portal topics without separator (#651)

* refactor: remove redundant tenant_id from portal redirect URL

The tenant_id is already embedded in the JWT token's sub claim,
so it's unnecessary in the URL query parameter.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* fix(portal): handle mixed flat and nested topics in TopicPicker

Topics are now parsed individually for separators instead of
requiring all topics to share the same separator. This allows
flat topics (job, document) to render without nesting while
hierarchical topics (user.created, user.updated) are grouped.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* fix: portal vite reload

* test: update tests for tenant topics and portal URL changes

- Update e2e test to expect literal ["*"] for tenant topics with
  wildcard destination (matches 78f162e behavior change)
- Update portal handler tests to check for token= instead of
  tenant_id= in redirect URL (matches 20463b2 refactor)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

---------

Co-authored-by: Claude Opus 4.5 <[email protected]>

Author: alexluong

cmd/e2e/api_test.go

@@ -168,7 +168,7 @@ func (suite *basicSuite) TestTenantsAPI() {
 					Body: map[string]interface{}{
 						"id":                 tenantID,
 						"destinations_count": 1,
-						"topics":             suite.config.Topics,
+						"topics":             []string{"*"},
 					},
 				},
 			},

internal/apirouter/tenant_handlers.go

@@ -209,7 +209,7 @@ func (h *TenantHandlers) RetrievePortal(c *gin.Context) {
 		theme = ""
 	}
 
-	portalURL := scheme + "://" + c.Request.Host + "?token=" + jwtToken + "&tenant_id=" + tenant.ID
+	portalURL := scheme + "://" + c.Request.Host + "?token=" + jwtToken
 	if theme != "" {
 		portalURL += "&theme=" + theme
 	}

internal/apirouter/tenant_handlers_test.go

@@ -240,7 +240,7 @@ func TestTenantRetrievePortalHandler(t *testing.T) {
 	router, _, redisClient := setupTestRouter(t, apiKey, jwtSecret)
 	entityStore := setupTestEntityStore(t, redisClient, nil)
 
-	t.Run("should return redirect_url with tenant_id and tenant_id in body", func(t *testing.T) {
+	t.Run("should return redirect_url with token and tenant_id in body", func(t *testing.T) {
 		t.Parallel()
 
 		// Setup
@@ -261,7 +261,7 @@ func TestTenantRetrievePortalHandler(t *testing.T) {
 		// Test
 		assert.Equal(t, http.StatusOK, w.Code)
 		assert.NotEmpty(t, response["redirect_url"])
-		assert.Contains(t, response["redirect_url"], "tenant_id="+existingResource.ID)
+		assert.Contains(t, response["redirect_url"], "token=")
 		assert.Equal(t, existingResource.ID, response["tenant_id"])
 
 		// Cleanup
@@ -288,7 +288,7 @@ func TestTenantRetrievePortalHandler(t *testing.T) {
 
 		// Test
 		assert.Equal(t, http.StatusOK, w.Code)
-		assert.Contains(t, response["redirect_url"], "tenant_id="+existingResource.ID)
+		assert.Contains(t, response["redirect_url"], "token=")
 		assert.Contains(t, response["redirect_url"], "theme=dark")
 		assert.Equal(t, existingResource.ID, response["tenant_id"])
 

internal/portal/src/common/TopicPicker/TopicPicker.scss

@@ -83,4 +83,10 @@
     font-size: var(--font-size-m);
     line-height: var(--line-height-m);
   }
+
+  &__flat-topic {
+    padding-left: var(--spacing-6);
+    margin-top: var(--spacing-3);
+    margin-bottom: var(--spacing-3);
+  }
 }

internal/portal/src/common/TopicPicker/TopicPicker.tsx

@@ -17,39 +17,32 @@ interface TopicPickerProps {
   onTopicsChange: (topics: string[]) => void;
 }
 
-const detectSeparator = (topics: string[]): string => {
-  // Common separators to check
-  const possibleSeparators = ["/", ".", "-"];
+const possibleSeparators = ["/", ".", "-"];
 
-  // Find the first separator that appears in all topics
-  // and is the first occurring separator in each topic
-  return (
-    possibleSeparators.find((sep) =>
-      topics.every((topic) => {
-        const sepIndex = topic.indexOf(sep);
-        if (sepIndex === -1) return false;
-
-        // Check if any other separator appears before this one
-        const otherSepsIndex = possibleSeparators
-          .filter((s) => s !== sep)
-          .map((s) => topic.indexOf(s))
-          .filter((idx) => idx !== -1);
-
-        return otherSepsIndex.every((idx) => idx === -1 || idx > sepIndex);
-      }),
-    ) || "-"
-  ); // Fallback to '-' if no consistent separator is found
+const findFirstSeparator = (topic: string): string | null => {
+  let firstIndex = -1;
+  let firstSep: string | null = null;
+
+  for (const sep of possibleSeparators) {
+    const idx = topic.indexOf(sep);
+    if (idx !== -1 && (firstIndex === -1 || idx < firstIndex)) {
+      firstIndex = idx;
+      firstSep = sep;
+    }
+  }
+
+  return firstSep;
 };
 
 const topics: Topic[] = (() => {
   const topicsList = CONFIGS.TOPICS.split(",");
-  const separator = detectSeparator(topicsList);
 
   return topicsList.map((topic) => {
-    const parts = topic.split(separator);
+    const separator = findFirstSeparator(topic);
+
     return {
       id: topic,
-      category: parts[0],
+      category: separator ? topic.split(separator)[0] : topic,
     };
   });
 })();
@@ -162,6 +155,28 @@ const TopicPicker = ({
           const areAllSelected = selectedCount === categoryTopics.length;
           const isIndeterminate = selectedCount > 0 && !areAllSelected;
 
+          // Check if this is a flat topic (no actual nesting)
+          const isFlatTopic =
+            categoryTopics.length === 1 && categoryTopics[0].id === category;
+
+          if (isFlatTopic) {
+            const topic = categoryTopics[0];
+            return (
+              <div key={category} className="topic-picker__flat-topic">
+                <Checkbox
+                  checked={
+                    isEverythingSelected ||
+                    selectedTopics.indexOf(topic.id) !== -1
+                  }
+                  onChange={() => toggleTopic(topic.id)}
+                  label={topic.id}
+                  monospace
+                  disabled={isEverythingSelected}
+                />
+              </div>
+            );
+          }
+
           return (
             <div key={category} className="topic-picker__category">
               <div className="topic-picker__category-header">

internal/portal/vite.config.ts

@@ -3,7 +3,7 @@ import react from "@vitejs/plugin-react-swc";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 export default defineConfig(({ mode }) => {
-  let plugins: UserConfig["plugins"] = [react()];
+  const plugins: UserConfig["plugins"] = [react()];
 
   if (process.env.SENTRY_AUTH_TOKEN && mode === "production") {
     plugins.push(
@@ -28,9 +28,13 @@ export default defineConfig(({ mode }) => {
     plugins,
     server: {
       port: 3334,
-      // hmr: {
-      //   port: 3334,
-      // },
+      host: true,
+      watch: {
+        usePolling: true, // Required for Docker volume mounts
+      },
+      hmr: {
+        clientPort: 3334, // Ensure HMR WebSocket connects to the right port
+      },
     },
     build: {
       sourcemap: true,