Add "inputType" and "query" to query params (#737)

Add query params inputType and query, and update components

src/route-handlers/list-workflows/list-workflows.ts

@@ -41,14 +41,17 @@ export async function listWorkflows(
       domain: decodedParams.domain,
       pageSize: queryParams.pageSize,
       nextPageToken: queryParams.nextPage,
-      query: getListWorkflowExecutionsQuery({
-        search: queryParams.search,
-        workflowStatus: queryParams.status,
-        sortColumn: queryParams.sortColumn,
-        sortOrder: queryParams.sortOrder,
-        timeRangeStart: queryParams.timeRangeStart,
-        timeRangeEnd: queryParams.timeRangeEnd,
-      }),
+      query:
+        queryParams.inputType === 'query'
+          ? queryParams.query
+          : getListWorkflowExecutionsQuery({
+              search: queryParams.search,
+              workflowStatus: queryParams.status,
+              sortColumn: queryParams.sortColumn,
+              sortOrder: queryParams.sortOrder,
+              timeRangeStart: queryParams.timeRangeStart,
+              timeRangeEnd: queryParams.timeRangeEnd,
+            }),
     });
 
     const response: ListWorkflowsResponse = {

src/route-handlers/list-workflows/schemas/list-workflows-query-params-schema.ts

@@ -12,7 +12,9 @@ const listWorkflowsQueryParamSchema = z.object({
     .pipe(
       z.number().positive({ message: 'Page size must be a positive integer' })
     ),
+  inputType: z.enum(['search', 'query']),
   search: z.string().optional(),
+  query: z.string().optional(),
   status: z
     .custom<WorkflowStatus>(isWorkflowStatus, {
       message: 'Invalid workflow status',

src/views/domain-page/config/domain-page-query-params.config.ts

@@ -1,19 +1,28 @@
 import { type PageQueryParam } from '@/hooks/use-page-query-params/use-page-query-params.types';
 import parseDateQueryParam from '@/utils/datetime/parse-date-query-param';
 import { type SortOrder } from '@/utils/sort-by';
+import { type DomainWorkflowsHeaderInputType } from '@/views/domain-workflows/domain-workflows-header/domain-workflows-header.types';
 import isWorkflowStatus from '@/views/shared/workflow-status-tag/helpers/is-workflow-status';
 import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow-status-tag.types';
 
 const domainPageQueryParamsConfig: [
-  // Workflows
+  PageQueryParam<'inputType', DomainWorkflowsHeaderInputType>,
+  // Search input
   PageQueryParam<'search', string>,
   PageQueryParam<'status', WorkflowStatus | undefined>,
   PageQueryParam<'timeRangeStart', Date | undefined>,
   PageQueryParam<'timeRangeEnd', Date | undefined>,
   PageQueryParam<'sortColumn', string>,
   PageQueryParam<'sortOrder', SortOrder>,
-  // Task Lists
+  // Query input
+  PageQueryParam<'query', string>,
 ] = [
+  {
+    key: 'inputType',
+    queryParamKey: 'input',
+    defaultValue: 'search',
+    parseValue: (value: string) => (value === 'query' ? 'query' : 'search'),
+  },
   {
     key: 'search',
     defaultValue: '',
@@ -44,6 +53,10 @@ const domainPageQueryParamsConfig: [
     defaultValue: 'DESC',
     parseValue: (value: string) => (value === 'ASC' ? 'ASC' : 'DESC'),
   },
+  {
+    key: 'query',
+    defaultValue: '',
+  },
 ] as const;
 
 export default domainPageQueryParamsConfig;

src/views/domain-workflows/__fixtures__/domain-workflows-query-params.ts

@@ -4,12 +4,14 @@ import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-
 export const mockDomainWorkflowsQueryParamsValues: PageQueryParamValues<
   typeof domainPageQueryParamsConfig
 > = {
+  inputType: 'search',
   search: '',
   status: undefined,
   timeRangeStart: undefined,
   timeRangeEnd: undefined,
   sortColumn: 'startTime',
   sortOrder: 'DESC',
+  query: '',
 };
 
 export const mockDateOverrides = {

src/views/domain-workflows/config/domain-workflows-page-size.config.ts

@@ -0,0 +1,3 @@
+const DOMAIN_WORKFLOWS_PAGE_SIZE = 10;
+
+export default DOMAIN_WORKFLOWS_PAGE_SIZE;

src/views/domain-workflows/config/domain-workflows-table.config.ts

@@ -6,7 +6,7 @@ import { type TableColumn } 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: Array<TableColumn<DomainWorkflow>> = [
+const domainWorkflowsTableConfig = [
   {
     name: 'Workflow ID',
     id: 'WorkflowID',
@@ -55,6 +55,6 @@ const domainWorkflowsTableConfig: Array<TableColumn<DomainWorkflow>> = [
     width: '12.5%',
     sortable: true,
   },
-];
+] as const satisfies Array<TableColumn<DomainWorkflow>>;
 
 export default domainWorkflowsTableConfig;

src/views/domain-workflows/domain-workflows-header/domain-workflows-header.types.ts

@@ -0,0 +1,4 @@
+import { type ListWorkflowsRequestQueryParams } from '@/route-handlers/list-workflows/list-workflows.types';
+
+export type DomainWorkflowsHeaderInputType =
+  ListWorkflowsRequestQueryParams['inputType'];

src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx

@@ -1,76 +1,46 @@
 'use client';
-import React, { useMemo } from 'react';
-
-import { useInfiniteQuery } from '@tanstack/react-query';
-import queryString from 'query-string';
+import React from 'react';
 
 import ErrorPanel from '@/components/error-panel/error-panel';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import Table from '@/components/table/table';
 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 domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 
 import domainWorkflowsTableConfig from '../config/domain-workflows-table.config';
 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 { PAGE_SIZE } from './domain-workflows-table.constants';
 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(props: Props) {
+export default function DomainWorkflowsTable({ domain, cluster }: Props) {
   const [queryParams, setQueryParams] = usePageQueryParams(
     domainPageQueryParamsConfig
   );
 
-  const requestQueryParams: ListWorkflowsRequestQueryParams = {
-    pageSize: PAGE_SIZE.toString(),
-    search: queryParams.search,
-    status: queryParams.status,
-    sortColumn: queryParams.sortColumn,
-    sortOrder: queryParams.sortOrder,
-    timeRangeStart: queryParams.timeRangeStart?.toISOString(),
-    timeRangeEnd: queryParams.timeRangeEnd?.toISOString(),
-  };
-
   const {
-    data,
+    workflows,
     error,
     isLoading,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
     refetch,
-  } = useInfiniteQuery<ListWorkflowsResponse>({
-    queryKey: ['listWorkflows', { ...props, ...requestQueryParams }],
-    queryFn: async ({ pageParam }) =>
-      request(
-        queryString.stringifyUrl({
-          url: `/api/domains/${props.domain}/${props.cluster}/workflows`,
-          query: {
-            ...requestQueryParams,
-            nextPage: pageParam as string,
-          },
-        })
-      ).then((res) => res.json()),
-    initialPageParam: undefined,
-    getNextPageParam: (lastPage) => {
-      if (!lastPage.nextPage) return undefined;
-      return lastPage.nextPage;
-    },
+  } = 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(),
   });
 
-  const workflows = useMemo(() => {
-    if (!data) return [];
-    return data.pages.flatMap((page) => page.workflows ?? []);
-  }, [data]);
-
   if (isLoading) {
     return <SectionLoadingIndicator />;
   }

src/views/domain-workflows/domain-workflows.types.ts

@@ -0,0 +1,7 @@
+import {
+  type RouteParams as ListWorkflowsRouteParams,
+  type ListWorkflowsRequestQueryParams,
+} from '@/route-handlers/list-workflows/list-workflows.types';
+
+export type UseListWorkflowsParams = ListWorkflowsRouteParams &
+  Omit<ListWorkflowsRequestQueryParams, 'pageSize'> & { pageSize?: number };

src/views/domain-workflows/hooks/use-list-workflows.ts

@@ -0,0 +1,57 @@
+'use client';
+import { useMemo } from 'react';
+
+import { useInfiniteQuery } from '@tanstack/react-query';
+import queryString from 'query-string';
+
+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 DOMAIN_WORKFLOWS_PAGE_SIZE from '../config/domain-workflows-page-size.config';
+import { type UseListWorkflowsParams } from '../domain-workflows.types';
+
+export default function useListWorkflows({
+  domain,
+  cluster,
+  pageSize = DOMAIN_WORKFLOWS_PAGE_SIZE,
+  ...requestQueryParams
+}: UseListWorkflowsParams) {
+  const queryResult = useInfiniteQuery<ListWorkflowsResponse, RequestError>({
+    queryKey: [
+      'listWorkflows',
+      { domain, cluster, ...requestQueryParams, pageSize },
+    ],
+    queryFn: async ({ pageParam }) =>
+      request(
+        queryString.stringifyUrl({
+          url: `/api/domains/${domain}/${cluster}/workflows`,
+          query: {
+            ...requestQueryParams,
+            pageSize: pageSize.toString(),
+            nextPage: pageParam as string,
+          } as const satisfies ListWorkflowsRequestQueryParams,
+        })
+      ).then((res) => res.json()),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextPage) return undefined;
+      return lastPage.nextPage;
+    },
+    retry: false,
+    refetchOnWindowFocus: (query) => query.state.status !== 'error',
+  });
+
+  const workflows = useMemo(() => {
+    if (!queryResult.data) return [];
+    return queryResult.data.pages.flatMap((page) => page.workflows ?? []);
+  }, [queryResult.data]);
+
+  return {
+    workflows,
+    ...queryResult,
+  };
+}