@axinom/mosaic-ui 0.51.0-rc.9 → 0.52.0-rc.0

package/src/components/Explorer/QuickEdit/useQuickEdit.spec.tsx

@@ -0,0 +1,461 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { QuickEditRegistration } from '../Explorer.model';
+import { QuickEditContext, QuickEditContextType } from './QuickEditContext';
+import {
+  useQuickEdit,
+  useQuickEditProps,
+  useQuickEditReturnType,
+} from './useQuickEdit';
+
+const getTestWrapper = (
+  props: useQuickEditProps<any>,
+): {
+  TestWrapper: React.FC<{
+    quickEditValuesRef: React.MutableRefObject<useQuickEditReturnType<any>>;
+  }>;
+  ref: React.MutableRefObject<useQuickEditReturnType<any>>;
+} => {
+  const ref = { current: {} as useQuickEditReturnType<any> };
+
+  const TestWrapper: React.FC<{
+    quickEditValuesRef: React.MutableRefObject<useQuickEditReturnType<any>>;
+  }> = ({ quickEditValuesRef, children }) => {
+    quickEditValuesRef.current = useQuickEdit(props);
+
+    return <>{children}</>;
+  };
+
+  return { TestWrapper, ref };
+};
+
+const getContextConsumer = () => {
+  const ref = { current: {} as QuickEditContextType<any> };
+
+  const ContextConsumer: React.FC<{
+    contextRef: React.MutableRefObject<QuickEditContextType<any>>;
+  }> = ({ contextRef }) => {
+    contextRef.current = React.useContext(QuickEditContext);
+    return <></>;
+  };
+
+  return { ContextConsumer, ref };
+};
+
+const mockListRef = {
+  current: { resetSelection: jest.fn(), selectIndex: jest.fn() },
+};
+
+const mockRegistrations: QuickEditRegistration<unknown>[] = [
+  {
+    label: 'Test 1',
+    generateDetailsLink: () => `/test`,
+    component: jest.fn() as any as JSX.Element,
+  },
+  {
+    label: 'Test 2',
+    generateDetailsLink: (item) => `/test?${JSON.stringify(item)}`,
+    component: jest.fn() as any as JSX.Element,
+  },
+  {
+    label: 'Test 3',
+    component: jest.fn() as any as JSX.Element,
+  },
+
+  {
+    label: 'Test 4',
+    generateDetailsLink: false,
+    component: jest.fn() as any as JSX.Element,
+  },
+];
+
+describe('useQuickEdit', () => {
+  it('should return the quickEdit action if registrations are defined', () => {
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: mockRegistrations,
+      collapseFilters: jest.fn(),
+      hasData: true,
+      generateItemLink: jest.fn(),
+    });
+
+    mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    expect(ref.current.quickEditAction).toBeDefined();
+  });
+
+  it('should not return the quickEdit action if registrations are not defined', () => {
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: undefined,
+      collapseFilters: jest.fn(),
+      hasData: true,
+      generateItemLink: jest.fn(),
+    });
+
+    mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    expect(ref.current.quickEditAction).toBeUndefined();
+  });
+
+  it('should generate actions for each registration', () => {
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: mockRegistrations,
+      collapseFilters: jest.fn(),
+      hasData: true,
+      generateItemLink: jest.fn(),
+    });
+
+    mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    expect(ref.current.quickEditAction?.kind).toBe('group');
+    expect(
+      ref.current.quickEditAction?.kind === 'group' &&
+        ref.current.quickEditAction.actions,
+    ).toHaveLength(mockRegistrations.length);
+  });
+
+  it('should set isQuickEditMode to true and collapse filters when quickEditAction is opened', async () => {
+    const collapseFiltersSpy = jest.fn();
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: mockRegistrations,
+      collapseFilters: collapseFiltersSpy,
+      hasData: true,
+      generateItemLink: jest.fn(),
+    });
+
+    const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      ref.current.quickEditAction?.kind === 'group' &&
+        (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+    });
+
+    wrapper.update();
+
+    expect(ref.current.isQuickEditMode).toBe(true);
+    expect(collapseFiltersSpy).toHaveBeenCalled();
+  });
+
+  it('should set the first registration as the current registration when quickEditAction is clicked', async () => {
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: mockRegistrations,
+      collapseFilters: jest.fn(),
+      hasData: true,
+      generateItemLink: jest.fn(),
+    });
+
+    const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      ref.current.quickEditAction?.kind === 'group' &&
+        (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+    });
+
+    wrapper.update();
+
+    expect(ref.current.quickEditStation).toBe(mockRegistrations[0].component);
+  });
+
+  it('should update the registration when a registration action is clicked', async () => {
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: mockRegistrations,
+      collapseFilters: jest.fn(),
+      hasData: true,
+      generateItemLink: jest.fn(),
+    });
+
+    const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    await act(async () => {
+      ref.current.quickEditAction?.kind === 'group' &&
+        (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+    });
+
+    wrapper.update();
+
+    await act(async () => {
+      ref.current.quickEditAction?.kind === 'group' &&
+        ref.current.quickEditAction.actions[1].onClick?.();
+    });
+
+    expect(ref.current.quickEditStation).toBe(mockRegistrations[1].component);
+  });
+
+  it('should disable the quickEditAction when there is no data', () => {
+    const { TestWrapper, ref } = getTestWrapper({
+      listRef: mockListRef,
+      registrations: mockRegistrations,
+      collapseFilters: jest.fn(),
+      hasData: false,
+      generateItemLink: jest.fn(),
+    });
+
+    mount(<TestWrapper quickEditValuesRef={ref} />);
+
+    expect(
+      ref.current.quickEditAction?.kind === 'group' &&
+        ref.current.quickEditAction.disabled,
+    ).toBe(true);
+  });
+
+  describe('List Actions', () => {
+    it('should select the first item when quick edit is opened', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: mockRegistrations,
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+      });
+
+      expect(mockListRef.current.selectIndex).toHaveBeenCalledWith(0);
+    });
+
+    it('should reset the selection when quick edit is closed', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: mockRegistrations,
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+      });
+
+      wrapper.update();
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(false));
+      });
+
+      expect(mockListRef.current.resetSelection).toHaveBeenCalled();
+    });
+  });
+
+  describe('QuickEditContextProvider', () => {
+    it('should provide the correct context values', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: mockRegistrations,
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      wrapper.update();
+
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      expect(contextRef.current.isQuickEditMode).toBe(true);
+      expect(contextRef.current.selectedItem).toEqual({ id: 1 });
+      expect(contextRef.current.detailsLink).toBe('/test');
+    });
+
+    it('should call the save callback when changeSelectedItem is called', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: mockRegistrations,
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      wrapper.update();
+
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      const saveCallbackSpy = jest.fn();
+
+      await act(async () => {
+        contextRef.current.registerSaveCallback?.(saveCallbackSpy);
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      expect(saveCallbackSpy).toHaveBeenCalled();
+    });
+
+    it('should call the save callback when refresh is called', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: mockRegistrations,
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      wrapper.update();
+
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      const saveCallbackSpy = jest.fn();
+
+      await act(async () => {
+        contextRef.current.registerSaveCallback?.(saveCallbackSpy);
+
+        contextRef.current.refresh?.();
+      });
+
+      expect(saveCallbackSpy).toHaveBeenCalled();
+    });
+
+    it('should generate the correct details link using registration if provided', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: [mockRegistrations[1]],
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      wrapper.update();
+
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      expect(contextRef.current.detailsLink).toBe('/test?{"id":1}');
+    });
+
+    it('should generate the correct details link using generateItemLink prop if not provided in registration', async () => {
+      const generateDetailsLinkSpy = jest.fn();
+
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: [mockRegistrations[2]],
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: generateDetailsLinkSpy,
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      wrapper.update();
+
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      expect(generateDetailsLinkSpy).toHaveBeenCalledWith({ id: 1 });
+    });
+
+    it('should not generate a details link if generateDetailsLink in registration is false', async () => {
+      const { TestWrapper, ref } = getTestWrapper({
+        listRef: mockListRef,
+        registrations: [mockRegistrations[3]],
+        collapseFilters: jest.fn(),
+        hasData: true,
+        generateItemLink: jest.fn(),
+      });
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
+
+        ref.current.changeSelectedItem({ id: 1 });
+      });
+
+      wrapper.update();
+
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      expect(contextRef.current.detailsLink).toBeUndefined();
+    });
+  });
+});

package/src/components/Explorer/QuickEdit/useQuickEdit.tsx

@@ -0,0 +1,169 @@
+import { LocationDescriptor } from 'history';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Data } from '../../../types';
+import { IconName } from '../../Icons';
+import { ListElement } from '../../List';
+import {
+  PageHeaderActionItemProps,
+  PageHeaderActionType,
+} from '../../PageHeader';
+import { QuickEditRegistration } from '../Explorer.model';
+import { QuickEditContext } from './QuickEditContext';
+
+export interface useQuickEditProps<T extends Data> {
+  listRef: React.RefObject<ListElement>;
+  registrations: QuickEditRegistration<T>[] | undefined;
+  hasData: boolean;
+  collapseFilters: () => void;
+  generateItemLink?: (data: T) => LocationDescriptor<unknown>;
+}
+
+export interface useQuickEditReturnType<T extends Data> {
+  readonly isQuickEditMode: boolean;
+  readonly quickEditAction?: PageHeaderActionItemProps;
+  readonly QuickEditContextProvider: React.FC;
+  readonly quickEditStation: JSX.Element | undefined;
+  readonly changeSelectedItem: (
+    item: T,
+    detailsLink?: LocationDescriptor<unknown>,
+  ) => Promise<void>;
+}
+
+export const useQuickEdit = <T extends Data>({
+  hasData,
+  listRef,
+  registrations,
+  collapseFilters,
+  generateItemLink,
+}: useQuickEditProps<T>): useQuickEditReturnType<T> => {
+  const [isQuickEditMode, setIsQuickEditMode] = useState<boolean>(false);
+  const [currentRegistration, setCurrentRegistration] =
+    useState<QuickEditRegistration<T>>();
+  const [selectedItem, setSelectedItem] = useState<T>();
+  const [detailsLink, setDetailsLink] = useState<LocationDescriptor<unknown>>();
+
+  const updateDetailsLink = useCallback(
+    (item?: T, registration?: QuickEditRegistration<T>) => {
+      if (registration?.generateDetailsLink !== false && item) {
+        setDetailsLink(
+          registration?.generateDetailsLink?.(item) ?? generateItemLink?.(item),
+        );
+      } else {
+        setDetailsLink(undefined);
+      }
+    },
+    [generateItemLink],
+  );
+
+  const changeSelectedItem = useCallback(
+    async (item: T): Promise<void> => {
+      if (selectedItem) {
+        await saveCallbackRef.current?.();
+      }
+      setSelectedItem({ ...item });
+      updateDetailsLink(item, currentRegistration);
+    },
+    [currentRegistration, selectedItem, updateDetailsLink],
+  );
+
+  useEffect(() => {
+    if (!isQuickEditMode) {
+      listRef.current?.resetSelection();
+    }
+  }, [isQuickEditMode, listRef]);
+
+  useEffect(() => {
+    if (isQuickEditMode) {
+      listRef.current?.selectIndex(0);
+    }
+  }, [isQuickEditMode, listRef]);
+
+  const saveCallbackRef = React.useRef<() => Promise<void>>();
+
+  const registerSaveCallback = useCallback(
+    (callback: () => Promise<void>): void => {
+      saveCallbackRef.current = callback;
+    },
+    [],
+  );
+
+  const QuickEditContextProvider: React.FC = useCallback(
+    ({ children }) => {
+      return (
+        <QuickEditContext.Provider
+          value={{
+            selectedItem,
+            registerSaveCallback,
+            isQuickEditMode,
+            detailsLink,
+            refresh: async () => {
+              if (selectedItem) {
+                await saveCallbackRef.current?.();
+                setSelectedItem({ ...selectedItem });
+              }
+            },
+          }}
+        >
+          {children}
+        </QuickEditContext.Provider>
+      );
+    },
+    [detailsLink, isQuickEditMode, registerSaveCallback, selectedItem],
+  );
+
+  const quickEditAction: PageHeaderActionItemProps | undefined = useMemo(
+    () =>
+      registrations !== undefined && registrations.length > 0
+        ? {
+            label: 'Quick Edit',
+            kind: 'group',
+            icon: IconName.QuickEdit,
+            disabled: !hasData && !isQuickEditMode,
+            openActionsGroupOnStart: isQuickEditMode,
+            onActionsGroupToggled: async (isOpen) => {
+              if (!isOpen && selectedItem) {
+                await saveCallbackRef.current?.();
+                setSelectedItem(undefined);
+                setDetailsLink(undefined);
+                setIsQuickEditMode(false);
+              } else {
+                setIsQuickEditMode(isOpen);
+                setCurrentRegistration(isOpen ? registrations[0] : undefined);
+                collapseFilters();
+              }
+            },
+            actions: registrations.map((registration) => ({
+              label: registration.label,
+              icon: registration.icon ?? IconName.QuickEditStation,
+              actionType:
+                isQuickEditMode &&
+                currentRegistration?.component === registration.component
+                  ? PageHeaderActionType.Hightlight
+                  : PageHeaderActionType.Context,
+              onClick: async () => {
+                await saveCallbackRef.current?.();
+                setCurrentRegistration(registration);
+                updateDetailsLink(selectedItem, registration);
+              },
+            })),
+          }
+        : undefined,
+    [
+      collapseFilters,
+      currentRegistration?.component,
+      hasData,
+      isQuickEditMode,
+      registrations,
+      selectedItem,
+      updateDetailsLink,
+    ],
+  );
+
+  return {
+    isQuickEditMode,
+    quickEditAction,
+    QuickEditContextProvider,
+    quickEditStation: currentRegistration?.component,
+    changeSelectedItem,
+  };
+};

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -51,6 +51,12 @@ const getDataProvider = (): readonly [
 };
 
 describe('SelectionExplorer', () => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
+
   it('renders the component without crashing', () => {
     const [provider] = getDataProvider();
     const wrapper = shallow(

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.stories.tsx

@@ -15,11 +15,11 @@ import {
   ExplorerDataProvider,
   ExplorerDataProviderConfiguration,
 } from '../Explorer.model';
+import { SelectionExplorer } from '../SelectionExplorer/SelectionExplorer';
 import {
   createInMemoryDataProvider,
   findAnywhereInStringCaseInsensitive,
-} from '../InMemoryDataProvider';
-import { SelectionExplorer } from '../SelectionExplorer/SelectionExplorer';
+} from '../helpers/InMemoryDataProvider';
 
 interface SelectExplorerStoryData {
   id: number;

package/src/components/Explorer/{InMemoryDataProvider.ts → helpers/InMemoryDataProvider.ts}

@@ -1,7 +1,7 @@
-import { Data } from '../../types/data';
-import { FilterValue, FilterValues } from '../Filters';
-import { SortData } from '../List';
-import { ExplorerDataProvider } from './Explorer.model';
+import { Data } from '../../../types/data';
+import { FilterValue, FilterValues } from '../../Filters';
+import { SortData } from '../../List';
+import { ExplorerDataProvider } from '../Explorer.model';
 
 type FilterFunction<T extends Data> = (
   value: unknown,