@oneuptime/common 14.0.6 → 14.0.8

package/UI/Components/CustomFields/CustomFieldModelFormFields.tsx

@@ -0,0 +1,395 @@
+import Detail from "../Detail/Detail";
+import { ModelField } from "../Forms/ModelForm";
+import Field from "../Forms/Types/Field";
+import FormValues from "../Forms/Types/FormValues";
+import FieldType from "../Types/FieldType";
+import {
+  buildCustomFieldFormFields,
+  CUSTOM_FIELD_NO_VALUE_PLACEHOLDER,
+  CustomFieldFormDefinition,
+  getCustomFieldDetailContentClassName,
+  getCustomFieldDisplayValue,
+  getCustomFieldDropdownOptions,
+} from "./CustomFieldFormFields";
+
+export { CUSTOM_FIELD_NO_VALUE_PLACEHOLDER } from "./CustomFieldFormFields";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import {
+  CustomFieldMappingSourceInfo,
+  getCustomFieldMappingSource,
+  hasCustomFieldMappingSource,
+} from "../../../Types/CustomField/CustomFieldMappingCatalog";
+import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
+import { isCustomFieldValueEmpty } from "../../../Types/CustomField/CustomFieldValueMapping";
+import { JSONObject } from "../../../Types/JSON";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * Custom field inputs inside a record's OWN create form, next to its columns:
+ * the Details step of declaring an incident, and the Custom Fields step of a
+ * new incident template. (The Custom Fields card of a record that exists
+ * edits the values on their own, through CustomFieldsDetail.)
+ *
+ * A ModelForm only knows its model's columns, and the values live in one of
+ * them, `customFields`, a JSON bag keyed by each field's name. So each input
+ * here:
+ *
+ *   - is held under its own form key, "customFields:<name>", never under the
+ *     field's bare name: a field called "title" must not become the title
+ *     input's value;
+ *   - is permission-checked against the model's `customFields` column
+ *     (overrideField), so nobody is shown inputs they may not fill in;
+ *   - is packed back into `customFields` by the page's onBeforeCreate, from
+ *     the values the form submitted (packCustomFieldFormValues). Never from
+ *     the request's misc data, which keeps only truthy values - a Number of 0
+ *     and a switch left off would be dropped there.
+ */
+
+export const CUSTOM_FIELD_FORM_KEY_PREFIX: string = "customFields:";
+
+export type GetCustomFieldFormKeyFunction = (fieldName: string) => string;
+
+// Where the form holds one field's value.
+export const getCustomFieldFormKey: GetCustomFieldFormKeyFunction = (
+  fieldName: string,
+): string => {
+  return `${CUSTOM_FIELD_FORM_KEY_PREFIX}${fieldName}`;
+};
+
+export type IsCustomFieldInheritedFunction = (data: {
+  // The definition table, e.g. "IncidentCustomField".
+  definitionTableName: string;
+  definition: CustomFieldFormDefinition;
+  // The record as the form stands: its relations decide.
+  values: JSONObject;
+}) => boolean;
+
+/**
+ * Whether a field's value will be copied from a related resource rather than
+ * typed: it is mapped (an incident field from a monitor field) and the record
+ * is attached to something to copy from (the incident has a monitor). The
+ * server re-applies the mapping on create, so asking for such a value would
+ * only have it replaced. The same rule the Custom Fields card uses.
+ */
+export const isCustomFieldInherited: IsCustomFieldInheritedFunction = (data: {
+  definitionTableName: string;
+  definition: CustomFieldFormDefinition;
+  values: JSONObject;
+}): boolean => {
+  if (
+    !data.definition.mapFromResourceType ||
+    !data.definition.mapFromCustomFieldName
+  ) {
+    return false;
+  }
+
+  const source: CustomFieldMappingSourceInfo | undefined =
+    getCustomFieldMappingSource({
+      definitionTableName: data.definitionTableName,
+      resource: data.definition.mapFromResourceType,
+    });
+
+  if (!source) {
+    return false;
+  }
+
+  return hasCustomFieldMappingSource({
+    source: source,
+    record: data.values as Record<string, unknown>,
+  });
+};
+
+export interface CustomFieldValueSummaryProps {
+  definition: CustomFieldFormDefinition;
+  value: unknown;
+}
+
+/*
+ * One field's value on a form's review step, drawn the way the Custom Fields
+ * card draws it: Yes or No, the option's label, the date in the viewer's
+ * time, a text field's number or yes/no as text, a Long text value's lines.
+ */
+export const CustomFieldValueSummary: FunctionComponent<
+  CustomFieldValueSummaryProps
+> = (props: CustomFieldValueSummaryProps): ReactElement => {
+  const type: CustomFieldType | undefined = props.definition.customFieldType;
+  const isDropdown: boolean =
+    type === CustomFieldType.Dropdown ||
+    type === CustomFieldType.MultiSelectDropdown;
+
+  return (
+    <Detail<JSONObject>
+      item={{
+        value: isCustomFieldValueEmpty(props.value)
+          ? null
+          : (getCustomFieldDisplayValue({
+              customFieldType: type,
+              value: props.value,
+            }) as JSONObject["value"]),
+      }}
+      fields={[
+        {
+          key: "value",
+          // CustomFieldType names a FieldType by value (see CustomFieldType).
+          fieldType: (type as unknown as FieldType) || FieldType.Text,
+          contentClassName: getCustomFieldDetailContentClassName(type),
+          placeholder: CUSTOM_FIELD_NO_VALUE_PLACEHOLDER,
+          dropdownOptions: isDropdown
+            ? getCustomFieldDropdownOptions(props.definition.dropdownOptions)
+            : undefined,
+        },
+      ]}
+    />
+  );
+};
+
+export type BuildCustomFieldModelFormFieldsFunction = <
+  TBaseModel extends BaseModel,
+>(data: {
+  definitions: Array<CustomFieldFormDefinition>;
+  // Honour "Required on create" (the Details step of declaring an incident).
+  enforceRequiredOnCreate?: boolean | undefined;
+  stepId?: string | undefined;
+  /*
+   * Whether to ask for a field given the form as it stands. A field not asked
+   * for is neither validated nor packed: the record keeps whatever it would
+   * otherwise start with.
+   */
+  isShown?:
+    | ((definition: CustomFieldFormDefinition, values: JSONObject) => boolean)
+    | undefined;
+}) => Array<ModelField<TBaseModel>>;
+
+/**
+ * One ModelForm input per definition, in the order given, built by the same
+ * builder as every other custom field form (buildCustomFieldFormFields).
+ */
+export const buildCustomFieldModelFormFields: BuildCustomFieldModelFormFieldsFunction =
+  <TBaseModel extends BaseModel>(data: {
+    definitions: Array<CustomFieldFormDefinition>;
+    enforceRequiredOnCreate?: boolean | undefined;
+    stepId?: string | undefined;
+    isShown?:
+      | ((definition: CustomFieldFormDefinition, values: JSONObject) => boolean)
+      | undefined;
+  }): Array<ModelField<TBaseModel>> => {
+    const fields: Array<Field<JSONObject>> = buildCustomFieldFormFields({
+      definitions: data.definitions,
+      enforceRequiredOnCreate: data.enforceRequiredOnCreate,
+      stepId: data.stepId,
+      getFormKey: getCustomFieldFormKey,
+    });
+
+    return fields.map(
+      (
+        builtField: Field<JSONObject>,
+        index: number,
+      ): ModelField<TBaseModel> => {
+        const definition: CustomFieldFormDefinition = data.definitions[index]!;
+        const formKey: string = getCustomFieldFormKey(definition.name);
+
+        /*
+         * The builder names the field after its name (`field`). Here the
+         * value is not a column, so that goes: the permission check and the
+         * dedupe read `overrideField` and the form key instead.
+         */
+        const rest: Field<JSONObject> = { ...builtField };
+        delete rest.field;
+
+        const modelField: ModelField<TBaseModel> = {
+          ...(rest as unknown as ModelField<TBaseModel>),
+          overrideField: {
+            customFields: true,
+          },
+          overrideFieldKey: formKey,
+          getSummaryElement: (values: FormValues<TBaseModel>): ReactElement => {
+            return (
+              <CustomFieldValueSummary
+                definition={definition}
+                value={(values as JSONObject)[formKey]}
+              />
+            );
+          },
+        };
+
+        if (data.isShown) {
+          const isShown: (
+            definition: CustomFieldFormDefinition,
+            values: JSONObject,
+          ) => boolean = data.isShown;
+
+          modelField.showIf = (values: FormValues<TBaseModel>): boolean => {
+            return isShown(definition, (values || {}) as JSONObject);
+          };
+        }
+
+        return modelField;
+      },
+    );
+  };
+
+export type GetCustomFieldFormInitialValuesFunction = (data: {
+  definitions: Array<CustomFieldFormDefinition>;
+  // The values the record starts with, keyed by field name.
+  customFields: unknown;
+}) => JSONObject;
+
+/**
+ * The form's starting values for these fields, taken from a bag keyed by
+ * field name (an incident template's values), under their form keys.
+ */
+export const getCustomFieldFormInitialValues: GetCustomFieldFormInitialValuesFunction =
+  (data: {
+    definitions: Array<CustomFieldFormDefinition>;
+    customFields: unknown;
+  }): JSONObject => {
+    const initialValues: JSONObject = {};
+
+    if (!isPlainObject(data.customFields)) {
+      return initialValues;
+    }
+
+    const bag: JSONObject = data.customFields;
+
+    for (const definition of data.definitions) {
+      if (!Object.prototype.hasOwnProperty.call(bag, definition.name)) {
+        continue;
+      }
+
+      const value: unknown = bag[definition.name];
+
+      if (isCustomFieldValueEmpty(value)) {
+        continue;
+      }
+
+      // A text field's number or yes/no as text: its input takes a string.
+      initialValues[getCustomFieldFormKey(definition.name)] =
+        getCustomFieldDisplayValue({
+          customFieldType: definition.customFieldType,
+          value: value,
+        }) as JSONObject["value"];
+    }
+
+    return initialValues;
+  };
+
+type IsPlainObjectFunction = (value: unknown) => value is JSONObject;
+
+const isPlainObject: IsPlainObjectFunction = (
+  value: unknown,
+): value is JSONObject => {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    !(value instanceof Date)
+  );
+};
+
+type NormalizeFormValueFunction = (value: unknown) => unknown;
+
+/*
+ * A dropdown can still hold the option object it was picked as ({label,
+ * value}) rather than its value; the value is what is stored.
+ */
+const normalizeFormValue: NormalizeFormValueFunction = (
+  value: unknown,
+): unknown => {
+  const unwrap: (entry: unknown) => unknown = (entry: unknown): unknown => {
+    if (
+      isPlainObject(entry) &&
+      Object.prototype.hasOwnProperty.call(entry, "value") &&
+      Object.prototype.hasOwnProperty.call(entry, "label")
+    ) {
+      return entry["value"];
+    }
+
+    return entry;
+  };
+
+  if (Array.isArray(value)) {
+    return value.map(unwrap);
+  }
+
+  return unwrap(value);
+};
+
+export type PackCustomFieldFormValuesFunction = (data: {
+  // The fields the form asked for.
+  definitions: Array<CustomFieldFormDefinition>;
+  // Every value the form submitted (ModelForm's onBeforeCreate hands it over).
+  formValues: JSONObject | null | undefined;
+  /*
+   * The values the record starts with, keyed by field name - an incident
+   * template's. They are kept for every field the form did not ask about.
+   */
+  startingCustomFields?: unknown;
+  // As buildCustomFieldModelFormFields: a field not shown is not the form's.
+  isShown?:
+    | ((definition: CustomFieldFormDefinition, values: JSONObject) => boolean)
+    | undefined;
+}) => JSONObject | undefined;
+
+/**
+ * The record's `customFields` bag: the starting values, with each field the
+ * form asked for set to what it holds. 0 and false are answers and are kept;
+ * a field emptied on the form is removed, so clearing a value a template
+ * filled in sticks. Undefined when there is nothing to store.
+ */
+export const packCustomFieldFormValues: PackCustomFieldFormValuesFunction =
+  (data: {
+    definitions: Array<CustomFieldFormDefinition>;
+    formValues: JSONObject | null | undefined;
+    startingCustomFields?: unknown;
+    isShown?:
+      | ((definition: CustomFieldFormDefinition, values: JSONObject) => boolean)
+      | undefined;
+  }): JSONObject | undefined => {
+    const formValues: JSONObject = data.formValues || {};
+
+    const result: JSONObject = isPlainObject(data.startingCustomFields)
+      ? { ...data.startingCustomFields }
+      : {};
+
+    for (const definition of data.definitions) {
+      if (data.isShown && !data.isShown(definition, formValues)) {
+        continue;
+      }
+
+      const formKey: string = getCustomFieldFormKey(definition.name);
+
+      // The form never held a value for it, so it has nothing to say.
+      if (!Object.prototype.hasOwnProperty.call(formValues, formKey)) {
+        continue;
+      }
+
+      const value: unknown = normalizeFormValue(formValues[formKey]);
+
+      if (isCustomFieldValueEmpty(value)) {
+        delete result[definition.name];
+        continue;
+      }
+
+      result[definition.name] = value as JSONObject["value"];
+    }
+
+    return Object.keys(result).length > 0 ? result : undefined;
+  };
+
+export type RemoveCustomFieldFormKeysFunction = (
+  miscDataProps: JSONObject,
+) => void;
+
+/**
+ * Takes the inputs' values out of a request's misc data, where ModelForm puts
+ * every form-only value: they travel in `customFields`, and nowhere else.
+ */
+export const removeCustomFieldFormKeys: RemoveCustomFieldFormKeysFunction = (
+  miscDataProps: JSONObject,
+): void => {
+  for (const key of Object.keys(miscDataProps)) {
+    if (key.startsWith(CUSTOM_FIELD_FORM_KEY_PREFIX)) {
+      delete miscDataProps[key];
+    }
+  }
+};

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -8,24 +8,28 @@ import { ButtonStyleType } from "../Button/Button";
 import Card, { CardButtonSchema, CardHeaderLayout } from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Detail from "../Detail/Detail";
-import { DropdownOption } from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicFormModal from "../FormModal/BasicFormModal";
+import {
+  buildCustomFieldFormFields,
+  CustomFieldFormDefinition,
+  getCustomFieldDetailContentClassName,
+  getCustomFieldDisplayValue,
+  getCustomFieldDropdownOptions,
+  sortCustomFieldDefinitions,
+  toCustomFieldFormDefinition,
+} from "./CustomFieldFormFields";
 import BaseModel, {
   DatabaseBaseModelType,
 } from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
-import {
-  CustomFieldDropdownOption,
-  parseCustomFieldDropdownOptions,
-} from "../../../Types/CustomField/CustomFieldDropdownOption";
 import {
   CustomFieldMappingSourceInfo,
   getCustomFieldMappingRelationSelect,
   getCustomFieldMappingSources,
   hasCustomFieldMappingSource,
 } from "../../../Types/CustomField/CustomFieldMappingCatalog";
-import Color from "../../../Types/Color";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -34,25 +38,6 @@ import ObjectID from "../../../Types/ObjectID";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 
-const parseDropdownOptions: (value: unknown) => Array<DropdownOption> = (
-  value: unknown,
-): Array<DropdownOption> => {
-  return parseCustomFieldDropdownOptions(value).map(
-    (option: CustomFieldDropdownOption): DropdownOption => {
-      const dropdownOption: DropdownOption = {
-        label: option.value,
-        value: option.value,
-      };
-
-      if (option.color) {
-        dropdownOption.color = Color.fromString(option.color);
-      }
-
-      return dropdownOption;
-    },
-  );
-};
-
 export interface ComponentProps {
   title: string;
   description: string;
@@ -126,6 +111,16 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   const mappingSources: Array<CustomFieldMappingSourceInfo> =
     getCustomFieldMappingSources(new props.customFieldType().tableName!);
 
+  /*
+   * Only incident fields have an order today. The column is asked for only
+   * where the definition model has it: this card issues one select for
+   * whichever definition model it is handed, and a column missing from the
+   * model would fail that read for every other resource.
+   */
+  const hasSortOrder: boolean = new props.customFieldType().hasColumn(
+    "sortOrder",
+  );
+
   /*
    * A mapped field is a derived value, so it is shown rather than edited — but
    * only on records that actually have a source to derive it from. On a record
@@ -207,8 +202,9 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             dropdownOptions: true,
             mapFromResourceType: true,
             mapFromCustomFieldName: true,
+            ...(hasSortOrder ? { sortOrder: true } : {}),
           } as any,
-          sort: {},
+          sort: (hasSortOrder ? { sortOrder: SortOrder.Ascending } : {}) as any,
         });
 
       /*
@@ -234,7 +230,19 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
         select: itemSelect as any,
       });
 
-      setSchemaList(schemaList.data);
+      /*
+       * Sorted here as well as by the query: the order has to hold for fields
+       * with no order too (last, in the order the server listed them).
+       */
+      setSchemaList(
+        hasSortOrder
+          ? sortCustomFieldDefinitions(
+              schemaList.data as Array<
+                BaseModel & { sortOrder?: number | null | undefined }
+              >,
+            )
+          : schemaList.data,
+      );
       setModel(item);
 
       if (props.onValuesLoaded) {
@@ -359,6 +367,36 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
     ...(props.additionalButtons || []),
   ];
 
+  /*
+   * The stored values as the card draws them and the edit form starts from
+   * them: a text field's number or yes/no as text
+   * (getCustomFieldDisplayValue). The Markdown viewer draws nothing for a
+   * value that is not a string, and the Rich text editor fails on one, so a
+   * field switched from Number to Rich text could be neither seen nor
+   * edited. Every other value, and every key no field has, is as stored.
+   */
+  const getDisplayValues: () => JSONObject = (): JSONObject => {
+    const stored: JSONObject = ((model as any)?.["customFields"] ||
+      {}) as JSONObject;
+    const displayed: JSONObject = { ...stored };
+
+    for (const schemaItem of schemaList) {
+      const name: unknown = (schemaItem as any).name;
+
+      if (
+        typeof name === "string" &&
+        Object.prototype.hasOwnProperty.call(stored, name)
+      ) {
+        displayed[name] = getCustomFieldDisplayValue({
+          customFieldType: (schemaItem as any).customFieldType,
+          value: stored[name],
+        }) as JSONObject[string];
+      }
+    }
+
+    return displayed;
+  };
+
   return (
     <Card
       title={props.title}
@@ -389,7 +427,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
         {!isLoading && !loadError && schemaList.length > 0 && model && (
           <Detail
             id={props.name}
-            item={(model as any)["customFields"] || {}}
+            item={getDisplayValues()}
             fields={schemaList.map((schemaItem: BaseModel) => {
               const isDropdown: boolean =
                 (schemaItem as any).customFieldType ===
@@ -401,9 +439,14 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
                 title: (schemaItem as any).name,
                 description: getMappedDescription(schemaItem) as string,
                 fieldType: (schemaItem as any).customFieldType,
+                contentClassName: getCustomFieldDetailContentClassName(
+                  (schemaItem as any).customFieldType,
+                ),
                 placeholder: "No data entered",
                 dropdownOptions: isDropdown
-                  ? parseDropdownOptions((schemaItem as any).dropdownOptions)
+                  ? getCustomFieldDropdownOptions(
+                      (schemaItem as any).dropdownOptions,
+                    )
                   : undefined,
               };
             })}
@@ -421,7 +464,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
               await onSave(data).catch();
             }}
             formProps={{
-              initialValues: (model as any)?.["customFields"] || {},
+              initialValues: getDisplayValues(),
               /*
                * Mapped fields are left OUT of the form rather than rendered
                * disabled: `Field.disabled` is honoured by only three of the
@@ -432,32 +475,29 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
                * from the record's existing bag — and the server re-applies the
                * mapping on update either way.
                */
-              fields: schemaList
-                .filter((schemaItem: BaseModel) => {
-                  return !isMappedAndInherited(schemaItem);
-                })
-                .map((schemaItem: BaseModel) => {
-                  const isDropdown: boolean =
-                    (schemaItem as any).customFieldType ===
-                      CustomFieldType.Dropdown ||
-                    (schemaItem as any).customFieldType ===
-                      CustomFieldType.MultiSelectDropdown;
-                  return {
-                    field: {
-                      [(schemaItem as any).name]: true,
+              /*
+               * Every field optional, "Required on create" included: that
+               * applies when an incident is declared, and fixing one field on
+               * an incident a monitor opened mid-outage must not demand all
+               * the others first.
+               */
+              fields: buildCustomFieldFormFields({
+                definitions: schemaList
+                  .filter((schemaItem: BaseModel) => {
+                    return !isMappedAndInherited(schemaItem);
+                  })
+                  .map((schemaItem: BaseModel) => {
+                    return toCustomFieldFormDefinition(schemaItem);
+                  })
+                  .filter(
+                    (
+                      definition: CustomFieldFormDefinition | null,
+                    ): definition is CustomFieldFormDefinition => {
+                      return definition !== null;
                     },
-                    title: (schemaItem as any).name,
-                    description: (schemaItem as any).description,
-                    fieldType: (schemaItem as any).customFieldType,
-                    required: false,
-                    placeholder: "",
-                    dropdownOptions: isDropdown
-                      ? parseDropdownOptions(
-                          (schemaItem as any).dropdownOptions,
-                        )
-                      : undefined,
-                  };
-                }),
+                  ),
+                enforceRequiredOnCreate: false,
+              }),
             }}
           />
         )}