Add useExpansionToggle hook (#957)

Add useExpansionToggle react hook that allows components to centrally manage the expanded state of various items in a list (logic borrowed from workflow-history's useEventExpansionToggle hook).

Author: adhityamamallan

src/hooks/use-expansion-toggle/__tests__/use-expansion-toggle.test.ts

@@ -0,0 +1,122 @@
+import { renderHook, act } from '@/test-utils/rtl';
+
+import useExpansionToggle from '../use-expansion-toggle';
+
+describe('useExpansionToggle', () => {
+  const mockItems = ['1', '2', '3'];
+
+  it('should initialize with provided initialState as true (all items expanded)', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: true,
+        items: mockItems,
+      })
+    );
+    expect(result.current.expandedItems).toBe(true);
+  });
+
+  it('should initialize with provided initialState as an object with specific items expanded', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: { '1': true, '2': false },
+        items: mockItems,
+      })
+    );
+    expect(result.current.expandedItems).toEqual({ '1': true, '2': false });
+  });
+
+  it('should toggle all items expansion state', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: { '1': true, '2': false },
+        items: mockItems,
+      })
+    );
+
+    act(() => {
+      result.current.toggleAreAllItemsExpanded();
+    });
+    expect(result.current.expandedItems).toBe(true);
+
+    act(() => {
+      result.current.toggleAreAllItemsExpanded();
+    });
+    expect(result.current.expandedItems).toEqual({});
+  });
+
+  it('should expand a specific item when toggled', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: {},
+        items: mockItems,
+      })
+    );
+
+    act(() => {
+      result.current.toggleIsItemExpanded('1');
+    });
+    expect(result.current.expandedItems).toEqual({ '1': true });
+  });
+
+  it('should collapse a specific item when toggled if already expanded', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: { '1': true },
+        items: mockItems,
+      })
+    );
+
+    act(() => {
+      result.current.toggleIsItemExpanded('1');
+    });
+    expect(result.current.expandedItems).toEqual({});
+  });
+
+  it('should collapse only the toggled item when all items are expanded', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: true,
+        items: mockItems,
+      })
+    );
+
+    act(() => {
+      result.current.toggleIsItemExpanded('1');
+    });
+
+    expect(result.current.expandedItems).toEqual({
+      '2': true,
+      '3': true,
+    });
+  });
+
+  it('should expand all items when each item has been individually expanded', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: {},
+        items: mockItems,
+      })
+    );
+
+    act(() => {
+      result.current.toggleIsItemExpanded('1');
+      result.current.toggleIsItemExpanded('2');
+      result.current.toggleIsItemExpanded('3');
+    });
+
+    expect(result.current.expandedItems).toBe(true);
+  });
+
+  it('should check if an item is expanded using getIsItemExpanded', () => {
+    const { result } = renderHook(() =>
+      useExpansionToggle({
+        initialState: { '1': true, '2': false },
+        items: mockItems,
+      })
+    );
+
+    expect(result.current.getIsItemExpanded('1')).toBe(true);
+    expect(result.current.getIsItemExpanded('2')).toBe(false);
+    expect(result.current.getIsItemExpanded('3')).toBe(false);
+  });
+});

src/hooks/use-expansion-toggle/use-expansion-toggle.ts

@@ -0,0 +1,79 @@
+import { useCallback, useState } from 'react';
+
+import {
+  type UseExpansionToggleReturn,
+  type Props,
+  type ExpansionState,
+} from './use-expansion-toggle.types';
+
+export default function useExpansionToggle<T extends string>({
+  items,
+  initialState,
+}: Props<T>): UseExpansionToggleReturn<T> {
+  const [expandedItems, setExpandedItems] =
+    useState<ExpansionState<T>>(initialState);
+
+  const areAllItemsExpanded = expandedItems === true;
+
+  const toggleAreAllItemsExpanded = useCallback(() => {
+    setExpandedItems((prev) =>
+      prev === true ? ({} as ExpansionState<T>) : true
+    );
+  }, []);
+
+  const getIsItemExpanded = useCallback(
+    (item: T) => {
+      if (expandedItems === true) {
+        return true;
+      }
+
+      return Boolean(expandedItems[item]);
+    },
+    [expandedItems]
+  );
+
+  const toggleIsItemExpanded = useCallback(
+    (item: T) => {
+      setExpandedItems((prev) => {
+        let newState: Record<T, boolean>;
+        if (prev === true) {
+          newState = items.reduce(
+            (result, i) => {
+              if (i !== item) {
+                result[i] = true;
+              }
+              return result;
+            },
+            {} as Record<T, boolean>
+          );
+        } else {
+          if (prev[item] === true) {
+            newState = prev;
+            delete newState[item];
+          } else {
+            newState = {
+              ...prev,
+              [item]: true,
+            };
+          }
+        }
+        if (items.every((item) => newState[item])) {
+          return true;
+        }
+        return newState;
+      });
+    },
+    [items]
+  );
+
+  return {
+    expandedItems,
+    setExpandedItems,
+
+    areAllItemsExpanded,
+    toggleAreAllItemsExpanded,
+
+    getIsItemExpanded,
+    toggleIsItemExpanded,
+  };
+}

src/hooks/use-expansion-toggle/use-expansion-toggle.types.ts

@@ -0,0 +1,19 @@
+import { type Dispatch, type SetStateAction } from 'react';
+
+export type ExpansionState<T extends string> = Record<T, boolean> | true;
+
+export type Props<T extends string> = {
+  initialState: ExpansionState<T>;
+  items: Array<T>;
+};
+
+export type UseExpansionToggleReturn<T extends string> = {
+  expandedItems: ExpansionState<T>;
+  setExpandedItems: Dispatch<SetStateAction<ExpansionState<T>>>;
+
+  areAllItemsExpanded: boolean;
+  toggleAreAllItemsExpanded: () => void;
+
+  getIsItemExpanded: (item: T) => boolean;
+  toggleIsItemExpanded: (item: T) => void;
+};

src/views/workflow-history/hooks/use-event-expansion-toggle.ts

@@ -11,6 +11,7 @@ import {
   type ToggleIsExpandAllEvents,
 } from './use-event-expansion-toggle.types';
 
+// TODO @adhitya.mamallan - replace this with the generic useExpansionToggle hook
 export default function useEventExpansionToggle({
   initialState = {},
   visibleEvents,