@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/Forms/Types/Field.ts

@@ -8,6 +8,7 @@ import {
   CardSelectOptionGroup,
 } from "../../CardSelect/CardSelect";
 import { DropdownOption, DropdownOptionGroup } from "../../Dropdown/Dropdown";
+import type { DropdownChange } from "../../Dropdown/DropdownChange";
 import { BulkAddedLabel } from "../../EntityDropdown/EntityDropdown";
 import { RadioButton } from "../../RadioButtons/GroupRadioButtons";
 import FormFieldSchemaType from "./FormFieldSchemaType";
@@ -20,6 +21,7 @@ import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
 import type { CodeEditorActions } from "../../CodeEditor/CodeEditor";
 import type { PeoplePickerFieldConfig } from "../../PeoplePicker/PeoplePickerTypes";
 import type { TemplateVariableGroups } from "../../../../Types/Template/TemplateVariable";
+import type IconProp from "../../../../Types/Icon/IconProp";
 import { ReactElement, ReactNode } from "react";
 
 export enum FormFieldStyleType {
@@ -53,6 +55,23 @@ export interface CategoryCheckboxProps {
   options: Array<CategoryCheckboxOption>;
 }
 
+/*
+ * What a field's footer (getFooterElement) can do to the field it is drawn
+ * under.
+ */
+export interface FieldFooterProps {
+  /*
+   * Sets the field's value the way picking it in the field would: the
+   * field's onChange is called first - for a dropdown, with what the pick
+   * changed as the field's options name it (DropdownChange) - then the value
+   * is stored, and the form counts it as the user's own edit. For a footer
+   * that offers one-click picks, such as the status pages that show a
+   * maintenance event's monitors, suggested under its status page picker.
+   * Nothing is set until the footer calls it.
+   */
+  setValue: (value: any) => void;
+}
+
 /*
  * A folded group of fields inside a form (or inside one step of it): a
  * header the user opens to reach them. Every field that should be in the
@@ -78,11 +97,21 @@ export interface FormFieldCollapsibleSection<TEntity> {
   /*
    * Whether the section starts open when it is configured as the form
    * opens - an edit form, or a default that fills a field in. True when left
-   * out: a section of details someone wrote opens to show them. An Advanced
-   * section sets it to false: it always starts folded, and says
-   * "Configured" on its header instead.
+   * out: a section of details someone wrote opens to show them. A More
+   * fields section (getAdvancedFormSection) sets it to false: it always
+   * starts folded, and its header shows what is set instead.
    */
   openWhenConfigured?: boolean | undefined;
+  /*
+   * Folded, the header lists the fields the section holds by name - "Declared
+   * At · Initial State · Labels" - with the set ones as chips that say what
+   * they are set to. For a section whose title does not say what is in it:
+   * More fields. Left out, a folded header shows only the fields that are
+   * set (FoldedSection).
+   */
+  listFieldsWhileFolded?: boolean | undefined;
+  // Drawn in a tile before the title (More fields: IconProp.AdjustmentHorizontal).
+  icon?: IconProp | undefined;
   /*
    * What the folded fields are set to, in plain words, shown under the
    * title while the section is folded - so the form says what will happen
@@ -92,8 +121,9 @@ export interface FormFieldCollapsibleSection<TEntity> {
    * Worked out from the form's values as they are now, so it follows what
    * is ticked. Whole English sentences: each is looked up in the
    * translations on its own (keep them in translationKey() so the string
-   * extractor finds them). It takes the place of the "Configured" badge,
-   * which shows as usual while nothing is returned.
+   * extractor finds them). Drawn under what the section lists; a section
+   * that does not list its fields shows it in place of the chips of what is
+   * set, since the sentences already say it.
    */
   getSummary?:
     | ((values: FormValues<TEntity>) => Array<string> | undefined)
@@ -146,6 +176,13 @@ export default interface Field<TEntity> {
      * order (newest first).
      */
     sort?: { [columnName: string]: SortOrder } | undefined;
+    /*
+     * Only the rows of the dropdown's model that match this, by its columns
+     * - `{ isVerified: true }` lists only the domains a project has verified.
+     * Both the list the form fetches and the dropdown's own search are
+     * narrowed by it. Unset, every row the reader may see is listed.
+     */
+    query?: Record<string, unknown> | undefined;
   };
   /*
    * Entity dropdowns can bulk-add every entry carrying a label. That is a
@@ -159,6 +196,12 @@ export default interface Field<TEntity> {
     accessControlColumnTitle: string;
   };
   fileTypes?: Array<MimeType> | undefined;
+  /*
+   * File and ImageFile fields: the largest file the field takes, in bytes,
+   * when it is less than the 10 MB every upload is held to. The picker says
+   * so, and refuses a larger file before uploading it.
+   */
+  maxFileSizeInBytes?: number | undefined;
   sideLink?: FormFieldSideLink | undefined;
   validation?: {
     minLength?: number | undefined;
@@ -190,11 +233,25 @@ export default interface Field<TEntity> {
   codeEditorToolbarActions?:
     | ((editor: CodeEditorActions) => ReactNode)
     | undefined;
+  /*
+   * Called with the new value before the form stores it. currentFormValues
+   * are the values as they were; setNewFormValues replaces them all (spread
+   * currentFormValues into what you hand it), and the new value is stored
+   * on top. For a Dropdown or MultiSelectDropdown field, change says what
+   * the pick was as the list showed it - the options picked now and before,
+   * with their labels - so a field can fill in a name after what was picked
+   * without a request of its own (a status page resource's display name
+   * follows its monitor: StatusPageResourceFormFields). A PeoplePicker field
+   * says the same of its people and teams, each labelled with its name (an
+   * owner rule is named after its owners: Dashboard Utils/Form/
+   * ResourceRuleForm).
+   */
   onChange?:
     | ((
         value: any,
         currentFormValues: FormValues<TEntity>,
         setNewFormValues: (currentFormValues: FormValues<TEntity>) => void,
+        change?: DropdownChange | undefined,
       ) => void)
     | undefined;
   fieldType?: FormFieldSchemaType;
@@ -203,11 +260,34 @@ export default interface Field<TEntity> {
   getDefaultValue?:
     | ((item: FormValues<TEntity>) => boolean | string | Date | number)
     | undefined;
+  /*
+   * For a field whose default follows other fields - an OIDC discovery URL
+   * made from the issuer, a description made from the provider's name -
+   * whether the value it holds now is that default. Such a value is not
+   * one the user chose, so a folded section does not show it as set, and a
+   * review step does not list it (isFormFieldValueSet).
+   */
+  isAtDefault?: ((values: FormValues<TEntity>) => boolean) | undefined;
+  /*
+   * The default of the column the field writes, as its model declares it -
+   * filled in by ModelForm, on Create and Edit alike, for a field that names
+   * no default of its own (Utils/CreateFormDefaults). Not a value the field
+   * starts with: an Edit form shows the record as it is. It is what a folded
+   * section compares with, so a switch that is on because its column starts
+   * on is not shown as set, and one turned off is (isFormFieldValueSet).
+   */
+  columnDefaultValue?: boolean | string | number | undefined;
   radioButtonOptions?: Array<RadioButton>;
   footerElement?: ReactElement | undefined;
+  /*
+   * Drawn under the field, from the form's values as they are now. error is
+   * the field's validation error once it has been touched. footer lets it
+   * set the field's value (FieldFooterProps); BasicForm always hands it in.
+   */
   getFooterElement?: (
     values: FormValues<TEntity>,
     error?: string,
+    footer?: FieldFooterProps,
   ) => ReactElement | undefined;
   // For Input fields: render errors in the footer linked by ariaDescribedby.
   errorMessageInFooter?: boolean | undefined;
@@ -224,17 +304,6 @@ export default interface Field<TEntity> {
    * not there.
    */
   customElementDrawsOwnLabel?: boolean | undefined;
-  /*
-   * A stepped form may be finished from an earlier step without ever
-   * drawing this custom element: it writes the field's value only when the
-   * user changes something, and shows nothing that has to be read before
-   * saving - a picker that starts empty, say. Left out, a step holding the
-   * element is shown before the form can be finished from an earlier one,
-   * because an element can fill in a value of its own when it first shows
-   * (the default criteria of a monitor's type, a rule's conditions) or be a
-   * notice to read first (Forms/Utils/FinishFromAnyStep.ts).
-   */
-  customElementCanBeSkipped?: boolean | undefined;
   categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
   /*
    * For a PeoplePicker field: the kinds of record it offers (people, teams),
@@ -332,6 +401,19 @@ export default interface Field<TEntity> {
 
   getSummaryElement?: (item: FormValues<TEntity>) => ReactElement | undefined;
 
+  /*
+   * Listed on the review step (FormSummary) whatever it holds, even while it
+   * is folded into a collapsible section. A folded field is reviewed only
+   * when it holds something of the user's (isListedInFormSummary), which
+   * suits the options nobody touched; a default whose consequence should be
+   * read before saving says so here. Declare Incident's Notify Status Page
+   * Subscribers starts ticked under More fields, and its review row says who
+   * will be emailed and previews what they will be sent. A field its showIf
+   * hides is still left out, and a section reviewed by its own summary line
+   * (FormFieldCollapsibleSection.getSummary) still stands in for its fields.
+   */
+  alwaysInSummary?: boolean | undefined;
+
   // If true, this field will span the full row in multi-column layouts.
   spanFullRow?: boolean | undefined;
 

package/UI/Components/Forms/Utils/AdvancedFormSection.ts

@@ -2,14 +2,30 @@ import Field, { FormFieldCollapsibleSection } from "../Types/Field";
 import FormFieldSchemaType from "../Types/FormFieldSchemaType";
 import FormValues from "../Types/FormValues";
 import { getPeoplePickerValueKeys } from "../../PeoplePicker/PeoplePickerTypes";
+import Color from "../../../../Types/Color";
+import IconProp from "../../../../Types/Icon/IconProp";
+import {
+  MORE_FIELDS_SECTION_TITLE as FOLDED_MORE_FIELDS_TITLE,
+  MORE_SECTION_ICON,
+} from "../../FoldedSection/FoldedSectionTitles";
 
 /*
- * "Advanced" in a form: the options most people never need, folded under one
- * header so the form shows only what matters. The maintainer, on the Create
- * Custom Field form: "options like 'Show on create' and stuff ... should be
- * hidden in the advanced section of the page. There should be an advanced
- * section, which should be collapsed by default. You can expand it and click
- * on those options."
+ * "More fields" in a form: the options most people never need, folded under
+ * one header so the form shows only what matters. The maintainer, on the
+ * Create Custom Field form: "options like 'Show on create' and stuff ...
+ * should be hidden in the advanced section of the page. There should be an
+ * advanced section, which should be collapsed by default. You can expand it
+ * and click on those options." And later, on what it was called: "The
+ * advanced section in the form should be called something better - like
+ * 'more' or something as such ... show what things are inside it when
+ * collapsed (small summary of things)."
+ *
+ * So it is called "More fields": more of the same form's fields, nothing an
+ * expert has to unlock. Not "More options" - that is what the ⋯ button on
+ * every card and table row is called, so a fold of that name would share
+ * it with a menu. Its page-level twin, which folds settings cards, is "More
+ * settings" (AdvancedPageSection). The builder keeps its old name, so the
+ * forms that call it did not all have to change.
  *
  * How to use it. Build the section once and hand the same one to every field
  * that goes in it, written one after another at the end of the list (or of
@@ -22,30 +38,39 @@ import { getPeoplePickerValueKeys } from "../../PeoplePicker/PeoplePickerTypes";
  *     { ...anotherOption, collapsibleSection: advanced },
  *   ]
  *
- * What the user gets (BasicForm, CollapsibleFormSection):
+ * What the user gets (BasicForm, CollapsibleFormSection, FoldedSection):
  *   - the section starts folded, on Create and on Edit alike;
- *   - while folded it says "Configured" on its header when any field in it
- *     holds a value other than empty or its default, so an Edit form never
- *     hides that something is set;
+ *   - folded, its header lists the fields in it by name ("Declared At ·
+ *     Initial State · Labels · Private Incident") and draws each one that
+ *     holds a value other than empty or its default as a chip that says
+ *     what it is set to ("Labels: 2", "Private Incident: On") - so an Edit
+ *     form never hides that something is set, nor what;
+ *   - with getSummary, a sentence under that line says what its defaults
+ *     do ("The key expires a year from today.");
  *   - it opens by itself when a field in it fails validation;
  *   - folded fields keep their values, are skipped by Tab, and are still
  *     submitted.
  *
  * Works inside a stepped form too: give the fields the step's stepId as
  * well. Tests/Helpers/FormStepsScan counts a section as one row when it
- * judges whether a form or a step is too long, so options moved under
- * Advanced stop counting against the LongFormStepsGuard and
- * OverloadedFormStepsGuard limits.
+ * judges whether a form or a step is too long, so options moved under More
+ * fields stop counting against the LongFormStepsGuard and
+ * OverloadedFormStepsGuard limits. FoldedSectionsGuard keeps every fold of
+ * rarely needed options built here, under this one name.
  */
 
 export const ADVANCED_FORM_SECTION_ID: string = "advanced";
 
-export const ADVANCED_FORM_SECTION_TITLE: string = "Advanced";
+// What the section is called in every form (looked up when it is drawn).
+export const MORE_FIELDS_SECTION_TITLE: string = FOLDED_MORE_FIELDS_TITLE;
+
+// The icon in its header's tile: things to adjust.
+export const MORE_FIELDS_SECTION_ICON: IconProp = MORE_SECTION_ICON;
 
 export interface AdvancedFormSectionOptions<TEntity> {
   /*
-   * Only needed when one step has two Advanced sections that must not be
-   * merged; fields with the same id that are next to each other are one
+   * Only needed when one step has two More fields sections that must not
+   * be merged; fields with the same id that are next to each other are one
    * section.
    */
   id?: string | undefined;
@@ -53,15 +78,17 @@ export interface AdvancedFormSectionOptions<TEntity> {
   description?: string | undefined;
   /*
    * When "set" means something else than "any field in the section holds a
-   * value other than empty or its default".
+   * value other than empty or its default". While it says no, the folded
+   * header draws no field as set.
    */
   isConfigured?: ((values: FormValues<TEntity>) => boolean) | undefined;
   /*
-   * What a default folded in here will do, in plain words under the title
-   * while the section is folded (FormFieldCollapsibleSection.getSummary) -
-   * for a default people should know about without opening Advanced, such
-   * as "The key expires a year from today." Whole English sentences in
-   * translationKey(). Return nothing to fall back to the "Configured" badge.
+   * What a default folded in here will do, in plain words under the list of
+   * fields while the section is folded (FormFieldCollapsibleSection
+   * .getSummary) - for a default people should know about without opening
+   * the section, such as "The key expires a year from today." Whole English
+   * sentences in translationKey(). Return nothing when the chips of the set
+   * fields say all there is to say.
    */
   getSummary?:
     | ((values: FormValues<TEntity>) => Array<string> | undefined)
@@ -77,9 +104,12 @@ export const getAdvancedFormSection: GetAdvancedFormSectionFunction = <TEntity>(
 ): FormFieldCollapsibleSection<TEntity> => {
   const section: FormFieldCollapsibleSection<TEntity> = {
     id: options?.id || ADVANCED_FORM_SECTION_ID,
-    title: ADVANCED_FORM_SECTION_TITLE,
-    // Folded on Edit too: "Configured" on the header says something is set.
+    title: MORE_FIELDS_SECTION_TITLE,
+    // Folded on Edit too: the chips on its header say what is set.
     openWhenConfigured: false,
+    // Its title says nothing of what is in it, so its header lists it.
+    listFieldsWhileFolded: true,
+    icon: MORE_FIELDS_SECTION_ICON,
   };
 
   if (options?.description) {
@@ -116,9 +146,12 @@ type NormalizeValueFunction = (value: unknown) => unknown;
 
 /*
  * A dropdown can hold the option it was picked as ({ label, value }) rather
- * than its value; the value is what is compared.
+ * than its value; the value is what is compared. Exported for builders that
+ * read a form's values the same way (SmtpConfig/SmtpConfigFormFields).
  */
-const normalizeValue: NormalizeValueFunction = (value: unknown): unknown => {
+export const normalizeFormValue: NormalizeValueFunction = (
+  value: unknown,
+): unknown => {
   if (
     isPlainObject(value) &&
     Object.prototype.hasOwnProperty.call(value, "value") &&
@@ -131,6 +164,15 @@ const normalizeValue: NormalizeValueFunction = (value: unknown): unknown => {
     return value.getTime();
   }
 
+  /*
+   * A colour is held as the Color the picker gives or as the text a Create
+   * form starts with ("#6366f1", Utils/CreateFormDefaults): the same colour
+   * either way.
+   */
+  if (value instanceof Color) {
+    return value.toString().trim().toLowerCase();
+  }
+
   return value;
 };
 
@@ -169,7 +211,8 @@ export type IsFormFieldValueSetFunction = <TEntity>(
  * Whether a field holds something of the user's: a value other than empty
  * or the field's default. A switch is set when it is not in its default
  * position (off, unless its default is on); a people picker when anyone is
- * picked. What a folded section's "Configured" is worked out from.
+ * picked. Folded, such a field is a chip on its section's header
+ * (FoldedFormFields).
  */
 export const isFormFieldValueSet: IsFormFieldValueSetFunction = <TEntity>(
   field: Field<TEntity>,
@@ -199,7 +242,25 @@ export const isFormFieldValueSet: IsFormFieldValueSetFunction = <TEntity>(
     return false;
   }
 
-  const value: unknown = normalizeValue(formValues[fieldName]);
+  // A default that follows other fields: the field says when it holds it.
+  if (field.isAtDefault && field.isAtDefault(values)) {
+    return false;
+  }
+
+  /*
+   * A colour field's text is a colour too: "#6366F1" typed into a default
+   * and the Color the picker hands back are the same colour.
+   */
+  const normalize: (raw: unknown) => unknown = (raw: unknown): unknown => {
+    const normalized: unknown = normalizeFormValue(raw);
+
+    return field.fieldType === FormFieldSchemaType.Color &&
+      typeof normalized === "string"
+      ? normalized.trim().toLowerCase()
+      : normalized;
+  };
+
+  const value: unknown = normalize(formValues[fieldName]);
 
   let defaultValue: unknown = field.defaultValue;
 
@@ -207,7 +268,15 @@ export const isFormFieldValueSet: IsFormFieldValueSetFunction = <TEntity>(
     defaultValue = field.getDefaultValue(values);
   }
 
-  defaultValue = normalizeValue(defaultValue);
+  /*
+   * No default of its own: its column's, which ModelForm hands an Edit form
+   * too - there the field does not start from it, the record does.
+   */
+  if (defaultValue === undefined) {
+    defaultValue = field.columnDefaultValue;
+  }
+
+  defaultValue = normalize(defaultValue);
 
   // Never touched: whatever it is, it is what the form starts with.
   if (value === undefined || value === null) {
@@ -242,8 +311,10 @@ export type IsFormSectionConfiguredFunction = <TEntity>(data: {
 }) => boolean;
 
 /**
- * Whether a folded section should say "Configured": what its own
- * isConfigured says, or - without one - whether any of its fields is set.
+ * Whether anything in a section is set: what its own isConfigured says, or -
+ * without one - whether any of its fields is set. A section that opens when
+ * configured opens on it; folded, a section that says no draws none of its
+ * fields as set.
  */
 export const isFormSectionConfigured: IsFormSectionConfiguredFunction = <
   TEntity,

package/UI/Components/Forms/Utils/CreateFormDefaults.ts

@@ -1,5 +1,9 @@
 import BaseModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Color from "../../../../Types/Color";
 import { TableColumnMetadata } from "../../../../Types/Database/TableColumn";
+import TableColumnType from "../../../../Types/Database/TableColumnType";
+import { parseColor } from "../../../../Utils/ColorContrast";
+import { pickDistinctColor } from "../../../../Utils/DistinctColor";
 import {
   CardSelectOption,
   CardSelectOptionGroup,
@@ -27,20 +31,33 @@ import FormFieldSchemaType from "../Types/FormFieldSchemaType";
  * the field's defaultValue (getCreateFormColumnDefault, below) when the field
  * does not say otherwise. BasicForm then fills the field in with it, draws it
  * from the first paint, sends it untouched - and a folded section that holds
- * it does not say "Configured" over a value nobody changed, because the
- * default is what isFormFieldValueSet compares with.
+ * it does not show a value nobody changed as set, because the default is
+ * what isFormFieldValueSet compares with.
  *
  * What still wins, in order: a value the form starts with (a table's
  * createInitialValues, a form's initialValues), then a field's own
  * defaultValue or getDefaultValue - a deliberate `defaultValue: false` keeps a
- * switch off whatever its column says. Edit forms are untouched: they show
- * the record as it is.
+ * switch off whatever its column says. Edit forms start from nothing but
+ * the record, as it is: they get the column's default only as the field's
+ * columnDefaultValue, which a folded section compares with and no field
+ * starts from.
  *
  * Only plain values the field can show are taken: a boolean for a switch, a
  * choice its options hold for a dropdown, radio group or card picker, a number
- * for a number box. A JSON default, a text default, or a field that writes no
- * real column (an overrideField, a value sent as misc data, a form-only
- * helper) is left as it was.
+ * for a number box, a colour for a colour picker. A JSON default, a text
+ * default, or a field that writes no real column (an overrideField, a value
+ * sent as misc data, a form-only helper) is left as it was.
+ *
+ * A colour is the one thing a Create form starts with that the server would
+ * not store on its own. A label, a state, a severity, a monitor status, an
+ * incident role and a bar colour rule cannot be saved without one, and none
+ * of their colour columns has a default - so their forms opened on an empty
+ * picker and refused to save until a colour was chosen: a decision with no
+ * wrong answer, asked first. Now such a field starts with a colour already
+ * picked (getCreateFormColorDefault, below): one from OneUptime's palette
+ * that the records listed beside the form - the rows of the table it was
+ * opened from - do not use yet (Utils/DistinctColor). It stays a field: any
+ * colour can be picked instead. Edit forms are not touched.
  */
 
 export type CreateFormColumnDefault = boolean | number | string;
@@ -122,14 +139,26 @@ const getChoiceValues: ChoiceValuesFunction = <TEntity>(
   );
 };
 
-/**
- * The column default a field of a Create form starts with, or undefined when
- * the field keeps starting as it always did (see the note above).
+interface WrittenColumn {
+  name: string;
+  metadata: TableColumnMetadata;
+}
+
+type GetWrittenColumnFunction = <TEntity>(
+  model: BaseModel,
+  field: CreateFormField<TEntity>,
+) => WrittenColumn | undefined;
+
+/*
+ * The column a field writes, when the field leaves what it starts as to the
+ * form: no defaultValue or getDefaultValue of its own, and a real column -
+ * not an overrideField, a value sent as misc data under a key of its own, or
+ * a form-only helper. Both defaults below start only such a field.
  */
-export function getCreateFormColumnDefault<TEntity>(
+const getWrittenColumn: GetWrittenColumnFunction = <TEntity>(
   model: BaseModel,
   field: CreateFormField<TEntity>,
-): CreateFormColumnDefault | undefined {
+): WrittenColumn | undefined => {
   // The field says for itself what it starts as.
   if (field.defaultValue !== undefined || field.getDefaultValue) {
     return undefined;
@@ -145,20 +174,51 @@ export function getCreateFormColumnDefault<TEntity>(
     return undefined;
   }
 
-  const columnName: string | undefined = Object.keys(field.field)[0];
+  const name: string | undefined = Object.keys(field.field)[0];
 
-  if (!columnName || !field.fieldType) {
+  if (!name || !field.fieldType) {
     return undefined;
   }
 
   const metadata: TableColumnMetadata | undefined =
-    model.getTableColumnMetadata(columnName);
+    model.getTableColumnMetadata(name);
+
+  return metadata ? { name, metadata } : undefined;
+};
+
+type GetColorColumnDefaultFunction = (
+  metadata: TableColumnMetadata,
+) => string | undefined;
+
+// A colour column's own default, as the picker writes a colour, if it is one.
+const getColorColumnDefault: GetColorColumnDefaultFunction = (
+  metadata: TableColumnMetadata,
+): string | undefined => {
+  const columnDefault: unknown = metadata.defaultValue;
 
-  if (!metadata) {
+  const color: string | null =
+    columnDefault instanceof Color || typeof columnDefault === "string"
+      ? columnDefault.toString().trim().toLowerCase()
+      : null;
+
+  return color && parseColor(color) ? color : undefined;
+};
+
+/**
+ * The column default a field of a Create form starts with, or undefined when
+ * the field keeps starting as it always did (see the note above).
+ */
+export function getCreateFormColumnDefault<TEntity>(
+  model: BaseModel,
+  field: CreateFormField<TEntity>,
+): CreateFormColumnDefault | undefined {
+  const column: WrittenColumn | undefined = getWrittenColumn(model, field);
+
+  if (!column || !field.fieldType) {
     return undefined;
   }
 
-  const columnDefault: unknown = metadata.defaultValue;
+  const columnDefault: unknown = column.metadata.defaultValue;
 
   if (SWITCH_FIELD_TYPES.has(field.fieldType)) {
     return typeof columnDefault === "boolean" ? columnDefault : undefined;
@@ -188,5 +248,86 @@ export function getCreateFormColumnDefault<TEntity>(
     return columnDefault;
   }
 
+  // Only a default the picker can show: a colour.
+  if (field.fieldType === FormFieldSchemaType.Color) {
+    return getColorColumnDefault(column.metadata);
+  }
+
   return undefined;
 }
+
+export type ColorInUse = Color | string | null | undefined;
+
+/**
+ * The colours `items` hold in the column a colour field writes, for
+ * getCreateFormColorDefault to stay clear of. Items that do not hold the
+ * column (a table that did not select it) give nothing.
+ */
+export function getColorsInUse<TEntity>(
+  field: CreateFormField<TEntity>,
+  items: ReadonlyArray<unknown> | undefined,
+): Array<ColorInUse> {
+  const columnName: string | undefined = field.field
+    ? Object.keys(field.field)[0]
+    : undefined;
+
+  if (!columnName || !items) {
+    return [];
+  }
+
+  return items.map((item: unknown): ColorInUse => {
+    if (!item || typeof item !== "object") {
+      return undefined;
+    }
+
+    const value: unknown = (item as Record<string, unknown>)[columnName];
+
+    return value instanceof Color || typeof value === "string"
+      ? value
+      : undefined;
+  });
+}
+
+/**
+ * The colour a colour field of a Create form starts with, as text
+ * ("#6366f1"), or undefined when the field starts as it always did.
+ *
+ * Picked for a field that writes a colour column the record cannot be saved
+ * without (the column is required, or the field always is) and that says
+ * nothing about what it starts as - no defaultValue or getDefaultValue of its
+ * own, and no column default, which getCreateFormColumnDefault gives it
+ * instead. The colour is the first of the palette that none of `colorsInUse`
+ * looks like (Utils/DistinctColor): the colours of the records beside it.
+ */
+export function getCreateFormColorDefault<TEntity>(
+  model: BaseModel,
+  field: CreateFormField<TEntity>,
+  colorsInUse?: ReadonlyArray<ColorInUse>,
+): string | undefined {
+  if (field.fieldType !== FormFieldSchemaType.Color) {
+    return undefined;
+  }
+
+  const column: WrittenColumn | undefined = getWrittenColumn(model, field);
+
+  if (!column || column.metadata.type !== TableColumnType.Color) {
+    return undefined;
+  }
+
+  // A column with a default of its own starts from it.
+  if (getColorColumnDefault(column.metadata) !== undefined) {
+    return undefined;
+  }
+
+  /*
+   * A colour the record can go without is left empty: empty means no
+   * colour, or one the server picks itself (a service's). So is one the
+   * form asks for only sometimes (a required function): the colour would
+   * be sent when it is not asked for.
+   */
+  if (!column.metadata.required && field.required !== true) {
+    return undefined;
+  }
+
+  return pickDistinctColor(colorsInUse).toString();
+}