@oneuptime/common 12.0.34 → 13.0.1

package/UI/Components/Forms/ModelForm.tsx

@@ -51,7 +51,7 @@ import Permission, {
   UserPermission,
 } from "../../../Types/Permission";
 import Typeof from "../../../Types/Typeof";
-import React, { MutableRefObject, ReactElement, useState } from "react";
+import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 import Select from "../../../Types/BaseDatabase/Select";
 
@@ -132,6 +132,37 @@ const ModelForm: <TBaseModel extends BaseModel>(
   const [itemToEdit, setItemToEdit] = useState<TBaseModel | null>(null);
   const model: TBaseModel = new props.modelType();
 
+  /*
+   * Almost every caller writes its `fields` as an inline array literal in JSX,
+   * so the array is a brand new identity on every render of the page holding
+   * the form - which makes the effect below re-run whenever ANY unrelated
+   * state on that page changes, including while the user is typing into this
+   * form. Two guards keep that from being destructive:
+   *
+   *  - `dropdownOptionsCache` remembers the options already fetched for a
+   *    given dropdown, so a re-run does not fire the same list request again.
+   *    Without it the invite-user form issued a Team list request per
+   *    keystroke.
+   *  - `fieldsRunGeneration` discards a slower earlier run, so an in-flight
+   *    request that resolves after a newer one cannot put stale fields back
+   *    or clear a loading flag the newer run still owns.
+   */
+  type DropdownOptionsCacheEntry = {
+    dropdownOptions: Array<DropdownOption>;
+    selectByAccessControlProps: Field<TBaseModel>["selectByAccessControlProps"];
+  };
+
+  /*
+   * Keyed on the model CONSTRUCTOR rather than on its name, so two models can
+   * never share an entry however they are named - a model with neither a
+   * tableName nor a singularName would otherwise key as the empty string.
+   */
+  const dropdownOptionsCache: MutableRefObject<
+    Map<unknown, Dictionary<DropdownOptionsCacheEntry>>
+  > = useRef<Map<unknown, Dictionary<DropdownOptionsCacheEntry>>>(new Map());
+
+  const fieldsRunGeneration: MutableRefObject<number> = useRef<number>(0);
+
   const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
 
   type GetSelectFieldsFunction = () => Select<TBaseModel>;
@@ -242,6 +273,9 @@ const ModelForm: <TBaseModel extends BaseModel>(
   };
 
   const setFormFields: PromiseVoidFunction = async (): Promise<void> => {
+    fieldsRunGeneration.current = fieldsRunGeneration.current + 1;
+    const generation: number = fieldsRunGeneration.current;
+
     let fieldsToSet: Fields<TBaseModel> = [];
 
     for (const field of props.fields) {
@@ -314,7 +348,12 @@ const ModelForm: <TBaseModel extends BaseModel>(
       }
     }
 
-    fieldsToSet = await fetchDropdownOptions(fieldsToSet);
+    fieldsToSet = await fetchDropdownOptions(fieldsToSet, generation);
+
+    if (generation !== fieldsRunGeneration.current) {
+      // A newer run started while this one was fetching. It owns the state now.
+      return;
+    }
 
     // if there are no fields to set, then show permission error. This is useful when there are no fields to show.
     if (fieldsToSet.length === 0 && props.fields.length > 0) {
@@ -441,15 +480,103 @@ const ModelForm: <TBaseModel extends BaseModel>(
 
   type FetchDropdownOptionsFunction = (
     fields: Fields<TBaseModel>,
+    generation: number,
   ) => Promise<Fields<TBaseModel>>;
 
+  /*
+   * What a dropdown's options depend on, and nothing else: the model, and the
+   * two columns read off it. The request below takes no query and no closure
+   * state, so two fields with the same three always get the same list back -
+   * which is what makes caching them safe.
+   */
+  type GetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ) => DropdownOptionsCacheEntry | undefined;
+
+  type SetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+    entry: DropdownOptionsCacheEntry,
+  ) => void;
+
+  const getDropdownColumnsKey: (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ) => string = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ): string => {
+    return `${dropdownModal.labelField}|${dropdownModal.valueField}`;
+  };
+
+  const getCachedDropdownOptions: GetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ): DropdownOptionsCacheEntry | undefined => {
+    return dropdownOptionsCache.current.get(dropdownModal.type)?.[
+      getDropdownColumnsKey(dropdownModal)
+    ];
+  };
+
+  const setCachedDropdownOptions: SetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+    entry: DropdownOptionsCacheEntry,
+  ): void => {
+    const byColumns: Dictionary<DropdownOptionsCacheEntry> =
+      dropdownOptionsCache.current.get(dropdownModal.type) || {};
+
+    byColumns[getDropdownColumnsKey(dropdownModal)] = entry;
+
+    dropdownOptionsCache.current.set(dropdownModal.type, byColumns);
+  };
+
   const fetchDropdownOptions: FetchDropdownOptionsFunction = async (
     fields: Fields<TBaseModel>,
+    generation: number,
   ): Promise<Fields<TBaseModel>> => {
+    /*
+     * Serve everything already fetched from the cache first, then work out
+     * whether anything is actually left to request. Flipping the loading flag
+     * for a run that has nothing to fetch used to blank the whole form (see
+     * the comment on the render guard below), so only flip it when a real
+     * request is about to go out.
+     */
+    const fieldsToFetch: Fields<TBaseModel> = [];
+
+    for (const field of fields) {
+      if (!field.dropdownModal || !field.dropdownModal.type) {
+        continue;
+      }
+
+      const cached: DropdownOptionsCacheEntry | undefined =
+        getCachedDropdownOptions(field.dropdownModal);
+
+      if (cached) {
+        field.dropdownOptions = cached.dropdownOptions;
+
+        if (cached.selectByAccessControlProps) {
+          field.selectByAccessControlProps = cached.selectByAccessControlProps;
+        }
+
+        continue;
+      }
+
+      fieldsToFetch.push(field);
+    }
+
+    if (fieldsToFetch.length === 0) {
+      /*
+       * Nothing to wait for. Clearing rather than just returning keeps the flag
+       * from being left on by an older run that lost the race and therefore
+       * declined to clear it - React bails out when it is already false.
+       */
+      if (generation === fieldsRunGeneration.current) {
+        setIsFetchingDropdownOptions(false);
+      }
+
+      return fields;
+    }
+
     setIsFetchingDropdownOptions(true);
 
     try {
-      for (const field of fields) {
+      for (const field of fieldsToFetch) {
         if (field.dropdownModal && field.dropdownModal.type) {
           const tempModel: BaseModel = new field.dropdownModal.type();
           const select: any = {
@@ -642,13 +769,21 @@ const ModelForm: <TBaseModel extends BaseModel>(
           } else {
             field.dropdownOptions = [];
           }
+
+          setCachedDropdownOptions(field.dropdownModal, {
+            dropdownOptions: (field.dropdownOptions ||
+              []) as Array<DropdownOption>,
+            selectByAccessControlProps: field.selectByAccessControlProps,
+          });
         }
       }
     } catch (err) {
       setError(API.getFriendlyMessage(err));
     }
 
-    setIsFetchingDropdownOptions(false);
+    if (generation === fieldsRunGeneration.current) {
+      setIsFetchingDropdownOptions(false);
+    }
 
     return fields;
   };
@@ -849,7 +984,26 @@ const ModelForm: <TBaseModel extends BaseModel>(
     }
   };
 
-  if (isFetching || isFetchingDropdownOptions) {
+  /*
+   * Only ever swap the form out for a loader while there is no form to show.
+   * Returning the loader over a form the user is already filling in unmounts
+   * BasicModelForm and everything under it, and a form's values live in that
+   * subtree - in BasicForm's refs and in each Input's own state, since Input
+   * is DOM-uncontrolled. So the remount silently threw the user's input away.
+   *
+   * That is what made inviting a user impossible: the invite form's Email field
+   * calls back into the page on every keystroke to check whether the address
+   * already has an account, the page re-renders with a fresh `fields` array
+   * literal, the effect above re-runs, and the form the user was typing into
+   * was destroyed and rebuilt empty.
+   *
+   * Once fields exist, options refresh in the background instead. The cache in
+   * fetchDropdownOptions means the usual re-run does not even reach the
+   * network, so in practice nothing about the form flickers at all.
+   */
+  const hasFieldsToRender: boolean = fields.length > 0;
+
+  if (isFetching || (isFetchingDropdownOptions && !hasFieldsToRender)) {
     return (
       <div className="row flex justify-center mt-20 mb-20">
         <Loader loaderType={LoaderType.Bar} color={VeryLightGray} size={200} />

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

@@ -130,7 +130,12 @@ export default interface Field<TEntity> {
     | undefined;
   radioButtonOptions?: Array<RadioButton>;
   footerElement?: ReactElement | undefined;
-  getFooterElement?: (values: FormValues<TEntity>) => ReactElement | undefined;
+  getFooterElement?: (
+    values: FormValues<TEntity>,
+    error?: string,
+  ) => ReactElement | undefined;
+  // For Input fields: render errors in the footer linked by ariaDescribedby.
+  errorMessageInFooter?: boolean | undefined;
   id?: string | undefined;
   getCustomElement?: (
     values: FormValues<TEntity>,
@@ -138,6 +143,8 @@ export default interface Field<TEntity> {
   ) => ReactElement | undefined; // custom element to render instead of the elements in the form.
   categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
   dataTestId?: string | undefined;
+  autoComplete?: string | undefined;
+  ariaDescribedby?: string | undefined;
 
   // set this to true if you want to show this field in the form even when the form is in edit mode.
   doNotShowWhenEditing?: boolean | undefined;

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -12,6 +12,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -65,7 +66,12 @@ export interface ComponentProps {
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [days, setDays] = useState<number>(0);
+  const days: number = useMemo(() => {
+    return OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
+      props.startDate,
+      props.endDate,
+    );
+  }, [props.startDate, props.endDate]);
 
   /*
    * The strip is one tab stop with a roving tabindex inside it - see
@@ -100,15 +106,6 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     barRefs.current[focusedBarIndex]?.focus();
   }, [focusedBarIndex]);
 
-  useEffect(() => {
-    setDays(
-      OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
-        props.startDate,
-        props.endDate,
-      ),
-    );
-  }, [props.startDate, props.endDate]);
-
   const activeBarIndex: number = DayUptimeGraphUtil.getActiveBarIndex({
     storedIndex: focusedBarIndex,
     barCount: days,
@@ -360,6 +357,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     return (
       <Tooltip
         key={dayNumber}
+        lazy={true}
         richContent={
           <UptimeBarTooltip
             date={todaysDay}

package/UI/Components/Icon/Icon.tsx

@@ -3022,6 +3022,22 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M4.928 1.825c-1.09.553-1.09.64-.07 1.78 5.655 6.295 7.004 7.782 7.107 7.782.139.017 7.971-8.542 8.058-8.801.034-.07-.208-.312-.519-.536-.415-.312-.864-.433-1.712-.467-1.59-.104-2.144.242-4.115 2.455-.899 1.003-1.66 1.833-1.66 1.833-.017 0-.76-.813-1.642-1.798S8.473 2.1 8.127 1.91c-.796-.45-2.421-.484-3.2-.086zM1.297 4.367C.45 4.695 0 5.007 0 5.248c0 .121 1.331 1.678 2.94 3.459 1.625 1.78 2.939 3.268 2.939 3.302 0 .035-1.331 1.522-2.94 3.303C1.314 17.11.017 18.683.035 18.822c.086.467 1.504 1.055 2.541 1.055 1.678-.018 2.058-.312 5.603-4.202 1.78-1.954 3.233-3.614 3.233-3.666 0-.069-1.435-1.694-3.199-3.63-2.3-2.508-3.423-3.632-3.96-3.874-.812-.398-2.126-.467-2.956-.138zm18.467.12c-.502.26-1.764 1.505-3.943 3.891-1.763 1.937-3.199 3.562-3.199 3.631 0 .07 1.453 1.712 3.234 3.666 3.544 3.89 3.925 4.184 5.602 4.202 1.038 0 2.455-.588 2.542-1.055.017-.156-1.28-1.712-2.905-3.493-1.608-1.78-2.94-3.285-2.94-3.32 0-.034 1.332-1.539 2.94-3.32C22.72 6.91 24.017 5.352 24 5.214c-.087-.45-1.366-.968-2.473-1.038-.795-.034-1.21.035-1.763.312zM7.954 16.973c-2.144 2.369-3.908 4.374-3.943 4.46-.034.07.208.312.52.537.414.311.864.432 1.711.467 1.574.103 2.161-.26 4.15-2.508.864-.968 1.608-1.78 1.625-1.78s.761.812 1.643 1.798c2.023 2.248 2.559 2.576 4.132 2.49.848-.035 1.297-.156 1.712-.467.311-.225.553-.467.519-.536-.087-.26-7.92-8.819-8.058-8.801-.069 0-1.867 1.954-4.011 4.34z"
       />,
     );
+  } else if (icon === IconProp.VMware) {
+    /*
+     * VMware — hypervisor mark: a host chassis with three virtual machines
+     * stacked on the hypervisor layer. Drawn in the outlined house style
+     * (currentColor stroke) so it sits at 16px next to the other resource
+     * brand logos (Proxmox / Ceph / Docker) without a filled wordmark.
+     */
+    return getSvgWrapper(
+      <>
+        <rect x="3" y="4" width="18" height="16" rx="2" />
+        <path strokeLinecap="round" d="M3 16h18" />
+        <rect x="6" y="7" width="3" height="6" rx="0.75" />
+        <rect x="10.5" y="7" width="3" height="6" rx="0.75" />
+        <rect x="15" y="7" width="3" height="6" rx="0.75" />
+      </>,
+    );
   } else if (icon === IconProp.IoT) {
     // IoT — wireless/connectivity mark (reuses the Signal icon path).
     return getSvgWrapper(

package/UI/Components/Input/Input.tsx

@@ -85,10 +85,19 @@ const Input: FunctionComponent<ComponentProps> = (
   }
 
   const [value, setValue] = useState<string | Date>("");
-  const [displayValue, setDisplayValue] = useState<string>("");
+
+  /*
+   * 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.
+   */
+  const [dateDisplayValue, setDateDisplayValue] = useState<string>("");
   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 ||
@@ -105,7 +114,7 @@ const Input: FunctionComponent<ComponentProps> = (
         } catch (e: any) {
           Logger.error(e);
         }
-        setDisplayValue(dateString);
+        setDateDisplayValue(dateString);
       } else if (
         value &&
         (value as any).includes &&
@@ -123,21 +132,47 @@ const Input: FunctionComponent<ComponentProps> = (
         } catch (err: any) {
           Logger.error(err);
         }
-        setDisplayValue(dateString);
+        setDateDisplayValue(dateString);
       } else if (
         !value ||
         ((value as any).includes && !(value as any).includes(" - "))
       ) {
-        setDisplayValue("");
+        setDateDisplayValue("");
       }
-    } else {
-      setDisplayValue(value as string);
     }
   }, [value]);
 
+  /*
+   * For text the display value IS the value, derived here rather than kept in
+   * a second piece of state, and that is load-bearing rather than tidiness.
+   *
+   * This <input> is uncontrolled - React never writes its `value` attribute -
+   * so the effect below is the only thing keeping the DOM and this component
+   * in step. When the display value was its own state it settled one render
+   * behind `value`, and anything that interleaved a render between those two
+   * commits (a parent re-rendering while the user typed, which is exactly what
+   * the invite form does on every keystroke) made the effect write the older
+   * copy back over text the browser already held. The character typed in that
+   * window disappeared - the "typed characters vanish as I type" half of the
+   * invite-user bug, and a silent character-eater in every form in the product.
+   *
+   * Derived, the two can no longer drift: `setValue` runs synchronously in the
+   * change handler, so by the time any render commits, this already equals
+   * what the user typed.
+   */
+  const displayValue: string = isDateInput
+    ? dateDisplayValue
+    : (value as string) || "";
+
   useEffect(() => {
     const input: HTMLInputElement | null = ref.current;
-    if (input) {
+
+    /*
+     * Never write when it would not change anything: assigning to input.value
+     * moves the caret to the end, so an unconditional write reorders text
+     * whenever someone edits in the middle of a field.
+     */
+    if (input && input.value !== displayValue) {
       input.value = displayValue;
     }
   }, [ref, displayValue]);