fix: address code review findings for template library

- Sanitize {{secret:SECRET_ID}} references in publish validation (#1)
- Migrate UseTemplateModal from Zustand to TanStack Query mutation (#2)
- Reset modal state on template/open change to prevent stale data (#3)
- Fetch GitHub repo config dynamically with fallback defaults (#4)
- Use snake_case keys for analytics event properties (#5)

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>

Author: krishna9358

frontend/src/features/templates/PublishTemplateModal.tsx

@@ -40,9 +40,9 @@ interface PublishTemplateModalProps {
   onSuccess?: () => void;
 }
 
-// GitHub repository configuration for templates
-const GITHUB_TEMPLATE_REPO = 'krishna9358/workflow-templates'; // format: owner/repo
-const GITHUB_BRANCH = 'main';
+// Fallback GitHub repository configuration (overridden by backend /templates/repo-info)
+const DEFAULT_GITHUB_TEMPLATE_REPO = 'krishna9358/workflow-templates';
+const DEFAULT_GITHUB_BRANCH = 'main';
 
 const TEMPLATE_CATEGORIES = [
   'Security',
@@ -126,13 +126,15 @@ function sanitizeGraphForTemplate(graph: Record<string, unknown>): Record<string
           typeof value === 'string' &&
           (value.includes('${secrets.') ||
             value.includes('${secret.') ||
-            value.includes('{{secret.'))
+            value.includes('{{secret.') ||
+            value.includes('{{secret:'))
         ) {
           // Replace secret interpolation expressions with placeholder
           result[key] = value
             .replace(/\$\{secrets\.[^}]+\}/g, '{{SECRET_PLACEHOLDER}}')
             .replace(/\$\{secret\.[^}]+\}/g, '{{SECRET_PLACEHOLDER}}')
-            .replace(/\{\{secret\.[^}]+\}\}/g, '{{SECRET_PLACEHOLDER}}');
+            .replace(/\{\{secret\.[^}]+\}\}/g, '{{SECRET_PLACEHOLDER}}')
+            .replace(/\{\{secret:[a-f0-9-]+\}\}/gi, '{{SECRET_PLACEHOLDER}}');
         } else {
           result[key] = traverseAndSanitize(value);
         }
@@ -333,11 +335,28 @@ export function PublishTemplateModal({
         // Store the template JSON so user can re-copy from the success view
         setGeneratedTemplateJson(templateJson);
 
-        // Parse the GitHub repo config
-        const [owner, repo] = GITHUB_TEMPLATE_REPO.split('/');
+        // Fetch repo config from backend, fall back to defaults
+        let owner: string;
+        let repo: string;
+        let branch: string;
+        try {
+          const repoInfoRes = await fetch(`${API_BASE_URL}/api/v1/templates/repo-info`);
+          if (repoInfoRes.ok) {
+            const repoInfo = await repoInfoRes.json();
+            owner = repoInfo.owner;
+            repo = repoInfo.repo;
+            branch = repoInfo.branch;
+          } else {
+            [owner, repo] = DEFAULT_GITHUB_TEMPLATE_REPO.split('/');
+            branch = DEFAULT_GITHUB_BRANCH;
+          }
+        } catch {
+          [owner, repo] = DEFAULT_GITHUB_TEMPLATE_REPO.split('/');
+          branch = DEFAULT_GITHUB_BRANCH;
+        }
 
         // Generate GitHub URL without content (avoids long URL errors)
-        const githubUrl = generateGitHubUrl(owner, repo, GITHUB_BRANCH, filename, name.trim());
+        const githubUrl = generateGitHubUrl(owner, repo, branch, filename, name.trim());
 
         // Open the GitHub URL in a new tab
         window.open(githubUrl, '_blank', 'noopener,noreferrer');
@@ -473,7 +492,7 @@ export function PublishTemplateModal({
                   before it&apos;s added to the library.
                 </div>
                 <a
-                  href={`https://github.com/${GITHUB_TEMPLATE_REPO}`}
+                  href={`https://github.com/${DEFAULT_GITHUB_TEMPLATE_REPO}`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-primary hover:underline flex items-center gap-1"

frontend/src/features/templates/UseTemplateModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -12,7 +12,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Loader2, AlertCircle, Eye, EyeOff, KeyRound } from 'lucide-react';
-import { useTemplateStore, type Template } from '@/store/templateStore';
+import { useUseTemplate, type Template } from '@/hooks/queries/useTemplateQueries';
 
 interface UseTemplateModalProps {
   template: Template;
@@ -27,13 +27,24 @@ export function UseTemplateModal({
   onOpenChange,
   onSuccess,
 }: UseTemplateModalProps) {
-  const { useTemplate, isLoading } = useTemplateStore();
+  const useTemplateMutation = useUseTemplate();
+  const isLoading = useTemplateMutation.isPending;
 
   const [workflowName, setWorkflowName] = useState(`${template.name} - Copy`);
   const [secretMappings, setSecretMappings] = useState<Record<string, string>>({});
   const [showSecrets, setShowSecrets] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Reset state when template or open changes to avoid stale data (#3)
+  useEffect(() => {
+    if (open) {
+      setWorkflowName(`${template.name} - Copy`);
+      setSecretMappings({});
+      setShowSecrets(false);
+      setError(null);
+    }
+  }, [template.id, open]);
+
   // Initialize secret mappings with placeholder values
   const requiredSecrets = template.requiredSecrets || [];
 
@@ -57,8 +68,12 @@ export function UseTemplateModal({
     }
 
     try {
-      const result = await useTemplate(template.id, workflowName, secretMappings);
-      onSuccess(result.workflowId);
+      const result = await useTemplateMutation.mutateAsync({
+        templateId: template.id,
+        workflowName,
+        secretMappings: requiredSecrets.length > 0 ? secretMappings : undefined,
+      });
+      onSuccess(result.workflow?.id ?? result.workflowId);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create workflow from template');
     }

frontend/src/pages/TemplateLibraryPage.tsx

@@ -782,8 +782,8 @@ export function TemplateLibraryPage() {
     setSelectedTemplate(template);
     setIsUseModalOpen(true);
     track(Events.TemplateUseClicked, {
-      templateId: template.id,
-      templateName: template.name,
+      template_id: template.id,
+      template_name: template.name,
       category: template.category,
     });
   };