feat: move workflow search bar to the top of workflows table

frontend/app/src/components/v1/molecules/data-table/data-table-toolbar.tsx

@@ -68,6 +68,7 @@ interface DataTableToolbarProps<TData> {
   filters: ToolbarFilters;
   leftActions?: JSX.Element[];
   rightActions?: JSX.Element[];
+  searchBar?: JSX.Element;
   showColumnToggle?: boolean;
   isLoading?: boolean;
   hiddenFilters: string[];
@@ -82,6 +83,7 @@ export function DataTableToolbar<TData>({
   filters,
   leftActions,
   rightActions = [],
+  searchBar,
   showColumnToggle,
   isLoading = false,
   hiddenFilters,
@@ -109,12 +111,13 @@ export function DataTableToolbar<TData>({
 
   return (
     <div className="flex items-center justify-between">
-      <div className="flex w-full flex-shrink-0 flex-row items-center justify-between overflow-x-auto">
+      <div className="flex w-full flex-row items-center gap-2">
         <div className="flex min-w-0 flex-shrink-0 items-center gap-2">
           {!leftActions && isLoading && <Spinner />}
           {leftActions}
         </div>
-        <div className="flex flex-shrink-0 flex-row items-center gap-2">
+        {searchBar && <div className="min-w-0 flex-1">{searchBar}</div>}
+        <div className="ml-auto flex flex-shrink-0 flex-row items-center gap-2">
           {rightActions}
           {refetchProps && (
             <RefetchIntervalDropdown

frontend/app/src/components/v1/molecules/data-table/data-table.tsx

@@ -54,6 +54,7 @@ interface DataTableProps<TData extends IDGetter<TData>, TValue> {
   filters?: ToolbarFilters;
   leftActions?: JSX.Element[];
   rightActions?: JSX.Element[];
+  searchBar?: JSX.Element;
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   setSearch?: (search: string) => void;
@@ -105,6 +106,7 @@ export function DataTable<TData extends IDGetter<TData>, TValue>({
   filters = [],
   leftActions = [],
   rightActions = [],
+  searchBar,
   sorting,
   setSorting,
   columnFilters,
@@ -237,7 +239,7 @@ export function DataTable<TData extends IDGetter<TData>, TValue>({
 
   return (
     <div className="flex h-full flex-col">
-      <div className="shrink-0 h-10 flex flex-col size-full items-center pt-2 mb-2">
+      <div className="shrink-0 min-h-10 flex flex-col w-full items-center pt-2 mb-2">
         <div className="w-full">
           {tableActions?.selectedActionType && (
             <ConfirmActionModal
@@ -250,13 +252,14 @@ export function DataTable<TData extends IDGetter<TData>, TValue>({
               showColumnVisibility={false}
             />
           )}
-          {(leftActions || rightActions || filters.length > 0) && (
+          {(leftActions || rightActions || searchBar || filters.length > 0) && (
             <DataTableToolbar
               table={table}
               filters={filters}
               isLoading={isLoading}
               leftActions={leftActions}
               rightActions={rightActions}
+              searchBar={searchBar}
               showColumnToggle={showColumnToggle}
               hiddenFilters={hiddenFilters}
               columnKeyToName={columnKeyToName}

frontend/app/src/pages/main/v1/workflows/hooks/use-workflows.tsx

@@ -5,7 +5,7 @@ import { useCurrentTenantId } from '@/hooks/use-tenant';
 import { useZodColumnFilters } from '@/hooks/use-zod-column-filters';
 import { queries } from '@/lib/api';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useDebounce } from 'use-debounce';
 import { z } from 'zod';
 
@@ -38,6 +38,13 @@ export const useWorkflows = ({ key }: UseWorkflowsProps) => {
 
   const [debouncedSearch] = useDebounce(search, 300);
 
+  const setSearch = useCallback(
+    (value: string) => {
+      setColumnFilters(() => (value ? [{ id: nameKey, value }] : []));
+    },
+    [setColumnFilters],
+  );
+
   const listWorkflowQuery = useQuery({
     ...queries.workflows.list(tenantId, {
       limit,
@@ -80,5 +87,7 @@ export const useWorkflows = ({ key }: UseWorkflowsProps) => {
     setColumnFilters,
     resetFilters,
     workflowNameToId,
+    search: search ?? '',
+    setSearch,
   };
 };

frontend/app/src/pages/main/v1/workflows/index.tsx

@@ -1,17 +1,20 @@
-import {
-  columns,
-  nameKey,
-  WorkflowColumn,
-} from './components/workflow-columns';
+import { columns, WorkflowColumn } from './components/workflow-columns';
 import { useWorkflows } from './hooks/use-workflows';
 import { DocsButton } from '@/components/v1/docs/docs-button';
-import { ToolbarType } from '@/components/v1/molecules/data-table/data-table-toolbar';
 import { DataTable } from '@/components/v1/molecules/data-table/data-table.tsx';
+import {
+  SearchBarWithFilters,
+  type SearchSuggestion,
+} from '@/components/v1/molecules/search-bar-with-filters/search-bar-with-filters';
 import { Loading } from '@/components/v1/ui/loading.tsx';
 import { useLocalStorageState } from '@/hooks/use-local-storage-state';
 import { useCurrentTenantId } from '@/hooks/use-tenant';
 import { docsPages } from '@/lib/generated/docs';
 import { VisibilityState } from '@tanstack/react-table';
+import { useMemo } from 'react';
+
+const noopAutocomplete = () => ({ suggestions: [] as SearchSuggestion[] });
+const noopApplySuggestion = (query: string) => query;
 
 export default function WorkflowTable() {
   const { tenantId } = useCurrentTenantId();
@@ -31,14 +34,30 @@ export default function WorkflowTable() {
     columnFilters,
     setColumnFilters,
     resetFilters,
+    search,
+    setSearch,
   } = useWorkflows({
     key: 'workflows-table',
   });
 
+  const autocompleteContext = useMemo(() => ({}), []);
+
   if (isLoading) {
     return <Loading />;
   }
 
+  const searchBar = (
+    <SearchBarWithFilters
+      value={search}
+      onChange={setSearch}
+      onSubmit={setSearch}
+      getAutocomplete={noopAutocomplete}
+      applySuggestion={noopApplySuggestion}
+      autocompleteContext={autocompleteContext}
+      placeholder="Search workflows by name..."
+    />
+  );
+
   return (
     <DataTable
       columns={columns(tenantId)}
@@ -54,13 +73,7 @@ export default function WorkflowTable() {
           </div>
         </div>
       }
-      filters={[
-        {
-          columnId: nameKey,
-          title: WorkflowColumn.name,
-          type: ToolbarType.Search,
-        },
-      ]}
+      searchBar={searchBar}
       columnVisibility={columnVisibility}
       setColumnVisibility={setColumnVisibility}
       pagination={pagination}