Persist history settings based on previous use (#971)

* Access user preferences (getters & setters) via WorkflowHistoryContext, using local storage utils (last used history page view (grouped/ungrouped), event type filters)
* Create wrapper component to wrap WorkflowHistory in context, and pass it to WorkflowPageTabs
* Make query params for ungrouped view and history page filters optional, and handle the defaults in code instead
* Disable "clearable" functionality for types filter to improve UX (otherwise, hitting "clear" would reset the filters to the default non-clear state which can be a little confusing)
* Rename "Clear filters" to "Reset filters"
* Reset event type filters when "Reset filters" is clicked
* Add default filters to History Event Types to hide decision tasks

Author: adhityamamallan

src/components/page-filters/page-filters-fields/__tests__/page-filters-fields.test.tsx

@@ -63,12 +63,12 @@ export const mockFiltersConfig: [
 ];
 
 describe('PageFiltersFields', () => {
-  it('should reset filters when clear filters button is pressed', async () => {
+  it('should reset filters when reset filters button is pressed', async () => {
     const { mockedResetAllFilters } = setup({
       valuesOverrides: { paramA: 'valueA2', paramB: 'valueB2' },
     });
 
-    const clearFiltersButton = await screen.findByText('Clear filters');
+    const clearFiltersButton = await screen.findByText('Reset filters');
 
     act(() => {
       fireEvent.click(clearFiltersButton);

src/components/page-filters/page-filters-fields/page-filters-fields.tsx

@@ -35,7 +35,7 @@ export default function PageFiltersFields<P extends PageQueryParams>({
         startEnhancer={Delete}
         overrides={overrides.clearFiltersButton}
       >
-        Clear filters
+        Reset filters
       </Button>
     </styled.SearchFiltersContainer>
   );

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

@@ -23,6 +23,8 @@ import type workflowPageQueryParamsConfig from '@/views/workflow-page/config/wor
 import { completedActivityTaskEvents } from '../__fixtures__/workflow-history-activity-events';
 import { completedDecisionTaskEvents } from '../__fixtures__/workflow-history-decision-events';
 import WorkflowHistory from '../workflow-history';
+import { WorkflowHistoryContext } from '../workflow-history-context-provider/workflow-history-context-provider';
+import { type WorkflowHistoryEventFilteringType } from '../workflow-history-filters-type/workflow-history-filters-type.types';
 
 jest.mock('@/hooks/use-page-query-params/use-page-query-params', () =>
   jest.fn(() => [{ historySelectedEventId: '1' }, jest.fn()])
@@ -110,6 +112,10 @@ jest.mock(
 );
 
 describe('WorkflowHistory', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('renders page correctly', async () => {
     setup({});
     expect(await screen.findByText('Workflow history')).toBeInTheDocument();
@@ -271,6 +277,56 @@ describe('WorkflowHistory', () => {
 
     expect(screen.getByText('Workflow Actions')).toBeInTheDocument();
   });
+
+  it('should override ungrouped view preference when query param is set to true', async () => {
+    await setup({
+      pageQueryParamsValues: { ungroupedHistoryViewEnabled: true },
+      ungroupedViewPreference: false,
+    });
+
+    // Should show ungrouped table even though preference is false
+    expect(await screen.findByText('Ungrouped Table')).toBeInTheDocument();
+    expect(screen.getByText('Group')).toBeInTheDocument();
+  });
+
+  it('should use preference when query param is undefined for ungrouped view', async () => {
+    await setup({
+      pageQueryParamsValues: { ungroupedHistoryViewEnabled: undefined },
+      ungroupedViewPreference: true,
+    });
+
+    // Should use preference (true) when query param is undefined
+    expect(await screen.findByText('Ungrouped Table')).toBeInTheDocument();
+    expect(screen.getByText('Group')).toBeInTheDocument();
+  });
+
+  it('should override history event types preference when query param is set', async () => {
+    const {
+      mockSetUngroupedViewUserPreference,
+      mockSetHistoryEventTypesUserPreference,
+    } = await setup({
+      pageQueryParamsValues: {
+        historyEventTypes: ['TIMER', 'SIGNAL'],
+        ungroupedHistoryViewEnabled: false,
+      },
+      historyEventTypesPreference: ['ACTIVITY', 'DECISION'],
+    });
+
+    expect(mockSetUngroupedViewUserPreference).not.toHaveBeenCalled();
+    expect(mockSetHistoryEventTypesUserPreference).not.toHaveBeenCalled();
+  });
+
+  it('should use preference when history event types query param is undefined', async () => {
+    const { mockSetHistoryEventTypesUserPreference } = await setup({
+      pageQueryParamsValues: {
+        historyEventTypes: undefined,
+        ungroupedHistoryViewEnabled: false,
+      },
+      historyEventTypesPreference: ['TIMER', 'SIGNAL'],
+    });
+
+    expect(mockSetHistoryEventTypesUserPreference).not.toHaveBeenCalled();
+  });
 });
 
 async function setup({
@@ -281,6 +337,8 @@ async function setup({
   hasNextPage,
   emptyEvents,
   withResetModal,
+  ungroupedViewPreference,
+  historyEventTypesPreference,
 }: {
   error?: boolean;
   summaryError?: boolean;
@@ -291,6 +349,8 @@ async function setup({
   hasNextPage?: boolean;
   emptyEvents?: boolean;
   withResetModal?: boolean;
+  ungroupedViewPreference?: boolean;
+  historyEventTypesPreference?: Array<WorkflowHistoryEventFilteringType>;
 }) {
   const user = userEvent.setup();
 
@@ -304,6 +364,10 @@ async function setup({
     });
   }
 
+  const mockSetUngroupedViewUserPreference = jest.fn();
+  const mockSetHistoryEventTypesUserPreference = jest.fn();
+  const mockClearHistoryEventTypesUserPreference = jest.fn();
+
   type ReqResolver = (r: GetWorkflowHistoryResponse) => void;
   let requestResolver: ReqResolver = () => {};
   let requestRejector = () => {};
@@ -313,15 +377,27 @@ async function setup({
 
   const renderResult = render(
     <Suspense fallback={'Suspense placeholder'}>
-      <WorkflowHistory
-        params={{
-          domain: 'test-domain',
-          cluster: 'test-cluster',
-          runId: 'test-runid',
-          workflowId: 'test-workflowId',
-          workflowTab: 'history',
+      <WorkflowHistoryContext.Provider
+        value={{
+          ungroupedViewUserPreference: ungroupedViewPreference ?? null,
+          setUngroupedViewUserPreference: mockSetUngroupedViewUserPreference,
+          historyEventTypesUserPreference: historyEventTypesPreference ?? null,
+          setHistoryEventTypesUserPreference:
+            mockSetHistoryEventTypesUserPreference,
+          clearHistoryEventTypesUserPreference:
+            mockClearHistoryEventTypesUserPreference,
         }}
-      />
+      >
+        <WorkflowHistory
+          params={{
+            domain: 'test-domain',
+            cluster: 'test-cluster',
+            runId: 'test-runid',
+            workflowId: 'test-workflowId',
+            workflowTab: 'history',
+          }}
+        />
+      </WorkflowHistoryContext.Provider>
     </Suspense>,
     {
       endpointsMocks: [
@@ -413,5 +489,8 @@ async function setup({
     getRequestRejector,
     ...renderResult,
     mockSetQueryParams,
+    mockSetUngroupedViewUserPreference,
+    mockSetHistoryEventTypesUserPreference,
+    mockClearHistoryEventTypesUserPreference,
   };
 }

src/views/workflow-history/config/workflow-history-user-preferences.config.ts

@@ -0,0 +1,39 @@
+import { isArray } from 'lodash';
+import { z } from 'zod';
+
+import { WORKFLOW_HISTORY_EVENT_FILTERING_TYPES } from '../workflow-history-filters-type/workflow-history-filters-type.constants';
+import { type WorkflowHistoryEventFilteringType } from '../workflow-history-filters-type/workflow-history-filters-type.types';
+import { type WorkflowHistoryUserPreferenceConfig } from '../workflow-history.types';
+
+const workflowHistoryUserPreferencesConfig = {
+  ungroupedViewEnabled: {
+    key: 'history-ungrouped-view-enabled',
+    schema: z
+      .string()
+      .refine((val) => val === 'true' || val === 'false')
+      .transform((val) => val === 'true'),
+  },
+  historyEventTypes: {
+    key: 'history-event-types',
+    schema: z
+      .string()
+      .transform((arg) => {
+        try {
+          return JSON.parse(arg);
+        } catch {
+          return null;
+        }
+      })
+      .refine(
+        (val) =>
+          isArray(val) &&
+          val.every(
+            (item): item is WorkflowHistoryEventFilteringType =>
+              WORKFLOW_HISTORY_EVENT_FILTERING_TYPES.find((v) => v === item) !==
+              undefined
+          )
+      ),
+  },
+} as const satisfies Record<string, WorkflowHistoryUserPreferenceConfig<any>>;
+
+export default workflowHistoryUserPreferencesConfig;