@axinom/mosaic-ui 0.42.0 → 0.43.0-rc.1

package/src/components/FormStation/FormStation.tsx

@@ -1,51 +1,22 @@
 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 { StationMessage } from '../models';
 import {
-  PageHeader,
-  PageHeaderActionType,
-  PageHeaderProps,
-} from '../PageHeader';
-import { ErrorType, StationMessage } from '../models';
-import { FormActionData, InitialFormData } from './FormStation.models';
+  FormActionData,
+  InitialFormData,
+  ObjectSchemaDefinition,
+  SaveDataFunction,
+} from './FormStation.models';
 import classes from './FormStation.scss';
+import { FormStationAction } from './FormStationActions';
+import { FormStationContentWrapper } from './FormStationContentWrapper';
+import { FormStationHeader } from './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,31 +60,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;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   titleProperty,
   defaultTitle,
@@ -134,138 +85,19 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
-  const [stationError, setStationError] = useState<StationErrorStateType>();
+  const {
+    onSubmit,
+    stationError,
+    setStationError,
+    isFormSubmitting,
+    lastSubmittedResponse,
+  } = useDataProvider(initialData, saveData);
 
   const { setValidationError, validationWatcher } = useValidationError(
     stationError,
     setStationError,
   );
 
-  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],
-  );
-
-  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(
@@ -290,217 +122,36 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             defaultTitle={defaultTitle}
             subtitle={subtitle}
             cancelNavigationUrl={cancelNavigationUrl}
+            className={classes.header}
           />
-          {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 ? (
+          <SaveOnNavigate
+            isSubmitting={isFormSubmitting}
+            onNavigationCancelled={setValidationError}
+          />
+          <FormStationContentWrapper
+            stationMessage={stationMessage}
+            edgeToEdgeContent={edgeToEdgeContent}
+            infoPanel={infoPanel}
+            initialData={initialData}
+            stationError={stationError}
+            setStationError={setStationError}
+          >
+            {children}
+          </FormStationContentWrapper>
+          {(alwaysShowActionsPanel || (actions?.length ?? 0) > 0) && (
             <FormStationAction<TValues, TSubmitResponse>
               actions={actions}
               width={actionsWidth}
               validationSchema={validationSchema}
               setStationError={setStationError}
               setValidationError={setValidationError}
-              submitResponse={submitResponse}
+              submitResponse={lastSubmittedResponse}
               alwaysSubmitBeforeAction={alwaysSubmitBeforeAction}
               className={classes.actionsPanel}
             />
-          ) : null}
+          )}
         </>
       </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,130 @@
+import { useFormikContext } from 'formik';
+import React, { PropsWithChildren, useMemo } from 'react';
+import { OptionalObjectSchema } from 'yup/lib/object';
+import { ObjectSchemaDefinition } from '..';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { Actions, ActionsProps } from '../../Actions';
+import { isNavigationAction } from '../../Actions/Action/Action';
+import { ErrorType } from '../../models';
+import { FormActionData, StationErrorStateType } 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: StationErrorStateType) => void;
+  setValidationError: () => void;
+  submitResponse?: React.MutableRefObject<Y | undefined>;
+  alwaysSubmitBeforeAction?: boolean;
+  className?: string;
+  isFormSubmitting?: boolean;
+}
+
+/**
+ * Saves the form before the action is performed.
+ */
+export 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 <Actions actions={updatedActions} className={className} />;
+};

package/src/components/FormStation/FormStationActions/index.ts

@@ -0,0 +1 @@
+export * from './FormStationActions';

package/src/components/FormStation/FormStationContentWrapper/FormStationContentWrapper.scss

@@ -0,0 +1,66 @@
+@import '../../../styles/common.scss';
+
+// Extend all components, except PageHeader, to the bottom
+// Enable scrolling children
+.children {
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  overflow: hidden;
+
+  .main {
+    display: grid;
+    grid: 1fr / minmax(740px, 1fr) auto;
+
+    overflow-y: auto;
+    scrollbar-width: thin; //for Firefox only
+
+    .formWrapper {
+      display: grid;
+      grid: 1fr / 1fr;
+
+      &.hasMessage {
+        grid: min-content 1fr / 1fr;
+      }
+    }
+  }
+
+  //Custom scrollbar for Chrome, Safari and Edge
+  ::-webkit-scrollbar {
+    width: var(--scrollbar-size, $scrollbar-size);
+    height: var(--scrollbar-size, $scrollbar-size);
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color, $scrollbar-track-color);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(
+      --scrollbar-thumb-hover-color,
+      $scrollbar-thumb-hover-color
+    );
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
+  }
+
+  .formContainer {
+    padding: 30px;
+  }
+
+  .loadingError {
+    display: grid;
+    grid: 1fr / 1fr;
+  }
+}
+
+.errorMessage {
+  grid-row: 2 / 3;
+  grid-column: 1 / -1;
+}