@axinom/mosaic-ui 0.39.0-rc.3 → 0.39.1-feat-gs.0

package/src/components/FormStation/FormStation.tsx

@@ -1,51 +1,23 @@
 import clsx from 'clsx';
-import {
-  Form,
-  Formik,
-  FormikHelpers,
-  FormikValues,
-  useFormikContext,
-} from 'formik';
-import React, {
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useHistory } from 'react-router-dom';
+import { Formik, FormikValues } from 'formik';
+import React, { PropsWithChildren } from 'react';
 import { OptionalObjectSchema } from 'yup/lib/object';
-import { SaveIndicatorType, setSaveIndicator } 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 {
-  PageHeader,
-  PageHeaderActionType,
-  PageHeaderProps,
-} from '../PageHeader';
-import { ErrorType, StationMessage } from '../models';
-import { FormActionData, InitialFormData } from './FormStation.models';
+import type { Data } from '../../types/data';
+import type { StationMessage } from '../models';
+import { FormContentWrapper } from './FormContentWrapper/FormContentWrapper';
+import type {
+  FormActionData,
+  InitialFormData,
+  ObjectSchemaDefinition,
+  SaveDataFunction,
+} from './FormStation.models';
 import classes from './FormStation.scss';
+import { FormStationActions } from './FormStationActions/FormStationActions';
+import { FormStationContextProvider } from './FormStationContext/FormStationContextProvider';
+import { FormStationHeader } from './FormStationHeader/FormStationHeader';
 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
-  T extends Data | null = any,
-> = {
-  // TODO: Adding 'any' here since there are a couple of open issues regarding generics in the latest version of yup.
-  // https://github.com/jquense/yup/issues/1159
-  // https://github.com/jquense/yup/issues/1247
-  // Consider revisiting once 'yup' has addressed these issues.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [field in keyof T]: any;
-};
+import { useDataProvider } from './helpers/useDataProvider';
+import { useValidationError } from './helpers/useValidationError';
 
 export interface FormStationProps<
   TValues extends Data = FormikValues,
@@ -89,28 +61,11 @@ export interface FormStationProps<
    * Called whenever the form needs to be saved.
    * This method needs to throw an exception in case the saving did not succeed.
    */
-  saveData: (
-    /** The current values of the form */
-    values: TValues,
-    /** The initial values of the form */
-    initialData: InitialFormData<TValues>,
-    /** The Formik state helpers */
-    formikHelpers: FormikHelpers<TValues>,
-  ) => Promise<TSubmitResponse> | void;
+  saveData: SaveDataFunction<TValues, TSubmitResponse>;
   /** CSS Class name for additional styles */
   className?: string;
-}
-
-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: StationErrorStateType) => void;
-  setValidationError: () => void;
-  submitResponse?: React.MutableRefObject<Y | undefined>;
-  alwaysSubmitBeforeAction?: boolean;
-  className?: string;
-  isFormSubmitting?: boolean;
+  /** Periodically calls saveData when the form values change */
+  autosave?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -131,141 +86,30 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   alwaysSubmitBeforeAction = false,
   stationMessage,
   className = '',
+  autosave = false,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
-  const [stationError, setStationError] = useState<StationErrorStateType>();
+  const currentValuesRef = React.useRef<TValues>({} as TValues);
 
-  const { setValidationError, validationWatcher } = useValidationError(
+  const {
+    onSubmit,
     stationError,
     setStationError,
+    isFormSubmitting,
+    lastSubmittedResponse,
+    initialValues,
+  } = useDataProvider<TValues, TSubmitResponse>(
+    initialData,
+    saveData,
+    currentValuesRef,
   );
 
-  const submitResponse = useRef<TSubmitResponse>();
-  const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
-
-  const onSubmit = useCallback(
-    async (
-      values: TValues,
-      formikHelpers: FormikHelpers<TValues>,
-    ): Promise<void> => {
-      if (isFormSubmitting) {
-        return;
-      }
-
-      try {
-        setIsFormSubmitting(true);
-        setSaveIndicator(SaveIndicatorType.Saving);
-        setStationError(undefined);
-        if (!initialData.loading && saveData) {
-          const response = await saveData(values, initialData, formikHelpers);
-          if (response) {
-            submitResponse.current = response;
-          }
-        }
-      } catch (error) {
-        setStationError(
-          ErrorTypeToStationError(
-            error as ErrorType,
-            'An error occurred when trying to save data.',
-          ),
-        );
-
-        setSaveIndicator(SaveIndicatorType.Dirty);
-
-        // We still throw the error, to make sure that navigation or action execution
-        // will not continue after a failed save.
-        throw error;
-      } finally {
-        formikHelpers.setSubmitting(false);
-        setIsFormSubmitting(false);
-      }
-    },
-    [isFormSubmitting, initialData, saveData, setStationError],
+  const { setValidationError, validationWatcher } = useValidationError(
+    stationError,
+    setStationError,
   );
 
-  useEffect(() => {
-    if (
-      initialData.error ||
-      (initialData.data === null && !initialData.loading) ||
-      initialData.entityNotFound
-    ) {
-      const stationError = {
-        ...ErrorTypeToStationError(
-          initialData.error,
-          'An error occurred when trying to load data.',
-          'Entity not found',
-        ),
-        type: 'loading',
-      };
-
-      setStationError(stationError);
-    } else {
-      if (stationError?.type === 'loading') {
-        // Only clear the error if it is a loading error, which now seems to be cleared.
-        setStationError(undefined);
-      }
-    }
-  }, [
-    initialData.loading,
-    initialData.error,
-    initialData.entityNotFound,
-    initialData.data,
-    stationError?.type,
-  ]);
-
-  const getContent = (): JSX.Element | undefined => {
-    if (initialData.loading) {
-      // TODO: Loading skeleton of the page
-      return;
-    }
-
-    if (
-      initialData.error ||
-      initialData.data === null ||
-      initialData.entityNotFound
-    ) {
-      // Error on loading - we can't show the form
-      return <div className={classes.loadingError}></div>;
-    }
-
-    // Loading successful
-    return (
-      <>
-        <SaveOnNavigate
-          isSubmitting={isFormSubmitting}
-          onNavigationCancelled={setValidationError}
-        />
-        <div className={classes.main}>
-          <div
-            className={clsx(classes.formWrapper, {
-              [classes.hasMessage]: stationMessage,
-            })}
-          >
-            {stationMessage && (
-              <MessageBar {...stationMessage}>{stationMessage.body}</MessageBar>
-            )}
-            <div
-              className={clsx(classes.formContainer, {
-                [classes.paddedContent]: !edgeToEdgeContent,
-              })}
-            >
-              <Form>
-                <>
-                  {children}
-                  {/* Adding a invisible text input here to prevent the browser from submitting on "Enter" when there is only a single text input field in the form
-                  See: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 */}
-                  <input type="text" style={{ display: 'none' }} />
-                </>
-              </Form>
-            </div>
-          </div>
-          {infoPanel}
-        </div>
-      </>
-    );
-  };
-
   return (
     <div
       className={clsx(
@@ -278,229 +122,50 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
       )}
     >
       <Formik
-        initialValues={initialData.data ?? ({} as TValues)}
+        initialValues={initialValues ?? ({} as TValues)}
         validationSchema={validationSchema}
         onSubmit={onSubmit}
         enableReinitialize={true}
       >
         <>
           {validationWatcher}
-          <FormStationHeader
-            titleProperty={titleProperty as string}
-            defaultTitle={defaultTitle}
-            subtitle={subtitle}
-            cancelNavigationUrl={cancelNavigationUrl}
-          />
-          {stationError && (
-            <div className={classes.errorMessage}>
-              <MessageBar
-                type="error"
-                title={String(stationError.title)}
-                onClose={() => setStationError(undefined)}
-              >
-                {stationError?.body}
-              </MessageBar>
-            </div>
-          )}
-          <div className={classes.children}>{getContent()}</div>
-          {alwaysShowActionsPanel || (actions?.length ?? 0) > 0 ? (
-            <FormStationAction<TValues, TSubmitResponse>
-              actions={actions}
-              width={actionsWidth}
-              validationSchema={validationSchema}
-              setStationError={setStationError}
-              setValidationError={setValidationError}
-              submitResponse={submitResponse}
-              alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
-              className={classes.actionsPanel}
+          <SaveOnNavigate isSubmitting={isFormSubmitting} />
+          <FormStationContextProvider<TValues>
+            autosave={autosave}
+            currentValuesRef={currentValuesRef}
+          >
+            <FormStationHeader
+              titleProperty={titleProperty as string}
+              defaultTitle={defaultTitle}
+              subtitle={subtitle}
+              cancelNavigationUrl={cancelNavigationUrl}
+              isFormSubmitting={isFormSubmitting}
             />
-          ) : null}
+            <FormContentWrapper
+              stationMessage={stationMessage}
+              edgeToEdgeContent={edgeToEdgeContent}
+              infoPanel={infoPanel}
+              initialData={initialData}
+              stationError={stationError}
+              setStationError={setStationError}
+            >
+              {children}
+            </FormContentWrapper>
+            {alwaysShowActionsPanel || (actions?.length ?? 0) > 0 ? (
+              <FormStationActions<TValues, TSubmitResponse>
+                actions={actions}
+                width={actionsWidth}
+                validationSchema={validationSchema}
+                setStationError={setStationError}
+                setValidationError={setValidationError}
+                submitResponse={lastSubmittedResponse}
+                alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
+                className={classes.actionsPanel}
+              />
+            ) : null}
+          </FormStationContextProvider>
         </>
       </Formik>
     </div>
   );
 };
-
-/**
- * Saves the form before the action is performed.
- */
-const FormStationAction = <T, Y>(
-  props: PropsWithChildren<FormActionProps<T, Y>>,
-): JSX.Element => {
-  const {
-    actions,
-    validationSchema,
-    setStationError,
-    setValidationError,
-    submitResponse,
-    alwaysSubmitBeforeAction,
-    className = '',
-  } = props;
-  const {
-    submitForm,
-    resetForm,
-    values,
-    validateForm,
-    isValid,
-    dirty,
-    isSubmitting,
-  } = useFormikContext<T>();
-
-  const updatedActions = useMemo(() => {
-    return actions?.map((action) => {
-      const { onActionSelected } = action;
-
-      return isNavigationAction(action)
-        ? action
-        : {
-            ...action,
-            isDisabled: action.isDisabled || isSubmitting,
-            onActionSelected: () => {
-              (async () => {
-                //TODO: Busy indicator (disable form?)
-                if (dirty || alwaysSubmitBeforeAction) {
-                  // We can't rely on 'isValid' alone, since that will only evaluate if the form is touched or 'submitForm' is called.
-                  // On a create station though the from might not be touched but still being invalid.
-                  // Also the validation on submitForm in here will not help, since the value of isValid is already bound to that method and will not change
-                  // anymore while this method executes - even if it changes on the context!
-                  if (
-                    !isValid ||
-                    (await validationSchema?.isValid(values)) === false
-                  ) {
-                    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;
-                  }
-
-                  try {
-                    await submitForm();
-
-                    // Committing the changed values to the form to get the current version as the new "reset" state.
-                    resetForm({ values });
-                  } catch (error) {
-                    // we will abort the action if saving is not successful
-                    // a station error is already set by the "onSubmit"
-                    return;
-                  }
-                }
-
-                try {
-                  const result =
-                    onActionSelected &&
-                    (await onActionSelected({
-                      values,
-                      submitResponse: submitResponse?.current,
-                    }));
-                  if (result !== undefined) {
-                    setStationError(
-                      ErrorTypeToStationError(
-                        result,
-                        'An error occurred when trying to execute the action.',
-                      ),
-                    );
-                  }
-                } catch (error) {
-                  const stationError = ErrorTypeToStationError(
-                    error as ErrorType,
-                    'An error occurred when trying to execute the action.',
-                  );
-                  setStationError(stationError);
-                }
-              })();
-            },
-          };
-    });
-  }, [
-    actions,
-    alwaysSubmitBeforeAction,
-    dirty,
-    isSubmitting,
-    isValid,
-    resetForm,
-    setStationError,
-    setValidationError,
-    submitForm,
-    submitResponse,
-    validateForm,
-    validationSchema,
-    values,
-  ]);
-
-  return (
-    <div className={className}>
-      <Actions actions={updatedActions} />
-    </div>
-  );
-};
-
-/**
- * Handles showRefresh and cancel buttons based on form states
- */
-const FormStationHeader: React.FC<
-  Omit<PageHeaderProps, 'title'> & {
-    titleProperty?: string;
-    defaultTitle?: string;
-    cancelNavigationUrl?: string;
-  }
-> = ({ titleProperty, defaultTitle, subtitle, cancelNavigationUrl }) => {
-  const { dirty, resetForm, values } = useFormikContext<FormikValues>();
-
-  useEffect(() => {
-    // Set the save indicator to dirty depending on the form state
-    if (dirty) {
-      setSaveIndicator(SaveIndicatorType.Dirty);
-    } else {
-      setSaveIndicator(SaveIndicatorType.Inactive);
-    }
-    return () => {
-      // The form is not always considered "not dirty" after the save
-      // so this code will make sure that the indicator is set to inactive
-      // when the station is left.
-      setSaveIndicator(SaveIndicatorType.Inactive);
-    };
-  }, [dirty]);
-
-  const history = useHistory();
-
-  const title =
-    titleProperty && values[titleProperty] !== ''
-      ? values[titleProperty]
-      : defaultTitle ?? '';
-
-  return (
-    <PageHeader
-      title={title}
-      subtitle={subtitle}
-      actions={[
-        ...(dirty === true // add undo action if form as been altered
-          ? [
-              {
-                label: 'Undo Changes',
-                icon: IconName.Undo,
-                actionType: PageHeaderActionType.Context,
-                onClick: () => {
-                  resetForm();
-                },
-              },
-            ]
-          : []),
-        ...(cancelNavigationUrl // add cancel action if applicable
-          ? [
-              {
-                label: 'Cancel',
-                icon: IconName.X,
-                onClick: () => {
-                  resetForm();
-                  // If the form has errors, Navigation needs to be wrapped in a promise or timeout.
-                  Promise.resolve().then(() =>
-                    history.push(cancelNavigationUrl),
-                  );
-                },
-              },
-            ]
-          : []),
-      ]}
-    />
-  );
-};

package/src/components/FormStation/FormStationActions/FormStationActions.tsx

@@ -0,0 +1,132 @@
+import { useFormikContext } from 'formik';
+import React, { PropsWithChildren, useMemo } from 'react';
+import { OptionalObjectSchema } from 'yup/lib/object';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { Actions, ActionsProps } from '../../Actions';
+import { isNavigationAction } from '../../Actions/Action/Action';
+import { ErrorType, StationError } from '../../models';
+import { FormActionData, ObjectSchemaDefinition } from '../FormStation.models';
+
+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;
+  setValidationError: () => void;
+  submitResponse?: React.MutableRefObject<Y | undefined>;
+  alwaysSubmitBeforeAction?: boolean;
+  className?: string;
+  isFormSubmitting?: boolean;
+}
+
+/**
+ * Saves the form before the action is performed.
+ */
+export const FormStationActions = <T, Y>(
+  props: PropsWithChildren<FormActionProps<T, Y>>,
+): JSX.Element => {
+  const {
+    actions,
+    validationSchema,
+    setStationError,
+    submitResponse,
+    alwaysSubmitBeforeAction,
+    className = '',
+  } = props;
+  const {
+    submitForm,
+    resetForm,
+    values,
+    validateForm,
+    isValid,
+    dirty,
+    isSubmitting,
+  } = useFormikContext<T>();
+
+  const updatedActions = useMemo(() => {
+    return actions?.map((action) => {
+      const { onActionSelected } = action;
+
+      return isNavigationAction(action)
+        ? action
+        : {
+            ...action,
+            isDisabled: action.isDisabled || isSubmitting,
+            onActionSelected: () => {
+              (async () => {
+                //TODO: Busy indicator (disable form?)
+                if (dirty || alwaysSubmitBeforeAction) {
+                  // We can't rely on 'isValid' alone, since that will only evaluate if the form is touched or 'submitForm' is called.
+                  // On a create station though the from might not be touched but still being invalid.
+                  // Also the validation on submitForm in here will not help, since the value of isValid is already bound to that method and will not change
+                  // anymore while this method executes - even if it changes on the context!
+                  if (
+                    !isValid ||
+                    (await validationSchema?.isValid(values)) === false
+                  ) {
+                    // eslint-disable-next-line no-console
+                    console.log('form invalid, action not performed');
+                    // 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;
+                  }
+
+                  try {
+                    await submitForm();
+
+                    // Committing the changed values to the form to get the current version as the new "reset" state.
+                    resetForm({ values });
+                  } catch (error) {
+                    // we will abort the action if saving is not successful
+                    // a station error is already set by the "onSubmit"
+                    return;
+                  }
+                }
+
+                try {
+                  const result =
+                    onActionSelected &&
+                    (await onActionSelected({
+                      values,
+                      submitResponse: submitResponse?.current,
+                    }));
+                  if (result !== undefined) {
+                    setStationError(
+                      ErrorTypeToStationError(
+                        result,
+                        'An error occurred when trying to execute the action.',
+                      ),
+                    );
+                  }
+                } catch (error) {
+                  const stationError = ErrorTypeToStationError(
+                    error as ErrorType,
+                    'An error occurred when trying to execute the action.',
+                  );
+                  setStationError(stationError);
+                }
+              })();
+            },
+          };
+    });
+  }, [
+    actions,
+    alwaysSubmitBeforeAction,
+    dirty,
+    isSubmitting,
+    isValid,
+    resetForm,
+    setStationError,
+    submitForm,
+    submitResponse,
+    validateForm,
+    validationSchema,
+    values,
+  ]);
+
+  return (
+    <div className={className}>
+      <Actions actions={updatedActions} />
+    </div>
+  );
+};

package/src/components/FormStation/FormStationContext/FormStationContext.ts

@@ -0,0 +1,22 @@
+import type { FormikValues } from 'formik';
+import React from 'react';
+import { noop } from '../../../helpers/utils';
+import { ChangeSet } from '../helpers/useChangeSets';
+
+export interface FormStationContextType {
+  changeSets: ChangeSet<FormikValues>[];
+  pushChangeSet: (value: never) => void;
+  popChangeSet: () => ChangeSet<FormikValues> | undefined;
+  clearChangeSets: () => FormikValues;
+  lastUndoneValue: React.MutableRefObject<FormikValues>;
+  autosave: boolean;
+}
+
+export const FormStationContext = React.createContext<FormStationContextType>({
+  changeSets: [],
+  pushChangeSet: noop,
+  popChangeSet: () => ({ prev: {}, next: {} }),
+  clearChangeSets: () => ({}),
+  lastUndoneValue: { current: {} },
+  autosave: false,
+});