@axinom/mosaic-ui 0.32.0-rc.10 → 0.32.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.32.0-rc.10",
+  "version": "0.32.0-rc.12",
   "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.5-rc.10",
+    "@axinom/mosaic-core": "^0.4.5-rc.11",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "896d9e0951c9f8610938ec86dbf271d3aef9c5fc"
+  "gitHead": "49d29f6c1ca2811784c79c0da36a5377d1389635"
 }

package/src/components/Actions/Action/Action.spec.tsx

@@ -1,10 +1,10 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
+import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
+import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
 import {
   Action,

package/src/components/Actions/Action/Action.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
-  ConfirmationConfig,
   ConfirmDialog,
+  ConfirmationConfig,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';

package/src/components/Explorer/Explorer.model.ts

@@ -36,6 +36,11 @@ export interface ExplorerBulkAction<T extends Data>
    * Whether the Explorer should reload the data once the bulk action is completed
    */
   reloadData?: boolean;
+  /**
+   * Whether or not to show toast notification once the bulk action is started
+   * (shown by default)
+   */
+  showStartedNotification?: boolean;
 }
 
 export type PageIdentifier = string | number | undefined;

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

@@ -270,7 +270,7 @@ describe('Explorer', () => {
       const header = wrapper.find(PageHeader);
 
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick();
+        header.prop('bulkActions')?.[0].onClick?.();
 
         await wrapper.update();
       });
@@ -280,7 +280,7 @@ describe('Explorer', () => {
     });
 
     it('Calls "showNotification" when bulk action is clicked', async () => {
-      const [provider, spy] = getDataProvider();
+      const [provider] = getDataProvider();
 
       const label = 'Something';
       const wrapper = await actWithReturn(async () => {
@@ -303,7 +303,7 @@ describe('Explorer', () => {
 
       const header = wrapper.find(PageHeader);
       await act(async () => {
-        header.prop('bulkActions')?.[0].onClick();
+        header.prop('bulkActions')?.[0].onClick?.();
         await wrapper.update();
       });
 
@@ -313,6 +313,38 @@ describe('Explorer', () => {
       });
     });
 
+    it('Does not call "showNotification" when `showStartedNotification=false` and bulk action is clicked', async () => {
+      const [provider] = getDataProvider();
+
+      const label = 'Something';
+      const wrapper = await actWithReturn(async () => {
+        const wrapper = mount(
+          <Explorer
+            columns={mockListColumns}
+            dataProvider={provider}
+            stationKey="mock-key"
+            bulkActions={[
+              {
+                label,
+                onClick: jest.fn(),
+                reloadData: true,
+                showStartedNotification: false,
+              },
+            ]}
+          />,
+        );
+        return wrapper;
+      });
+
+      const header = wrapper.find(PageHeader);
+      await act(async () => {
+        header.prop('bulkActions')?.[0].onClick?.();
+        await wrapper.update();
+      });
+
+      expect(showNotificationSpy).toHaveBeenCalledTimes(0);
+    });
+
     it.todo(`raises page header bulk action with 'SELECT_ALL'`);
 
     it.todo(`raises page header bulk action with 'SINGLE_ITEMS'`);
@@ -1672,7 +1704,7 @@ describe('Explorer', () => {
       const menu = wrapper.find(InlineMenu);
 
       await act(async () => {
-        await menu.prop('actions')?.[0].onActionSelected();
+        await menu.prop('actions')?.[0].onActionSelected?.();
         await wrapper.update();
       });
 
@@ -1728,7 +1760,7 @@ describe('Explorer', () => {
       const menu = wrapper.find(InlineMenu);
 
       await act(async () => {
-        await menu.prop('actions')?.[0].onActionSelected();
+        await menu.prop('actions')?.[0].onActionSelected?.();
         await wrapper.update();
       });
 

package/src/components/Explorer/Explorer.tsx

@@ -365,9 +365,11 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
       return {
         ...action,
         onClick: async () => {
-          showNotification({
-            title: `Bulk Action '${action.label}' Started`,
-          });
+          if (action.showStartedNotification !== false) {
+            showNotification({
+              title: `Bulk Action '${action.label}' Started`,
+            });
+          }
 
           try {
             const result = await action.onClick(getBulkActionSelection());

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

@@ -2,7 +2,9 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
+import * as app from '../../../initialize';
 import { Column } from '../../List';
+import { PageHeader } from '../../PageHeader';
 import { PageHeaderBulkActions } from '../../PageHeader/PageHeaderBulkActions/PageHeaderBulkActions';
 import { Explorer } from '../Explorer';
 import { ExplorerDataProvider } from '../Explorer.model';
@@ -103,6 +105,34 @@ describe('SelectionExplorer', () => {
     expect(bulkActions.exists()).toBe(false);
   });
 
+  it('Does not call "showNotification" when "Apply Selection" is clicked', async () => {
+    const [provider] = getDataProvider();
+    const showNotificationSpy: jest.SpyInstance = jest.spyOn(
+      app,
+      'showNotification',
+    );
+
+    const wrapper = await actWithReturn(async () => {
+      const wrapper = mount(
+        <SelectionExplorer
+          columns={mockListColumns}
+          dataProvider={provider}
+          stationKey="mock-key"
+          allowBulkSelect={true}
+        />,
+      );
+      return wrapper;
+    });
+
+    const header = wrapper.find(PageHeader);
+    await act(async () => {
+      header.prop('bulkActions')?.[0].onClick?.();
+      await wrapper.update();
+    });
+
+    expect(showNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
   it('sends onSelection callback when the selection of a single item is triggered', async () => {
     const [provider] = getDataProvider();
     const spy = jest.fn();

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

@@ -68,6 +68,7 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
                 onClick: ((arg: ItemSelection<T>) => {
                   onSelection(arg);
                 }) as ExplorerBulkAction<T>['onClick'],
+                showStartedNotification: false,
               },
             ]
           : []),

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { noop } from '../../../helpers/utils';
 import { CommonJsButtonOptions } from '../../Buttons/Button.model';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -4,7 +4,7 @@ import { act } from 'react-dom/test-utils';
 import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
+import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
   PageHeaderAction,

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';

package/src/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.tsx

@@ -6,8 +6,8 @@ import { ConfirmationMode } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import { PageHeaderProps } from '../PageHeader.model';
 import {
-  isPageHeaderJsAction,
   PageHeaderAction,
+  isPageHeaderJsAction,
 } from '../PageHeaderAction/PageHeaderAction';
 import {
   PageHeaderActionProps,