@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/Table/TableEmptyState.tsx

@@ -45,6 +45,12 @@ export interface TableEmptyStateAction {
   disabled?: boolean | undefined;
   // Why a disabled action is disabled, on hover.
   tooltip?: string | undefined;
+  /*
+   * The action is running (checking again, say): a spinner in place of its
+   * icon, and pressing it again does nothing. It stays focusable - a
+   * disabled button drops the keyboard focus of whoever just pressed it.
+   */
+  isLoading?: boolean | undefined;
   dataTestId?: string | undefined;
 }
 
@@ -54,6 +60,12 @@ export interface ComponentProps {
   kind: TableEmptyStateKind;
   title: string | ReactElement;
   description?: string | ReactElement | undefined;
+  /*
+   * Something the caller built itself, drawn between the description and
+   * the actions - the command that fills an empty chart, say. Left-aligned,
+   * and wider than the sentences above it.
+   */
+  body?: ReactElement | undefined;
   // Drawn on the illustration. Each kind has its own when this is not set.
   icon?: IconProp | undefined;
   actions?: Array<TableEmptyStateAction> | undefined;
@@ -181,6 +193,17 @@ const TableEmptyState: FunctionComponent<ComponentProps> = (
         <></>
       )}
 
+      {props.body ? (
+        <div
+          className="mt-5 w-full min-w-0 max-w-2xl text-left"
+          data-testid={`${testId}-body`}
+        >
+          {props.body}
+        </div>
+      ) : (
+        <></>
+      )}
+
       {hasActions ? (
         /*
          * A column on a phone, where each button takes the full width and
@@ -196,13 +219,24 @@ const TableEmptyState: FunctionComponent<ComponentProps> = (
               action.style === TableEmptyStateActionStyle.Link;
 
             return (
+              /*
+               * Keyed by what the action is, not by its words: an action
+               * whose title changes while it runs ("Check again" to
+               * "Checking…") stays the same button, and keeps the focus.
+               */
               <div
-                key={`${action.title}-${index}`}
+                key={action.dataTestId || `action-${index}`}
                 className={isLink ? "" : "w-full sm:w-auto"}
+                aria-busy={action.isLoading ? true : undefined}
               >
                 <Button
                   title={action.title}
-                  icon={action.icon}
+                  /*
+                   * A running action spins in place of its icon but is not
+                   * disabled: a disabled button would drop the focus of
+                   * whoever just pressed it. Pressing it again does nothing.
+                   */
+                  icon={action.isLoading ? IconProp.Spinner : action.icon}
                   buttonStyle={
                     isLink ? ButtonStyleType.LINK : ButtonStyleType.NORMAL
                   }
@@ -210,14 +244,14 @@ const TableEmptyState: FunctionComponent<ComponentProps> = (
                    * A locked button is dimmed, so it does not read as the
                    * way forward the note under it says it is not.
                    */
-                  className={
+                  className={`${
                     isLink ? "text-sm font-medium" : "disabled:opacity-60"
-                  }
+                  }${action.isLoading ? " cursor-wait [&_svg]:animate-spin" : ""}`}
                   disabled={action.disabled}
                   tooltip={action.tooltip}
                   dataTestId={action.dataTestId}
                   onClick={() => {
-                    if (action.disabled) {
+                    if (action.disabled || action.isLoading) {
                       return;
                     }
 

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -4,7 +4,11 @@ import DictionaryForm, { ValueType } from "../Dictionary/Dictionary";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, { FormProps } from "../Forms/BasicForm";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
-import { CustomElementProps } from "../Forms/Types/Field";
+import {
+  CustomElementProps,
+  FormFieldCollapsibleSection,
+} from "../Forms/Types/Field";
+import { getAdvancedFormSection } from "../Forms/Utils/AdvancedFormSection";
 import FormValues from "../Forms/Types/FormValues";
 import ConditionEditor from "./Condition/ConditionEditor";
 import CronScheduleField from "./CronScheduleField";
@@ -180,12 +184,14 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
   >({});
 
   /*
-   * Arguments flagged isAdvanced are collapsed behind a disclosure, so the
-   * settings panel opens on the two or three fields that actually decide what
-   * the step does rather than on every knob it has. A required argument is
-   * never collapsed no matter how it is flagged: BasicForm skips validation
-   * for a field hidden by showIf, so hiding a required one would let an
-   * incomplete step save cleanly.
+   * Arguments flagged isAdvanced are folded under More fields, as every
+   * form's rarely needed options are (getAdvancedFormSection), so the
+   * settings panel opens on the two or three fields that actually decide
+   * what the step does rather than on every knob it has. The folded header
+   * names them and shows the ones that hold a value, so an existing
+   * configuration is never hidden from the person who comes back to read
+   * it. A required argument is never folded, however it is flagged: it
+   * belongs with the fields a step cannot do without.
    */
   const collapsibleAdvancedArguments: Array<Argument> = (
     component.metadata.arguments || []
@@ -193,35 +199,9 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
     return Boolean(arg.isAdvanced) && !arg.required;
   });
 
-  const hasValueForArgument: (arg: Argument) => boolean = (
-    arg: Argument,
-  ): boolean => {
-    const value: unknown = component.arguments
-      ? component.arguments[arg.id]
-      : undefined;
-
-    if (value === undefined || value === null) {
-      return false;
-    }
-
-    if (typeof value === "string") {
-      return value.trim() !== "";
-    }
-
-    if (typeof value === "object") {
-      return Object.keys(value as JSONObject).length > 0;
-    }
-
-    return true;
-  };
-
-  /*
-   * Open on load when something down there is already set, so an existing
-   * configuration is never hidden from the person who comes back to read it.
-   */
-  const [showAdvanced, setShowAdvanced] = useState<boolean>(
-    collapsibleAdvancedArguments.some(hasValueForArgument),
-  );
+  // One More fields section for the step's folded arguments.
+  const moreFieldsSection: FormFieldCollapsibleSection<JSONObject> =
+    getAdvancedFormSection<JSONObject>({ id: "workflow-step-more-fields" });
 
   const isCollapsibleAdvanced: (arg: Argument) => boolean = (
     arg: Argument,
@@ -255,9 +235,9 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
   }
 
   /*
-   * Everyday settings first, collapsible ones last, each group keeping its
-   * declared order. Without this an advanced argument declared in the middle
-   * would pop into the middle of the form when the disclosure opens.
+   * Everyday settings first, folded ones last, each group keeping its
+   * declared order: the fields of a folded section are one run at the end
+   * of the form.
    */
   const orderedArguments: Array<Argument> = [
     ...(component.metadata.arguments || []).filter((arg: Argument) => {
@@ -266,9 +246,6 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
     ...collapsibleAdvancedArguments,
   ];
 
-  const firstAdvancedArgumentIndex: number =
-    orderedArguments.length - collapsibleAdvancedArguments.length;
-
   /*
    * Workflows in the current project, used to populate dropdowns for any
    * argument of type WorkflowSelect (e.g. the "Workflow" field on the
@@ -821,19 +798,8 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
 
                   return {
                     title: `${arg.name}`,
-                    /*
-                     * The heading sits on the first advanced field, so the
-                     * disclosure reads as a labelled section rather than as a
-                     * run of extra inputs appearing out of nowhere.
-                     */
-                    sectionTitle:
-                      isAdvanced && argIndex === firstAdvancedArgumentIndex
-                        ? "Advanced"
-                        : undefined,
-                    showIf: isAdvanced
-                      ? (): boolean => {
-                          return showAdvanced;
-                        }
+                    collapsibleSection: isAdvanced
+                      ? moreFieldsSection
                       : undefined,
                     description: describeArgument(translator, arg),
                     field: {
@@ -867,29 +833,6 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
               }
             />
           )}
-
-        {collapsibleAdvancedArguments.length > 0 && (
-          <div className="mt-3">
-            <button
-              type="button"
-              aria-expanded={showAdvanced}
-              className="text-sm underline text-blue-500 hover:text-blue-600 cursor-pointer"
-              onClick={() => {
-                setShowAdvanced(!showAdvanced);
-              }}
-            >
-              {showAdvanced
-                ? translator.translateText("Hide advanced settings")
-                : translator.translatePlural(
-                    {
-                      one: "Show {{count}} advanced setting",
-                      other: "Show {{count}} advanced settings",
-                    },
-                    collapsibleAdvancedArguments.length,
-                  )}
-            </button>
-          </div>
-        )}
       </div>
     </ValuePickerProvider>
   );

package/UI/Components/Workflow/ComponentPicker/ComponentSearch.ts

@@ -8,6 +8,24 @@ import {
   getOperationRank,
   isResourceComponent,
 } from "./PickerCatalog";
+import {
+  getEditDistance,
+  getMaxTypoDistance,
+  getWordVariants,
+  matchWordWithTypo,
+} from "../../../../Utils/WordMatch";
+
+/*
+ * Plurals and typos are matched the way Search (Cmd/Ctrl+K) matches them:
+ * the word-level helpers live in Utils/WordMatch.ts and are re-exported
+ * here for the callers and tests that import them from this file.
+ */
+export {
+  getEditDistance,
+  getMaxTypoDistance,
+  getWordVariants,
+  matchWordWithTypo,
+};
 
 /*
  * Search for the Add Component and Add Trigger pickers. Pure and React-free,
@@ -94,7 +112,6 @@ const COMMON_RESOURCE_BONUS: number = 30;
 const UNNAMED_RESOURCE_WORD_PENALTY: number = 25;
 
 const MIN_SUBSTRING_LENGTH: number = 3;
-const MIN_FUZZY_LENGTH: number = 4;
 // A pasted sentence is still a search, just a bounded one.
 const MAX_SEARCH_WORDS: number = 8;
 
@@ -389,120 +406,6 @@ export const getSearchTokens: GetSearchTokensFunction = (
   );
 };
 
-export type GetWordVariantsFunction = (word: string) => Array<string>;
-
-/*
- * A word and the singulars it could be the plural of: "policies" is
- * "policy", "statuses" is "status", "incidents" is "incident". Comparing
- * these on both sides is what makes the number not matter, without a
- * dictionary.
- */
-export const getWordVariants: GetWordVariantsFunction = (
-  word: string,
-): Array<string> => {
-  const variants: Set<string> = new Set<string>([word]);
-
-  if (word.length > 3) {
-    if (word.endsWith("ies")) {
-      variants.add(`${word.slice(0, -3)}y`);
-    }
-
-    if (word.endsWith("es")) {
-      variants.add(word.slice(0, -2));
-    }
-
-    if (word.endsWith("s") && !word.endsWith("ss")) {
-      variants.add(word.slice(0, -1));
-    }
-  }
-
-  return Array.from(variants);
-};
-
-export type GetEditDistanceFunction = (
-  a: string,
-  b: string,
-  maxDistance: number,
-) => number;
-
-/*
- * Edits between two words - insert, delete, replace, or swap two letters
- * side by side ("incidnet") - stopping early once it is past maxDistance,
- * when it returns maxDistance + 1.
- */
-export const getEditDistance: GetEditDistanceFunction = (
-  a: string,
-  b: string,
-  maxDistance: number,
-): number => {
-  if (Math.abs(a.length - b.length) > maxDistance) {
-    return maxDistance + 1;
-  }
-
-  const columns: number = b.length + 1;
-  let previousPrevious: Array<number> = new Array<number>(columns).fill(0);
-  let previous: Array<number> = new Array<number>(columns);
-  let current: Array<number> = new Array<number>(columns);
-
-  for (let j: number = 0; j < columns; j++) {
-    previous[j] = j;
-  }
-
-  for (let i: number = 1; i <= a.length; i++) {
-    current[0] = i;
-    let rowMinimum: number = current[0]!;
-
-    for (let j: number = 1; j < columns; j++) {
-      const cost: number = a.charAt(i - 1) === b.charAt(j - 1) ? 0 : 1;
-      let value: number = Math.min(
-        previous[j]! + 1,
-        current[j - 1]! + 1,
-        previous[j - 1]! + cost,
-      );
-
-      if (
-        i > 1 &&
-        j > 1 &&
-        a.charAt(i - 1) === b.charAt(j - 2) &&
-        a.charAt(i - 2) === b.charAt(j - 1)
-      ) {
-        value = Math.min(value, previousPrevious[j - 2]! + 1);
-      }
-
-      current[j] = value;
-      rowMinimum = Math.min(rowMinimum, value);
-    }
-
-    if (rowMinimum > maxDistance) {
-      return maxDistance + 1;
-    }
-
-    const recycled: Array<number> = previousPrevious;
-    previousPrevious = previous;
-    previous = current;
-    current = recycled;
-  }
-
-  return Math.min(previous[b.length]!, maxDistance + 1);
-};
-
-export type GetMaxTypoDistanceFunction = (word: string) => number;
-
-// How many typos a word of this length may carry and still be recognised.
-export const getMaxTypoDistance: GetMaxTypoDistanceFunction = (
-  word: string,
-): number => {
-  if (word.length >= 8) {
-    return 2;
-  }
-
-  if (word.length >= MIN_FUZZY_LENGTH) {
-    return 1;
-  }
-
-  return 0;
-};
-
 export type MatchWordFunction = (
   token: string,
   word: string,
@@ -544,36 +447,6 @@ export const matchWord: MatchWordFunction = (
   return null;
 };
 
-export type MatchWordWithTypoFunction = (
-  token: string,
-  word: string,
-) => boolean;
-
-/*
- * A typo of the whole word ("incidnet"), or of what has been typed of it so
- * far ("incidne" for "inciden...").
- */
-export const matchWordWithTypo: MatchWordWithTypoFunction = (
-  token: string,
-  word: string,
-): boolean => {
-  const maxDistance: number = getMaxTypoDistance(token);
-
-  if (maxDistance === 0) {
-    return false;
-  }
-
-  if (getEditDistance(token, word, maxDistance) <= maxDistance) {
-    return true;
-  }
-
-  return (
-    word.length > token.length &&
-    getEditDistance(token, word.slice(0, token.length), maxDistance) <=
-      maxDistance
-  );
-};
-
 // A word of a step, and how much a match on it counts.
 interface IndexedTerm {
   wordId: number;

package/UI/Components/Workflow/WorkflowLogModal.tsx

@@ -130,9 +130,7 @@ const WorkflowLogModal: FunctionComponent<ComponentProps> = (
   return (
     <Modal
       title={props.title || "Workflow Run"}
-      description={
-        props.description || "Here is what happened when this workflow ran."
-      }
+      description={props.description}
       isLoading={false}
       modalWidth={ModalWidth.Large}
       /*

package/UI/Types/UseAnchoredFieldPopup.ts

@@ -16,7 +16,8 @@ import React, {
  *
  * It mirrors the menu placement rules used by EntityDropdown: prefer below the
  * anchor, flip above when there is not enough room, and clamp horizontally to
- * the viewport.
+ * the viewport. A popup whose anchor sits at the foot of what it works on can
+ * prefer above instead (preferredPlacement), with the same flip the other way.
  */
 
 const POPUP_GAP_PX: number = 4;
@@ -34,10 +35,46 @@ export interface AnchoredFieldPopupPosition {
   width: number;
 }
 
+export type AnchoredFieldPopupPlacement = "below" | "above";
+
+/*
+ * Whether the popup goes above its anchor. It goes on its preferred side
+ * unless that side leaves it less than a useful height and the other side has
+ * more room.
+ */
+export const shouldAnchoredPopupOpenAbove: (data: {
+  preferredPlacement: AnchoredFieldPopupPlacement;
+  spaceAbove: number;
+  spaceBelow: number;
+}) => boolean = (data: {
+  preferredPlacement: AnchoredFieldPopupPlacement;
+  spaceAbove: number;
+  spaceBelow: number;
+}): boolean => {
+  if (data.preferredPlacement === "above") {
+    return !(
+      data.spaceAbove < POPUP_MIN_USEFUL_HEIGHT_PX &&
+      data.spaceBelow > data.spaceAbove
+    );
+  }
+
+  return (
+    data.spaceBelow < POPUP_MIN_USEFUL_HEIGHT_PX &&
+    data.spaceAbove > data.spaceBelow
+  );
+};
+
 export interface AnchoredFieldPopupOptions {
   // Intrinsic width of the popup, used to clamp it inside the viewport.
   popupWidth: number;
   popupMaxHeight: number;
+  /*
+   * The side the popup opens on when it fits there: below the anchor unless
+   * said otherwise. "above" is for an anchor at the foot of what it works on -
+   * the template menu at the bottom of a note composer - so the popup covers
+   * the note rather than what comes after it.
+   */
+  preferredPlacement?: AnchoredFieldPopupPlacement | undefined;
   /*
    * Changes when the anchor may have moved while the popup stays open - the
    * Owners page's add button moves along as owners are added in front of it -
@@ -97,6 +134,8 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
   options: AnchoredFieldPopupOptions,
 ): AnchoredFieldPopup => {
   const { popupWidth, popupMaxHeight, repositionKey } = options;
+  const preferredPlacement: AnchoredFieldPopupPlacement =
+    options.preferredPlacement || "below";
 
   const [isPopupOpen, setIsPopupOpen] = useState<boolean>(false);
   const [popupPosition, setPopupPosition] =
@@ -242,8 +281,11 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
       0,
       anchorRect.top - POPUP_GAP_PX - POPUP_VIEWPORT_PADDING_PX,
     );
-    const shouldOpenAbove: boolean =
-      spaceBelow < POPUP_MIN_USEFUL_HEIGHT_PX && spaceAbove > spaceBelow;
+    const shouldOpenAbove: boolean = shouldAnchoredPopupOpenAbove({
+      preferredPlacement,
+      spaceAbove,
+      spaceBelow,
+    });
     const availableHeight: number = shouldOpenAbove ? spaceAbove : spaceBelow;
 
     setPopupPosition({
@@ -255,7 +297,7 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
       top: shouldOpenAbove ? undefined : anchorRect.bottom + POPUP_GAP_PX,
       width,
     });
-  }, [popupWidth, popupMaxHeight]);
+  }, [popupWidth, popupMaxHeight, preferredPlacement]);
 
   useLayoutEffect(() => {
     if (!isPopupOpen) {