@oneuptime/common 14.0.7 → 14.0.9

package/UI/Components/EntityDropdown/EntityDropdown.tsx

@@ -474,6 +474,8 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
     useRef<HTMLDivElement | null>(null);
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
+  const valueButtonRef: React.MutableRefObject<HTMLButtonElement | null> =
+    useRef<HTMLButtonElement | null>(null);
   const debounceRef: React.MutableRefObject<number | null> = useRef<
     number | null
   >(null);
@@ -573,6 +575,67 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
     };
   }, []);
 
+  /*
+   * The keyboard's side of the click-outside above. Tabbing out of the
+   * dropdown - from the input, or on past the last option in the menu - onto
+   * the next field used to leave the menu open, and when that field opened a
+   * popup of its own (the next dropdown, the Affected Resources picker) the
+   * two stacked on top of each other. The menu is a DOM child of the
+   * container (laid out fixed, never portalled), so moving between the input,
+   * the chips, the menu's tabs and its options stays inside and keeps it open.
+   *
+   * Only a move onto another element closes it. With no element to go to
+   * (relatedTarget null, or the document itself) focus went nowhere in
+   * particular - the window lost focus, a press landed on something that
+   * takes no focus, the focused option unmounted - and presses are for the
+   * listener above to judge.
+   */
+  const closeWhenFocusLeaves: (
+    event: React.FocusEvent<HTMLDivElement>,
+  ) => void = (event: React.FocusEvent<HTMLDivElement>): void => {
+    const nextFocused: EventTarget | null = event.relatedTarget;
+
+    if (
+      !(nextFocused instanceof Element) ||
+      event.currentTarget.contains(nextFocused)
+    ) {
+      return;
+    }
+
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+
+  /*
+   * A single-select showing its value swaps elements as the menu opens and
+   * closes: the value button while closed, the search input while open. Focus
+   * meant for the field across that swap has to wait for the element taking
+   * over, which is not mounted yet when the swap is asked for. Set by the
+   * value button, which hands focus to the search input as the menu opens,
+   * and by Escape, which hands it back to the value button as the menu
+   * closes (see closeMenuOnEscape). Without it focus went down with the
+   * element being replaced, to the page: typing did not search, focus could
+   * never leave the dropdown to close the menu (see closeWhenFocusLeaves),
+   * and a keyboard user was left outside the field they were working in.
+   */
+  const focusFieldAfterSwapRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  useLayoutEffect(() => {
+    if (!focusFieldAfterSwapRef.current) {
+      return;
+    }
+
+    focusFieldAfterSwapRef.current = false;
+
+    if (isOpen) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    valueButtonRef.current?.focus();
+  }, [isOpen]);
+
   useEffect(() => {
     return () => {
       if (debounceRef.current !== null) {
@@ -1179,11 +1242,49 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
   const showSingleSelectedText: boolean =
     !isMulti && !isOpen && selectedOptions.length > 0;
 
+  /*
+   * Escape while the menu is open closes just the menu, wherever focus is in
+   * the dropdown: the search input, or - reached with Tab - an option, one of
+   * the menu's tabs or footer buttons, a chip or the Clear button. It is
+   * claimed, so Modal's document listener never hears it: that listener
+   * closes the whole form and throws away its unsaved edits, which is what
+   * Escape on a Tab-reached option used to do while Escape in the input only
+   * closed the menu. With the menu already closed Escape is left alone, so
+   * the next press still closes the modal.
+   *
+   * Focus goes back to the field rather than down with the menu's buttons.
+   */
+  const closeMenuOnEscape: (
+    event: React.KeyboardEvent<HTMLDivElement>,
+  ) => void = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.key !== "Escape" || !isOpen) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (!isMulti && selectedOptions.length > 0) {
+      /*
+       * Closing swaps the search input for the value button, so focus waits
+       * for the button to mount (see focusFieldAfterSwapRef).
+       */
+      focusFieldAfterSwapRef.current = true;
+    } else {
+      // Focusing the input asks to open the menu; closing it after wins.
+      inputRef.current?.focus();
+    }
+
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+  };
+
   return (
     <div
       ref={containerRef}
       id={props.id}
       className={props.className || "relative mt-2 mb-1 w-full"}
+      onBlur={closeWhenFocusLeaves}
+      onKeyDown={closeMenuOnEscape}
     >
       {isMulti && selectedOptions.length > 0 && (
         <div className="mb-2 flex flex-wrap gap-1.5">
@@ -1240,6 +1341,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
          */}
         {showSingleSelectedText && (
           <button
+            ref={valueButtonRef}
             type="button"
             disabled={props.disabled}
             aria-labelledby={props.ariaLabelledby}
@@ -1247,8 +1349,8 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
               if (props.disabled) {
                 return;
               }
+              focusFieldAfterSwapRef.current = true;
               setIsOpen(true);
-              inputRef.current?.focus();
             }}
             onFocus={() => {
               props.onFocus?.();
@@ -1406,16 +1508,10 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
                   }
                   return;
                 }
-                if (event.key === "Escape") {
-                  /*
-                   * The modal also listens for Escape. Consume it here so the
-                   * first press closes the menu without dismissing the form.
-                   */
-                  event.preventDefault();
-                  setIsOpen(false);
-                  setHighlightedIndex(-1);
-                  return;
-                }
+                /*
+                 * Escape bubbles to the container, which closes the menu for
+                 * every control in the dropdown alike (closeMenuOnEscape).
+                 */
                 if (
                   event.key === "Backspace" &&
                   searchQuery === "" &&

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

@@ -499,6 +499,15 @@ const FormField: <T extends GenericObject>(
                 id={props.field.id}
                 tabIndex={0}
                 dataTestId={props.field.dataTestId}
+                /*
+                 * A field its form locks (an alert's monitor, when that
+                 * monitor raised the alert) must not open, change or clear.
+                 * Only field.disabled: the form-wide props.isDisabled also
+                 * covers the form's own dropdown-options load, which
+                 * EntityDropdown never waits on because it searches the
+                 * server itself.
+                 */
+                disabled={props.field.disabled}
                 onChange={(
                   value: DropdownValue | Array<DropdownValue> | null,
                 ) => {
@@ -532,6 +541,7 @@ const FormField: <T extends GenericObject>(
                 id={props.field.id}
                 tabIndex={0}
                 dataTestId={props.field.dataTestId}
+                disabled={props.field.disabled}
                 onChange={async (
                   value: DropdownValue | Array<DropdownValue> | null,
                 ) => {

package/UI/Components/Forms/ModelForm.tsx

@@ -39,6 +39,7 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import FileModel from "../../../Models/DatabaseModels/DatabaseBaseModel/FileModel";
 import Label from "../../../Models/DatabaseModels/Label";
 import URL from "../../../Types/API/URL";
+import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
 import { ColumnAccessControl } from "../../../Types/BaseDatabase/AccessControl";
 import { Black, VeryLightGray } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
@@ -61,11 +62,39 @@ import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 import Select from "../../../Types/BaseDatabase/Select";
 
+/*
+ * Whether a dropdown's list request was refused because the person may not
+ * read that model (the server answers NotAuthorizedException with 422).
+ */
+export const isListRefusedForLackOfPermission: (err: unknown) => boolean = (
+  err: unknown,
+): boolean => {
+  return err instanceof HTTPErrorResponse && err.statusCode === 422;
+};
+
 export enum FormType {
   Create,
   Update,
 }
 
+/*
+ * Runs on a Create form just before the request goes out, with the model built
+ * from the form's model columns and the misc data the request will carry (the
+ * same object: what the hook adds or removes there is what is sent).
+ *
+ * `formValues` is every value the form holds, exactly as submitted - the
+ * inputs that are not model columns included. Read those values from here
+ * rather than from `miscDataProps`, which keeps only the truthy ones: a
+ * number input holding 0 or a switch left off would otherwise vanish.
+ */
+export type ModelFormOnBeforeCreate<
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+> = (
+  item: TBaseModel,
+  miscDataProps: JSONObject,
+  formValues: JSONObject,
+) => Promise<TBaseModel>;
+
 export interface ModelField<TBaseModel extends BaseModel | AnalyticsBaseModel>
   extends Field<TBaseModel> {
   overrideField?:
@@ -114,9 +143,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   initialValues?: FormValues<TBaseModel> | undefined;
   modelIdToEdit?: ObjectID | undefined;
   onError?: ((error: string) => void) | undefined;
-  onBeforeCreate?:
-    | ((item: TBaseModel, miscDataProps: JSONObject) => Promise<TBaseModel>)
-    | undefined;
+  onBeforeCreate?: ModelFormOnBeforeCreate<TBaseModel> | undefined;
   saveRequestOptions?: RequestOptions | undefined;
   doNotFetchExistingModel?: boolean | undefined;
   modelAPI?: typeof ModelAPI | undefined;
@@ -587,8 +614,22 @@ const ModelForm: <TBaseModel extends BaseModel>(
 
     setIsFetchingDropdownOptions(true);
 
-    try {
-      for (const field of fieldsToFetch) {
+    /*
+     * Each dropdown is fetched on its own, so one that fails still leaves the
+     * others their options. The first failure is shown once they are done,
+     * except a list the person may not read at all: that dropdown is simply
+     * left empty (and remembered as empty), as EntityDropdown does for its
+     * own requests. Reading the related model is a separate permission from
+     * editing this one, so someone may edit a field whose options they cannot
+     * list - an incident member and the status pages an incident is limited
+     * to - and a form-wide error on every step would say the form is broken
+     * when it is not. Pages that care explain the empty list next to the
+     * field.
+     */
+    let firstFetchError: unknown = null;
+
+    for (const field of fieldsToFetch) {
+      try {
         if (field.dropdownModal && field.dropdownModal.type) {
           const tempModel: BaseModel = new field.dropdownModal.type();
           const select: any = {
@@ -788,9 +829,26 @@ const ModelForm: <TBaseModel extends BaseModel>(
             selectByAccessControlProps: field.selectByAccessControlProps,
           });
         }
+      } catch (err) {
+        if (isListRefusedForLackOfPermission(err) && field.dropdownModal) {
+          field.dropdownOptions = [];
+
+          setCachedDropdownOptions(field.dropdownModal, {
+            dropdownOptions: [],
+            selectByAccessControlProps: undefined,
+          });
+
+          continue;
+        }
+
+        if (firstFetchError === null) {
+          firstFetchError = err;
+        }
       }
-    } catch (err) {
-      setError(API.getFriendlyMessage(err));
+    }
+
+    if (firstFetchError !== null) {
+      setError(API.getFriendlyMessage(firstFetchError));
     }
 
     if (generation === fieldsRunGeneration.current) {
@@ -1024,7 +1082,11 @@ const ModelForm: <TBaseModel extends BaseModel>(
       ) as TBaseModel;
 
       if (props.onBeforeCreate && props.formType === FormType.Create) {
-        tBaseModel = await props.onBeforeCreate(tBaseModel, miscDataProps);
+        tBaseModel = await props.onBeforeCreate(
+          tBaseModel,
+          miscDataProps,
+          values as JSONObject,
+        );
       }
 
       result = await modelAPI.createOrUpdate<TBaseModel>({

package/UI/Components/Forms/Validation.ts

@@ -51,7 +51,7 @@ const interpolateTemplate: (
  * we fall back to JS-interpolating the English template, so placeholders are
  * never shown literally and behavior is unchanged where i18n isn't set up.
  */
-const translateValidationMessage: (
+export const translateValidationMessage: (
   template: string,
   values?: InterpolationValues,
 ) => string = (template: string, values: InterpolationValues = {}): string => {

package/UI/Components/Input/Input.tsx

@@ -8,6 +8,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -70,6 +71,48 @@ export interface ComponentProps {
   autoComplete?: string | undefined;
 }
 
+type GetDateDisplayValueFunction = (
+  value: string | Date,
+  type: InputType | undefined,
+) => string | undefined;
+
+/*
+ * The text a date or datetime-local input shows for a stored value, in the
+ * form the browser's picker reads. Undefined leaves the display as it is: a
+ * value holding " - " is an InBetween range, which only a range filter shows.
+ * So does anything that is neither a string nor a Date - an untyped caller's
+ * number or JSON object - which the input has never tried to parse, and which
+ * would now be parsed during render, where a throw takes the page down.
+ */
+const getDateDisplayValue: GetDateDisplayValueFunction = (
+  value: string | Date,
+  type: InputType | undefined,
+): string | undefined => {
+  if (!value) {
+    return "";
+  }
+
+  if (typeof value !== "string" && !(value instanceof Date)) {
+    return undefined;
+  }
+
+  if (typeof value === "string" && value.includes(" - ")) {
+    return undefined;
+  }
+
+  const date: Date =
+    value instanceof Date ? value : OneUptimeDate.fromString(value);
+
+  try {
+    return type === InputType.DATETIME_LOCAL
+      ? OneUptimeDate.toDateTimeLocalString(date)
+      : OneUptimeDate.asDateForDatabaseQuery(date);
+  } catch (err: unknown) {
+    Logger.error(err as Error);
+    return "";
+  }
+};
+
 const Input: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -92,61 +135,54 @@ const Input: FunctionComponent<ComponentProps> = (
     className += " bg-gray-100 text-gray-500 cursor-not-allowed";
   }
 
-  const [value, setValue] = useState<string | Date>("");
+  const isDateInput: boolean =
+    props.type === InputType.DATE || props.type === InputType.DATETIME_LOCAL;
+
+  /*
+   * Seeded from the props on the first render, not by an effect after it.
+   *
+   * Seeding it from an effect meant the <input> was inserted blank and only
+   * filled in a task or more later, and in between it was on screen, focusable
+   * and typeable. Anything that put the caret in it during that window had it
+   * moved to the end when the value landed, so what was typed next went AFTER
+   * the prefilled text: the SLO burn rate form's Incident Title became "SLO
+   * burn rate: {{sloName}} — {{ruleName}}Coordinate response for {{sloName}}"
+   * when a fill selected the blank field just before its default template
+   * arrived. TextArea and MarkdownEditor already start from their props.
+   *
+   * The effects further down still follow a value or initialValue that
+   * changes after mounting.
+   */
+  const [value, setValue] = useState<string | Date>((): string | Date => {
+    return props.value || props.initialValue || "";
+  });
 
   /*
    * Only dates need a display form that differs from the stored value, and
    * working it out means parsing, so it stays in state behind an effect.
-   * Text keeps no second copy - see the comment on displayValue below.
+   * Text keeps no second copy - see the comment on displayValue below. Like
+   * the value, it starts from what the input mounts with.
    */
-  const [dateDisplayValue, setDateDisplayValue] = useState<string>("");
+  const [dateDisplayValue, setDateDisplayValue] = useState<string>(
+    (): string => {
+      return isDateInput ? getDateDisplayValue(value, props.type) ?? "" : "";
+    },
+  );
   const ref: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
 
-  const isDateInput: boolean =
-    props.type === InputType.DATE || props.type === InputType.DATETIME_LOCAL;
-
   useEffect(() => {
-    if (
-      props.type === InputType.DATE ||
-      props.type === InputType.DATETIME_LOCAL
-    ) {
-      if (value && (value as unknown) instanceof Date) {
-        let dateString: string = "";
-        try {
-          if (props.type === InputType.DATETIME_LOCAL) {
-            dateString = OneUptimeDate.toDateTimeLocalString(value as any);
-          } else {
-            dateString = OneUptimeDate.asDateForDatabaseQuery(value);
-          }
-        } catch (e: any) {
-          Logger.error(e);
-        }
-        setDateDisplayValue(dateString);
-      } else if (
-        value &&
-        (value as any).includes &&
-        !(value as any).includes(" - ")
-      ) {
-        // " - " is for InBetween dates.
-        const date: Date = OneUptimeDate.fromString(value);
-        let dateString: string = "";
-        try {
-          if (props.type === InputType.DATETIME_LOCAL) {
-            dateString = OneUptimeDate.toDateTimeLocalString(date);
-          } else {
-            dateString = OneUptimeDate.asDateForDatabaseQuery(date);
-          }
-        } catch (err: any) {
-          Logger.error(err);
-        }
-        setDateDisplayValue(dateString);
-      } else if (
-        !value ||
-        ((value as any).includes && !(value as any).includes(" - "))
-      ) {
-        setDateDisplayValue("");
-      }
+    if (!isDateInput) {
+      return;
+    }
+
+    const nextDateDisplayValue: string | undefined = getDateDisplayValue(
+      value,
+      props.type,
+    );
+
+    if (nextDateDisplayValue !== undefined) {
+      setDateDisplayValue(nextDateDisplayValue);
     }
   }, [value]);
 
@@ -172,7 +208,14 @@ const Input: FunctionComponent<ComponentProps> = (
     ? dateDisplayValue
     : (value as string) || "";
 
-  useEffect(() => {
+  /*
+   * A layout effect, so the write lands in the same commit that rendered the
+   * value. A passive effect runs after that commit, and for one that did not
+   * come from a click or a keystroke - data arriving, a timer - that is a later
+   * task. In between, the field would be on screen blank even though this
+   * component already knows what it holds.
+   */
+  useLayoutEffect(() => {
     const input: HTMLInputElement | null = ref.current;
 
     /*
@@ -185,16 +228,6 @@ const Input: FunctionComponent<ComponentProps> = (
     }
   }, [ref, displayValue]);
 
-  useEffect(() => {
-    if (props.initialValue) {
-      setValue(props.initialValue);
-    }
-
-    if (props.value) {
-      setValue(props.value);
-    }
-  }, []);
-
   useEffect(() => {
     if (props.initialValue) {
       setValue(props.initialValue);

package/UI/Components/List/ListRow.tsx

@@ -1,9 +1,8 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import Button, { ButtonSize } from "../Button/Button";
+import RowActions from "../ActionButton/RowActions";
 import Detail from "../Detail/Detail";
 import Field from "../Detail/Field";
 import Icon, { ThickProp } from "../Icon/Icon";
-import ConfirmModal from "../Modal/ConfirmModal";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement, useState, useEffect } from "react";
@@ -31,14 +30,6 @@ type ListRowFunction = <T extends GenericObject>(
 const ListRow: ListRowFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  const [isButtonLoading, setIsButtonLoading] = useState<Array<boolean>>(
-    props.actionButtons?.map(() => {
-      return false;
-    }) || [],
-  );
-
-  const [error, setError] = useState<string>("");
-
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -96,71 +87,14 @@ const ListRow: ListRowFunction = <T extends GenericObject>(
           )}
         </div>
 
-        <div
-          className={
-            props.enableDragAndDrop ? `flex mt-5 ml-5` : `flex mt-5 -ml-3`
-          }
-        >
-          {props.actionButtons?.map(
-            (button: ActionButtonSchema<T>, i: number) => {
-              if (button.isVisible && !button.isVisible(props.item)) {
-                return <></>;
-              }
-
-              // Hide button on mobile if hideOnMobile is true
-              if (button.hideOnMobile && isMobile) {
-                return <></>;
-              }
-
-              return (
-                <div key={i}>
-                  <Button
-                    buttonSize={ButtonSize.Small}
-                    title={button.title}
-                    icon={button.icon}
-                    buttonStyle={button.buttonStyleType}
-                    isLoading={isButtonLoading[i]}
-                    disabled={button.disabled}
-                    tooltip={button.tooltip}
-                    onClick={() => {
-                      if (button.disabled) {
-                        return;
-                      }
-
-                      if (button.onClick) {
-                        isButtonLoading[i] = true;
-                        setIsButtonLoading(isButtonLoading);
-                        button.onClick(
-                          props.item,
-                          () => {
-                            // on action complete
-                            isButtonLoading[i] = false;
-                            setIsButtonLoading(isButtonLoading);
-                          },
-                          (err: Error) => {
-                            isButtonLoading[i] = false;
-                            setIsButtonLoading(isButtonLoading);
-                            setError((err as Error).message);
-                          },
-                        );
-                      }
-                    }}
-                  />
-                </div>
-              );
-            },
-          )}
-        </div>
-        {error && (
-          <ConfirmModal
-            title={`Error`}
-            description={error}
-            submitButtonText={"Close"}
-            onSubmit={() => {
-              return setError("");
-            }}
+        <div className={props.enableDragAndDrop ? `mt-5 ml-8` : `mt-5`}>
+          <RowActions<T>
+            item={props.item}
+            actionButtons={props.actionButtons}
+            isMobile={isMobile}
+            className="justify-start"
           />
-        )}
+        </div>
       </div>
     );
   };