@oneuptime/common 12.0.34 → 13.0.1

package/UI/Components/Calendar/Calendar.css

@@ -302,3 +302,81 @@
   );
   border: 1px solid rgba(217, 119, 6, 0.4);
 }
+
+/* ---------- Override (substituted) events ----------
+   A block that says "somebody else is taking this person's alerts". The colour
+   alone cannot carry that: it is the SUBSTITUTE's colour, and a reader who does
+   not already know the roster cannot tell it from an ordinary shift. Three
+   independent cues, so none of them has to survive on its own:
+
+   1. a stripe down the leading edge in the OVERRIDDEN person's colour, which
+      is what makes the swap readable when the week-view column is too narrow
+      to show any text at all;
+   2. a dotted inner rule beside it, so the distinction still lands in
+      greyscale and for a reader who cannot separate the two hues;
+   3. the label itself, which the caller prefixes.
+
+   --oneuptime-event-accent is set per event by Calendar.tsx's eventPropGetter
+   from CalendarEvent.accentColor; the fallback keeps the stripe visible if a
+   caller sets the class without a colour. */
+.oneuptime-calendar .rbc-event.oneuptime-calendar-event--override {
+  position: relative;
+  padding-left: 0.75rem;
+  overflow: hidden;
+}
+
+.oneuptime-calendar .rbc-event.oneuptime-calendar-event--override::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0.3125rem;
+  background-color: var(--oneuptime-event-accent, #6b7280);
+  /* Sits above the label so a long name cannot paint over the cue. */
+  z-index: 1;
+}
+
+.oneuptime-calendar .rbc-event.oneuptime-calendar-event--override::after {
+  content: "";
+  position: absolute;
+  top: 0.15rem;
+  bottom: 0.15rem;
+  left: 0.4375rem;
+  border-left: 1px dotted currentColor;
+  opacity: 0.65;
+  z-index: 1;
+}
+
+/* The agenda view renders events as table rows, where an absolutely positioned
+   stripe has nothing to anchor to. Give that view a plain left border instead
+   so the same event is still marked there. */
+.oneuptime-calendar
+  .rbc-agenda-view
+  table.rbc-agenda-table
+  tbody
+  > tr.oneuptime-calendar-event--override
+  > td:first-child {
+  border-left: 0.25rem solid var(--oneuptime-event-accent, #6b7280);
+}
+
+/* Legend swatch for the override key. The block it names is drawn in two
+   people's colours, so the swatch is too - generic hues here, since the key
+   speaks for every override on the grid rather than for one of them. */
+.oneuptime-calendar-override-swatch {
+  position: relative;
+  overflow: hidden;
+  background-color: #6366f1; /* indigo-500 - stands for the substitute */
+  border: 1px solid rgba(79, 70, 229, 0.35); /* indigo-600 */
+}
+
+.oneuptime-calendar-override-swatch::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 45%;
+  /* Stands for the person who was overridden. */
+  background-color: #9ca3af; /* gray-400 */
+}

package/UI/Components/Calendar/Calendar.tsx

@@ -75,9 +75,33 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
       display: "block",
     };
 
-    return {
-      style,
-    };
+    /*
+     * The accent colour reaches CSS as a custom property rather than as a
+     * border here, so the stylesheet decides how to draw it (an inset stripe
+     * today) and the two can be changed together in one place.
+     */
+    if (event.accentColor) {
+      (style as Record<string, string>)["--oneuptime-event-accent"] =
+        event.accentColor.toString();
+    }
+
+    const className: string | undefined = event.className
+      ? event.className.toString()
+      : undefined;
+
+    return className ? { style, className } : { style };
+  };
+
+  /*
+   * react-big-calendar's default tooltip is the title, which is already
+   * truncated in the block itself — so hovering a clipped label tells the
+   * reader exactly as little as looking at it did. Prefer `desc`, which callers
+   * use for the full, multi-line explanation of what the block means.
+   */
+  const eventTooltipGetter: (event: CalendarEvent) => string = (
+    event: CalendarEvent,
+  ): string => {
+    return event.desc?.toString() || event.title;
   };
 
   return (
@@ -94,6 +118,7 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
         views={CALENDAR_VIEWS}
         defaultView={props.defaultCalendarView || "week"}
         eventPropGetter={eventStyleGetter}
+        tooltipAccessor={eventTooltipGetter}
         popup
         onRangeChange={(range: Date[] | { start: Date; end: Date }) => {
           if (Array.isArray(range)) {

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -5,7 +5,7 @@ import PermissionGate, {
   PermissionGateResult,
 } from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
-import Card from "../Card/Card";
+import Card, { CardButtonSchema } from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Detail from "../Detail/Detail";
 import { DropdownOption } from "../Dropdown/Dropdown";
@@ -79,6 +79,22 @@ export interface ComponentProps {
    * real reason.
    */
   hideIfEmpty?: boolean | undefined;
+  /*
+   * Card buttons that belong beside "Edit Fields" rather than on a card of
+   * their own — the Monitor Template's "Sync Custom Fields to Linked Monitors"
+   * being the one that exists. They render after the edit button and are not
+   * touched by the gating above: whether a push to other records is offered is
+   * the caller's decision, not this card's.
+   */
+  additionalButtons?: Array<CardButtonSchema> | undefined;
+  /*
+   * The record's stored bag, handed back after every load — including the
+   * reload that follows a save — so a caller whose extra button acts on those
+   * values can enable and word it from what is actually stored, rather than
+   * re-reading the record behind this card's back and going stale the moment
+   * somebody edits it here.
+   */
+  onValuesLoaded?: ((customFields: JSONObject) => void) | undefined;
 }
 
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
@@ -219,6 +235,12 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       setSchemaList(schemaList.data);
       setModel(item);
 
+      if (props.onValuesLoaded) {
+        props.onValuesLoaded(
+          ((item as any)?.["customFields"] as JSONObject) || {},
+        );
+      }
+
       setIsLoading(false);
     } catch (err) {
       setIsLoading(false);
@@ -313,30 +335,33 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   const showEditButton: boolean =
     canEdit && (updateGate.isAllowed || Boolean(updateGate.disabledReason));
 
+  const cardButtons: Array<CardButtonSchema> = [
+    ...(showEditButton
+      ? [
+          {
+            title: "Edit Fields",
+            buttonStyle: ButtonStyleType.NORMAL,
+            disabled: !updateGate.isAllowed,
+            tooltip: updateGate.disabledReason,
+            onClick: () => {
+              if (!updateGate.isAllowed) {
+                return;
+              }
+
+              setShowModelForm(true);
+            },
+            icon: IconProp.Edit,
+          } as CardButtonSchema,
+        ]
+      : []),
+    ...(props.additionalButtons || []),
+  ];
+
   return (
     <Card
       title={props.title}
       description={props.description}
-      buttons={
-        showEditButton
-          ? [
-              {
-                title: "Edit Fields",
-                buttonStyle: ButtonStyleType.NORMAL,
-                disabled: !updateGate.isAllowed,
-                tooltip: updateGate.disabledReason,
-                onClick: () => {
-                  if (!updateGate.isAllowed) {
-                    return;
-                  }
-
-                  setShowModelForm(true);
-                },
-                icon: IconProp.Edit,
-              },
-            ]
-          : []
-      }
+      buttons={cardButtons}
     >
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
         {isLoading && !loadError && <ComponentLoader />}

package/UI/Components/Dashboard/DashboardVariableControl.tsx

@@ -0,0 +1,285 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import DashboardVariable, {
+  DashboardVariableType,
+  DashboardVariableOption,
+} from "../../../Types/Dashboard/DashboardVariable";
+
+export interface VariableValueChange {
+  selectedValue?: string | undefined;
+  selectedValues?: Array<string> | undefined;
+}
+
+export interface ComponentProps {
+  variable: DashboardVariable;
+  dynamicOptions?: Array<string> | undefined;
+  isLoadingOptions?: boolean | undefined;
+  onVariableValueChange: (
+    variableId: string,
+    change: VariableValueChange,
+  ) => void;
+}
+
+const MultiSelectPopover: FunctionComponent<{
+  options: Array<DashboardVariableOption>;
+  selected: Array<string>;
+  label: string;
+  isLoading: boolean;
+  maxSelections?: number | undefined;
+  unavailableLabel?: string | undefined;
+  onChange: (next: Array<string>) => void;
+}> = ({
+  options,
+  selected,
+  label,
+  isLoading,
+  maxSelections,
+  unavailableLabel,
+  onChange,
+}: {
+  options: Array<DashboardVariableOption>;
+  selected: Array<string>;
+  label: string;
+  isLoading: boolean;
+  maxSelections?: number | undefined;
+  unavailableLabel?: string | undefined;
+  onChange: (next: Array<string>) => void;
+}): ReactElement => {
+  const [open, setOpen] = useState<boolean>(false);
+  const wrapRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const onDocClick: (e: MouseEvent) => void = (e: MouseEvent): void => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+    };
+  }, [open]);
+
+  const buttonText: string =
+    selected.length === 0
+      ? isLoading
+        ? "Loading…"
+        : "All"
+      : selected.length === 1
+        ? options.find((option: DashboardVariableOption) => {
+            return option.value === selected[0];
+          })?.label ||
+          unavailableLabel ||
+          (selected[0] as string)
+        : `${selected.length} selected`;
+
+  const toggle: (value: string) => void = (value: string): void => {
+    if (selected.includes(value)) {
+      onChange(
+        selected.filter((v: string) => {
+          return v !== value;
+        }),
+      );
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+
+  return (
+    <div className="relative" ref={wrapRef}>
+      <button
+        type="button"
+        className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors flex items-center gap-1"
+        disabled={isLoading}
+        onClick={() => {
+          setOpen(!open);
+        }}
+        title={label}
+        aria-label={`${label}: ${buttonText}`}
+        aria-expanded={open}
+      >
+        <span className="truncate max-w-[10rem]">{buttonText}</span>
+        <span className="text-gray-400">▾</span>
+      </button>
+      {open && (
+        <div className="absolute z-30 mt-1 right-0 w-56 max-h-72 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg py-1">
+          <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-100 text-[11px] text-gray-500">
+            <span>{selected.length} selected</span>
+            <button
+              type="button"
+              className="text-blue-600 hover:underline disabled:text-gray-300"
+              disabled={selected.length === 0}
+              onClick={() => {
+                onChange([]);
+              }}
+            >
+              Clear
+            </button>
+          </div>
+          {maxSelections !== undefined && selected.length >= maxSelections && (
+            <p className="px-3 py-1 text-xs text-gray-500">
+              Choose up to {maxSelections} labels.
+            </p>
+          )}
+          {options.length === 0 ? (
+            <div className="px-3 py-2 text-xs text-gray-400">
+              {isLoading ? "Loading options…" : "No options available"}
+            </div>
+          ) : (
+            options.map((option: DashboardVariableOption) => {
+              const checked: boolean = selected.includes(option.value);
+              return (
+                <label
+                  key={option.value}
+                  className="flex items-center gap-2 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    className="h-3.5 w-3.5"
+                    checked={checked}
+                    disabled={
+                      !checked &&
+                      maxSelections !== undefined &&
+                      selected.length >= maxSelections
+                    }
+                    onChange={() => {
+                      toggle(option.value);
+                    }}
+                  />
+                  <span className="truncate">{option.label}</span>
+                </label>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DashboardVariableControl: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const { variable } = props;
+  const isTelemetryAttribute: boolean =
+    variable.type === DashboardVariableType.TelemetryAttribute;
+  const isCustomList: boolean =
+    variable.type === DashboardVariableType.CustomList ||
+    Boolean(variable.customListValues);
+
+  const customListOptions: Array<string> = variable.customListValues
+    ? variable.customListValues.split(",").map((v: string) => {
+        return v.trim();
+      })
+    : [];
+
+  const isProjectLabel: boolean =
+    variable.type === DashboardVariableType.ProjectLabel;
+  const options: Array<DashboardVariableOption> = isProjectLabel
+    ? variable.labelOptions || []
+    : (isTelemetryAttribute
+        ? props.dynamicOptions || []
+        : customListOptions
+      ).map((value: string) => {
+        return { label: value, value };
+      });
+  const selectedValue: string =
+    variable.selectedValue ?? variable.defaultValue ?? "";
+  const isUnavailableSelection: boolean = Boolean(
+    isProjectLabel &&
+      selectedValue &&
+      !options.some((option: DashboardVariableOption) => {
+        return option.value === selectedValue;
+      }),
+  );
+
+  const useSelect: boolean =
+    isTelemetryAttribute || isCustomList || isProjectLabel;
+  const label: string = variable.label || variable.name;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <label className="text-xs font-medium text-gray-400 uppercase tracking-wide">
+        {label}
+      </label>
+      {useSelect && variable.isMultiSelect ? (
+        /*
+         * `selectedValues` only — never defaultValue. The popover renders
+         * "All" for an empty list, and DashboardVariableInterpolation
+         * resolves an empty list to no predicate, so the two agree. Seeding
+         * this from defaultValue would put a filter behind a control that
+         * reads "All".
+         */
+        <MultiSelectPopover
+          options={options}
+          selected={variable.selectedValues || []}
+          label={label}
+          isLoading={Boolean(props.isLoadingOptions)}
+          maxSelections={isProjectLabel ? 100 : undefined}
+          unavailableLabel={isProjectLabel ? "Unavailable label" : undefined}
+          onChange={(next: Array<string>) => {
+            props.onVariableValueChange(variable.id, { selectedValues: next });
+          }}
+        />
+      ) : useSelect ? (
+        <select
+          aria-label={label}
+          className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors"
+          /*
+           * `??`, not `||`: picking "All" stores selectedValue as "", which is
+           * a real selection and must not collapse back to defaultValue. Only
+           * an unset (undefined) selection falls through to the default — the
+           * same rule the query side applies in
+           * Common/Utils/Dashboard/VariableInterpolation.ts, so what the
+           * toolbar shows and what the widgets are filtered by stay in step.
+           */
+          value={variable.selectedValue ?? variable.defaultValue ?? ""}
+          disabled={props.isLoadingOptions}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            props.onVariableValueChange(variable.id, {
+              selectedValue: e.target.value,
+            });
+          }}
+        >
+          <option value="">
+            {props.isLoadingOptions ? "Loading…" : "All"}
+          </option>
+          {isUnavailableSelection && (
+            <option value={selectedValue}>Unavailable label</option>
+          )}
+          {options.map((option: DashboardVariableOption) => {
+            return (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            );
+          })}
+        </select>
+      ) : (
+        <input
+          type="text"
+          aria-label={label}
+          className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 w-28 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors"
+          // `??` so clearing the box stays cleared. See the select above.
+          value={variable.selectedValue ?? variable.defaultValue ?? ""}
+          placeholder={variable.name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            props.onVariableValueChange(variable.id, {
+              selectedValue: e.target.value,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DashboardVariableControl;

package/UI/Components/Forms/BasicForm.tsx

@@ -152,6 +152,15 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
     const isInitialValuesSet: MutableRefObject<boolean> = useRef(false);
 
+    /*
+     * Nothing may re-seed a form the user has already typed into. The guard
+     * above latches once, which is enough on its own, but "the value the user
+     * entered survives" is the one property of a form that must never quietly
+     * regress - so it is asserted directly rather than inferred from the order
+     * two effects happen to run in.
+     */
+    const hasUserEdited: MutableRefObject<boolean> = useRef(false);
+
     const refCurrentValue: React.MutableRefObject<FormValues<T>> = useRef(
       props.initialValues || {},
     );
@@ -310,6 +319,24 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       setFormFields(fields);
     }, [props.fields, currentFormStepId]);
 
+    /*
+     * A field is only worth disabling while options are being fetched if it is
+     * one of the fields those options belong to. Disabling everything meant a
+     * Text or Email field went read-only because some unrelated dropdown was
+     * refreshing - and Input renders `disabled` as `readOnly`, so it stays
+     * focusable and simply swallows the keystrokes with no visible reason.
+     */
+    type IsDropdownFieldFunction = (field: Field<T>) => boolean;
+
+    const isDropdownField: IsDropdownFieldFunction = (
+      field: Field<T>,
+    ): boolean => {
+      return (
+        field.fieldType === FormFieldSchemaType.Dropdown ||
+        field.fieldType === FormFieldSchemaType.MultiSelectDropdown
+      );
+    };
+
     type GetFieldNameFunction = (field: Field<T>) => string;
 
     const getFieldName: GetFieldNameFunction = (field: Field<T>): string => {
@@ -347,6 +374,8 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         [fieldName]: value as any,
       };
 
+      hasUserEdited.current = true;
+
       refCurrentValue.current = updatedValue;
 
       setCurrentValue(refCurrentValue.current);
@@ -484,7 +513,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         return;
       }
 
-      if (isInitialValuesSet.current) {
+      if (isInitialValuesSet.current || hasUserEdited.current) {
         return;
       }
 
@@ -601,7 +630,16 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         if (field.getDefaultValue && (values as any)[fieldName] === undefined) {
           (values as any)[fieldName] = field.getDefaultValue(values);
         }
+      }
 
+      /*
+       * Latch only once the field list has actually arrived. formFields starts
+       * empty and is filled in by an effect, so latching before then would
+       * skip every default value and every dropdown/date normalisation above.
+       * (This used to be written as an assignment inside the loop, which had
+       * the same effect by accident.)
+       */
+      if (formFields.length > 0) {
         isInitialValuesSet.current = true;
       }
 
@@ -747,7 +785,8 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                                       touched={touched[fieldName] || false}
                                       isDisabled={
                                         isLoading ||
-                                        isDropdownOptionsLoading ||
+                                        (isDropdownOptionsLoading &&
+                                          isDropdownField(field)) ||
                                         false
                                       }
                                       currentValues={refCurrentValue.current}
@@ -770,6 +809,9 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                                     {field.getFooterElement &&
                                       field.getFooterElement(
                                         refCurrentValue.current,
+                                        touched[fieldName]
+                                          ? errors[fieldName] || undefined
+                                          : undefined,
                                       )}
                                   </div>
                                 </Fragment>

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

@@ -14,7 +14,8 @@ import React, {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { ChromePicker, ColorResult } from "react-color";
+import ChromePicker from "react-color/lib/components/chrome/Chrome";
+import type { ColorResult } from "react-color";
 
 // ChromePicker renders at a fixed intrinsic width.
 const COLOR_PICKER_POPUP_WIDTH_PX: number = 225;

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

@@ -932,13 +932,26 @@ const FormField: <T extends GenericObject>(
               id={fieldId}
               tabIndex={0}
               disabled={props.isDisabled || props.field.disabled}
-              error={props.touched && props.error ? props.error : undefined}
+              error={
+                !props.field.errorMessageInFooter &&
+                props.touched &&
+                props.error
+                  ? props.error
+                  : undefined
+              }
+              ariaInvalid={Boolean(
+                props.field.errorMessageInFooter &&
+                  props.touched &&
+                  props.error,
+              )}
               dataTestId={props.field.dataTestId}
               type={fieldType as InputType}
+              ariaDescribedby={props.field.ariaDescribedby}
               autoComplete={
-                props.field.fieldType
+                props.field.autoComplete ||
+                (props.field.fieldType
                   ? getAutoComplete(props.field.fieldType)
-                  : undefined
+                  : undefined)
               }
               onChange={(value: string) => {
                 onChange(value);