@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/Forms/CollapsibleFormSection.tsx

@@ -1,21 +1,54 @@
+import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
-import CollapsibleSection from "../CollapsibleSection/CollapsibleSection";
+import { translationKey } from "../../Utils/TranslateTemplate";
+import FoldedSection from "../FoldedSection/FoldedSection";
+import { FoldedSectionItem } from "../FoldedSection/FoldedSectionItem";
+import {
+  OpenFormSectionsContext,
+  ReportFormSectionOpenFunction,
+} from "./Utils/OpenFormSections";
 import React, {
   FunctionComponent,
   ReactElement,
+  useContext,
   useEffect,
+  useId,
+  useLayoutEffect,
   useState,
 } from "react";
 
+/*
+ * A form's folded section (FormFieldCollapsibleSection), drawn as a
+ * FoldedSection: "More fields" (getAdvancedFormSection) and every other
+ * section a form folds its fields into - "Subscriber Notifications",
+ * "Layout", "Add a public note".
+ *
+ * Folded, its header says what is inside:
+ *   - a section that lists its fields (More fields, whose title says
+ *     nothing of what it holds) names them, the set ones as chips that say
+ *     what they are set to, with its summary sentences under them;
+ *   - any other section shows its summary sentences when it has them - they
+ *     say what is set already - and otherwise the chips of its set fields;
+ *   - a section that says it is configured but has no set field to show
+ *     (its own isConfigured knows better than its fields) says
+ *     "Configured".
+ */
+
 export interface ComponentProps {
   title: string;
   description?: string | undefined;
+  /*
+   * The section's id (FormFieldCollapsibleSection.id). The dialog the form
+   * is in is told when the section opens and folds, so it can grow to fit
+   * what opening it shows (Forms/Utils/OpenFormSections.ts).
+   */
+  sectionId?: string | undefined;
   isConfigured: boolean;
   /*
    * Whether being configured opens the section: when the form opens with a
    * value in it, and when a default arrives after the fields have loaded.
-   * True when left out. An Advanced section passes false and stays folded,
-   * saying "Configured" on its header instead (see
+   * True when left out. A More fields section passes false and stays
+   * folded, showing what is set on its header instead (see
    * FormFieldCollapsibleSection.openWhenConfigured).
    */
   openWhenConfigured?: boolean | undefined;
@@ -25,12 +58,22 @@ export interface ComponentProps {
   /*
    * What the folded fields are set to (FormFieldCollapsibleSection
    * .getSummary): whole English sentences, each looked up on its own, shown
-   * under the title while the section is folded in place of "Configured".
+   * on the folded header.
    */
   summary?: Array<string> | undefined;
+  /*
+   * The section's fields as the folded header lists them
+   * (Forms/Utils/FoldedFormFields): every field, set or not, in order.
+   */
+  items?: Array<FoldedSectionItem> | undefined;
+  // List every field while folded (More fields), not only the set ones.
+  listFieldsWhileFolded?: boolean | undefined;
+  icon?: IconProp | undefined;
   children: ReactElement;
 }
 
+export const CONFIGURED_BADGE: string = translationKey("Configured");
+
 const CollapsibleFormSection: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -40,6 +83,38 @@ const CollapsibleFormSection: FunctionComponent<ComponentProps> = (
     openWhenConfigured ? !props.isConfigured : true,
   );
 
+  const reportSectionOpen: ReportFormSectionOpenFunction | null = useContext(
+    OpenFormSectionsContext,
+  );
+  const instanceId: string = useId();
+
+  /*
+   * Before paint, so a dialog that grows for what the section shows is
+   * never drawn a frame too narrow - a section that starts open included.
+   * Folded again, or gone (another step, the dialog closing), it says so.
+   */
+  useLayoutEffect(() => {
+    if (!reportSectionOpen || !props.sectionId) {
+      return undefined;
+    }
+
+    const sectionId: string = props.sectionId;
+
+    reportSectionOpen({
+      instanceId: instanceId,
+      sectionId: sectionId,
+      isOpen: !isCollapsed,
+    });
+
+    return () => {
+      reportSectionOpen({
+        instanceId: instanceId,
+        sectionId: sectionId,
+        isOpen: false,
+      });
+    };
+  }, [isCollapsed, reportSectionOpen, props.sectionId, instanceId]);
+
   useEffect(() => {
     // Field defaults can arrive after the form has loaded its field definitions.
     if (openWhenConfigured && props.isConfigured) {
@@ -63,29 +138,44 @@ const CollapsibleFormSection: FunctionComponent<ComponentProps> = (
     })
     .join(" ");
 
+  const allItems: Array<FoldedSectionItem> = props.items || [];
+
+  /*
+   * A section that lists its fields shows them all. Any other section shows
+   * its sentences when it has them - they already say what is set - and
+   * otherwise only its set fields.
+   */
+  const items: Array<FoldedSectionItem> = props.listFieldsWhileFolded
+    ? allItems
+    : summary
+      ? []
+      : allItems.filter((item: FoldedSectionItem): boolean => {
+          return item.isSet;
+        });
+
+  const hasSetItem: boolean = items.some((item: FoldedSectionItem) => {
+    return item.isSet;
+  });
+
   return (
-    <CollapsibleSection
-      title={translateString(props.title) ?? props.title}
-      description={
-        props.description
-          ? translateString(props.description) ?? props.description
+    <FoldedSection
+      title={props.title}
+      description={props.description}
+      icon={props.icon}
+      items={items}
+      summary={summary || undefined}
+      badge={
+        props.isConfigured && !hasSetItem && !summary
+          ? CONFIGURED_BADGE
           : undefined
       }
-      collapsedDescription={summary || undefined}
-      variant="bordered"
       className={props.className}
       isCollapsed={isCollapsed}
       onToggle={setIsCollapsed}
-      badge={
-        // A summary already says what is set; the badge would only repeat it.
-        props.isConfigured && !summary
-          ? translateString("Configured") ?? "Configured"
-          : undefined
-      }
     >
       {/* Keep editors mounted without leaving collapsed controls focusable. */}
       <div hidden={isCollapsed}>{props.children}</div>
-    </CollapsibleSection>
+    </FoldedSection>
   );
 };
 

package/UI/Components/Forms/Fields/FormField.tsx

@@ -8,6 +8,10 @@ import CheckboxElement, {
 import CodeEditor, { CodeEditorActions } from "../../CodeEditor/CodeEditor";
 import DictionaryForm, { ValueType } from "../../Dictionary/Dictionary";
 import Dropdown, { DropdownValue } from "../../Dropdown/Dropdown";
+import {
+  DropdownChange,
+  getDropdownChange,
+} from "../../Dropdown/DropdownChange";
 import EntityDropdown from "../../EntityDropdown/EntityDropdown";
 import FilePicker from "../../FilePicker/FilePicker";
 import Input, { InputType } from "../../Input/Input";
@@ -44,8 +48,12 @@ import YamlEditor from "../../CodeEditor/YamlEditor";
 import PeoplePicker from "../../PeoplePicker/PeoplePicker";
 import {
   getPeoplePickerKinds,
+  PeoplePickerChange,
+  PeoplePickerFormValue,
   PeoplePickerValue,
+  readPeoplePickerExcludedValue,
   readPeoplePickerFormValue,
+  toPeoplePickerDropdownChange,
   toPeoplePickerFormValues,
 } from "../../PeoplePicker/PeoplePickerTypes";
 import InsertTemplateVariableButton from "../../TemplateVariables/InsertTemplateVariableButton";
@@ -110,9 +118,15 @@ const FormField: <T extends GenericObject>(
    */
   const fieldLabelId: string = `${fieldId}-label`;
 
-  type onChangeFunction = (value: JSONValue) => void;
+  type onChangeFunction = (
+    value: JSONValue,
+    change?: DropdownChange | undefined,
+  ) => void;
 
-  const onChange: onChangeFunction = (value: JSONValue): void => {
+  const onChange: onChangeFunction = (
+    value: JSONValue,
+    change?: DropdownChange | undefined,
+  ): void => {
     if (props.field.onChange) {
       props.field.onChange(
         value,
@@ -120,6 +134,7 @@ const FormField: <T extends GenericObject>(
         (newFormValues: FormValues<T>) => {
           props.setFormValues?.(newFormValues);
         },
+        change,
       );
     }
   };
@@ -631,8 +646,9 @@ const FormField: <T extends GenericObject>(
                 disabled={props.field.disabled}
                 onChange={(
                   value: DropdownValue | Array<DropdownValue> | null,
+                  change?: DropdownChange,
                 ) => {
-                  onChange(value);
+                  onChange(value, change);
                   props.setFieldValue(props.fieldName, value as JSONValue);
                 }}
                 onBlur={() => {
@@ -645,6 +661,7 @@ const FormField: <T extends GenericObject>(
                 modelType={props.field.dropdownModal.type}
                 labelField={props.field.dropdownModal.labelField}
                 valueField={props.field.dropdownModal.valueField}
+                query={props.field.dropdownModal.query}
                 onLabelsBulkAdded={props.field.onLabelsBulkAdded}
                 options={props.field.dropdownOptions || []}
                 placeholder={translatedPlaceholder || ""}
@@ -666,7 +683,25 @@ const FormField: <T extends GenericObject>(
                 onChange={async (
                   value: DropdownValue | Array<DropdownValue> | null,
                 ) => {
-                  onChange(value);
+                  /*
+                   * A fixed list holds every option, so what the pick
+                   * changed is read from it (an EntityDropdown reports its
+                   * own, above).
+                   */
+                  onChange(
+                    value,
+                    props.field.onChange
+                      ? getDropdownChange({
+                          options: props.field.dropdownOptions,
+                          value: value,
+                          previousValue: props.currentValues
+                            ? (props.currentValues as Record<string, unknown>)[
+                                props.fieldName
+                              ]
+                            : undefined,
+                        })
+                      : undefined,
+                  );
                   props.setFieldValue(props.fieldName, value);
                 }}
                 onBlur={async () => {
@@ -977,7 +1012,12 @@ const FormField: <T extends GenericObject>(
           {/*
            * One picker writing a form value per kind - owners are the
            * people in ownerUsers and the teams in ownerTeams - so each is
-           * written to the form on its own, as two dropdowns used to.
+           * written to the form on its own, as two dropdowns used to. A
+           * picker that takes one pick writes each kind's one id, or null:
+           * the kind not picked is cleared. Its search list leaves out what
+           * the form values its excludePicksOf names hold right now. The
+           * field's own onChange hears what was picked by name, as a
+           * dropdown's does (an owner rule is named after its owners).
            */}
           {props.field.fieldType === FormFieldSchemaType.PeoplePicker &&
             props.field.peoplePicker && (
@@ -987,21 +1027,22 @@ const FormField: <T extends GenericObject>(
                   props.field.peoplePicker,
                   props.currentValues,
                 )}
-                onChange={(value: PeoplePickerValue) => {
-                  const formValues: Record<
-                    string,
-                    Array<string>
-                  > = toPeoplePickerFormValues(
-                    props.field.peoplePicker!,
-                    value,
-                  );
+                onChange={(
+                  value: PeoplePickerValue,
+                  change?: PeoplePickerChange,
+                ) => {
+                  const formValues: Record<string, PeoplePickerFormValue> =
+                    toPeoplePickerFormValues(props.field.peoplePicker!, value);
 
-                  onChange(formValues);
+                  onChange(
+                    formValues,
+                    change ? toPeoplePickerDropdownChange(change) : undefined,
+                  );
 
                   for (const valueKey of Object.keys(formValues)) {
                     props.setFieldValue(
                       valueKey,
-                      formValues[valueKey] as Array<string>,
+                      formValues[valueKey] as PeoplePickerFormValue,
                     );
                   }
 
@@ -1013,6 +1054,11 @@ const FormField: <T extends GenericObject>(
                 addButtonText={props.field.peoplePicker.addButtonText}
                 searchPlaceholder={props.field.peoplePicker.searchPlaceholder}
                 emptyText={props.field.peoplePicker.emptyText}
+                isSinglePick={props.field.peoplePicker.isSinglePick}
+                excluded={readPeoplePickerExcludedValue(
+                  props.field.peoplePicker,
+                  props.currentValues,
+                )}
                 disabled={props.field.disabled}
                 error={props.touched && props.error ? props.error : undefined}
                 ariaLabelledby={fieldLabelId}
@@ -1094,6 +1140,7 @@ const FormField: <T extends GenericObject>(
                     : []
               }
               isMultiFilePicker={isMultiFileField}
+              maxFileSizeInBytes={props.field.maxFileSizeInBytes}
               dataTestId={props.field.dataTestId}
               initialValue={
                 props.currentValues &&

package/UI/Components/Forms/Fields/GeneratedKeyField.tsx

@@ -290,11 +290,7 @@ export const getGeneratedKeyFormField: GetGeneratedKeyFormFieldFunction = <
     ...(options.dataTestId ? { dataTestId: options.dataTestId } : {}),
     fieldType: FormFieldSchemaType.CustomComponent,
     customElementDrawsOwnLabel: true,
-    /*
-     * Writes a key only when one is typed; left alone, the server makes it
-     * from the name.
-     */
-    customElementCanBeSkipped: true,
+    // Left alone, the server makes the key from the name.
     required: false,
     hideOptionalLabel: true,
     // Made once, at create. A key that changes later is an Edit form field.

package/UI/Components/Forms/FormSummary.tsx

@@ -224,8 +224,10 @@ const getPeoplePickerSummaryElement: <T extends GenericObject>(
  * user's (isFormFieldValueSet: a value other than empty or its default, a
  * switch off its default). Declare Incident's Advanced options left alone
  * would otherwise come back as four rows nobody touched, on the one screen
- * meant to confirm what was chosen. A field shown only under a condition
- * follows that condition, as everywhere else.
+ * meant to confirm what was chosen. A folded field marked alwaysInSummary
+ * is listed whatever it holds: a default to read before saving, such as
+ * whether status page subscribers are emailed. A field shown only under a
+ * condition follows that condition, as everywhere else.
  */
 export const isListedInFormSummary: <T extends GenericObject>(
   field: Field<T>,
@@ -238,7 +240,7 @@ export const isListedInFormSummary: <T extends GenericObject>(
     return false;
   }
 
-  if (field.collapsibleSection) {
+  if (field.collapsibleSection && !field.alwaysInSummary) {
     return isFormFieldValueSet(field, formValues);
   }
 

package/UI/Components/Forms/ModelForm.tsx

@@ -35,11 +35,14 @@ import FormValues from "./Types/FormValues";
 import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import {
   CreateFormColumnDefault,
+  getColorsInUse,
+  getCreateFormColorDefault,
   getCreateFormColumnDefault,
 } from "./Utils/CreateFormDefaults";
 import {
   getPeoplePickerValueKeys,
-  toPeoplePickerIds,
+  PeoplePickerFormValue,
+  toPeoplePickerFormValue,
 } from "../PeoplePicker/PeoplePickerTypes";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 import AccessControlModel from "../../../Models/DatabaseModels/DatabaseBaseModel/AccessControlModel";
@@ -70,6 +73,7 @@ import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
 import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
 import useTranslator from "../../Utils/UseTranslator";
 import useAsyncEffect from "use-async-effect";
+import Query from "../../../Types/BaseDatabase/Query";
 import Select from "../../../Types/BaseDatabase/Select";
 import Sort from "../../../Types/BaseDatabase/Sort";
 
@@ -159,9 +163,8 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   hideSubmitButton?: undefined | boolean;
   submitButtonStyleType?: ButtonStyleType | undefined;
   formRef?: undefined | MutableRefObject<FormProps<FormValues<TBaseModel>>>;
+  // Whether the step on screen is the last one (see BasicForm).
   onIsLastFormStep?: undefined | ((isLastFormStep: boolean) => void);
-  // Whether the form can be finished from the step on screen (see BasicForm).
-  onCanFinishFromCurrentStep?: undefined | ((canFinish: boolean) => void);
   onLoadingChange?: undefined | ((isLoading: boolean) => void);
   initialValues?: FormValues<TBaseModel> | undefined;
   modelIdToEdit?: ObjectID | undefined;
@@ -170,11 +173,28 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   onBeforeUpdate?: ModelFormOnBeforeUpdate<TBaseModel> | undefined;
   saveRequestOptions?: RequestOptions | undefined;
   doNotFetchExistingModel?: boolean | undefined;
+  /*
+   * An Update form that opens on a draft of some of its fields - a
+   * postmortem template, or a postmortem AI wrote - rather than on the
+   * record alone. The form still fetches the record, and these values are
+   * laid over it: every field the draft leaves out starts from what is
+   * stored. (doNotFetchExistingModel with initialValues starts those fields
+   * empty instead, and BasicForm sends an untouched switch as off, so saving
+   * a draft quietly turned the postmortem's status page switch off.)
+   */
+  draftValues?: FormValues<TBaseModel> | undefined;
   modelAPI?: typeof ModelAPI | undefined;
   summary?: FormSummaryConfig | undefined;
   values?: FormValues<TBaseModel> | undefined;
   // Any step can be opened from the step list (see BasicForm).
   allowAnyStepNavigation?: boolean | undefined;
+  /*
+   * Records of this model listed beside a Create form - the rows of the
+   * table it was opened from (ModelTable hands them over). A colour the form
+   * picks for a new record is one none of them uses yet
+   * (Utils/CreateFormDefaults, getCreateFormColorDefault).
+   */
+  existingItems?: Array<TBaseModel> | undefined;
 }
 
 const ModelForm: <TBaseModel extends BaseModel>(
@@ -223,6 +243,19 @@ const ModelForm: <TBaseModel extends BaseModel>(
 
   const fieldsRunGeneration: MutableRefObject<number> = useRef<number>(0);
 
+  /*
+   * The colour a Create form picked for each colour field, by form key. The
+   * fields are worked out again on every render of the page around the form,
+   * and the rows beside it can be fetched again while it is open: the pick is
+   * made once, so the colour the form shows - and that a folded section
+   * compares with - never changes under the user. One pick per record: a
+   * form never resets itself after a save, and every Create opens a form of
+   * its own (a table's dialog is unmounted when it closes).
+   */
+  const pickedColorDefaults: MutableRefObject<Dictionary<string>> = useRef<
+    Dictionary<string>
+  >({});
+
   const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
 
   /*
@@ -414,6 +447,20 @@ const ModelForm: <TBaseModel extends BaseModel>(
     return fieldPermissions;
   };
 
+  type HasInitialValueFunction = (key: string) => boolean;
+
+  /*
+   * Whether the form starts with a value of its own for this key - empty
+   * included, as BasicForm reads it: it fills in a default only where the
+   * value is undefined.
+   */
+  const hasInitialValue: HasInitialValueFunction = (key: string): boolean => {
+    return (
+      (props.initialValues as Record<string, unknown> | undefined)?.[key] !==
+      undefined
+    );
+  };
+
   const setFormFields: PromiseVoidFunction = async (): Promise<void> => {
     fieldsRunGeneration.current = fieldsRunGeneration.current + 1;
     const generation: number = fieldsRunGeneration.current;
@@ -487,17 +534,47 @@ const ModelForm: <TBaseModel extends BaseModel>(
            * the server stores for a field left out - unless the field or the
            * form's initial values say otherwise (Utils/CreateFormDefaults).
            * Without this a switch whose column defaults to on was drawn off
-           * and saved off. An Edit form shows the record as it is.
+           * and saved off. An Edit form shows the record as it is, but its
+           * folded sections still compare with the column's default, so a
+           * switch on because its column starts on is not shown as set.
            */
           const columnDefault: CreateFormColumnDefault | undefined =
+            getCreateFormColumnDefault(model, field);
+
+          /*
+           * A colour the record cannot be saved without, and whose column
+           * has no default, starts picked: one the records beside the form
+           * do not use yet. Not over a colour the form already starts with.
+           */
+          if (
+            props.formType === FormType.Create &&
+            columnDefault === undefined &&
+            pickedColorDefaults.current[effectiveFieldKey] === undefined &&
+            !hasInitialValue(effectiveFieldKey)
+          ) {
+            const colorDefault: string | undefined = getCreateFormColorDefault(
+              model,
+              field,
+              getColorsInUse(field, props.existingItems),
+            );
+
+            if (colorDefault) {
+              pickedColorDefaults.current[effectiveFieldKey] = colorDefault;
+            }
+          }
+
+          const createDefault: CreateFormColumnDefault | undefined =
             props.formType === FormType.Create
-              ? getCreateFormColumnDefault(model, field)
+              ? columnDefault ?? pickedColorDefaults.current[effectiveFieldKey]
               : undefined;
 
           fieldsToSet.push({
             ...field,
+            ...(createDefault !== undefined
+              ? { defaultValue: createDefault }
+              : {}),
             ...(columnDefault !== undefined
-              ? { defaultValue: columnDefault }
+              ? { columnDefaultValue: columnDefault }
               : {}),
             field: {
               [key]: true,
@@ -653,9 +730,10 @@ const ModelForm: <TBaseModel extends BaseModel>(
 
   /*
    * What a dropdown's options depend on, and nothing else: the model, the
-   * two columns read off it, and the order it is listed in. The request below
-   * takes no query and no closure state, so two fields with the same four
-   * always get the same list back - which is what makes caching them safe.
+   * two columns read off it, the order it is listed in and the query that
+   * narrows it. The request below takes no closure state, so two fields with
+   * the same five always get the same list back - which is what makes
+   * caching them safe.
    */
   type GetCachedDropdownOptionsFunction = (
     dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
@@ -677,7 +755,9 @@ const ModelForm: <TBaseModel extends BaseModel>(
       })
       .join(",");
 
-    return `${dropdownModal.labelField}|${dropdownModal.valueField}|${sortKey}`;
+    const queryKey: string = JSON.stringify(dropdownModal.query || {});
+
+    return `${dropdownModal.labelField}|${dropdownModal.valueField}|${sortKey}|${queryKey}`;
   };
 
   const getCachedDropdownOptions: GetCachedDropdownOptionsFunction = (
@@ -807,7 +887,9 @@ const ModelForm: <TBaseModel extends BaseModel>(
           const listResult: ListResult<BaseModel> =
             await modelAPI.getList<BaseModel>({
               modelType: field.dropdownModal.type,
-              query: {},
+              query: {
+                ...(field.dropdownModal.query || {}),
+              } as Query<BaseModel>,
               limit: LIMIT_PER_PROJECT,
               skip: 0,
               select: select,
@@ -1062,7 +1144,8 @@ const ModelForm: <TBaseModel extends BaseModel>(
       /*
        * A people picker's values that are not columns of the model - a
        * template's ownerUsers and ownerTeams - are sent as misc data, as
-       * plain ids. Its columns are saved with the model.
+       * plain ids (one id, for a picker that takes a single pick). Its
+       * columns are saved with the model.
        */
       if (isPeoplePickerField(field) && field.peoplePicker) {
         for (const key of getPeoplePickerValueKeys(field.peoplePicker)) {
@@ -1070,8 +1153,17 @@ const ModelForm: <TBaseModel extends BaseModel>(
             continue;
           }
 
-          if (values[key] !== undefined && values[key] !== null) {
-            result[key] = toPeoplePickerIds(values[key]);
+          if (values[key] === undefined || values[key] === null) {
+            continue;
+          }
+
+          const formValue: PeoplePickerFormValue = toPeoplePickerFormValue(
+            field.peoplePicker,
+            values[key],
+          );
+
+          if (formValue !== null) {
+            result[key] = formValue;
           }
         }
 
@@ -1182,6 +1274,20 @@ const ModelForm: <TBaseModel extends BaseModel>(
           }
           valuesToSend[key] = arr;
         }
+
+        /*
+         * A colour a Create form picked for a new record is held as text
+         * ("#6366f1"), where the picker holds a Color: it is sent as the
+         * Color it stands for, the same as one picked by hand.
+         */
+        if (
+          tableColumnMetadata &&
+          tableColumnMetadata.type === TableColumnType.Color &&
+          typeof valuesToSend[key] === Typeof.String &&
+          (valuesToSend[key] as string).trim()
+        ) {
+          valuesToSend[key] = new Color((valuesToSend[key] as string).trim());
+        }
       }
 
       /*
@@ -1392,7 +1498,6 @@ const ModelForm: <TBaseModel extends BaseModel>(
         )}
         onFormStepChange={props.onFormStepChange}
         onIsLastFormStep={props.onIsLastFormStep}
-        onCanFinishFromCurrentStep={props.onCanFinishFromCurrentStep}
         fields={fields}
         steps={props.steps}
         onChange={(
@@ -1417,7 +1522,9 @@ const ModelForm: <TBaseModel extends BaseModel>(
         hideSubmitButton={props.hideSubmitButton}
         formRef={props.formRef}
         initialValues={
-          (itemToEdit || props.initialValues) as
+          (itemToEdit && props.draftValues
+            ? { ...itemToEdit, ...props.draftValues }
+            : itemToEdit || props.initialValues) as
             | FormValues<TBaseModel>
             | undefined
         }