Merge branch 'master' into history-ungrouped-table

Author: adhityamamallan

src/components/tag-filter/__tests__/tag-filter.test.tsx

@@ -55,18 +55,18 @@ describe(TagFilter.name, () => {
     expect(mockOnChangeValues).toHaveBeenCalledWith(['opt2']);
   });
 
-  it('selects all tags when "Show all" is clicked and no values are currently selected', async () => {
+  it('clears all selections when "Show all" is clicked and no values are currently selected', async () => {
     const { user, mockOnChangeValues } = setup({
       values: [],
     });
 
     const showAllTag = screen.getByText('Show all');
     await user.click(showAllTag);
 
-    expect(mockOnChangeValues).toHaveBeenCalledWith(['opt1', 'opt2', 'opt3']);
+    expect(mockOnChangeValues).toHaveBeenCalledWith([]);
   });
 
-  it('deselects all tags when "Show all" is clicked and all values are currently selected', async () => {
+  it('clears all selections when "Show all" is clicked and all values are currently selected', async () => {
     const { user, mockOnChangeValues } = setup({
       values: ['opt1', 'opt2', 'opt3'],
     });
@@ -77,15 +77,26 @@ describe(TagFilter.name, () => {
     expect(mockOnChangeValues).toHaveBeenCalledWith([]);
   });
 
-  it('selects all tags when "Show all" is clicked and only some values are currently selected', async () => {
+  it('clears all selections when "Show all" is clicked and only some values are currently selected', async () => {
     const { user, mockOnChangeValues } = setup({
       values: ['opt1'],
     });
 
     const showAllTag = screen.getByText('Show all');
     await user.click(showAllTag);
 
-    expect(mockOnChangeValues).toHaveBeenCalledWith(['opt1', 'opt2', 'opt3']);
+    expect(mockOnChangeValues).toHaveBeenCalledWith([]);
+  });
+
+  it('automatically toggles to "show all" (empty array) when the last tag is clicked and all tags become selected', async () => {
+    const { user, mockOnChangeValues } = setup({
+      values: ['opt1', 'opt2'],
+    });
+
+    // Click the last tag to select all tags - should auto-toggle to empty array
+    await user.click(screen.getByText('Option 3'));
+
+    expect(mockOnChangeValues).toHaveBeenCalledWith([]);
   });
 
   it('does not render "Show all" tag when hideShowAll is true', () => {

src/components/tag-filter/tag-filter.tsx

@@ -21,35 +21,29 @@ export default function TagFilter<T extends string>({
     [optionsConfig]
   );
 
-  const areAllValuesSet = useMemo(
-    () => tagKeys.every((key) => values.includes(key)),
-    [tagKeys, values]
-  );
-
-  const toggleAllValues = useCallback(
-    () => onChangeValues(areAllValuesSet ? [] : tagKeys),
-    [tagKeys, areAllValuesSet, onChangeValues]
-  );
+  const isShowAll = useMemo(() => values.length === 0, [values]);
 
   const onChangeSingleValue = useCallback(
-    (value: T) =>
-      onChangeValues(
-        values.includes(value)
-          ? values.filter((v) => v !== value)
-          : [...values, value]
-      ),
-    [values, onChangeValues]
+    (value: T) => {
+      const newValues = values.includes(value)
+        ? values.filter((v) => v !== value)
+        : [...values, value];
+
+      // If all tags are selected, automatically toggle to "show all" (empty array)
+      const areAllTagsSelected = tagKeys.every((key) =>
+        newValues.includes(key)
+      );
+      onChangeValues(areAllTagsSelected ? [] : newValues);
+    },
+    [values, onChangeValues, tagKeys]
   );
 
   return (
     <styled.FormControlContainer>
       <FormControl label={label} overrides={overrides.formControl}>
         <styled.TagsContainer>
           {!hideShowAll && (
-            <SelectableTag
-              value={areAllValuesSet}
-              onClick={() => toggleAllValues()}
-            >
+            <SelectableTag value={isShowAll} onClick={() => onChangeValues([])}>
               Show all
             </SelectableTag>
           )}

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

@@ -53,17 +53,29 @@ jest.mock(
 );
 
 jest.mock('../workflow-history-header/workflow-history-header', () =>
-  jest.fn(({ isUngroupedHistoryViewEnabled, onClickGroupModeToggle }) => (
-    <div data-testid="workflow-history-header">
-      <div>Workflow history Header</div>
-      <div data-testid="is-ungrouped-enabled">
-        {String(isUngroupedHistoryViewEnabled)}
+  jest.fn(
+    ({
+      isUngroupedHistoryViewEnabled,
+      onClickGroupModeToggle,
+      pageFiltersProps,
+    }) => (
+      <div data-testid="workflow-history-header">
+        <div>Workflow history Header</div>
+        <div data-testid="is-ungrouped-enabled">
+          {String(isUngroupedHistoryViewEnabled)}
+        </div>
+        <div data-testid="active-filters-count">
+          {pageFiltersProps.activeFiltersCount}
+        </div>
+        <button
+          data-testid="toggle-group-mode"
+          onClick={onClickGroupModeToggle}
+        >
+          Toggle Group Mode
+        </button>
       </div>
-      <button data-testid="toggle-group-mode" onClick={onClickGroupModeToggle}>
-        Toggle Group Mode
-      </button>
-    </div>
-  ))
+    )
+  )
 );
 
 jest.mock(
@@ -288,6 +300,48 @@ describe(WorkflowHistoryV2.name, () => {
       ungroupedHistoryViewEnabled: 'false',
     });
   });
+
+  it('should calculate activeFiltersCount as 0 when both filter arrays are empty', async () => {
+    await setup({
+      pageQueryParamsValues: {
+        historyEventStatuses: [],
+        historyEventTypes: [],
+      },
+    });
+
+    const activeFiltersCountElement = await screen.findByTestId(
+      'active-filters-count'
+    );
+    expect(activeFiltersCountElement).toHaveTextContent('0');
+  });
+
+  it('should calculate activeFiltersCount as 0 when both filter arrays are undefined', async () => {
+    await setup({
+      pageQueryParamsValues: {
+        historyEventStatuses: undefined,
+        historyEventTypes: undefined,
+      },
+    });
+
+    const activeFiltersCountElement = await screen.findByTestId(
+      'active-filters-count'
+    );
+    expect(activeFiltersCountElement).toHaveTextContent('0');
+  });
+
+  it('should calculate activeFiltersCount as sum of both filter arrays', async () => {
+    await setup({
+      pageQueryParamsValues: {
+        historyEventStatuses: ['COMPLETED', 'FAILED'],
+        historyEventTypes: ['DECISION', 'ACTIVITY', 'SIGNAL'],
+      },
+    });
+
+    const activeFiltersCountElement = await screen.findByTestId(
+      'active-filters-count'
+    );
+    expect(activeFiltersCountElement).toHaveTextContent('5');
+  });
 });
 
 async function setup({

src/views/workflow-history-v2/workflow-history-v2.tsx

@@ -54,7 +54,7 @@ export default function WorkflowHistoryV2({ params }: Props) {
   };
 
   const {
-    activeFiltersCount,
+    activeFiltersCount: _unusedActiveFiltersCount,
     queryParams,
     setQueryParams,
     ...pageFiltersRest
@@ -63,6 +63,13 @@ export default function WorkflowHistoryV2({ params }: Props) {
     pageFiltersConfig: workflowHistoryFiltersConfig,
   });
 
+  const activeFiltersCount = useMemo(
+    () =>
+      (queryParams.historyEventStatuses?.length ?? 0) +
+      (queryParams.historyEventTypes?.length ?? 0),
+    [queryParams.historyEventStatuses, queryParams.historyEventTypes]
+  );
+
   const {
     eventGroups,
     updateEvents: updateGrouperEvents,