feat: Add filters to History Page V2 (cadence-workflow#1088)

* Add Filters menu to History Page V2, in a popover menu
* Add colour codes for various event filtering types

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

Author: adhityamamallan

src/views/workflow-history-v2/config/workflow-history-event-filtering-type-colors.config.ts

@@ -0,0 +1,41 @@
+import { type WorkflowHistoryEventFilteringType } from '@/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.types';
+
+import { type WorkflowHistoryEventFilteringTypeColors } from '../workflow-history-v2.types';
+
+const workflowHistoryEventFilteringTypeColorsConfig = {
+  ACTIVITY: {
+    content: '#068BEE',
+    background: '#EFF4FE',
+    backgroundHighlighted: '#DEE9FE',
+  },
+  DECISION: {
+    content: '#FFB48C',
+    background: '#FFF0E9',
+    backgroundHighlighted: '#FEE2D4',
+  },
+  SIGNAL: {
+    content: '#C490F9',
+    background: '#F9F1FF',
+    backgroundHighlighted: '#F2E3FF',
+  },
+  TIMER: {
+    content: '#F877D2',
+    background: '#FEEFF9',
+    backgroundHighlighted: '#FEDFF3',
+  },
+  CHILDWORKFLOW: {
+    content: '#77D5E3',
+    background: '#E2F8FB',
+    backgroundHighlighted: '#CDEEF3',
+  },
+  WORKFLOW: {
+    content: '#77B71C',
+    background: '#EEF6E3',
+    backgroundHighlighted: '#DEEEC6',
+  },
+} as const satisfies Record<
+  WorkflowHistoryEventFilteringType,
+  WorkflowHistoryEventFilteringTypeColors
+>;
+
+export default workflowHistoryEventFilteringTypeColorsConfig;

src/views/workflow-history-v2/config/workflow-history-filters-status-options.config.ts

@@ -0,0 +1,32 @@
+import { createElement } from 'react';
+
+import { Spinner } from 'baseui/icon';
+import { MdCancel, MdCheckCircle, MdReport } from 'react-icons/md';
+
+import { type TagFilterOptionConfig } from '@/components/tag-filter/tag-filter.types';
+import { type HistoryEventFilterStatus } from '@/views/workflow-history/workflow-history-filters-status/workflow-history-filters-status.types';
+
+const workflowHistoryFiltersStatusOptionsConfig = {
+  PENDING: {
+    label: 'Pending',
+    startEnhancer: ({ theme }) =>
+      createElement(Spinner, { color: theme.colors.contentAccent }),
+  },
+  CANCELED: {
+    label: 'Canceled',
+    startEnhancer: ({ theme }) =>
+      createElement(MdCancel, { color: theme.colors.backgroundWarning }),
+  },
+  FAILED: {
+    label: 'Failed',
+    startEnhancer: ({ theme }) =>
+      createElement(MdReport, { color: theme.colors.contentNegative }),
+  },
+  COMPLETED: {
+    label: 'Completed',
+    startEnhancer: ({ theme }) =>
+      createElement(MdCheckCircle, { color: theme.colors.contentPositive }),
+  },
+} as const satisfies Record<HistoryEventFilterStatus, TagFilterOptionConfig>;
+
+export default workflowHistoryFiltersStatusOptionsConfig;

src/views/workflow-history-v2/config/workflow-history-filters-type-options.config.ts

@@ -0,0 +1,59 @@
+import { createElement } from 'react';
+
+import { MdCircle } from 'react-icons/md';
+
+import { type TagFilterOptionConfig } from '@/components/tag-filter/tag-filter.types';
+import { type WorkflowHistoryEventFilteringType } from '@/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.types';
+
+import workflowHistoryEventFilteringTypeColorsConfig from './workflow-history-event-filtering-type-colors.config';
+
+const workflowHistoryFiltersTypeOptionsConfig = {
+  ACTIVITY: {
+    label: 'Activity',
+    startEnhancer: () =>
+      createElement(MdCircle, {
+        color: workflowHistoryEventFilteringTypeColorsConfig.ACTIVITY.content,
+      }),
+  },
+  DECISION: {
+    label: 'Decision',
+    startEnhancer: () =>
+      createElement(MdCircle, {
+        color: workflowHistoryEventFilteringTypeColorsConfig.DECISION.content,
+      }),
+  },
+  SIGNAL: {
+    label: 'Signal',
+    startEnhancer: () =>
+      createElement(MdCircle, {
+        color: workflowHistoryEventFilteringTypeColorsConfig.SIGNAL.content,
+      }),
+  },
+  TIMER: {
+    label: 'Timer',
+    startEnhancer: () =>
+      createElement(MdCircle, {
+        color: workflowHistoryEventFilteringTypeColorsConfig.TIMER.content,
+      }),
+  },
+  CHILDWORKFLOW: {
+    label: 'Child Workflow',
+    startEnhancer: () =>
+      createElement(MdCircle, {
+        color:
+          workflowHistoryEventFilteringTypeColorsConfig.CHILDWORKFLOW.content,
+      }),
+  },
+  WORKFLOW: {
+    label: 'Other',
+    startEnhancer: () =>
+      createElement(MdCircle, {
+        color: workflowHistoryEventFilteringTypeColorsConfig.WORKFLOW.content,
+      }),
+  },
+} as const satisfies Record<
+  WorkflowHistoryEventFilteringType,
+  TagFilterOptionConfig
+>;
+
+export default workflowHistoryFiltersTypeOptionsConfig;

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

@@ -0,0 +1,57 @@
+import { createElement } from 'react';
+
+import TagFilter from '@/components/tag-filter/tag-filter';
+import filterGroupsByGroupStatus from '@/views/workflow-history/workflow-history-filters-status/helpers/filter-groups-by-group-status';
+import {
+  type HistoryEventFilterStatus,
+  type WorkflowHistoryFiltersStatusValue,
+} from '@/views/workflow-history/workflow-history-filters-status/workflow-history-filters-status.types';
+import filterGroupsByGroupType from '@/views/workflow-history/workflow-history-filters-type/helpers/filter-groups-by-group-type';
+import {
+  type WorkflowHistoryEventFilteringType,
+  type WorkflowHistoryFiltersTypeValue,
+} from '@/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.types';
+import { type WorkflowHistoryFilterConfig } from '@/views/workflow-history/workflow-history.types';
+
+import workflowHistoryFiltersStatusOptionsConfig from './workflow-history-filters-status-options.config';
+import workflowHistoryFiltersTypeOptionsConfig from './workflow-history-filters-type-options.config';
+
+const workflowHistoryFiltersConfig: [
+  WorkflowHistoryFilterConfig<WorkflowHistoryFiltersTypeValue>,
+  WorkflowHistoryFilterConfig<WorkflowHistoryFiltersStatusValue>,
+] = [
+  {
+    id: 'historyEventTypes',
+    getValue: (v) => ({ historyEventTypes: v.historyEventTypes }),
+    formatValue: (v) => v,
+    component: ({ value, setValue }) =>
+      createElement(TagFilter<WorkflowHistoryEventFilteringType>, {
+        label: 'Type',
+        values: value.historyEventTypes ?? [],
+        onChangeValues: (newValues) =>
+          setValue({
+            historyEventTypes: newValues.length > 0 ? newValues : undefined,
+          }),
+        optionsConfig: workflowHistoryFiltersTypeOptionsConfig,
+      }),
+    filterFunc: filterGroupsByGroupType,
+  },
+  {
+    id: 'historyEventStatuses',
+    getValue: (v) => ({ historyEventStatuses: v.historyEventStatuses }),
+    formatValue: (v) => v,
+    component: ({ value, setValue }) =>
+      createElement(TagFilter<HistoryEventFilterStatus>, {
+        label: 'Status',
+        values: value.historyEventStatuses ?? [],
+        onChangeValues: (newValues) =>
+          setValue({
+            historyEventStatuses: newValues.length > 0 ? newValues : undefined,
+          }),
+        optionsConfig: workflowHistoryFiltersStatusOptionsConfig,
+      }),
+    filterFunc: filterGroupsByGroupStatus,
+  },
+] as const;
+
+export default workflowHistoryFiltersConfig;