@axinom/mosaic-ui 0.52.0-rc.6 → 0.52.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.52.0-rc.6",
+  "version": "0.52.0-rc.8",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.25-rc.6",
+    "@axinom/mosaic-core": "^0.4.25-rc.8",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@popperjs/core": "^2.11.8",
@@ -106,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "62061b8cddd421c5b734a0fddedb1bdd0919c8ba"
+  "gitHead": "f307889eea9c4a4e4f196af828da5549f1a723c8"
 }

package/src/components/Explorer/Explorer.tsx

@@ -289,6 +289,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     listRef,
     registrations: quickEditRegistrations,
     hasData: data.length > 0,
+    defaultItem: data[0],
     collapseFilters,
     generateItemLink,
   });

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

@@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history';
 import React from 'react';
 
 export interface QuickEditContextType<T> {
-  selectedItem?: T;
+  selectedItem: T;
   detailsLink?: LocationDescriptor<unknown>;
   isQuickEditMode?: boolean;
   registerSaveCallback?: (callback: () => Promise<void>) => void;

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

@@ -70,15 +70,18 @@ const mockRegistrations: QuickEditRegistration<unknown>[] = [
   },
 ];
 
+const defaultProps: useQuickEditProps<any> = {
+  listRef: mockListRef,
+  registrations: mockRegistrations,
+  collapseFilters: jest.fn(),
+  hasData: true,
+  defaultItem: { id: 0 },
+  generateItemLink: jest.fn(),
+};
+
 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(),
-    });
+    const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
     mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -87,11 +90,8 @@ describe('useQuickEdit', () => {
 
   it('should not return the quickEdit action if registrations are not defined', () => {
     const { TestWrapper, ref } = getTestWrapper({
-      listRef: mockListRef,
+      ...defaultProps,
       registrations: undefined,
-      collapseFilters: jest.fn(),
-      hasData: true,
-      generateItemLink: jest.fn(),
     });
 
     mount(<TestWrapper quickEditValuesRef={ref} />);
@@ -100,13 +100,7 @@ describe('useQuickEdit', () => {
   });
 
   it('should generate actions for each registration', () => {
-    const { TestWrapper, ref } = getTestWrapper({
-      listRef: mockListRef,
-      registrations: mockRegistrations,
-      collapseFilters: jest.fn(),
-      hasData: true,
-      generateItemLink: jest.fn(),
-    });
+    const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
     mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -120,11 +114,8 @@ describe('useQuickEdit', () => {
   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,
+      ...defaultProps,
       collapseFilters: collapseFiltersSpy,
-      hasData: true,
-      generateItemLink: jest.fn(),
     });
 
     const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
@@ -141,13 +132,7 @@ describe('useQuickEdit', () => {
   });
 
   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 { TestWrapper, ref } = getTestWrapper(defaultProps);
 
     const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -162,13 +147,7 @@ describe('useQuickEdit', () => {
   });
 
   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 { TestWrapper, ref } = getTestWrapper(defaultProps);
 
     const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -189,11 +168,8 @@ describe('useQuickEdit', () => {
 
   it('should disable the quickEditAction when there is no data', () => {
     const { TestWrapper, ref } = getTestWrapper({
-      listRef: mockListRef,
-      registrations: mockRegistrations,
-      collapseFilters: jest.fn(),
+      ...defaultProps,
       hasData: false,
-      generateItemLink: jest.fn(),
     });
 
     mount(<TestWrapper quickEditValuesRef={ref} />);
@@ -206,13 +182,7 @@ describe('useQuickEdit', () => {
 
   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(),
-      });
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -225,13 +195,7 @@ describe('useQuickEdit', () => {
     });
 
     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 { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -252,15 +216,34 @@ describe('useQuickEdit', () => {
   });
 
   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(),
+    it('should select the default item when quick edit is opened', async () => {
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
+
+      const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
+
+      await act(async () => {
+        ref.current.quickEditAction?.kind === 'group' &&
+          (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
       });
 
+      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: 0 });
+      expect(contextRef.current.detailsLink).toBe('/test');
+    });
+
+    it('should provide the correct context values', async () => {
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
+
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
       await act(async () => {
@@ -286,13 +269,7 @@ describe('useQuickEdit', () => {
     });
 
     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 { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -325,13 +302,7 @@ describe('useQuickEdit', () => {
     });
 
     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 { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -365,11 +336,8 @@ describe('useQuickEdit', () => {
 
     it('should generate the correct details link using registration if provided', async () => {
       const { TestWrapper, ref } = getTestWrapper({
-        listRef: mockListRef,
+        ...defaultProps,
         registrations: [mockRegistrations[1]],
-        collapseFilters: jest.fn(),
-        hasData: true,
-        generateItemLink: jest.fn(),
       });
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
@@ -398,10 +366,8 @@ describe('useQuickEdit', () => {
       const generateDetailsLinkSpy = jest.fn();
 
       const { TestWrapper, ref } = getTestWrapper({
-        listRef: mockListRef,
+        ...defaultProps,
         registrations: [mockRegistrations[2]],
-        collapseFilters: jest.fn(),
-        hasData: true,
         generateItemLink: generateDetailsLinkSpy,
       });
 
@@ -429,11 +395,8 @@ describe('useQuickEdit', () => {
 
     it('should not generate a details link if generateDetailsLink in registration is false', async () => {
       const { TestWrapper, ref } = getTestWrapper({
-        listRef: mockListRef,
+        ...defaultProps,
         registrations: [mockRegistrations[3]],
-        collapseFilters: jest.fn(),
-        hasData: true,
-        generateItemLink: jest.fn(),
       });
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);

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

@@ -1,5 +1,5 @@
 import { LocationDescriptor } from 'history';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Data } from '../../../types';
 import { IconName } from '../../Icons';
 import { ListElement } from '../../List';
@@ -14,6 +14,7 @@ export interface useQuickEditProps<T extends Data> {
   listRef: React.RefObject<ListElement>;
   registrations: QuickEditRegistration<T>[] | undefined;
   hasData: boolean;
+  defaultItem: T;
   collapseFilters: () => void;
   generateItemLink?: (data: T) => LocationDescriptor<unknown>;
 }
@@ -32,6 +33,7 @@ export interface useQuickEditReturnType<T extends Data> {
 export const useQuickEdit = <T extends Data>({
   hasData,
   listRef,
+  defaultItem,
   registrations,
   collapseFilters,
   generateItemLink,
@@ -39,7 +41,7 @@ export const useQuickEdit = <T extends Data>({
   const [isQuickEditMode, setIsQuickEditMode] = useState<boolean>(false);
   const [currentRegistration, setCurrentRegistration] =
     useState<QuickEditRegistration<T>>();
-  const [selectedItem, setSelectedItem] = useState<T>();
+  const [selectedItem, setSelectedItem] = useState<T>(defaultItem);
   const [detailsLink, setDetailsLink] = useState<LocationDescriptor<unknown>>();
 
   const updateDetailsLink = useCallback(
@@ -66,18 +68,6 @@ export const useQuickEdit = <T extends Data>({
     [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(
@@ -123,13 +113,21 @@ export const useQuickEdit = <T extends Data>({
             onActionsGroupToggled: async (isOpen) => {
               if (!isOpen && selectedItem) {
                 await saveCallbackRef.current?.();
-                setSelectedItem(undefined);
+                setCurrentRegistration(undefined);
+                setSelectedItem(defaultItem);
+                updateDetailsLink(defaultItem, registrations[0]);
                 setDetailsLink(undefined);
                 setIsQuickEditMode(false);
+                listRef.current?.resetSelection();
               } else {
+                if (defaultItem) {
+                  setSelectedItem(defaultItem);
+                  updateDetailsLink(defaultItem, registrations[0]);
+                }
                 setIsQuickEditMode(isOpen);
                 setCurrentRegistration(isOpen ? registrations[0] : undefined);
                 collapseFilters();
+                listRef.current?.selectIndex(0);
               }
             },
             actions: registrations.map((registration) => ({
@@ -151,8 +149,10 @@ export const useQuickEdit = <T extends Data>({
     [
       collapseFilters,
       currentRegistration?.component,
+      defaultItem,
       hasData,
       isQuickEditMode,
+      listRef,
       registrations,
       selectedItem,
       updateDetailsLink,

package/src/components/Explorer/helpers/useActions.ts

@@ -104,6 +104,8 @@ export const useActions = <T extends Data>({
     const headerActions: PageHeaderActionItemProps[] = [];
 
     if (hasFilters) {
+      headerActions.push({ kind: 'spacer' });
+
       headerActions.push({
         label:
           activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters',
@@ -116,11 +118,11 @@ export const useActions = <T extends Data>({
           toggleFiltersVisible();
         },
       });
-
-      headerActions.push({ kind: 'spacer' });
     }
 
     if (bulkActions && bulkActions.length > 0) {
+      headerActions.push({ kind: 'spacer' });
+
       headerActions.push({
         label: 'Bulk Actions',
         icon: IconName.Bulk,
@@ -134,10 +136,11 @@ export const useActions = <T extends Data>({
         groupActionsDisabled:
           itemSelection.items?.length === 0 || resultCount?.filtered === 0,
       });
-      headerActions.push({ kind: 'spacer' });
     }
 
     if (quickEditAction) {
+      headerActions.push({ kind: 'spacer' });
+
       headerActions.push(quickEditAction);
     }
 

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx

@@ -67,10 +67,10 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
     PageHeaderActionsGroupContext,
   );
 
-  const customCollapse = useCallback(() => {
-    collapse();
-    onActionsGroupToggled(false);
-  }, [collapse, onActionsGroupToggled]);
+  const customCollapse = useCallback(
+    () => Promise.resolve(onActionsGroupToggled(false)).then(() => collapse()),
+    [collapse, onActionsGroupToggled],
+  );
 
   useEffect(() => {
     registerCollapse(customCollapse, uniqueId);
@@ -139,10 +139,10 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
         }
         icon={icon}
         onClick={async () => {
-          if (!isExpanded) {
-            collapseAll();
-          }
           try {
+            if (!isExpanded) {
+              await collapseAll(uniqueId);
+            }
             await onActionsGroupToggled(!isExpanded);
             toggleExpanded();
           } catch (e) {

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContext.ts

@@ -2,12 +2,14 @@ import { createContext } from 'react';
 import { noop } from '../../../helpers/utils';
 
 export interface PageHeaderActionsGroupContextType {
-  registerCollapse: (readonly: () => void, uuid: string) => void;
-  collapseAll: () => void;
+  registerCollapse: (readonly: () => Promise<void>, uuid: string) => void;
+  collapseAll: (uuid: string) => Promise<void[]>;
 }
 
 export const PageHeaderActionsGroupContext =
   createContext<PageHeaderActionsGroupContextType>({
     registerCollapse: noop,
-    collapseAll: noop,
+    collapseAll: async () => {
+      return [];
+    },
   });

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { PageHeaderActionsGroupContext } from './PageHeaderActionsGroupsContext';
 
-type CollapseAction = Record<string, () => void>;
+type CollapseAction = Record<string, () => Promise<void>>;
 
 export const PageHeaderActionsGroupContextProvider: React.FC = ({
   children,
@@ -10,15 +10,22 @@ export const PageHeaderActionsGroupContextProvider: React.FC = ({
     useState<CollapseAction>({});
 
   const registerCollapse = useCallback(
-    (collapse: () => void, uuid: string): void => {
+    (collapse: () => Promise<void>, uuid: string): void => {
       setRegisteredCollapses((prev) => ({ ...prev, [uuid]: collapse }));
     },
     [],
   );
 
-  const collapseAll = useCallback(() => {
-    Object.values(registeredCollapses).forEach((collapse) => collapse());
-  }, [registeredCollapses]);
+  const collapseAll = useCallback(
+    (uuid: string) => {
+      return Promise.all(
+        Object.keys(registeredCollapses)
+          .filter((key) => key !== uuid)
+          .map((key) => registeredCollapses[key]()),
+      );
+    },
+    [registeredCollapses],
+  );
 
   return (
     <PageHeaderActionsGroupContext.Provider