@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/PublicForm/PublicFormFavicon.ts

@@ -0,0 +1,99 @@
+import {
+  getPublicFormImageUrl,
+  PublicFormImage,
+} from "../../../Types/Form/FormBranding";
+
+/*
+ * The browser tab's icon while a form's public page is open: the form's own
+ * favicon (its Branding) in place of OneUptime's, put back the way it was
+ * when the page goes. Every icon link the page has - rel "icon" or
+ * "shortcut icon", whatever their sizes - points at the form's image while
+ * it is open, so no size the browser prefers still shows OneUptime's; the
+ * Apple touch icon and the Safari pinned tab are for saved shortcuts, not
+ * the tab, and are left alone. A page with no icon link gets one, removed
+ * again on the way out.
+ *
+ * The image is the data: URL the form's own public read carried
+ * (FormBranding), never an address of its own.
+ */
+
+// The links a browser draws the tab's icon from.
+export const PUBLIC_FORM_ICON_LINK_SELECTOR: string = 'link[rel~="icon"]';
+
+// A link this page added because the page had none.
+export const PUBLIC_FORM_FAVICON_ATTRIBUTE: string = "data-form-favicon";
+
+// What is changed on each icon link, and put back.
+const SWAPPED_ATTRIBUTES: ReadonlyArray<string> = ["href", "type", "sizes"];
+
+interface SavedIconLink {
+  link: HTMLLinkElement;
+  attributes: Array<{ name: string; value: string | null }>;
+}
+
+export type ShowPublicFormFaviconFunction = (data: {
+  document: Document;
+  favicon: PublicFormImage;
+}) => () => void;
+
+/**
+ * Shows the form's favicon in the tab, and returns what puts the page's own
+ * icons back.
+ */
+export const showPublicFormFavicon: ShowPublicFormFaviconFunction = (data: {
+  document: Document;
+  favicon: PublicFormImage;
+}): (() => void) => {
+  const url: string = getPublicFormImageUrl(data.favicon);
+
+  const links: Array<HTMLLinkElement> = Array.from(
+    data.document.querySelectorAll<HTMLLinkElement>(
+      PUBLIC_FORM_ICON_LINK_SELECTOR,
+    ),
+  );
+
+  if (links.length === 0) {
+    const link: HTMLLinkElement = data.document.createElement("link");
+    link.setAttribute("rel", "icon");
+    link.setAttribute("type", data.favicon.type);
+    link.setAttribute("href", url);
+    link.setAttribute(PUBLIC_FORM_FAVICON_ATTRIBUTE, "true");
+    data.document.head.appendChild(link);
+
+    return (): void => {
+      link.remove();
+    };
+  }
+
+  const saved: Array<SavedIconLink> = links.map(
+    (link: HTMLLinkElement): SavedIconLink => {
+      return {
+        link: link,
+        attributes: SWAPPED_ATTRIBUTES.map(
+          (name: string): { name: string; value: string | null } => {
+            return { name: name, value: link.getAttribute(name) };
+          },
+        ),
+      };
+    },
+  );
+
+  for (const link of links) {
+    link.setAttribute("href", url);
+    // The page's own say "image/png": a browser skips an icon of a type it was told wrong.
+    link.setAttribute("type", data.favicon.type);
+    link.removeAttribute("sizes");
+  }
+
+  return (): void => {
+    for (const entry of saved) {
+      for (const attribute of entry.attributes) {
+        if (attribute.value === null) {
+          entry.link.removeAttribute(attribute.name);
+        } else {
+          entry.link.setAttribute(attribute.name, attribute.value);
+        }
+      }
+    }
+  };
+};

package/UI/Components/PublicForm/PublicFormLogo.tsx

@@ -0,0 +1,81 @@
+import OneUptimeLogo from "../../Images/logos/OneUptimeSVG/3-transparent.svg";
+import {
+  getPublicFormImageUrl,
+  PublicFormImage,
+} from "../../../Types/Form/FormBranding";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+/*
+ * The logo at the top of a form's public page: the form's own when it has
+ * one (its Branding), and the OneUptime logo until then - or when the form's
+ * own cannot be drawn, so the page never shows a broken image. Drawn by the
+ * public page (Accounts Pages/Form.tsx) and by the dashboard's preview of
+ * it, so the preview shows what a visitor sees.
+ *
+ * The form's logo is drawn from the data: URL the form's own public read
+ * carries (FormBranding): it is never fetched from an address of its own.
+ * It keeps the OneUptime logo's height, and a wide one is kept inside the
+ * page's width.
+ */
+
+export const PUBLIC_FORM_LOGO_TEST_ID: string = "form-logo";
+
+// Which logo is drawn, on the image itself (data-logo), for tests.
+export enum PublicFormLogoSource {
+  Form = "form",
+  OneUptime = "oneuptime",
+}
+
+export interface ComponentProps {
+  // The form's logo. Without one, the OneUptime logo.
+  logo?: PublicFormImage | undefined;
+  /*
+   * What the form's logo says, for screen readers. Without it, the logo is
+   * left out of what they read: the form's name follows right below it.
+   */
+  altText?: string | undefined;
+  className?: string | undefined;
+}
+
+const PublicFormLogo: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const source: string | null = props.logo
+    ? getPublicFormImageUrl(props.logo)
+    : null;
+
+  // The form's logo that would not draw: the OneUptime logo stands in for it.
+  const [failedSource, setFailedSource] = useState<string | null>(null);
+
+  const className: string =
+    `mx-auto h-10 w-auto max-w-full object-contain sm:h-12 ${
+      props.className || ""
+    }`.trim();
+
+  if (!source || failedSource === source) {
+    return (
+      <img
+        className={className}
+        src={OneUptimeLogo}
+        alt="OneUptime"
+        data-testid={PUBLIC_FORM_LOGO_TEST_ID}
+        data-logo={PublicFormLogoSource.OneUptime}
+      />
+    );
+  }
+
+  return (
+    <img
+      className={className}
+      src={source}
+      alt={props.altText || ""}
+      data-testid={PUBLIC_FORM_LOGO_TEST_ID}
+      data-logo={PublicFormLogoSource.Form}
+      onError={() => {
+        setFailedSource(source);
+      }}
+    />
+  );
+};
+
+export default PublicFormLogo;

package/UI/Components/RuleCriteria/RuleCriteriaBuilder.tsx

@@ -5,6 +5,7 @@ import RuleCriteria, {
   RuleCriteriaValue,
 } from "../../../Types/Rules/RuleCriteria";
 import FilterCondition from "../../../Types/Filter/FilterCondition";
+import { isFilterConditionNeeded } from "../../../Types/Filter/FilterConditionUtil";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement, useEffect, useId } from "react";
 import useTranslateValue from "../../Utils/Translation";
@@ -76,8 +77,9 @@ export interface ComponentProps<TEntity> {
  * [Contains] [database]", "And [Monitor Labels] [Has any of] [Production]".
  *
  * - With fewer than two conditions there is nothing to combine, so "Match
- *   all / Match any" only appears once there is; every later row then starts
- *   with the word it picked ("And" / "Or").
+ *   all / Match any" only appears once there is (isFilterConditionNeeded,
+ *   the rule every form asking for a filter condition follows); every later
+ *   row then starts with the word it picked ("And" / "Or").
  * - "Add condition" starts the next row on a field no row uses yet.
  * - A row is one line on a wide screen and stacks on a narrow one, and its
  *   remove button is a quiet icon at the end rather than a red button below.
@@ -541,7 +543,7 @@ const RuleCriteriaBuilder: <TEntity>(
         </div>
       ) : (
         <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
-          {criteria.filters.length > 1 && (
+          {isFilterConditionNeeded(criteria.filters) && (
             <fieldset
               className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2"
               data-testid="rule-criteria-combine"

package/UI/Components/RuleRun/RuleView.tsx

@@ -23,7 +23,6 @@ import { getRuleDetailFields, RuleDetailFields } from "./RuleDetailFields";
 import RunRuleNowModal from "./RunRuleNowModal";
 import React, { Fragment, ReactElement, useMemo, useState } from "react";
 import {
-  translatableTerm,
   translateNamedAction,
   Translator,
   translationKey,
@@ -100,10 +99,8 @@ const RuleView: <TBaseModel extends BaseModel>(
               template: "{{itemName}} Details",
               itemName: singularName,
             }),
-          description: translator.translateTemplate(
-            "Here are the details of this {{itemName}}.",
-            { itemName: translatableTerm(singularName, { inSentence: true }) },
-          ),
+          description:
+            "What this rule matches, and what it does to each match.",
         }}
         isEditable={true}
         formSteps={props.formSteps}

package/UI/Components/SaveStatus/SaveStatus.tsx

@@ -0,0 +1,76 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import Icon from "../Icon/Icon";
+import React, { FunctionComponent, ReactElement, ReactNode } from "react";
+
+/*
+ * Where a setting that saves itself (no Save button, no dialog) is with its
+ * last change.
+ */
+export enum SaveState {
+  // Nothing changed here since the setting was drawn, or a change failed.
+  Idle = "Idle",
+  Saving = "Saving",
+  Saved = "Saved",
+}
+
+export interface ComponentProps {
+  state: SaveState;
+  // Spacing from the setting it sits beside.
+  className?: string | undefined;
+  dataTestId?: string | undefined;
+}
+
+/*
+ * "Saving…" while a change is on its way and "Saved" once it is, beside a
+ * setting that saves the moment it changes - the words and the tick a
+ * settings switch (ModelSwitchRow) and a status page's number of days show.
+ *
+ * It is always in the page, empty while nothing is happening: a screen
+ * reader hears "Saved" as it appears only from a live region that was
+ * already there, and one added along with its text is often not announced.
+ * Why a change failed is not said here; it is an alert beside the setting.
+ */
+const SaveStatus: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+
+  const getContent: () => ReactNode = (): ReactNode => {
+    if (props.state === SaveState.Saving) {
+      return (
+        <div className="text-gray-500">
+          {translator.translateText("Saving…")}
+        </div>
+      );
+    }
+
+    if (props.state === SaveState.Saved) {
+      return (
+        <div className="inline-flex items-center gap-1 text-emerald-700">
+          <Icon icon={IconProp.Check} className="h-4 w-4" />
+          {translator.translateText("Saved")}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  /*
+   * Divs, not spans: Icon draws a div of its own, which a span may not
+   * hold.
+   */
+  return (
+    <div
+      role="status"
+      className={`inline-flex items-center text-sm ${props.className || ""}`}
+      data-testid={props.dataTestId}
+    >
+      {getContent()}
+    </div>
+  );
+};
+
+export default SaveStatus;

package/UI/Components/SaveStatus/useSaveOnChange.ts

@@ -0,0 +1,178 @@
+import API from "../../Utils/API/API";
+import { SaveState } from "./SaveStatus";
+import { MutableRefObject, useRef, useState } from "react";
+
+/*
+ * A setting that saves the moment it changes - a dropdown, a set of chips -
+ * with no Edit button, no dialog and no Save button: what the control
+ * shows, where its last change is ("Saving…", "Saved", for SaveStatus
+ * beside it), and why a change did not save.
+ *
+ * - A change shows at once and is saved at once. The control is never
+ *   locked while it saves, so keyboard focus stays on it: a change made
+ *   before the last one is saved waits its turn, and only the latest waiting
+ *   change is sent after it, so the record ends up with the last thing
+ *   picked, one request at a time.
+ * - A change to what the record already has sends nothing.
+ * - A change the server refuses puts back what the record has, with the
+ *   server's reason; a change waiting its turn goes with it.
+ * - A change the setting itself will not take (taking the last status off a
+ *   list that needs one) is turned down with `refuse`, which shows what the
+ *   record has again, with why. A control that keeps a copy of its own
+ *   value (react-select does) is told to follow through `revision`, which
+ *   moves every time the setting goes back to what the record has.
+ */
+
+export interface SaveOnChange<T> {
+  // What the control shows: what the record has, or a change being saved.
+  value: T;
+  // What the record has, as first read or last saved.
+  savedValue: T;
+  saveState: SaveState;
+  // Why the last change was not saved, or "".
+  error: string;
+  // Changes over every time the control goes back to what the record has.
+  revision: number;
+  // Shows `value` and saves it: now, or after the save on its way.
+  change: (value: T) => void;
+  // Turns down a change without saving it, saying why.
+  refuse: (reason: string) => void;
+}
+
+export interface SaveOnChangeOptions<T> {
+  // What the record has when the control first draws.
+  initialValue: T;
+  // Writes the value; throws (with the server's reason) when refused.
+  save: (value: T) => Promise<void>;
+  // Whether two values are the same setting (a list in another order).
+  isSame?: ((first: T, second: T) => boolean) | undefined;
+  // Told after each change is saved.
+  onSaved?: ((value: T) => void) | undefined;
+}
+
+const useSaveOnChange: <T>(
+  options: SaveOnChangeOptions<T>,
+) => SaveOnChange<T> = <T>(
+  options: SaveOnChangeOptions<T>,
+): SaveOnChange<T> => {
+  const [value, setValue] = useState<T>(options.initialValue);
+  const [savedValue, setSavedValue] = useState<T>(options.initialValue);
+  const [saveState, setSaveState] = useState<SaveState>(SaveState.Idle);
+  const [error, setError] = useState<string>("");
+  const [revision, setRevision] = useState<number>(0);
+
+  /*
+   * Set at once, where the state above lands on the next render: whether a
+   * save is on its way, what the record has, the last change asked for,
+   * and a change waiting its turn.
+   */
+  const isSavingRef: MutableRefObject<boolean> = useRef<boolean>(false);
+  const savedValueRef: MutableRefObject<T> = useRef<T>(options.initialValue);
+  const latestValueRef: MutableRefObject<T> = useRef<T>(options.initialValue);
+  const waitingRef: MutableRefObject<{ value: T } | null> = useRef<{
+    value: T;
+  } | null>(null);
+
+  // The options of the latest render, for a save that outlives it.
+  const optionsRef: MutableRefObject<SaveOnChangeOptions<T>> =
+    useRef<SaveOnChangeOptions<T>>(options);
+  optionsRef.current = options;
+
+  const isSame: (first: T, second: T) => boolean = (
+    first: T,
+    second: T,
+  ): boolean => {
+    const compare: ((first: T, second: T) => boolean) | undefined =
+      optionsRef.current.isSame;
+
+    return compare ? compare(first, second) : first === second;
+  };
+
+  const saveUntilSettled: (first: T) => Promise<void> = async (
+    first: T,
+  ): Promise<void> => {
+    isSavingRef.current = true;
+
+    let next: { value: T } | null = { value: first };
+
+    while (next) {
+      const target: T = next.value;
+
+      // A waiting change back to what the record now has sends nothing.
+      if (isSame(target, savedValueRef.current)) {
+        next = waitingRef.current;
+        waitingRef.current = null;
+        continue;
+      }
+
+      setSaveState(SaveState.Saving);
+
+      try {
+        await optionsRef.current.save(target);
+
+        savedValueRef.current = target;
+        setSavedValue(target);
+        setSaveState(SaveState.Saved);
+        optionsRef.current.onSaved?.(target);
+      } catch (err) {
+        // Back to what the record has, with the reason; a waiting change goes too.
+        waitingRef.current = null;
+        latestValueRef.current = savedValueRef.current;
+        setValue(savedValueRef.current);
+        setSaveState(SaveState.Idle);
+        setError(API.getFriendlyMessage(err));
+        setRevision((current: number): number => {
+          return current + 1;
+        });
+        break;
+      }
+
+      next = waitingRef.current;
+      waitingRef.current = null;
+    }
+
+    isSavingRef.current = false;
+  };
+
+  const change: (next: T) => void = (next: T): void => {
+    latestValueRef.current = next;
+    setValue(next);
+    setError("");
+
+    if (isSavingRef.current) {
+      waitingRef.current = { value: next };
+      return;
+    }
+
+    if (isSame(next, savedValueRef.current)) {
+      return;
+    }
+
+    void saveUntilSettled(next);
+  };
+
+  const refuse: (reason: string) => void = (reason: string): void => {
+    // What was last asked for stays: the change being saved, or the record's.
+    setValue(latestValueRef.current);
+    setError(reason);
+    setRevision((current: number): number => {
+      return current + 1;
+    });
+
+    if (!isSavingRef.current) {
+      setSaveState(SaveState.Idle);
+    }
+  };
+
+  return {
+    value,
+    savedValue,
+    saveState,
+    error,
+    revision,
+    change,
+    refuse,
+  };
+};
+
+export default useSaveOnChange;