From 3bd025f6cc5fa0037756c936fb65b0fbba66b066 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sanchez.saez.alex01@gmail.com>
Date: Thu, 13 Aug 2026 09:09:56 -0600
Subject: [PATCH] fix[frontend](soar): added horizontal scroll to soar table
 and fix bulk edition payload

---
 .../features/soar/components/FlowEditor.tsx   |  4 +-
 .../src/features/soar/pages/FlowsPage.tsx     | 66 ++++++++++---------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/frontend/src/features/soar/components/FlowEditor.tsx b/frontend/src/features/soar/components/FlowEditor.tsx
index 62ecfd7a7..1db6842df 100644
--- a/frontend/src/features/soar/components/FlowEditor.tsx
+++ b/frontend/src/features/soar/components/FlowEditor.tsx
@@ -167,7 +167,7 @@ export function FlowEditor({
       f = { ...r.form, active: form.active }
     }
     const input = formToInput(f)
-    return broadcast(BULK_PATHS.soarRules.create, selector, input)
+    return broadcast(BULK_PATHS.soarRules.create, selector, { rule: input })
   }
 
   const broadcastUpdate = async (selector: { tenantIds: string[]; allTenants: boolean }) => {
@@ -179,7 +179,7 @@ export function FlowEditor({
       f = { ...r.form, active: form.active }
     }
     const input = formToInput(f)
-    return broadcast(BULK_PATHS.soarRules.update, selector, { relPath: flow.relPath, ...input })
+    return broadcast(BULK_PATHS.soarRules.update, selector, { relPath: flow.relPath, rule: input })
   }
 
   const broadcastDelete = async (selector: { tenantIds: string[]; allTenants: boolean }) => {
diff --git a/frontend/src/features/soar/pages/FlowsPage.tsx b/frontend/src/features/soar/pages/FlowsPage.tsx
index 6236b855d..69325f0c9 100644
--- a/frontend/src/features/soar/pages/FlowsPage.tsx
+++ b/frontend/src/features/soar/pages/FlowsPage.tsx
@@ -188,38 +188,40 @@ export function FlowsPage() {
       </div>
 
       <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card">
-        <div className="grid items-center gap-3 border-b border-border bg-muted/30 px-4 py-2.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground" style={{ gridTemplateColumns: COLS }}>
-          <div>{t('soar.cols.flow')}</div>
-          <div>{t('soar.cols.platform')}</div>
-          <div className="text-center">{t('soar.cols.conditions')}</div>
-          <div className="text-center">{t('soar.cols.commands')}</div>
-          <div>{t('soar.cols.lastRun')}</div>
-          <div className="text-center">{t('soar.cols.active')}</div>
-          <div />
-        </div>
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          {loading && items.length === 0 ? (
-            <Center><Loader2 className="h-4 w-4 animate-spin" /> {t('soar.loading')}</Center>
-          ) : error ? (
-            <Center>
-              <AlertTriangle size={16} className="text-amber-500" /> {t('soar.loadError')}
-              <Button variant="outline" size="sm" className="ml-2" onClick={load}>{t('soar.retry')}</Button>
-            </Center>
-          ) : items.length === 0 ? (
-            <div className="px-6 py-16 text-center text-sm text-muted-foreground">{t('soar.empty')}</div>
-          ) : (
-            <>
-              {items.map((f) => (
-                <FlowRow key={f.relPath} f={f} stat={stats[f.relPath]} onOpen={() => setEditing({ flow: f, creating: false })} onToggle={() => toggleActive(f)} t={t} />
-              ))}
-              <InfiniteScrollSentinel
-                onReach={() => setPage((p) => p + 1)}
-                hasMore={items.length < total}
-                loading={loading}
-                endLabel={t('common.allLoaded', { count: total })}
-              />
-            </>
-          )}
+        <div className="min-h-0 flex-1 overflow-auto">
+          <div className="min-w-[900px]">
+            <div className="sticky top-0 z-10 grid items-center gap-3 border-b border-border bg-muted px-4 py-2.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground" style={{ gridTemplateColumns: COLS }}>
+              <div>{t('soar.cols.flow')}</div>
+              <div>{t('soar.cols.platform')}</div>
+              <div className="text-center">{t('soar.cols.conditions')}</div>
+              <div className="text-center">{t('soar.cols.commands')}</div>
+              <div>{t('soar.cols.lastRun')}</div>
+              <div className="text-center">{t('soar.cols.active')}</div>
+              <div />
+            </div>
+            {loading && items.length === 0 ? (
+              <Center><Loader2 className="h-4 w-4 animate-spin" /> {t('soar.loading')}</Center>
+            ) : error ? (
+              <Center>
+                <AlertTriangle size={16} className="text-amber-500" /> {t('soar.loadError')}
+                <Button variant="outline" size="sm" className="ml-2" onClick={load}>{t('soar.retry')}</Button>
+              </Center>
+            ) : items.length === 0 ? (
+              <div className="px-6 py-16 text-center text-sm text-muted-foreground">{t('soar.empty')}</div>
+            ) : (
+              <>
+                {items.map((f) => (
+                  <FlowRow key={f.relPath} f={f} stat={stats[f.relPath]} onOpen={() => setEditing({ flow: f, creating: false })} onToggle={() => toggleActive(f)} t={t} />
+                ))}
+                <InfiniteScrollSentinel
+                  onReach={() => setPage((p) => p + 1)}
+                  hasMore={items.length < total}
+                  loading={loading}
+                  endLabel={t('common.allLoaded', { count: total })}
+                />
+              </>
+            )}
+          </div>
         </div>
       </div>