From fd0edebf83e7ceb7c684ddf662cdf40cb5300da3 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Sat, 16 May 2026 17:18:54 +0700
Subject: [PATCH] feat(frontend): extend Flows search to provider and terminals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch the `provider` and `terminals` columns from `accessorKey` to
`accessorFn` so the global filter receives plain strings — the provider
name and the joined list of terminal images — instead of the raw object
or array, which the predicate would just stringify to `[object Object]`.
The cell renderers keep reading `row.original` directly, so the visible
output is unchanged.

Dates stay excluded: substring matching against formatted timestamps
gives unpredictable hits (e.g. typing "3" suddenly matches every row
whose ISO contains 03) and date filtering belongs in a range picker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/flows/flows.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/flows/flows.tsx b/frontend/src/pages/flows/flows.tsx
index 7ab0d582..a354a719 100644
--- a/frontend/src/pages/flows/flows.tsx
+++ b/frontend/src/pages/flows/flows.tsx
@@ -262,7 +262,12 @@ const Flows = () => {
                 size: 100,
             },
             {
-                accessorKey: 'provider',
+                // accessorFn returns the provider name as a plain string so it
+                // participates in the DataTable global filter (search input).
+                // The cell renderer still reads the original provider object
+                // directly through `row.original`, so the icon + label stay
+                // intact.
+                accessorFn: (row) => row.provider?.name ?? '',
                 cell: ({ row }) => {
                     const flow = row.original;
 
@@ -282,7 +287,9 @@ const Flows = () => {
                         title="Provider"
                     />
                 ),
+                id: 'provider',
                 maxSize: 150,
+                meta: { searchable: true },
                 minSize: 80,
                 size: 100,
                 sortingFn: (rowA, rowB) => {
@@ -293,7 +300,11 @@ const Flows = () => {
                 },
             },
             {
-                accessorKey: 'terminals',
+                // accessorFn joins all terminal images into one string for the
+                // global search; the cell still derives its presentation from
+                // the original array on `row.original`, and sortingFn keeps
+                // ordering by count (more intuitive than alphabetical).
+                accessorFn: (row) => (row.terminals ?? []).map((t) => t.image).join(' '),
                 cell: ({ row }) => {
                     const flow = row.original;
                     const terminals = flow.terminals || [];
@@ -341,7 +352,9 @@ const Flows = () => {
                         title="Terminals"
                     />
                 ),
+                id: 'terminals',
                 maxSize: 220,
+                meta: { searchable: true },
                 minSize: 160,
                 size: 180,
                 sortingFn: (rowA, rowB) => {