From 599b1702f245dc03203d8a6929579a5d77fe6179 Mon Sep 17 00:00:00 2001
From: Adhitya Mamallan <adhitya.mamallan@uber.com>
Date: Mon, 25 Nov 2024 19:10:51 +0530
Subject: [PATCH] Fetch domain workflows when a query is provided (#742)

* Add changes to table

* Change impl

* Fix tests and type checks

* make changes to type

* Split search and query table configs

* Add type for domain workflows query config
---
 .../domain-workflows-query-table.config.ts    | 59 +++++++++++++++++++
 ...> domain-workflows-search-table.config.ts} |  4 +-
 .../domain-workflows-header.test.tsx          | 26 ++++++--
 .../domain-workflows-header.tsx               |  7 ++-
 .../domain-workflows-header.types.ts          |  5 ++
 .../domain-workflows-query-input.test.tsx     | 12 +++-
 .../domain-workflows-query-input.tsx          | 10 +++-
 .../domain-workflows-query-input.types.ts     |  1 +
 .../__tests__/domain-workflows-table.test.tsx | 56 ++++++++++++++++--
 .../domain-workflows-table.tsx                | 58 +++++++++---------
 .../domain-workflows-table.types.ts           |  7 +++
 .../get-workflows-error-panel-props.test.ts   | 19 +++++-
 .../get-workflows-error-panel-props.ts        | 13 +++-
 .../domain-workflows/domain-workflows.tsx     |  2 +-
 .../domain-workflows.types.ts                 | 10 ++--
 .../hooks/use-list-workflows.ts               | 21 ++++++-
 16 files changed, 256 insertions(+), 54 deletions(-)
 create mode 100644 src/views/domain-workflows/config/domain-workflows-query-table.config.ts
 rename src/views/domain-workflows/config/{domain-workflows-table.config.ts => domain-workflows-search-table.config.ts} (94%)

diff --git a/src/views/domain-workflows/config/domain-workflows-query-table.config.ts b/src/views/domain-workflows/config/domain-workflows-query-table.config.ts
new file mode 100644
index 000000000..f8be5a532
--- /dev/null
+++ b/src/views/domain-workflows/config/domain-workflows-query-table.config.ts
@@ -0,0 +1,59 @@
+import { createElement } from 'react';
+
+import FormattedDate from '@/components/formatted-date/formatted-date';
+import Link from '@/components/link/link';
+import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
+import WorkflowStatusTag from '@/views/shared/workflow-status-tag/workflow-status-tag';
+
+import { type DomainWorkflowsQueryTableConfig } from '../domain-workflows-table/domain-workflows-table.types';
+
+const domainWorkflowsQueryTableConfig = [
+  {
+    name: 'Workflow ID',
+    id: 'WorkflowID',
+    renderCell: (row: DomainWorkflow) => row.workflowID,
+    width: '25.5%',
+  },
+  {
+    name: 'Status',
+    id: 'CloseStatus',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(WorkflowStatusTag, { status: row.status }),
+    width: '7.5%',
+  },
+  {
+    name: 'Run ID',
+    id: 'RunID',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(
+        Link,
+        {
+          href: `workflows/${encodeURIComponent(row.workflowID)}/${encodeURIComponent(row.runID)}`,
+        },
+        row.runID
+      ),
+    width: '22%',
+  },
+  {
+    name: 'Workflow type',
+    id: 'WorkflowType',
+    renderCell: (row: DomainWorkflow) => row.workflowName,
+    width: '20%',
+  },
+  {
+    name: 'Started',
+    id: 'StartTime',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(FormattedDate, { timestampMs: row.startTime }),
+    width: '12.5%',
+  },
+  {
+    name: 'Ended',
+    id: 'CloseTime',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(FormattedDate, { timestampMs: row.closeTime }),
+    width: '12.5%',
+  },
+] as const satisfies DomainWorkflowsQueryTableConfig;
+
+export default domainWorkflowsQueryTableConfig;
diff --git a/src/views/domain-workflows/config/domain-workflows-table.config.ts b/src/views/domain-workflows/config/domain-workflows-search-table.config.ts
similarity index 94%
rename from src/views/domain-workflows/config/domain-workflows-table.config.ts
rename to src/views/domain-workflows/config/domain-workflows-search-table.config.ts
index 09dbd8a69..49f13e5e2 100644
--- a/src/views/domain-workflows/config/domain-workflows-table.config.ts
+++ b/src/views/domain-workflows/config/domain-workflows-search-table.config.ts
@@ -6,7 +6,7 @@ import { type TableConfig } from '@/components/table/table.types';
 import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
 import WorkflowStatusTag from '@/views/shared/workflow-status-tag/workflow-status-tag';
 
-const domainWorkflowsTableConfig = [
+const domainWorkflowsSearchTableConfig = [
   {
     name: 'Workflow ID',
     id: 'WorkflowID',
@@ -57,4 +57,4 @@ const domainWorkflowsTableConfig = [
   },
 ] as const satisfies TableConfig<DomainWorkflow>;
 
-export default domainWorkflowsTableConfig;
+export default domainWorkflowsSearchTableConfig;
diff --git a/src/views/domain-workflows/domain-workflows-header/__tests__/domain-workflows-header.test.tsx b/src/views/domain-workflows/domain-workflows-header/__tests__/domain-workflows-header.test.tsx
index fc587dcde..807b34adc 100644
--- a/src/views/domain-workflows/domain-workflows-header/__tests__/domain-workflows-header.test.tsx
+++ b/src/views/domain-workflows/domain-workflows-header/__tests__/domain-workflows-header.test.tsx
@@ -41,16 +41,26 @@ jest.mock('@/components/page-filters/hooks/use-page-filters', () =>
   }))
 );
 
+jest.mock('../../hooks/use-list-workflows', () =>
+  jest.fn(() => ({
+    refetch: jest.fn(),
+  }))
+);
+
 describe(DomainWorkflowsHeader.name, () => {
   it('renders segmented control', async () => {
-    render(<DomainWorkflowsHeader />);
+    render(
+      <DomainWorkflowsHeader domain="mock_domain" cluster="mock_cluster" />
+    );
 
     expect(await screen.findByText('Search')).toBeInTheDocument();
     expect(await screen.findByText('Query')).toBeInTheDocument();
   });
 
   it('renders page search and filters button when input type is search', async () => {
-    render(<DomainWorkflowsHeader />);
+    render(
+      <DomainWorkflowsHeader domain="mock_domain" cluster="mock_cluster" />
+    );
 
     expect(await screen.findByText('Filter search')).toBeInTheDocument();
     expect(await screen.findByText('Filter toggle')).toBeInTheDocument();
@@ -58,7 +68,9 @@ describe(DomainWorkflowsHeader.name, () => {
 
   it('renders page filters when filter toggle is clicked', async () => {
     const user = userEvent.setup();
-    render(<DomainWorkflowsHeader />);
+    render(
+      <DomainWorkflowsHeader domain="mock_domain" cluster="mock_cluster" />
+    );
 
     const filterToggle = await screen.findByText('Filter toggle');
     await user.click(filterToggle);
@@ -77,14 +89,18 @@ describe(DomainWorkflowsHeader.name, () => {
       setQueryParams: mockSetQueryParams,
     });
 
-    render(<DomainWorkflowsHeader />);
+    render(
+      <DomainWorkflowsHeader domain="mock_domain" cluster="mock_cluster" />
+    );
 
     expect(await screen.findByText('Query')).toBeInTheDocument();
   });
 
   it('toggles input type when segmented control is used', async () => {
     const user = userEvent.setup();
-    render(<DomainWorkflowsHeader />);
+    render(
+      <DomainWorkflowsHeader domain="mock_domain" cluster="mock_cluster" />
+    );
 
     const queryButton = await screen.findByText('Search');
     await user.click(queryButton);
diff --git a/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.tsx b/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.tsx
index 847fe3b29..da3d9ae5d 100644
--- a/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.tsx
+++ b/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.tsx
@@ -11,10 +11,12 @@ import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-
 
 import domainWorkflowsFiltersConfig from '../config/domain-workflows-filters.config';
 import DomainWorkflowsQueryInput from '../domain-workflows-query-input/domain-workflows-query-input';
+import useListWorkflows from '../hooks/use-list-workflows';
 
 import { overrides, styled } from './domain-workflows-header.styles';
+import { type Props } from './domain-workflows-header.types';
 
-export default function DomainWorkflowsHeader() {
+export default function DomainWorkflowsHeader({ domain, cluster }: Props) {
   const [areFiltersShown, setAreFiltersShown] = useState(false);
 
   const { resetAllFilters, activeFiltersCount, queryParams, setQueryParams } =
@@ -23,6 +25,8 @@ export default function DomainWorkflowsHeader() {
       pageQueryParamsConfig: domainPageQueryParamsConfig,
     });
 
+  const { refetch } = useListWorkflows({ domain, cluster });
+
   return (
     <styled.HeaderContainer>
       <styled.InputContainer>
@@ -54,6 +58,7 @@ export default function DomainWorkflowsHeader() {
           <DomainWorkflowsQueryInput
             value={queryParams.query}
             setValue={(v) => setQueryParams({ query: v })}
+            refetchQuery={refetch}
           />
         ) : (
           <>
diff --git a/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.types.ts b/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.types.ts
index 1caec1506..5ab04ad92 100644
--- a/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.types.ts
+++ b/src/views/domain-workflows/domain-workflows-header/domain-workflows-header.types.ts
@@ -2,3 +2,8 @@ import { type ListWorkflowsRequestQueryParams } from '@/route-handlers/list-work
 
 export type DomainWorkflowsHeaderInputType =
   ListWorkflowsRequestQueryParams['inputType'];
+
+export type Props = {
+  domain: string;
+  cluster: string;
+};
diff --git a/src/views/domain-workflows/domain-workflows-query-input/__tests__/domain-workflows-query-input.test.tsx b/src/views/domain-workflows/domain-workflows-query-input/__tests__/domain-workflows-query-input.test.tsx
index 99bb0a7a7..0f614fd96 100644
--- a/src/views/domain-workflows/domain-workflows-query-input/__tests__/domain-workflows-query-input.test.tsx
+++ b/src/views/domain-workflows/domain-workflows-query-input/__tests__/domain-workflows-query-input.test.tsx
@@ -29,17 +29,27 @@ describe(DomainWorkflowsQueryInput.name, () => {
 
     expect(mockSetValue).toHaveBeenCalledWith('mock_query');
   });
+
+  it('calls refetchQuery when the Rerun Query button is clicked', async () => {
+    const { mockRefetch, user } = setup({ startValue: 'test_query' });
+
+    await user.click(await screen.findByText('Rerun Query'));
+
+    expect(mockRefetch).toHaveBeenCalled();
+  });
 });
 
 function setup({ startValue }: { startValue?: string }) {
   const mockSetValue = jest.fn();
+  const mockRefetch = jest.fn();
   const user = userEvent.setup();
   render(
     <DomainWorkflowsQueryInput
       value={startValue ?? ''}
       setValue={mockSetValue}
+      refetchQuery={mockRefetch}
     />
   );
 
-  return { mockSetValue, user };
+  return { mockSetValue, mockRefetch, user };
 }
diff --git a/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.tsx b/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.tsx
index 3066aadd5..0827ce66a 100644
--- a/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.tsx
+++ b/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.tsx
@@ -7,7 +7,11 @@ import { MdPlayArrow, MdCode, MdRefresh } from 'react-icons/md';
 import { overrides } from './domain-workflows-query-input.styles';
 import { type Props } from './domain-workflows-query-input.types';
 
-export default function DomainWorkflowsQueryInput({ value, setValue }: Props) {
+export default function DomainWorkflowsQueryInput({
+  value,
+  setValue,
+  refetchQuery,
+}: Props) {
   const [queryText, setQueryText] = useState<string>('');
 
   useEffect(() => {
@@ -30,7 +34,9 @@ export default function DomainWorkflowsQueryInput({ value, setValue }: Props) {
         clearOnEscape
       />
       <Button
-        onClick={() => setValue(queryText || undefined)}
+        onClick={() =>
+          isQueryUnchanged ? refetchQuery() : setValue(queryText || undefined)
+        }
         overrides={overrides.runButton}
         startEnhancer={isQueryUnchanged ? <MdRefresh /> : <MdPlayArrow />}
       >
diff --git a/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.types.ts b/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.types.ts
index 99094d144..7b0aa1329 100644
--- a/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.types.ts
+++ b/src/views/domain-workflows/domain-workflows-query-input/domain-workflows-query-input.types.ts
@@ -1,4 +1,5 @@
 export type Props = {
   value: string;
   setValue: (v: string | undefined) => void;
+  refetchQuery: () => void;
 };
diff --git a/src/views/domain-workflows/domain-workflows-table/__tests__/domain-workflows-table.test.tsx b/src/views/domain-workflows/domain-workflows-table/__tests__/domain-workflows-table.test.tsx
index bfe08180b..d61ada399 100644
--- a/src/views/domain-workflows/domain-workflows-table/__tests__/domain-workflows-table.test.tsx
+++ b/src/views/domain-workflows/domain-workflows-table/__tests__/domain-workflows-table.test.tsx
@@ -1,11 +1,13 @@
 import { HttpResponse } from 'msw';
 
-import { render, screen, userEvent } from '@/test-utils/rtl';
+import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
 
+import * as usePageQueryParamsModule from '@/hooks/use-page-query-params/use-page-query-params';
 import { type ListWorkflowsResponse } from '@/route-handlers/list-workflows/list-workflows.types';
 
 import type { Props as MSWMocksHandlersProps } from '../../../../test-utils/msw-mock-handlers/msw-mock-handlers.types';
 import { mockDomainWorkflowsQueryParamsValues } from '../../__fixtures__/domain-workflows-query-params';
+import { type DomainWorkflowsHeaderInputType } from '../../domain-workflows-header/domain-workflows-header.types';
 import { type Props as EndMessageProps } from '../../domain-workflows-table-end-message/domain-workflows-table-end-message.types';
 import DomainWorkflowsTable from '../domain-workflows-table';
 
@@ -14,9 +16,26 @@ jest.mock('@/components/error-panel/error-panel', () =>
 );
 
 jest.mock('../helpers/get-workflows-error-panel-props', () =>
-  jest.fn().mockImplementation(({ error }) => ({
-    message: error ? 'Error loading workflows' : 'No workflows found',
-  }))
+  jest
+    .fn()
+    .mockImplementation(
+      ({
+        error,
+        inputType,
+      }: {
+        error: Error;
+        inputType: DomainWorkflowsHeaderInputType;
+      }) => {
+        if (inputType === 'query') {
+          return {
+            message: error ? error.message : undefined,
+          };
+        }
+        return {
+          message: error ? 'Error loading workflows' : 'No workflows found',
+        };
+      }
+    )
 );
 
 jest.mock(
@@ -41,6 +60,10 @@ jest.mock('@/hooks/use-page-query-params/use-page-query-params', () =>
 );
 
 describe(DomainWorkflowsTable.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders workflows without error', async () => {
     const { user } = setup({});
 
@@ -69,12 +92,30 @@ describe(DomainWorkflowsTable.name, () => {
     ).toBeInTheDocument();
   });
 
-  it('renders error panel if no workflows are found', async () => {
+  it('renders error panel in search mode if no workflows are found', async () => {
     setup({ errorCase: 'no-workflows' });
 
     expect(await screen.findByText('No workflows found')).toBeInTheDocument();
   });
 
+  it('renders empty table in query mode if no workflows are found', async () => {
+    jest
+      .spyOn(usePageQueryParamsModule, 'default')
+      .mockReturnValue([
+        { ...mockDomainWorkflowsQueryParamsValues, inputType: 'query' },
+        mockSetQueryParams,
+      ]);
+
+    setup({ errorCase: 'no-workflows' });
+    const progressbar = await screen.findByRole('progressbar');
+
+    await waitFor(() => {
+      expect(progressbar).not.toBeInTheDocument();
+    });
+
+    expect(screen.queryByText('No workflows found')).not.toBeInTheDocument();
+  });
+
   it('renders workflows and allows the user to try again if there is an error', async () => {
     const { user } = setup({ errorCase: 'subsequent-fetch-error' });
 
@@ -123,7 +164,10 @@ function setup({
 
           switch (errorCase) {
             case 'no-workflows':
-              return HttpResponse.json({ workflows: [], nextPage: undefined });
+              return HttpResponse.json({
+                workflows: [],
+                nextPage: undefined,
+              });
             case 'initial-fetch-error':
               return HttpResponse.json(
                 { message: 'Request failed' },
diff --git a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx
index 7da0e6956..797a68dfd 100644
--- a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx
+++ b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx
@@ -7,13 +7,14 @@ import Table from '@/components/table/table';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 
-import domainWorkflowsTableConfig from '../config/domain-workflows-table.config';
+import domainWorkflowsQueryTableConfig from '../config/domain-workflows-query-table.config';
+import domainWorkflowsSearchTableConfig from '../config/domain-workflows-search-table.config';
+import { type Props } from '../domain-workflows-table/domain-workflows-table.types';
 import DomainWorkflowsTableEndMessage from '../domain-workflows-table-end-message/domain-workflows-table-end-message';
 import getNextSortOrder from '../helpers/get-next-sort-order';
 import useListWorkflows from '../hooks/use-list-workflows';
 
 import { styled } from './domain-workflows-table.styles';
-import { type Props } from './domain-workflows-table.types';
 import getWorkflowsErrorPanelProps from './helpers/get-workflows-error-panel-props';
 
 export default function DomainWorkflowsTable({ domain, cluster }: Props) {
@@ -21,6 +22,8 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
     domainPageQueryParamsConfig
   );
 
+  const inputType = queryParams.inputType;
+
   const {
     workflows,
     error,
@@ -29,17 +32,7 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
     fetchNextPage,
     isFetchingNextPage,
     refetch,
-  } = useListWorkflows({
-    domain,
-    cluster,
-    inputType: queryParams.inputType,
-    search: queryParams.search,
-    status: queryParams.status,
-    sortColumn: queryParams.sortColumn,
-    sortOrder: queryParams.sortOrder,
-    timeRangeStart: queryParams.timeRangeStart?.toISOString(),
-    timeRangeEnd: queryParams.timeRangeEnd?.toISOString(),
-  });
+  } = useListWorkflows({ domain, cluster });
 
   if (isLoading) {
     return <SectionLoadingIndicator />;
@@ -47,6 +40,7 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
 
   if (workflows.length === 0) {
     const errorPanelProps = getWorkflowsErrorPanelProps({
+      inputType,
       error,
       areSearchParamsAbsent:
         !queryParams.search &&
@@ -56,7 +50,11 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
     });
 
     if (errorPanelProps) {
-      return <ErrorPanel {...errorPanelProps} reset={refetch} />;
+      return (
+        <styled.ErrorPanelContainer>
+          <ErrorPanel {...errorPanelProps} reset={refetch} />
+        </styled.ErrorPanelContainer>
+      );
     }
   }
 
@@ -64,20 +62,7 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
     <styled.TableContainer>
       <Table
         data={workflows}
-        columns={domainWorkflowsTableConfig}
         shouldShowResults={!isLoading && workflows.length > 0}
-        onSort={(column) => {
-          setQueryParams({
-            sortColumn: column,
-            sortOrder: getNextSortOrder({
-              currentColumn: queryParams.sortColumn,
-              nextColumn: column,
-              currentSortOrder: queryParams.sortOrder,
-            }),
-          });
-        }}
-        sortColumn={queryParams.sortColumn}
-        sortOrder={queryParams.sortOrder}
         endMessage={
           <DomainWorkflowsTableEndMessage
             hasWorkflows={workflows.length > 0}
@@ -87,6 +72,25 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
             isFetchingNextPage={isFetchingNextPage}
           />
         }
+        {...(inputType === 'query'
+          ? {
+              columns: domainWorkflowsQueryTableConfig,
+            }
+          : {
+              columns: domainWorkflowsSearchTableConfig,
+              onSort: (column) => {
+                setQueryParams({
+                  sortColumn: column,
+                  sortOrder: getNextSortOrder({
+                    currentColumn: queryParams.sortColumn,
+                    nextColumn: column,
+                    currentSortOrder: queryParams.sortOrder,
+                  }),
+                });
+              },
+              sortColumn: queryParams.sortColumn,
+              sortOrder: queryParams.sortOrder,
+            })}
       />
     </styled.TableContainer>
   );
diff --git a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.types.ts b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.types.ts
index 2adbd04c7..8e08ad671 100644
--- a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.types.ts
+++ b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.types.ts
@@ -1,4 +1,11 @@
+import { type TableColumn } from '@/components/table/table.types';
+import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
+
 export type Props = {
   domain: string;
   cluster: string;
 };
+
+export type DomainWorkflowsQueryTableConfig = Array<
+  Omit<TableColumn<DomainWorkflow>, 'sortable'>
+>;
diff --git a/src/views/domain-workflows/domain-workflows-table/helpers/__tests__/get-workflows-error-panel-props.test.ts b/src/views/domain-workflows/domain-workflows-table/helpers/__tests__/get-workflows-error-panel-props.test.ts
index df7331398..8956fd76a 100644
--- a/src/views/domain-workflows/domain-workflows-table/helpers/__tests__/get-workflows-error-panel-props.test.ts
+++ b/src/views/domain-workflows/domain-workflows-table/helpers/__tests__/get-workflows-error-panel-props.test.ts
@@ -1,10 +1,13 @@
+import { RequestError } from '@/utils/request/request-error';
+
 import getWorkflowsErrorPanelProps from '../get-workflows-error-panel-props';
 
 describe(getWorkflowsErrorPanelProps.name, () => {
   it('returns default error panel props for regular error', () => {
     expect(
       getWorkflowsErrorPanelProps({
-        error: new Error('Test error'),
+        inputType: 'search',
+        error: new RequestError('Test error', 500),
         areSearchParamsAbsent: false,
       })
     ).toEqual({
@@ -13,9 +16,22 @@ describe(getWorkflowsErrorPanelProps.name, () => {
     });
   });
 
+  it('returns error message directly for bad request error for queries', () => {
+    expect(
+      getWorkflowsErrorPanelProps({
+        inputType: 'query',
+        error: new RequestError('Incorrect query', 400),
+        areSearchParamsAbsent: false,
+      })
+    ).toEqual({
+      message: 'Error in query: Incorrect query',
+    });
+  });
+
   it('returns "not found" error panel props when search params are absent', () => {
     expect(
       getWorkflowsErrorPanelProps({
+        inputType: 'search',
         error: null,
         areSearchParamsAbsent: true,
       })
@@ -35,6 +51,7 @@ describe(getWorkflowsErrorPanelProps.name, () => {
   it('returns undefined in all other cases', () => {
     expect(
       getWorkflowsErrorPanelProps({
+        inputType: 'search',
         error: null,
         areSearchParamsAbsent: false,
       })
diff --git a/src/views/domain-workflows/domain-workflows-table/helpers/get-workflows-error-panel-props.ts b/src/views/domain-workflows/domain-workflows-table/helpers/get-workflows-error-panel-props.ts
index ea10e3c17..972d9306c 100644
--- a/src/views/domain-workflows/domain-workflows-table/helpers/get-workflows-error-panel-props.ts
+++ b/src/views/domain-workflows/domain-workflows-table/helpers/get-workflows-error-panel-props.ts
@@ -1,13 +1,24 @@
 import { type Props as ErrorPanelProps } from '@/components/error-panel/error-panel.types';
+import { type RequestError } from '@/utils/request/request-error';
+
+import { type DomainWorkflowsHeaderInputType } from '../../domain-workflows-header/domain-workflows-header.types';
 
 export default function getWorkflowsErrorPanelProps({
+  inputType,
   error,
   areSearchParamsAbsent,
 }: {
-  error: Error | null;
+  inputType: DomainWorkflowsHeaderInputType;
+  error: RequestError | null;
   areSearchParamsAbsent: boolean;
 }): ErrorPanelProps | undefined {
   if (error) {
+    if (inputType === 'query' && error.status === 400) {
+      return {
+        message: 'Error in query: ' + error.message,
+      };
+    }
+
     return {
       message: 'Failed to fetch workflows',
       actions: [{ kind: 'retry', label: 'Retry' }],
diff --git a/src/views/domain-workflows/domain-workflows.tsx b/src/views/domain-workflows/domain-workflows.tsx
index dbf5c5e7d..6888bbd36 100644
--- a/src/views/domain-workflows/domain-workflows.tsx
+++ b/src/views/domain-workflows/domain-workflows.tsx
@@ -8,7 +8,7 @@ import DomainWorkflowsTable from './domain-workflows-table/domain-workflows-tabl
 export default function DomainWorkflows(props: DomainPageTabContentProps) {
   return (
     <>
-      <DomainWorkflowsHeader />
+      <DomainWorkflowsHeader domain={props.domain} cluster={props.cluster} />
       <DomainWorkflowsTable domain={props.domain} cluster={props.cluster} />
     </>
   );
diff --git a/src/views/domain-workflows/domain-workflows.types.ts b/src/views/domain-workflows/domain-workflows.types.ts
index 055124e9e..b85ce1255 100644
--- a/src/views/domain-workflows/domain-workflows.types.ts
+++ b/src/views/domain-workflows/domain-workflows.types.ts
@@ -1,7 +1,5 @@
-import {
-  type RouteParams as ListWorkflowsRouteParams,
-  type ListWorkflowsRequestQueryParams,
-} from '@/route-handlers/list-workflows/list-workflows.types';
+import { type RouteParams as ListWorkflowsRouteParams } from '@/route-handlers/list-workflows/list-workflows.types';
 
-export type UseListWorkflowsParams = ListWorkflowsRouteParams &
-  Omit<ListWorkflowsRequestQueryParams, 'pageSize'> & { pageSize?: number };
+export type UseListWorkflowsParams = ListWorkflowsRouteParams & {
+  pageSize?: number;
+};
diff --git a/src/views/domain-workflows/hooks/use-list-workflows.ts b/src/views/domain-workflows/hooks/use-list-workflows.ts
index 7f942a7bc..564929824 100644
--- a/src/views/domain-workflows/hooks/use-list-workflows.ts
+++ b/src/views/domain-workflows/hooks/use-list-workflows.ts
@@ -4,12 +4,14 @@ import { useMemo } from 'react';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import queryString from 'query-string';
 
+import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import {
   type ListWorkflowsResponse,
   type ListWorkflowsRequestQueryParams,
 } from '@/route-handlers/list-workflows/list-workflows.types';
 import request from '@/utils/request';
 import { type RequestError } from '@/utils/request/request-error';
+import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 
 import DOMAIN_WORKFLOWS_PAGE_SIZE from '../config/domain-workflows-page-size.config';
 import { type UseListWorkflowsParams } from '../domain-workflows.types';
@@ -18,8 +20,25 @@ export default function useListWorkflows({
   domain,
   cluster,
   pageSize = DOMAIN_WORKFLOWS_PAGE_SIZE,
-  ...requestQueryParams
 }: UseListWorkflowsParams) {
+  const [queryParams] = usePageQueryParams(domainPageQueryParamsConfig);
+
+  const requestQueryParams = {
+    inputType: queryParams.inputType,
+    ...(queryParams.inputType === 'query'
+      ? {
+          query: queryParams.query,
+        }
+      : {
+          search: queryParams.search,
+          status: queryParams.status,
+          sortColumn: queryParams.sortColumn,
+          sortOrder: queryParams.sortOrder,
+          timeRangeStart: queryParams.timeRangeStart?.toISOString(),
+          timeRangeEnd: queryParams.timeRangeEnd?.toISOString(),
+        }),
+  };
+
   const queryResult = useInfiniteQuery<ListWorkflowsResponse, RequestError>({
     queryKey: [
       'listWorkflows',