@axinom/mosaic-ui 0.32.0 → 0.33.0-rc.1

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,21 +16,24 @@ 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, StationMessage } from '../models';
 import { FormActionData, InitialFormData } from './FormStation.models';
 import classes from './FormStation.scss';
 import { SaveOnNavigate } from './SaveOnNavigate/SaveOnNavigate';
+import { StationErrorStateType } from './StationErrorStateType';
+import { useValidationError } from './useValidationError';
 
 export type ObjectSchemaDefinition<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -102,7 +105,8 @@ interface FormActionProps<T, Y> extends Omit<ActionsProps, 'actions'> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   validationSchema?: OptionalObjectSchema<ObjectSchemaDefinition<any>>;
   actions?: FormActionData<T, Y>[];
-  setStationError: (error: StationError) => void;
+  setStationError: (error: StationErrorStateType) => void;
+  setValidationError: () => void;
   submitResponse?: React.MutableRefObject<Y | undefined>;
   alwaysSubmitBeforeAction?: boolean;
   className?: string;
@@ -130,8 +134,12 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
-  const [stationError, setStationError] = useState<StationError>();
-  const [isLoadingError, setIsLoadingError] = useState(false);
+  const [stationError, setStationError] = useState<StationErrorStateType>();
+
+  const { setValidationError, validationWatcher } = useValidationError(
+    stationError,
+    setStationError,
+  );
 
   const submitResponse = useRef<TSubmitResponse>();
   const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
@@ -144,8 +152,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 +177,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       } finally {
         formikHelpers.setSubmitting(false);
         setIsFormSubmitting(false);
+        hideSaveIndicator();
       }
     },
     [isFormSubmitting, initialData, saveData, setStationError],
@@ -178,19 +189,20 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       (initialData.data === null && !initialData.loading) ||
       initialData.entityNotFound
     ) {
-      const stationError = ErrorTypeToStationError(
-        initialData.error,
-        'An error occurred when trying to load data.',
-        'Entity not found',
-      );
+      const stationError = {
+        ...ErrorTypeToStationError(
+          initialData.error,
+          'An error occurred when trying to load data.',
+          'Entity not found',
+        ),
+        type: 'loading',
+      };
 
       setStationError(stationError);
-      setIsLoadingError(true);
     } else {
-      if (isLoadingError === true) {
+      if (stationError?.type === 'loading') {
         // Only clear the error if it is a loading error, which now seems to be cleared.
         setStationError(undefined);
-        setIsLoadingError(false);
       }
     }
   }, [
@@ -198,7 +210,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     initialData.error,
     initialData.entityNotFound,
     initialData.data,
-    isLoadingError,
+    stationError?.type,
   ]);
 
   const getContent = (): JSX.Element | undefined => {
@@ -219,7 +231,10 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     // Loading successful
     return (
       <>
-        <SaveOnNavigate isSubmitting={isFormSubmitting} />
+        <SaveOnNavigate
+          isSubmitting={isFormSubmitting}
+          onNavigationCancelled={setValidationError}
+        />
         <div className={classes.main}>
           <div
             className={clsx(classes.formWrapper, {
@@ -268,6 +283,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
         enableReinitialize={true}
       >
         <>
+          {validationWatcher}
           <FormStationHeader
             titleProperty={titleProperty as string}
             defaultTitle={defaultTitle}
@@ -292,6 +308,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
               width={actionsWidth}
               validationSchema={validationSchema}
               setStationError={setStationError}
+              setValidationError={setValidationError}
               submitResponse={submitResponse}
               alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
               className={classes.actionsPanel}
@@ -313,6 +330,7 @@ const FormStationAction = <T, Y>(
     actions,
     validationSchema,
     setStationError,
+    setValidationError,
     submitResponse,
     alwaysSubmitBeforeAction,
     className = '',
@@ -348,8 +366,7 @@ const FormStationAction = <T, Y>(
                     !isValid ||
                     (await validationSchema?.isValid(values)) === false
                   ) {
-                    // eslint-disable-next-line no-console
-                    console.log('form invalid, action not performed');
+                    setValidationError();
                     // Making sure that the fields will actually show the validation messages (they won't if the from was not touched yet - e.g. on a create station)
                     validateForm();
                     return;
@@ -401,6 +418,7 @@ const FormStationAction = <T, Y>(
     isValid,
     resetForm,
     setStationError,
+    setValidationError,
     submitForm,
     submitResponse,
     validateForm,

package/src/components/FormStation/SaveOnNavigate/SaveOnNavigate.tsx

@@ -1,11 +1,14 @@
 import { useFormikContext } from 'formik';
 import React, { useState } from 'react';
+import { noop } from '../../../helpers/utils';
 import { NavigationAPI, useReactRouterPause } from '../../../hooks';
 import { handleNavigationAttempt } from './handleNavigationAttempt';
 
 interface SaveOnNavigateProps {
   /** If set to true, will prevent form submission when navigating away. (default: false) */
   isSubmitting?: boolean;
+  /** Callback that will be called when a navigation attempt was cancelled */
+  onNavigationCancelled?: () => void;
 }
 
 /**
@@ -13,6 +16,7 @@ interface SaveOnNavigateProps {
  */
 export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
   isSubmitting = false,
+  onNavigationCancelled = noop,
 }) => {
   const { dirty, isValid, submitForm } = useFormikContext();
   const [canSubmit, setCanSubmit] = useState<boolean>(true);
@@ -28,6 +32,7 @@ export const SaveOnNavigate: React.FC<SaveOnNavigateProps> = ({
           isSubmitting,
           canSubmit,
           setCanSubmit,
+          onNavigationCancelled,
         ),
     },
     dirty,

package/src/components/FormStation/SaveOnNavigate/handleNavigationAttempt.spec.ts

@@ -20,6 +20,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -30,6 +31,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -38,6 +40,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`blocks navigation when 'isValid' is 'false' by calling 'navigation.cancel()'`, async () => {
@@ -48,6 +51,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -58,6 +62,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -66,6 +71,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).toHaveBeenCalledTimes(1);
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).toHaveBeenCalled();
   });
 
   it(`pauses further navigation when 'dirty' is 'true' and 'isValid' is 'true' by calling 'navigation.pause()'`, async () => {
@@ -76,6 +82,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = true;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -86,6 +93,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -94,6 +102,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`while 'isSubmitting' is 'true' navigation should continue to be paused by not calling 'navigation.resume()'`, async () => {
@@ -104,6 +113,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = true;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -114,6 +124,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -122,6 +133,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`while 'canSubmit' is 'false' navigation should continue to be paused by not calling 'navigation.resume()'`, async () => {
@@ -132,6 +144,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = false;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -142,6 +155,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -150,6 +164,7 @@ describe('handleNavigationAttempt', () => {
     expect(navigation.cancel).not.toHaveBeenCalled();
     expect(submitForm).not.toHaveBeenCalled();
     expect(setCanSubmit).not.toHaveBeenCalled();
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 
   it(`navigation can resume after the submitForm promise was successfully resolved by calling 'navigation.resume()'`, async () => {
@@ -160,6 +175,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -170,6 +186,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -179,6 +196,7 @@ describe('handleNavigationAttempt', () => {
     expect(submitForm).toHaveBeenCalledTimes(1);
     expect(setCanSubmit).toHaveBeenCalledTimes(1);
     expect(setCanSubmit).toHaveBeenCalledWith(false);
+    expect(onNavigationCancelled).not.toHaveBeenCalledWith(false);
   });
 
   it(`navigation is cancelled when the 'submitForm' promise was rejected by calling 'navigation.cancel()'`, async () => {
@@ -191,6 +209,7 @@ describe('handleNavigationAttempt', () => {
     const isSubmitting = false;
     const canSubmit = true;
     const setCanSubmit = jest.fn();
+    const onNavigationCancelled = jest.fn();
 
     // Act
     await handleNavigationAttempt(
@@ -201,6 +220,7 @@ describe('handleNavigationAttempt', () => {
       isSubmitting,
       canSubmit,
       setCanSubmit,
+      onNavigationCancelled,
     );
 
     // Assert
@@ -211,5 +231,6 @@ describe('handleNavigationAttempt', () => {
     expect(setCanSubmit).toHaveBeenCalledTimes(2);
     expect(setCanSubmit).toHaveBeenNthCalledWith(1, false);
     expect(setCanSubmit).toHaveBeenNthCalledWith(2, true);
+    expect(onNavigationCancelled).not.toHaveBeenCalled();
   });
 });

package/src/components/FormStation/SaveOnNavigate/handleNavigationAttempt.ts

@@ -10,6 +10,7 @@ export const handleNavigationAttempt = async (
   isSubmitting: boolean,
   canSubmit: boolean,
   setCanSubmit: React.Dispatch<React.SetStateAction<boolean>>,
+  onNavigationCancelled: () => void,
 ): Promise<void> => {
   if (!dirty) {
     // Form values didn't change, just navigate away
@@ -20,6 +21,7 @@ export const handleNavigationAttempt = async (
     // Form is invalid, cancel navigation
     // TODO: Add a message here (probably connected to "Error handling")
     navigation.cancel();
+    onNavigationCancelled();
     return;
   }
   // Form values have changed and form is valid, attempt save

package/src/components/FormStation/StationErrorStateType.tsx

@@ -0,0 +1,5 @@
+import { StationError } from '../models';
+
+export interface StationErrorStateType extends StationError {
+  type?: string;
+}

package/src/components/FormStation/useValidationError.tsx

@@ -0,0 +1,59 @@
+import { useFormikContext } from 'formik';
+import React, { useCallback, useEffect, useState } from 'react';
+import { StationErrorStateType } from './StationErrorStateType';
+
+/**
+ * Component that watches for changes in the form validation state
+ * and calls the callback with the current state.
+ */
+const ValidationWatcher: React.FC<{
+  callback: (isValid: boolean) => void;
+}> = ({ callback: isValid }) => {
+  const formik = useFormikContext();
+  useEffect(() => {
+    isValid(formik.isValid);
+  }, [formik.isValid, isValid]);
+  return null;
+};
+/**
+ * Cares for showing (and removing) validation errors.
+ * @param stationError the currently showing error
+ * @param setStationError the setter for the currently showing error
+ * @returns
+ * `setValidationError` - call this method to set the validation error.
+ * `validationWatcher` - place this JSX somewhere inside the <Formik /> component children.
+ */
+export function useValidationError(
+  stationError: StationErrorStateType | undefined,
+  setStationError: React.Dispatch<
+    React.SetStateAction<StationErrorStateType | undefined>
+  >,
+): {
+  setValidationError: () => void;
+  validationWatcher: JSX.Element;
+} {
+  // Track validation state of the from using the validationWatcher
+  const [isValid, setIsValid] = useState<boolean>(true);
+
+  useEffect(() => {
+    // if the form became valid, remove the validation error
+    if (isValid && stationError && stationError.type === 'validation') {
+      setStationError(undefined);
+    }
+  }, [isValid, setStationError, stationError]);
+
+  const setValidationError = useCallback((): void => {
+    // set the validation error
+    setStationError({
+      title: 'Please fix the errors in the form to proceed.',
+      type: 'validation',
+    });
+  }, [setStationError]);
+
+  return {
+    setValidationError,
+    validationWatcher: (
+      <ValidationWatcher callback={(valid) => setIsValid(valid)} />
+    ),
+  };
+}

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
+      );
+    }
+  }
 }