@oneuptime/common 12.0.8 → 12.0.9

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -2,6 +2,7 @@
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon from "../Icon/Icon";
 import SideOver from "../SideOver/SideOver";
+import Dictionary from "../../../Types/Dictionary";
 import IconProp from "../../../Types/Icon/IconProp";
 import ComponentMetadata, {
   ComponentCategory,
@@ -11,6 +12,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -27,7 +29,56 @@ const escapeRegExp: (value: string) => string = (value: string): string => {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
 
-const getSearchScore: (
+/**
+ * The words of a search, in lower case. Empty when nothing was typed.
+ */
+export type SearchTokensFunction = (search: string) => Array<string>;
+
+export const getSearchTokens: SearchTokensFunction = (
+  search: string,
+): Array<string> => {
+  return search
+    .trim()
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((token: string) => {
+      return token.length > 0;
+    });
+};
+
+/**
+ * Does this component match every word typed?
+ *
+ * Every word, anywhere across title, description and category — not the whole
+ * search string as one substring. The database components are generated as
+ * "Create One Monitor" / "Database query to create one Monitor" / "Monitor",
+ * so a plain substring search answered "create one monitor secret" with one
+ * result and "create monitor" with none at all — and the empty state then told
+ * the builder the integration did not exist. In a palette holding a component
+ * per operation per model, browsing is not a fallback.
+ */
+export type MatchesSearchFunction = (
+  componentMetadata: ComponentMetadata,
+  tokens: Array<string>,
+) => boolean;
+
+export const matchesSearch: MatchesSearchFunction = (
+  componentMetadata: ComponentMetadata,
+  tokens: Array<string>,
+): boolean => {
+  if (tokens.length === 0) {
+    return true;
+  }
+
+  const haystack: string =
+    `${componentMetadata.title} ${componentMetadata.description} ${componentMetadata.category}`.toLowerCase();
+
+  return tokens.every((token: string) => {
+    return haystack.includes(token);
+  });
+};
+
+const getSearchScoreForToken: (
   componentMetadata: ComponentMetadata,
   searchTerm: string,
 ) => number = (
@@ -67,6 +118,27 @@ const getSearchScore: (
   return score;
 };
 
+/**
+ * Ranking, summed over the words typed.
+ *
+ * Every branch of the per-word score tests one whole token, so scoring the
+ * search as a single string gave every multi-word search a score of zero and
+ * left the order to the tie-breaker alone.
+ */
+export type GetSearchScoreFunction = (
+  componentMetadata: ComponentMetadata,
+  tokens: Array<string>,
+) => number;
+
+export const getSearchScore: GetSearchScoreFunction = (
+  componentMetadata: ComponentMetadata,
+  tokens: Array<string>,
+): number => {
+  return tokens.reduce((total: number, token: string) => {
+    return total + getSearchScoreForToken(componentMetadata, token);
+  }, 0);
+};
+
 const ComponentsModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -89,33 +161,23 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
   }, [props.categories, props.components]);
 
   useEffect(() => {
-    const normalizedSearch: string = search.trim().toLowerCase();
+    const tokens: Array<string> = getSearchTokens(search);
 
     const filteredComponents: Array<ComponentMetadata> = components
       .filter((componentMetadata: ComponentMetadata) => {
         return componentMetadata.componentType === props.componentsType;
       })
       .filter((componentMetadata: ComponentMetadata) => {
-        if (!normalizedSearch) {
-          return true;
-        }
-
-        return (
-          componentMetadata.title.toLowerCase().includes(normalizedSearch) ||
-          componentMetadata.description
-            .toLowerCase()
-            .includes(normalizedSearch) ||
-          componentMetadata.category.toLowerCase().includes(normalizedSearch)
-        );
+        return matchesSearch(componentMetadata, tokens);
       })
       .sort((componentA: ComponentMetadata, componentB: ComponentMetadata) => {
-        if (!normalizedSearch) {
+        if (tokens.length === 0) {
           return componentA.title.localeCompare(componentB.title);
         }
 
         const scoreDifference: number =
-          getSearchScore(componentB, normalizedSearch) -
-          getSearchScore(componentA, normalizedSearch);
+          getSearchScore(componentB, tokens) -
+          getSearchScore(componentA, tokens);
 
         if (scoreDifference !== 0) {
           return scoreDifference;
@@ -127,6 +189,30 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     setComponentsToShow(filteredComponents);
   }, [components, props.componentsType, search]);
 
+  /*
+   * Grouped once per search rather than re-filtered inside the render loop.
+   * That loop ran once per category — around four hundred of them, each
+   * scanning every component still on screen — on every keystroke, with no
+   * debounce and no windowing.
+   */
+  const componentsByCategory: Dictionary<Array<ComponentMetadata>> =
+    useMemo(() => {
+      const grouped: Dictionary<Array<ComponentMetadata>> = {};
+
+      for (const componentMetadata of componentsToShow) {
+        const bucket: Array<ComponentMetadata> | undefined =
+          grouped[componentMetadata.category];
+
+        if (bucket) {
+          bucket.push(componentMetadata);
+        } else {
+          grouped[componentMetadata.category] = [componentMetadata];
+        }
+      }
+
+      return grouped;
+    }, [componentsToShow]);
+
   useEffect(() => {
     searchInputRef.current?.focus();
   }, []);
@@ -363,7 +449,19 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
               (componentsToShow.length === 0 && (
                 <div className="mt-20 flex w-full flex-col items-center justify-center gap-4 px-4">
                   <div className="max-w-2xl">
-                    <ErrorMessage message="No components that match your search. If you are looking for an integration that does not exist currently - you can use Custom Code or API component to build anything you like." />
+                    {/*
+                     * Says what actually happened. A search only fails now when
+                     * no component contains every word typed, and the fix is
+                     * usually to type fewer words — not to conclude that the
+                     * component does not exist and go and build it by hand.
+                     */}
+                    <ErrorMessage
+                      message={
+                        hasSearchTerm
+                          ? "No components match every word you typed. Try fewer words. If what you need really does not exist, the Custom Code and API components can build anything you like."
+                          : "No components to show."
+                      }
+                    />
                   </div>
                   {hasSearchTerm && (
                     <button
@@ -385,11 +483,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
               categories.length > 0 &&
               categories.map((category: ComponentCategory, i: number) => {
                 const categoryComponents: Array<ComponentMetadata> =
-                  componentsToShow.filter(
-                    (componentMetadata: ComponentMetadata) => {
-                      return componentMetadata.category === category.name;
-                    },
-                  );
+                  componentsByCategory[category.name] || [];
 
                 if (categoryComponents.length === 0) {
                   return <div key={i}></div>;

package/UI/Components/Workflow/DocumentationViewer.tsx

@@ -1,4 +1,10 @@
-import { HOME_URL, HOST, HTTP_PROTOCOL } from "../../Config";
+import {
+  API_DOCS_URL,
+  DOCS_URL,
+  HOME_URL,
+  HOST,
+  HTTP_PROTOCOL,
+} from "../../Config";
 import API from "../../Utils/API/API";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
@@ -8,6 +14,7 @@ import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import ObjectID from "../../../Types/ObjectID";
+import Text from "../../../Types/Text";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 
@@ -15,6 +22,14 @@ export interface ComponentProps {
   documentationLink: Route;
   workflowId: ObjectID;
   webhookSecretKey?: string | undefined;
+  /*
+   * The model this component reads or writes, when it has one. Used to link to
+   * that model's API reference page, which lists every column with its type and
+   * an example - the thing a builder actually needs and the one thing a shared
+   * markdown file can never carry. pascalCaseToDashes is the same transform
+   * DatabaseBaseModel.getAPIDocumentationPath uses to build that page's route.
+   */
+  tableName?: string | undefined;
 }
 
 const DocumentationViewer: FunctionComponent<ComponentProps> = (
@@ -43,6 +58,12 @@ const DocumentationViewer: FunctionComponent<ComponentProps> = (
     if (props.documentationLink) {
       try {
         setIsLoading(true);
+        /*
+         * Cleared on every attempt. Without this a failure was permanent for
+         * the life of the mount: setError was only ever set, so a doc that
+         * failed once kept its error banner even after a later load succeeded.
+         */
+        setError("");
         const body: HTTPResponse<any> = await API.get({
           url: new URL(HTTP_PROTOCOL, HOST, props.documentationLink),
           data: {},
@@ -64,18 +85,47 @@ const DocumentationViewer: FunctionComponent<ComponentProps> = (
     await loadDocs();
   }, [props.documentationLink]);
 
+  /*
+   * No heading of its own. The only caller renders this inside a card already
+   * titled "Documentation", so the panel used to open with that word three
+   * times over - the card's label, an <h2> repeating it, and a line of filler
+   * saying the section was what its own title said it was - before any content.
+   */
   return (
-    <div className="mt-5 mb-5">
-      <h2 className="text-base font-medium text-gray-500">Documentation</h2>
-      <p className="text-sm font-medium text-gray-400">
-        Here is some documentation for this component.
-      </p>
-
+    <div className="mb-5">
       {error ? <ErrorMessage message={error} /> : <></>}
       {isLoading ? <ComponentLoader /> : <></>}
 
-      <div className="mt-3">
-        <MarkdownViewer text={markdown} />
+      <MarkdownViewer text={markdown} />
+
+      {/*
+       * A way out of the modal. The component docs are deliberately short now,
+       * and the two things they cannot hold - the full guide, and this model's
+       * own column reference - live on the docs site.
+       */}
+      <div className="mt-3 pt-3 border-t border-blue-100 flex flex-col gap-1">
+        <a
+          className="text-sm text-blue-500 hover:text-blue-600 underline"
+          href={`${DOCS_URL.toString()}/workflows/components`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Workflow components guide
+        </a>
+        {props.tableName ? (
+          <a
+            className="text-sm text-blue-500 hover:text-blue-600 underline"
+            href={`${API_DOCS_URL.toString()}/${Text.pascalCaseToDashes(
+              props.tableName,
+            )}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Every column on this model
+          </a>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );

package/UI/Components/Workflow/GraphLint.ts

@@ -112,22 +112,59 @@ const JSON_DOCUMENT_INPUT_TYPES: Array<ComponentInputType> = [
   ComponentInputType.StringDictionary,
 ];
 
-type IsEmptyArgumentValueFunction = (value: JSONValue | undefined) => boolean;
+type IsEmptyArgumentValueFunction = (
+  value: JSONValue | undefined,
+  type?: ComponentInputType | undefined,
+) => boolean;
 
 /*
  * `false` and `0` are values a builder deliberately set — only absence and the
  * empty box count as missing. An empty object/array counts as missing too: the
  * Dictionary editor writes `{}` for a field nobody filled in.
+ *
+ * For a JSON-document argument the value arrives as *text*, so the literal
+ * "{}" has to be recognised as the same emptiness. It reads as a filled-in
+ * field otherwise, and on Delete Many an empty query is not a harmless no-op:
+ * it matches every record in the project and the component deletes the first
+ * ten of them. A required argument holding "{}" should be reported, not run.
  */
-const isEmptyArgumentValue: IsEmptyArgumentValueFunction = (
+export const isEmptyArgumentValue: IsEmptyArgumentValueFunction = (
   value: JSONValue | undefined,
+  type?: ComponentInputType | undefined,
 ): boolean => {
   if (value === undefined || value === null) {
     return true;
   }
 
   if (typeof value === "string") {
-    return value.trim() === "";
+    const trimmed: string = value.trim();
+
+    if (trimmed === "") {
+      return true;
+    }
+
+    if (type && JSON_DOCUMENT_INPUT_TYPES.includes(type)) {
+      /*
+       * Only a literal empty document counts. Anything that fails to parse is
+       * left alone — it is reported as invalid JSON a few lines further down,
+       * which is a better message than "this is required".
+       */
+      try {
+        const parsed: unknown = JSON.parse(trimmed);
+
+        if (Array.isArray(parsed)) {
+          return parsed.length === 0;
+        }
+
+        if (parsed && typeof parsed === "object") {
+          return Object.keys(parsed as JSONObject).length === 0;
+        }
+      } catch {
+        return false;
+      }
+    }
+
+    return false;
   }
 
   if (Array.isArray(value)) {
@@ -382,7 +419,7 @@ export const lintWorkflowGraph: LintWorkflowGraphFunction = (graph: {
     for (const argument of argumentMetadata) {
       const value: JSONValue | undefined = argumentValues[argument.id];
 
-      if (argument.required && isEmptyArgumentValue(value)) {
+      if (argument.required && isEmptyArgumentValue(value, argument.type)) {
         addNodeIssue({
           rule: WorkflowLintRule.MissingRequiredArgument,
           severity: WorkflowLintSeverity.Error,
@@ -392,7 +429,7 @@ export const lintWorkflowGraph: LintWorkflowGraphFunction = (graph: {
         continue;
       }
 
-      if (isEmptyArgumentValue(value)) {
+      if (isEmptyArgumentValue(value, argument.type)) {
         continue;
       }