Workflow History - make filters multi-select (#750)

Make filters multi-select, and rename query params accordingly
Show filters by default
Fix npm audit issue by updating a package

src/views/workflow-history/__tests__/workflow-history.test.tsx

@@ -76,18 +76,18 @@ describe('WorkflowHistory', () => {
     }
   });
 
-  it('should render the page initially with filters hidden', async () => {
+  it('should render the page initially with filters shown', async () => {
     setup({});
-    expect(screen.queryByText('Filter Fields')).not.toBeInTheDocument();
+    expect(await screen.findByText('Filter Fields')).toBeInTheDocument();
   });
 
-  it('should show filters on executing toggle button onClick', async () => {
+  it('should hide filters on executing toggle button onClick', async () => {
     const { user } = setup({});
     const toggleButton = await screen.findByText('Filter Toggle');
 
     await user.click(toggleButton);
 
-    expect(await screen.findByText('Filter Fields')).toBeInTheDocument();
+    expect(screen.queryByText('Filter Fields')).not.toBeInTheDocument();
   });
 });
 

src/views/workflow-history/config/workflow-history-filters.config.ts

@@ -12,15 +12,15 @@ const workflowHistoryFiltersConfig: [
 ] = [
   {
     id: 'historyEventType',
-    getValue: (v) => ({ historyEventType: v.historyEventType }),
+    getValue: (v) => ({ historyEventTypes: v.historyEventTypes }),
     formatValue: (v) => v,
     component: WorkflowHistoryFiltersType,
     filterFunc: filterEventsByEventType,
     filterTarget: 'event',
   },
   {
     id: 'historyEventStatus',
-    getValue: (v) => ({ historyEventStatus: v.historyEventStatus }),
+    getValue: (v) => ({ historyEventStatuses: v.historyEventStatuses }),
     formatValue: (v) => v,
     component: WorkflowHistoryFiltersStatus,
     filterFunc: filterEventsByEventStatus,

src/views/workflow-history/workflow-history-filters-status/__tests__/workflow-history-filters-status.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen, fireEvent, act } from '@/test-utils/rtl';
 
 import WorkflowHistoryFiltersType from '../workflow-history-filters-status';
-import { WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS } from '../workflow-history-filters-status.constants';
+import { WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_LABELS_MAP } from '../workflow-history-filters-status.constants';
 import { type WorkflowHistoryFiltersStatusValue } from '../workflow-history-filters-status.types';
 
 describe('WorkflowHistoryFiltersStatus', () => {
@@ -18,14 +18,16 @@ describe('WorkflowHistoryFiltersStatus', () => {
     act(() => {
       fireEvent.click(selectFilter);
     });
-    WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS.forEach(({ label }) =>
-      expect(screen.getByText(label)).toBeInTheDocument()
+
+    Object.entries(WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_LABELS_MAP).forEach(
+      ([_, label]) => expect(screen.getByText(label)).toBeInTheDocument()
     );
   });
 
   it('calls the setQueryParams function when an option is selected', () => {
     const { mockSetValue } = setup({});
     const selectFilter = screen.getByRole('combobox');
+
     act(() => {
       fireEvent.click(selectFilter);
     });
@@ -34,21 +36,23 @@ describe('WorkflowHistoryFiltersStatus', () => {
       fireEvent.click(completedOption);
     });
     expect(mockSetValue).toHaveBeenCalledWith({
-      historyEventStatus: 'COMPLETED',
+      historyEventStatuses: ['COMPLETED'],
     } as WorkflowHistoryFiltersStatusValue);
   });
 
   it('calls the setQueryParams function when the filter is cleared', () => {
     const { mockSetValue } = setup({
       overrides: {
-        historyEventStatus: 'COMPLETED',
+        historyEventStatuses: ['COMPLETED'],
       },
     });
-    const clearButton = screen.getByLabelText('Clear value');
+    const clearButton = screen.getByLabelText('Clear all');
     act(() => {
       fireEvent.click(clearButton);
     });
-    expect(mockSetValue).toHaveBeenCalledWith({ historyEventType: undefined });
+    expect(mockSetValue).toHaveBeenCalledWith({
+      historyEventStatuses: undefined,
+    });
   });
 });
 
@@ -61,7 +65,7 @@ function setup({
   render(
     <WorkflowHistoryFiltersType
       value={{
-        historyEventStatus: undefined,
+        historyEventStatuses: undefined,
         ...overrides,
       }}
       setValue={mockSetValue}

src/views/workflow-history/workflow-history-filters-status/helpers/filter-events-by-event-status.ts

@@ -5,10 +5,8 @@ export default function filterEventsByEventStatus(
   group: HistoryEventsGroup,
   value: WorkflowHistoryFiltersStatusValue
 ) {
-  const selectedGroupStatus = value.historyEventStatus;
-  if (!selectedGroupStatus) return true;
+  const selectedGroupStatuses = value.historyEventStatuses;
+  if (!selectedGroupStatuses) return true;
 
-  if (group.status === selectedGroupStatus) return true;
-
-  return false;
+  return selectedGroupStatuses.includes(group.status);
 }

src/views/workflow-history/workflow-history-filters-status/workflow-history-filters-status.constants.ts

@@ -1,29 +1,10 @@
 import { WORKFLOW_EVENT_STATUS } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.constants';
 import { type WorkflowEventStatus } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
 
-export const WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS = [
-  {
-    label: 'On Going',
-    id: WORKFLOW_EVENT_STATUS.ONGOING,
-  },
-
-  {
-    label: 'Waiting',
-    id: WORKFLOW_EVENT_STATUS.WAITING,
-  },
-  {
-    label: 'Canceled',
-    id: WORKFLOW_EVENT_STATUS.CANCELED,
-  },
-  {
-    label: 'Failed',
-    id: WORKFLOW_EVENT_STATUS.FAILED,
-  },
-  {
-    label: 'Completed',
-    id: WORKFLOW_EVENT_STATUS.COMPLETED,
-  },
-] as const satisfies {
-  id: WorkflowEventStatus;
-  label: string;
-}[];
+export const WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_LABELS_MAP = {
+  [WORKFLOW_EVENT_STATUS.ONGOING]: 'On Going',
+  [WORKFLOW_EVENT_STATUS.WAITING]: 'Waiting',
+  [WORKFLOW_EVENT_STATUS.CANCELED]: 'Canceled',
+  [WORKFLOW_EVENT_STATUS.FAILED]: 'Failed',
+  [WORKFLOW_EVENT_STATUS.COMPLETED]: 'Completed',
+} as const satisfies Record<WorkflowEventStatus, string>;

src/views/workflow-history/workflow-history-filters-status/workflow-history-filters-status.tsx

@@ -8,35 +8,40 @@ import { type PageFilterComponentProps } from '@/components/page-filters/page-fi
 
 import { type WorkflowEventStatus } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
 
-import { WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS } from './workflow-history-filters-status.constants';
+import { WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_LABELS_MAP } from './workflow-history-filters-status.constants';
 import { overrides } from './workflow-history-filters-status.styles';
 import { type WorkflowHistoryFiltersStatusValue } from './workflow-history-filters-status.types';
 
 export default function WorkflowHistoryFiltersStatus({
   value,
   setValue,
 }: PageFilterComponentProps<WorkflowHistoryFiltersStatusValue>) {
-  const statusOptionValue =
-    WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS.filter(
-      (option) => option.id === value.historyEventStatus
-    );
+  const statusOptionsValue =
+    value.historyEventStatuses?.map((status) => ({
+      id: status,
+      label: WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_LABELS_MAP[status],
+    })) ?? [];
 
   return (
     <FormControl label="Status" overrides={overrides.selectFormControl}>
       <Select
+        multi
         size={SIZE.compact}
-        value={statusOptionValue}
-        options={WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS}
-        onChange={(params) =>
+        value={statusOptionsValue}
+        options={Object.entries(
+          WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_LABELS_MAP
+        ).map(([id, label]) => ({
+          id,
+          label,
+        }))}
+        onChange={(params) => {
           setValue({
-            historyEventStatus:
-              WORKFLOW_HISTORY_EVENT_FILTERING_STATUS_OPTIONS.find(
-                (opt) => opt.id === params.value[0]?.id
-              )
-                ? (String(params.value[0]?.id) as WorkflowEventStatus)
+            historyEventStatuses:
+              params.value.length > 0
+                ? params.value.map((v) => v.id as WorkflowEventStatus)
                 : undefined,
-          })
-        }
+          });
+        }}
         placeholder="All"
       />
     </FormControl>

src/views/workflow-history/workflow-history-filters-status/workflow-history-filters-status.types.ts

@@ -1,5 +1,5 @@
 import { type WorkflowEventStatus } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
 
 export type WorkflowHistoryFiltersStatusValue = {
-  historyEventStatus: WorkflowEventStatus | undefined;
+  historyEventStatuses: WorkflowEventStatus[] | undefined;
 };

src/views/workflow-history/workflow-history-filters-type/__tests__/workflow-history-filters-type.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen, fireEvent, act } from '@/test-utils/rtl';
 
 import WorkflowHistoryFiltersType from '../workflow-history-filters-type';
-import { WORKFLOW_HISTORY_EVENT_FILTERING_TYPES_OPTIONS } from '../workflow-history-filters-type.constants';
+import { WORKFLOW_HISTORY_EVENT_FILTERING_TYPES_LABEL_MAP } from '../workflow-history-filters-type.constants';
 import { type WorkflowHistoryFiltersTypeValue } from '../workflow-history-filters-type.types';
 
 describe('WorkflowHistoryFiltersType', () => {
@@ -18,8 +18,9 @@ describe('WorkflowHistoryFiltersType', () => {
     act(() => {
       fireEvent.click(selectFilter);
     });
-    WORKFLOW_HISTORY_EVENT_FILTERING_TYPES_OPTIONS.forEach(({ label }) =>
-      expect(screen.getByText(label)).toBeInTheDocument()
+
+    Object.entries(WORKFLOW_HISTORY_EVENT_FILTERING_TYPES_LABEL_MAP).forEach(
+      ([_, label]) => expect(screen.getByText(label)).toBeInTheDocument()
     );
   });
 
@@ -34,21 +35,21 @@ describe('WorkflowHistoryFiltersType', () => {
       fireEvent.click(decisionOption);
     });
     expect(mockSetValue).toHaveBeenCalledWith({
-      historyEventType: 'DECISION',
+      historyEventTypes: ['DECISION'],
     });
   });
 
   it('calls the setQueryParams function when the filter is cleared', () => {
     const { mockSetValue } = setup({
       overrides: {
-        historyEventType: 'ACTIVITY',
+        historyEventTypes: ['ACTIVITY'],
       },
     });
-    const clearButton = screen.getByLabelText('Clear value');
+    const clearButton = screen.getByLabelText('Clear all');
     act(() => {
       fireEvent.click(clearButton);
     });
-    expect(mockSetValue).toHaveBeenCalledWith({ historyEventType: undefined });
+    expect(mockSetValue).toHaveBeenCalledWith({ historyEventTypes: undefined });
   });
 });
 
@@ -57,7 +58,7 @@ function setup({ overrides }: { overrides?: WorkflowHistoryFiltersTypeValue }) {
   render(
     <WorkflowHistoryFiltersType
       value={{
-        historyEventType: undefined,
+        historyEventTypes: undefined,
         ...overrides,
       }}
       setValue={mockSetValue}

src/views/workflow-history/workflow-history-filters-type/helpers/filter-events-by-event-type.ts

@@ -8,11 +8,11 @@ const filterEventsByEventType = function (
   value: WorkflowHistoryFiltersTypeValue
 ) {
   const attr = event.attributes;
-  if (value.historyEventType === undefined) return true;
-  const selectedAttributes =
-    WORKFLOW_HISTORY_EVENT_FILTERING_TYPE_TO_ATTRS_MAP[
-      value.historyEventType
-    ] || [];
+  if (value.historyEventTypes === undefined) return true;
+
+  const selectedAttributes = value.historyEventTypes.flatMap(
+    (type) => WORKFLOW_HISTORY_EVENT_FILTERING_TYPE_TO_ATTRS_MAP[type]
+  );
   if (selectedAttributes.includes(attr)) return true;
   return false;
 };

src/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.constants.ts

@@ -1,42 +1,21 @@
 import { type HistoryEvent } from '@/__generated__/proto-ts/uber/cadence/api/v1/HistoryEvent';
 
-import { type WokflowHistoryEventFilteringType } from './workflow-history-filters-type.types';
+import { type WorkflowHistoryEventFilteringType } from './workflow-history-filters-type.types';
 
-export const WORKFLOW_HISTORY_EVENT_FILTERING_TYPES: WokflowHistoryEventFilteringType[] =
+export const WORKFLOW_HISTORY_EVENT_FILTERING_TYPES: WorkflowHistoryEventFilteringType[] =
   ['ACTIVITY', 'CHILDWORKFLOW', 'DECISION', 'SIGNAL', 'TIMER', 'WORKFLOW'];
 
-export const WORKFLOW_HISTORY_EVENT_FILTERING_TYPES_OPTIONS = [
-  {
-    label: 'Decision',
-    id: 'DECISION',
-  },
-  {
-    label: 'Activity',
-    id: 'ACTIVITY',
-  },
-  {
-    label: 'Signal',
-    id: 'SIGNAL',
-  },
-  {
-    label: 'Timer',
-    id: 'TIMER',
-  },
-  {
-    label: 'Child Workflow',
-    id: 'CHILDWORKFLOW',
-  },
-  {
-    label: 'Workflow',
-    id: 'WORKFLOW',
-  },
-] as const satisfies {
-  id: WokflowHistoryEventFilteringType;
-  label: string;
-}[];
+export const WORKFLOW_HISTORY_EVENT_FILTERING_TYPES_LABEL_MAP = {
+  DECISION: 'Decision',
+  ACTIVITY: 'Activity',
+  SIGNAL: 'Signal',
+  TIMER: 'Timer',
+  WORKFLOW: 'Workflow',
+  CHILDWORKFLOW: 'Child Workflow',
+} as const satisfies Record<WorkflowHistoryEventFilteringType, string>;
 
 export const WORKFLOW_HISTORY_EVENT_FILTERING_TYPE_TO_ATTRS_MAP: Record<
-  WokflowHistoryEventFilteringType,
+  WorkflowHistoryEventFilteringType,
   HistoryEvent['attributes'][]
 > = {
   ACTIVITY: [