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

package/src/components/FormStation/FormStationContentWrapper/FormStationContentWrapper.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+import { Form } from 'formik';
+import React from 'react';
+import { Data } from '../../../types';
+import { MessageBar } from '../../MessageBar';
+import { FormGrid } from '../FormGrid';
+import { FormStationProps } from '../FormStation';
+import { StationErrorStateType } from '../FormStation.models';
+import classes from './FormStationContentWrapper.scss';
+
+interface FormStationContentWrapperProps
+  extends Pick<
+    FormStationProps<Data>,
+    'stationMessage' | 'edgeToEdgeContent' | 'infoPanel' | 'initialData'
+  > {
+  stationError?: StationErrorStateType;
+  setStationError: React.Dispatch<
+    React.SetStateAction<StationErrorStateType | undefined>
+  >;
+}
+
+export const FormStationContentWrapper: React.FC<
+  FormStationContentWrapperProps
+> = ({
+  stationMessage,
+  edgeToEdgeContent,
+  infoPanel,
+  initialData,
+  stationError,
+  setStationError,
+  children,
+}) => (
+  <>
+    {stationError && (
+      <div className={classes.errorMessage}>
+        <MessageBar
+          type="error"
+          title={String(stationError.title)}
+          onClose={() => setStationError(undefined)}
+        >
+          {stationError?.body}
+        </MessageBar>
+      </div>
+    )}
+    {initialData.loading ? (
+      // TODO: Loading skeleton of the page
+      <></>
+    ) : initialData.error ||
+      initialData.data === null ||
+      initialData.entityNotFound ? (
+      // Error on loading - we can't show the form
+      <div className={classes.loadingError}></div>
+    ) : (
+      <div className={classes.children}>
+        <div className={classes.main}>
+          <div
+            className={clsx(classes.formWrapper, {
+              [classes.hasMessage]: stationMessage,
+            })}
+          >
+            {stationMessage && <MessageBar {...stationMessage} />}
+            <Form>
+              <FormGrid edgeToEdgeContent={edgeToEdgeContent}>
+                {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' }} />
+              </FormGrid>
+            </Form>
+          </div>
+          {infoPanel}
+        </div>
+      </div>
+    )}
+  </>
+);

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

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

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -0,0 +1,88 @@
+import { FormikValues, useFormikContext } from 'formik';
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
+import { IconName } from '../../Icons';
+import {
+  PageHeader,
+  PageHeaderActionType,
+  PageHeaderProps,
+} from '../../PageHeader';
+
+/**
+ * Handles showRefresh and cancel buttons based on form states
+ */
+export const FormStationHeader: React.FC<
+  Omit<PageHeaderProps, 'title'> & {
+    titleProperty?: string;
+    defaultTitle?: string;
+    cancelNavigationUrl?: string;
+  }
+> = ({
+  titleProperty,
+  defaultTitle,
+  subtitle,
+  cancelNavigationUrl,
+  className,
+}) => {
+  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}
+      className={className}
+      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/FormStationHeader/index.ts

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

package/src/components/FormStation/helpers/useDataProvider.ts

@@ -0,0 +1,124 @@
+import { FormikHelpers } from 'formik';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { SaveIndicatorType, setSaveIndicator } from '../../../initialize';
+import { Data } from '../../../types';
+import { ErrorTypeToStationError } from '../../../utils/ErrorTypeToStationError';
+import { ErrorType } from '../../models';
+import {
+  InitialFormData,
+  SaveDataFunction,
+  StationErrorStateType,
+} from '../FormStation.models';
+
+export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
+  initialData: InitialFormData<TValues>,
+  saveData: SaveDataFunction<TValues, TSubmitResponse>,
+) => {
+  onSubmit: (
+    values: TValues,
+    formikHelpers: FormikHelpers<TValues>,
+  ) => Promise<void>;
+  stationError?: StationErrorStateType;
+  setStationError: Dispatch<SetStateAction<StationErrorStateType | undefined>>;
+  isFormSubmitting: boolean;
+  lastSubmittedResponse: React.MutableRefObject<TSubmitResponse | undefined>;
+  initialValues: TValues | null | undefined;
+};
+
+export const useDataProvider: FormStationDataProvider = <
+  TValues extends Data,
+  TSubmitResponse,
+>(
+  initialData: InitialFormData<TValues>,
+  saveData: SaveDataFunction<TValues, TSubmitResponse>,
+) => {
+  const [stationError, setStationError] = useState<StationErrorStateType>();
+  const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
+  const lastSubmittedResponse = useRef<TSubmitResponse>();
+
+  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 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) {
+            lastSubmittedResponse.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],
+  );
+
+  return {
+    onSubmit,
+    stationError,
+    setStationError,
+    isFormSubmitting,
+    lastSubmittedResponse,
+    initialValues: initialData.data,
+  };
+};

package/src/components/FormStation/{useValidationError.tsx → helpers/useValidationError.tsx}

@@ -1,6 +1,6 @@
 import { useFormikContext } from 'formik';
 import React, { useCallback, useEffect, useState } from 'react';
-import { StationErrorStateType } from './StationErrorStateType';
+import { StationErrorStateType } from '../FormStation.models';
 
 /**
  * Component that watches for changes in the form validation state
@@ -15,6 +15,7 @@ const ValidationWatcher: React.FC<{
   }, [formik.isValid, isValid]);
   return null;
 };
+
 /**
  * Cares for showing (and removing) validation errors.
  * @param stationError the currently showing error

package/src/components/FormStation/index.ts

@@ -1,8 +1,5 @@
 export { Create, CreateProps } from './Create/Create';
 export { Details, DetailsProps } from './Details/Details';
-export {
-  FormStation,
-  FormStationProps,
-  ObjectSchemaDefinition,
-} from './FormStation';
+export { FormGrid } from './FormGrid';
+export { FormStation, FormStationProps } from './FormStation';
 export * from './FormStation.models';

package/dist/components/FormStation/StationErrorStateType.d.ts

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

package/dist/components/FormStation/StationErrorStateType.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StationErrorStateType.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/StationErrorStateType.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/components/FormStation/useValidationError.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useValidationError.d.ts","sourceRoot":"","sources":["../../../src/components/FormStation/useValidationError.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAehE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,qBAAqB,GAAG,SAAS,EAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAC7B,KAAK,CAAC,cAAc,CAAC,qBAAqB,GAAG,SAAS,CAAC,CACxD,GACA;IACD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC;CAChC,CAyBA"}

package/src/components/FormStation/StationErrorStateType.tsx

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