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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.33.0-rc.0",
+  "version": "0.33.0-rc.1",
   "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.6-rc.0",
+    "@axinom/mosaic-core": "^0.4.6-rc.1",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "32853a01e5b6de8cb3712ea5e1bd75780df8d59d"
+  "gitHead": "aa98a4a89a48ff7650a40acfec9a5b24c90d9c01"
 }

package/src/components/FormStation/FormStation.tsx

@@ -28,10 +28,12 @@ import {
   PageHeaderActionType,
   PageHeaderProps,
 } from '../PageHeader';
-import { ErrorType, StationError, StationMessage } from '../models';
+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
@@ -103,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;
@@ -131,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);
@@ -182,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);
       }
     }
   }, [
@@ -202,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 => {
@@ -223,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, {
@@ -272,6 +283,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
         enableReinitialize={true}
       >
         <>
+          {validationWatcher}
           <FormStationHeader
             titleProperty={titleProperty as string}
             defaultTitle={defaultTitle}
@@ -296,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}
@@ -317,6 +330,7 @@ const FormStationAction = <T, Y>(
     actions,
     validationSchema,
     setStationError,
+    setValidationError,
     submitResponse,
     alwaysSubmitBeforeAction,
     className = '',
@@ -352,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;
@@ -405,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)} />
+    ),
+  };
+}