@axinom/mosaic-ui 0.32.0-rc.9 → 0.33.0-rc.0

package/src/components/FormStation/FormStation.spec.tsx

@@ -5,6 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
+import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -12,6 +13,8 @@ import { PageHeader, PageHeaderAction } from '../PageHeader';
 import { FormStation, ObjectSchemaDefinition } from './FormStation';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
 
+jest.mock('../../initialize');
+
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 
 const mockActions = (onActionSelected: jest.Mock): ActionData[] => [
@@ -41,6 +44,10 @@ const MakeDirty: React.FC = () => {
 };
 
 describe('Details', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders the component without crashing', () => {
     const wrapper = shallow(<FormStation {...defaultProps} />);
 
@@ -102,7 +109,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(spy).toHaveBeenCalledTimes(1);
@@ -148,7 +155,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(spy).not.toHaveBeenCalled();
@@ -176,7 +183,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(spy).not.toHaveBeenCalled();
@@ -201,7 +208,7 @@ describe('Details', () => {
           .find(Action)
           .prop('action').onActionSelected;
         await act(async () => {
-          actionSelected();
+          actionSelected && actionSelected();
         });
 
         expect(saveSpy).not.toHaveBeenCalled();
@@ -421,7 +428,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       wrapper.update();
@@ -473,7 +480,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       wrapper.update();
@@ -534,7 +541,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       // place form into 'submitting' state
@@ -611,7 +618,7 @@ describe('Details', () => {
         .find(Action)
         .prop('action').onActionSelected;
       await act(async () => {
-        actionSelected();
+        actionSelected && actionSelected();
       });
 
       // place form into 'submitting' state
@@ -644,5 +651,56 @@ describe('Details', () => {
       isDisabled = action.prop('action').isDisabled;
       expect(isDisabled).toBe(false);
     });
+
+    it('sets the global busy state when submitting', async () => {
+      jest.useFakeTimers();
+      const spy = jest.fn();
+      const sampleActions = mockActions(spy);
+      const onSubmit = (): Promise<{ id: number }> =>
+        new Promise((resolve) =>
+          setTimeout(() => {
+            resolve({ id: 3 });
+          }, 1000),
+        );
+
+      const wrapper = mount(
+        <MemoryRouter>
+          <FormStation
+            {...defaultProps}
+            actions={sampleActions}
+            saveData={onSubmit}
+            initialData={{ loading: false, data: {} }}
+          >
+            <MakeDirty />
+          </FormStation>
+        </MemoryRouter>,
+      );
+
+      // submit form
+      const actionSelected = wrapper
+        .find(Action)
+        .prop('action').onActionSelected;
+
+      await act(async () => {
+        actionSelected && actionSelected();
+      });
+
+      // place form into 'submitting' state
+      await act(async () => {
+        jest.advanceTimersByTime(500);
+      });
+
+      wrapper.update();
+
+      expect(showSaveIndicator).toHaveBeenCalledTimes(1);
+
+      // complete form submission
+      await act(async () => {
+        jest.runAllTimers();
+      });
+      wrapper.update();
+
+      expect(hideSaveIndicator).toHaveBeenCalledTimes(1);
+    });
   });
 });

package/src/components/FormStation/FormStation.tsx

@@ -16,18 +16,19 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
+import { hideSaveIndicator, showSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
 import { isNavigationAction } from '../Actions/Action/Action';
 import { IconName } from '../Icons';
 import { MessageBar } from '../MessageBar';
-import { ErrorType, StationError, StationMessage } from '../models';
 import {
   PageHeader,
   PageHeaderActionType,
   PageHeaderProps,
 } from '../PageHeader';
+import { ErrorType, StationError, StationMessage } from '../models';
 import { FormActionData, InitialFormData } from './FormStation.models';
 import classes from './FormStation.scss';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
@@ -144,8 +145,10 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       if (isFormSubmitting) {
         return;
       }
+
       try {
         setIsFormSubmitting(true);
+        showSaveIndicator();
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -167,6 +170,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       } finally {
         formikHelpers.setSubmitting(false);
         setIsFormSubmitting(false);
+        hideSaveIndicator();
       }
     },
     [isFormSubmitting, initialData, saveData, setStationError],

package/src/components/InfoPanel/Paragraph/Paragraph.scss

@@ -11,7 +11,7 @@
     row-gap: 10px;
   }
 
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 
   .title {
     color: var(--infopanel-subtitle-color, $infopanel-subtitle-color);

package/src/components/InfoPanel/Section/Section.scss

@@ -7,12 +7,19 @@
   grid-template-columns: 1fr;
 
   &.hasTitle {
-    grid-template-rows: max-content max-content;
+    grid-template-rows: max-content;
+
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    &.expanded {
+      grid-template-rows: max-content max-content;
+    }
   }
 
   padding: 30px;
 
-  row-gap: 30px;
+  row-gap: 20px;
 
   .title,
   .main {
@@ -37,4 +44,29 @@
     --infopanel-background-color,
     $infopanel-background-color
   );
+
+  .collapsibleSection {
+    & > div:first-child {
+      background-color: unset;
+
+      div:last-child {
+        margin-left: -18px;
+      }
+
+      svg {
+        margin-left: -34px;
+      }
+    }
+
+    & > div:last-child {
+      border-bottom: unset;
+    }
+
+    & > div > div:last-child {
+      background-color: var(
+        --infopanel-background-color,
+        $infopanel-background-color
+      );
+    }
+  }
 }

package/src/components/InfoPanel/Section/Section.spec.tsx

@@ -1,5 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+import { AccordionItem } from '../../Accordion';
 import { Section } from './Section';
 
 describe('Section Tests', () => {
@@ -8,4 +9,120 @@ describe('Section Tests', () => {
 
     expect(wrapper).toBeTruthy();
   });
+
+  it('should not render anything if section has no children', () => {
+    const wrapper = shallow(<Section></Section>);
+
+    const section = wrapper.find('.container');
+
+    expect(section.exists()).toBe(false);
+  });
+
+  it('creates a class based off of the className prop', () => {
+    const mockClassName = 'test-class';
+    const wrapper = shallow(
+      <Section className={mockClassName}>
+        <p>test</p>
+      </Section>,
+    );
+
+    const item = wrapper.find('.test-class');
+
+    expect(item.hasClass(mockClassName)).toBe(true);
+  });
+
+  it('accepts styles', () => {
+    const mockStyles: React.CSSProperties = { backgroundColor: 'blue' };
+    const wrapper = shallow(
+      <Section style={mockStyles}>
+        <p>test</p>
+      </Section>,
+    );
+
+    const section = wrapper.find('.container');
+
+    expect(section.prop('style')).toBe(mockStyles);
+  });
+
+  it(`should not be toggleable if no 'title' is given`, () => {
+    const wrapper = shallow(
+      <Section>
+        <p>test</p>
+      </Section>,
+    );
+
+    const item = wrapper.find(AccordionItem);
+
+    expect(item.exists()).toBe(false);
+  });
+
+  it(`should be toggleable if a 'title' is given`, () => {
+    const wrapper = shallow(
+      <Section title="test">
+        <p>test</p>
+      </Section>,
+    );
+
+    const item = wrapper.find(AccordionItem);
+
+    expect(item.exists()).toBe(true);
+  });
+
+  it('section should be expanded by default', () => {
+    const wrapper = shallow(
+      <Section>
+        <p>test</p>
+      </Section>,
+    );
+
+    const section = wrapper.find('.container');
+
+    expect(section.hasClass('expanded')).toBe(true);
+  });
+
+  it(`section is collasped if 'expandedByDefault' is set to false`, () => {
+    const wrapper = shallow(
+      <Section expandedByDefault={false}>
+        <p>test</p>
+      </Section>,
+    );
+
+    const section = wrapper.find('.container');
+
+    expect(section.hasClass('expanded')).toBe(false);
+  });
+
+  it('section can be toggled when the title is clicked', () => {
+    const wrapper = shallow(
+      <Section title="test">
+        <p>test</p>
+      </Section>,
+    );
+
+    let section = wrapper.find('.container').first();
+    let item = wrapper.find(AccordionItem);
+
+    expect(section.hasClass('expanded')).toBe(true);
+    expect(item.prop('isExpanded')).toBe(true);
+
+    item = wrapper.find(AccordionItem);
+    item.prop('toggleExpanded')!();
+    wrapper.update();
+
+    section = wrapper.find('.container').first();
+    item = wrapper.find(AccordionItem);
+
+    expect(section.hasClass('expanded')).toBe(false);
+    expect(item.prop('isExpanded')).toBe(false);
+
+    item = wrapper.find(AccordionItem);
+    item.prop('toggleExpanded')!();
+    wrapper.update();
+
+    section = wrapper.find('.container').first();
+    item = wrapper.find(AccordionItem);
+
+    expect(section.hasClass('expanded')).toBe(true);
+    expect(item.prop('isExpanded')).toBe(true);
+  });
 });

package/src/components/InfoPanel/Section/Section.tsx

@@ -1,10 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';
+import { AccordionItem } from '../../Accordion';
 import { Paragraph } from '../Paragraph/Paragraph';
 import classes from './Section.scss';
 
 export interface SectionProps {
-  /** Section Title */
+  /** Section Title. If set, will allow the section to be expandable/collapsible */
   title?: string;
 
   /** Optional class */
@@ -12,6 +13,9 @@ export interface SectionProps {
 
   /** Optional styles */
   style?: React.CSSProperties;
+
+  /** Whether the section should be expanded or collapsed intially (default: true)*/
+  expandedByDefault?: boolean;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -19,7 +23,9 @@ export const Section: React.FC<SectionProps> = ({
   title,
   style,
   children,
+  expandedByDefault = true,
 }) => {
+  const [expanded, setExpanded] = useState<boolean>(expandedByDefault);
   const validChildren: React.ReactNode[] = [];
 
   // Special case for removing paragraph components if they are empty
@@ -42,21 +48,38 @@ export const Section: React.FC<SectionProps> = ({
     <div
       className={clsx(
         classes.container,
-        { [classes.hasTitle]: title },
+        { [classes.hasTitle]: title, [classes.expanded]: expanded },
         'info-panel-section-container',
         className,
       )}
       style={style}
       data-test-id="section"
     >
-      {title && (
-        <div className={classes.title} data-test-id="section-title">
-          {title}
+      {title ? (
+        <AccordionItem
+          header={
+            title ? (
+              <div className={classes.title} data-test-id="section-title">
+                {title}
+              </div>
+            ) : (
+              <div className={classes.title} data-test-id="section-title"></div>
+            )
+          }
+          allowLeftSpacing={false}
+          isExpanded={expanded}
+          toggleExpanded={() => setExpanded((prev) => !prev)}
+          className={classes.collapsibleSection}
+        >
+          <div className={classes.main} data-test-id="section-content">
+            {validChildren}
+          </div>
+        </AccordionItem>
+      ) : (
+        <div className={classes.main} data-test-id="section-content">
+          {validChildren}
         </div>
       )}
-      <div className={classes.main} data-test-id="section-content">
-        {validChildren}
-      </div>
     </div>
   );
 };

package/src/components/LandingPageTiles/TileLarge/TileLarge.scss

@@ -33,8 +33,8 @@
 
   .icon {
     align-self: center;
-    width: 130px;
-    height: 130px;
+    width: 100px;
+    height: 100px;
     svg * {
       stroke: var(
         --landingpage-largetile-stroke-color,
@@ -53,7 +53,7 @@
     text-align: center;
 
     .label {
-      font-size: 30px;
+      font-size: 26px;
       font-weight: regular;
     }
 

package/src/components/LandingPageTiles/TileSmall/TileSmall.scss

@@ -46,8 +46,8 @@
 
   .icon {
     align-self: center;
-    width: 60px;
-    height: 60px;
+    width: 40px;
+    height: 40px;
     svg * {
       stroke: var(
         --landingpage-smalltile-stroke-color,
@@ -59,7 +59,7 @@
   .label {
     text-align: center;
     align-self: center;
-    font-size: 18px;
+    font-size: 15px;
     color: var(--landingpage-smalltile-color, $landingpage-smalltile-color);
   }
 }

package/src/components/List/List.spec.tsx

@@ -92,6 +92,29 @@ describe('List', () => {
     expect(props.columnSizes).toBe('1fr 1fr 1fr');
   });
 
+  it.each([
+    { value: true, visible: true },
+    { value: () => true, visible: true },
+    { value: () => false, visible: false },
+  ])(
+    'does add an extra column if there is an action button',
+    ({ value, visible }) => {
+      const wrapper = mount(
+        <List
+          columns={mockListColumns}
+          data={mockListData}
+          showActionButton={value}
+        />,
+      );
+
+      const rows = wrapper.find(ListRow);
+      const props = rows.first().props();
+
+      expect(props.columnSizes).toBe('1fr 1fr 1fr 50px');
+      expect(props.showActionButton).toBe(visible);
+    },
+  );
+
   it.each`
     data                                                                   | count
     ${[{ row: 'one' }, { row: 'two' }, { row: 'three' }]}                  | ${3}

package/src/components/List/List.stories.tsx

@@ -124,6 +124,14 @@ const meta: Meta<StoryListType> = {
       description: `<b>[Storybook only]</b> The number of rows to display.
       The story will generate the requests amount of items and assign it to the <code>data</code> prop.`,
     },
+    showActionButton: {
+      ...groups.showActionButton,
+      description: `Whether to show the action button in the header row.`,
+      options: [true, false, 'random'],
+      mapping: {
+        random: (): boolean => (Math.random() > 0.5 ? true : false),
+      },
+    },
   },
   args: {
     columns: defaultColumns,

package/src/components/List/List.tsx

@@ -73,7 +73,7 @@ export interface ListProps<T extends Data> {
    * Defines whether an action button will be rendered (default: true)
    * Will not render if selectMode is not 'None'
    */
-  showActionButton?: boolean;
+  showActionButton?: boolean | ((data: T) => boolean);
   /** Defines when the loading of the next page is triggered. The number represents the number of row left, before a load is triggered. (default: 10) */
   loadingTriggerOffset?: number;
   /** Defines how the list data should be sorted */
@@ -245,7 +245,7 @@ export const List = <T extends Data>({
 
   const columnSizes = getColumnsSizeDefinition(
     columns,
-    showActionButton,
+    Boolean(showActionButton),
     selectionMode,
     !!inlineMenuActions,
   );
@@ -345,7 +345,8 @@ export const List = <T extends Data>({
           verticalTextAlign={verticalTextAlign}
           selectionMode={selectionMode}
           showActionButton={
-            showActionButton && selectionMode === ListSelectMode.None
+            selectionMode === ListSelectMode.None &&
+            getActionButtonVisibility(item.data, showActionButton)
           }
           showCheckMark={selectionMode === ListSelectMode.Single}
           showItemCheckbox={selectionMode === ListSelectMode.Multi}
@@ -383,3 +384,14 @@ export const List = <T extends Data>({
     </div>
   );
 };
+
+function getActionButtonVisibility<T>(
+  data: T,
+  showActionButton: boolean | ((item: T) => boolean),
+): boolean {
+  if (typeof showActionButton === 'boolean') {
+    return showActionButton;
+  }
+
+  return showActionButton(data);
+}

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,

package/src/hooks/useBusy/useBusy.spec.tsx

@@ -0,0 +1,34 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { on } from '../../initialize';
+import { useBusy } from './useBusy';
+
+let callback: (busyState: boolean) => void;
+
+jest.mock('../../initialize', () => ({
+  on: jest.fn().mockImplementationOnce((event, cb) => {
+    callback = cb;
+  }),
+}));
+
+const TestWrapper: React.FC = () => {
+  const { isBusy } = useBusy();
+
+  return <p id="value">{String(isBusy)}</p>;
+};
+
+describe('useBusy', () => {
+  it(`both 'val' and 'debouncedValue' are set to the initial value`, () => {
+    const wrapper = mount(<TestWrapper />);
+    const currentValue = wrapper.find('#value');
+
+    expect(on).toHaveBeenCalled();
+    expect(currentValue.text()).toBe('false');
+
+    callback(true);
+
+    wrapper.update();
+
+    expect(currentValue.text()).toBe('true');
+  });
+});

package/src/hooks/useBusy/useBusy.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { on } from '../../initialize';
+
+export const useBusy = (): {
+  isBusy: boolean;
+} => {
+  const [busy, setBusy] = React.useState(false);
+
+  on('busy', (busyState) => {
+    setBusy(busyState as boolean);
+  });
+
+  return { isBusy: busy };
+};