Support setting multiple workflow statuses in Domain Workflows page (#844)

* Modify Domain Page query params to change "statuses" to a multi-value page query param
* Update useListWorkflows to read and pass multiple statuses
* Update filters to use ListFilterMulti component

Author: adhityamamallan

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

@@ -4,7 +4,7 @@ import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-
 export const mockDomainPageQueryParamsValues = {
   inputType: 'search',
   search: '',
-  status: undefined,
+  statuses: undefined,
   timeRangeStart: undefined,
   timeRangeEnd: undefined,
   sortColumn: 'startTime',
@@ -15,7 +15,7 @@ export const mockDomainPageQueryParamsValues = {
   statusBasic: undefined,
   inputTypeArchival: 'search',
   searchArchival: '',
-  statusArchival: undefined,
+  statusesArchival: undefined,
   timeRangeStartArchival: undefined,
   timeRangeEndArchival: undefined,
   sortColumnArchival: 'startTime',

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

@@ -1,4 +1,7 @@
-import { type PageQueryParam } from '@/hooks/use-page-query-params/use-page-query-params.types';
+import {
+  type PageQueryParamMultiValue,
+  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 WorkflowStatusClosed } from '@/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.types';
@@ -12,7 +15,7 @@ const domainPageQueryParamsConfig: [
   PageQueryParam<'inputType', WorkflowsHeaderInputType>,
   // Search input
   PageQueryParam<'search', string>,
-  PageQueryParam<'status', WorkflowStatus | undefined>,
+  PageQueryParamMultiValue<'statuses', Array<WorkflowStatus> | undefined>,
   PageQueryParam<'timeRangeStart', Date | undefined>,
   PageQueryParam<'timeRangeEnd', Date | undefined>,
   PageQueryParam<'sortColumn', string>,
@@ -26,7 +29,10 @@ const domainPageQueryParamsConfig: [
   // Archival inputs
   PageQueryParam<'inputTypeArchival', WorkflowsHeaderInputType>,
   PageQueryParam<'searchArchival', string>,
-  PageQueryParam<'statusArchival', WorkflowStatusClosed | undefined>,
+  PageQueryParamMultiValue<
+    'statusesArchival',
+    Array<WorkflowStatusClosed> | undefined
+  >,
   PageQueryParam<'timeRangeStartArchival', Date | undefined>,
   PageQueryParam<'timeRangeEndArchival', Date | undefined>,
   PageQueryParam<'sortColumnArchival', string>,
@@ -44,9 +50,11 @@ const domainPageQueryParamsConfig: [
     defaultValue: '',
   },
   {
-    key: 'status',
-    parseValue: (value: string) =>
-      isWorkflowStatus(value) ? value : undefined,
+    key: 'statuses',
+    queryParamKey: 'status',
+    isMultiValue: true,
+    parseValue: (value: Array<string>) =>
+      value.every(isWorkflowStatus) ? value : undefined,
   },
   {
     key: 'timeRangeStart',
@@ -99,12 +107,16 @@ const domainPageQueryParamsConfig: [
     defaultValue: '',
   },
   {
-    key: 'statusArchival',
+    key: 'statusesArchival',
     queryParamKey: 'astatus',
-    parseValue: (value: string) =>
-      isWorkflowStatus(value) &&
-      value !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
-        ? value
+    isMultiValue: true,
+    parseValue: (value: Array<string>) =>
+      value.every(
+        (status) =>
+          isWorkflowStatus(status) &&
+          status !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'
+      )
+        ? (value as Array<WorkflowStatusClosed>)
         : undefined,
   },
   {

src/views/domain-workflows-archival/config/domain-workflows-archival-filters.config.ts

@@ -3,7 +3,7 @@ import { createElement } from 'react';
 import { omit } from 'lodash';
 
 import DateFilter from '@/components/date-filter/date-filter';
-import ListFilter from '@/components/list-filter/list-filter';
+import ListFilterMulti from '@/components/list-filter-multi/list-filter-multi';
 import { type PageFilterConfig } from '@/components/page-filters/page-filters.types';
 import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import { WORKFLOW_STATUS_NAMES } from '@/views/shared/workflow-status-tag/workflow-status-tag.constants';
@@ -13,7 +13,7 @@ import { type WorkflowStatusClosed } from '../domain-workflows-archival-header/d
 const domainWorkflowsArchivalFiltersConfig: [
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
-    { statusArchival: WorkflowStatusClosed | undefined }
+    { statusesArchival: Array<WorkflowStatusClosed> | undefined }
   >,
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
@@ -24,15 +24,15 @@ const domainWorkflowsArchivalFiltersConfig: [
   >,
 ] = [
   {
-    id: 'status',
+    id: 'statuses',
     getValue: (v) => v,
     formatValue: (v) => v,
     component: ({ value, setValue }) =>
-      createElement(ListFilter<WorkflowStatusClosed>, {
+      createElement(ListFilterMulti<WorkflowStatusClosed>, {
         label: 'Status',
         placeholder: 'Show all statuses',
-        value: value.statusArchival,
-        onChangeValue: (v) => setValue({ statusArchival: v }),
+        values: value.statusesArchival,
+        onChangeValues: (v) => setValue({ statusesArchival: v }),
         labelMap: omit(
           WORKFLOW_STATUS_NAMES,
           'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID'

src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.tsx

@@ -28,7 +28,7 @@ export default function DomainWorkflowsArchivalHeader({
     listType: 'archived',
     inputType: queryParams.inputTypeArchival,
     search: queryParams.searchArchival,
-    status: queryParams.statusArchival,
+    statuses: queryParams.statusesArchival,
     timeRangeStart: queryParams.timeRangeStartArchival,
     timeRangeEnd: queryParams.timeRangeEndArchival,
     sortColumn: queryParams.sortColumnArchival,

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

@@ -38,7 +38,7 @@ export default function DomainWorkflowsArchivalTable({
     pageSize: DOMAIN_WORKFLOWS_ARCHIVAL_PAGE_SIZE,
     inputType: queryParams.inputTypeArchival,
     search: queryParams.searchArchival,
-    status: queryParams.statusArchival,
+    statuses: queryParams.statusesArchival,
     timeRangeStart: queryParams.timeRangeStartArchival,
     timeRangeEnd: queryParams.timeRangeEndArchival,
     sortColumn: queryParams.sortColumnArchival,

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

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 
 import DateFilter from '@/components/date-filter/date-filter';
-import ListFilter from '@/components/list-filter/list-filter';
+import ListFilterMulti from '@/components/list-filter-multi/list-filter-multi';
 import { type PageFilterConfig } from '@/components/page-filters/page-filters.types';
 import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import { WORKFLOW_STATUS_NAMES } from '@/views/shared/workflow-status-tag/workflow-status-tag.constants';
@@ -10,23 +10,23 @@ import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow
 const domainWorkflowsFiltersConfig: [
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
-    { status: WorkflowStatus | undefined }
+    { statuses: Array<WorkflowStatus> | undefined }
   >,
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
     { timeRangeStart: Date | undefined; timeRangeEnd: Date | undefined }
   >,
 ] = [
   {
-    id: 'status',
-    getValue: (v) => ({ status: v.status }),
+    id: 'statuses',
+    getValue: (v) => ({ statuses: v.statuses }),
     formatValue: (v) => v,
     component: ({ value, setValue }) =>
-      createElement(ListFilter<WorkflowStatus>, {
+      createElement(ListFilterMulti<WorkflowStatus>, {
         label: 'Status',
         placeholder: 'Show all statuses',
-        value: value.status,
-        onChangeValue: (v) => setValue({ status: v }),
+        values: value.statuses,
+        onChangeValues: (v) => setValue({ statuses: v }),
         labelMap: WORKFLOW_STATUS_NAMES,
       }),
   },

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

@@ -19,7 +19,7 @@ export default function DomainWorkflowsHeader({ domain, cluster }: Props) {
     pageSize: DOMAIN_WORKFLOWS_PAGE_SIZE,
     inputType: queryParams.inputType,
     search: queryParams.search,
-    status: queryParams.status,
+    statuses: queryParams.statuses,
     timeRangeStart: queryParams.timeRangeStart,
     timeRangeEnd: queryParams.timeRangeEnd,
     sortColumn: queryParams.sortColumn,

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

@@ -35,7 +35,7 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
     pageSize: DOMAIN_WORKFLOWS_PAGE_SIZE,
     inputType: queryParams.inputType,
     search: queryParams.search,
-    status: queryParams.status,
+    statuses: queryParams.statuses,
     timeRangeStart: queryParams.timeRangeStart,
     timeRangeEnd: queryParams.timeRangeEnd,
     sortColumn: queryParams.sortColumn,
@@ -53,7 +53,7 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
       error,
       areSearchParamsAbsent:
         !queryParams.search &&
-        !queryParams.status &&
+        !queryParams.statuses &&
         !queryParams.timeRangeStart &&
         !queryParams.timeRangeEnd,
     });

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

@@ -23,7 +23,7 @@ export default function useListWorkflows({
   const {
     inputType,
     search,
-    status,
+    statuses,
     timeRangeStart,
     timeRangeEnd,
     sortColumn,
@@ -39,8 +39,7 @@ export default function useListWorkflows({
         }
       : {
           search,
-          // Temporary change, this will be removed in a follow-up
-          statuses: status ? [status] : [],
+          statuses,
           sortColumn,
           sortOrder,
           timeRangeStart: timeRangeStart?.toISOString(),

src/views/shared/hooks/use-list-workflows.types.ts

@@ -14,7 +14,7 @@ export type UseListWorkflowsParams = ListWorkflowsRouteParams & {
   inputType: WorkflowsHeaderInputType;
   listType: ListType;
   search?: string;
-  status?: WorkflowStatus;
+  statuses?: Array<WorkflowStatus>;
   timeRangeStart?: Date;
   timeRangeEnd?: Date;
   sortColumn?: string;

src/views/shared/workflows-header/__tests__/workflows-header.test.tsx

@@ -12,12 +12,12 @@ import WorkflowsHeader from '../workflows-header';
 const mockFiltersConfig: [
   PageFilterConfig<
     typeof domainPageQueryParamsConfig,
-    { status: WorkflowStatus | undefined }
+    { statuses: Array<WorkflowStatus> | undefined }
   >,
 ] = [
   {
     id: 'filter1',
-    getValue: (queryParams) => ({ status: queryParams.status }),
+    getValue: (queryParams) => ({ statuses: queryParams.statuses }),
     formatValue: (v) => v,
     component: () => <div>filter</div>,
   },