@oneuptime/common 12.0.32 → 12.0.34

package/UI/Components/Table/Types/Column.ts

@@ -14,6 +14,42 @@ export default interface Column<T extends GenericObject> {
   colSpan?: number | undefined;
   noValueMessage?: string | undefined;
   contentClassName?: string | undefined;
+  /*
+   * Let this cell's content wrap onto more than one line.
+   *
+   * Body cells are `whitespace-nowrap` by default, and `white-space` is an
+   * INHERITED property - so the nowrap declared on the <td> reaches every
+   * element `getElement` returns, whatever classes that element carries. A
+   * cell holding a free-text sentence (a status message, a probe error, an
+   * operator note) therefore renders as one long line that paints straight
+   * over the columns to its right, and a `max-w-*` on the inner element makes
+   * that WORSE rather than better: it caps the box the line overflows out of,
+   * so the text overlaps its neighbours instead of merely widening the table
+   * (OneUptime issue #3585). Never pair a max-width with a nowrap cell - that
+   * pairing is what this option exists to make unspellable.
+   *
+   * Set it on any column whose cell can hold server- or operator-authored
+   * prose. The cell then declares `whitespace-normal break-words` and its
+   * content is capped at `wrapMaxWidthClassName`, so long text wraps inside
+   * the column's own width. Leave it unset - the default, and no change for
+   * every column that has one today - for dates, counts, badges, ids and
+   * anything else that must stay on a single line.
+   *
+   * Desktop only, by construction: the mobile card layout declares no nowrap
+   * and already wraps, and it reads neither this nor `contentClassName`.
+   */
+  wrapContent?: boolean | undefined;
+  /*
+   * Width cap for a wrapping cell, e.g. "max-w-3xl". Read ONLY when
+   * `wrapContent` is set; defaults to "max-w-md" (28rem).
+   *
+   * It belongs here rather than in `contentClassName` for two reasons. Two
+   * `max-w-*` utilities on one element are resolved by Tailwind's stylesheet
+   * order, not by the order they were written, so the narrower one silently
+   * loses; and a width that is only emitted alongside a wrapping mode can
+   * never be the overlap generator described above.
+   */
+  wrapMaxWidthClassName?: string | undefined;
   alignItem?: AlignItem | undefined;
   key?: keyof T | null; //can be null because actions column does not have a key.
   hideOnMobile?: boolean | undefined; // Hide column on mobile devices

package/UI/Components/Tooltip/Tooltip.tsx

@@ -35,7 +35,17 @@ const Tooltip: FunctionComponent<ComponentProps> = (
 
   return (
     <Tippy
-      key={Math.random()}
+      /*
+       * Deliberately no key. This used to carry key={Math.random()}, which
+       * gives the element a different identity on every render and so unmounts
+       * and remounts the child each time the parent re-renders. Tippy updates
+       * its content from props perfectly well without that, and the remount
+       * had two costs worth naming: a page that re-renders on a timer tore
+       * down and rebuilt every tooltipped element under it (a status page
+       * draws ninety of them per resource), and anything focused inside one
+       * lost focus on every tick - which makes a keyboard-navigable widget
+       * impossible to build under it.
+       */
       content={tooltipContent}
       interactive={isRich}
       trigger="mouseenter focus"

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -146,38 +146,31 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
   const searchInputRef: React.RefObject<HTMLInputElement> =
     useRef<HTMLInputElement>(null);
 
-  const [components, setComponents] = useState<Array<ComponentMetadata>>([]);
-  const [categories, setCategories] = useState<Array<ComponentCategory>>([]);
-  const [componentsToShow, setComponentsToShow] = useState<
-    Array<ComponentMetadata>
-  >([]);
-  const [selectedComponentMetadata, setSelectedComponentMetadata] =
-    useState<ComponentMetadata | null>(null);
-
-  useEffect(() => {
-    setComponents(props.components);
-    setComponentsToShow([...props.components]);
-    setCategories(props.categories);
-  }, [props.categories, props.components]);
-
-  useEffect(() => {
-    const tokens: Array<string> = getSearchTokens(search);
-
-    const filteredComponents: Array<ComponentMetadata> = components
-      .filter((componentMetadata: ComponentMetadata) => {
-        return componentMetadata.componentType === props.componentsType;
-      })
+  const [selectedComponentId, setSelectedComponentId] = useState<string | null>(
+    null,
+  );
+  const categories: Array<ComponentCategory> = props.categories;
+  const searchTokens: Array<string> = useMemo(() => {
+    return getSearchTokens(search);
+  }, [search]);
+  const components: Array<ComponentMetadata> = useMemo(() => {
+    return props.components.filter((componentMetadata: ComponentMetadata) => {
+      return componentMetadata.componentType === props.componentsType;
+    });
+  }, [props.components, props.componentsType]);
+  const componentsToShow: Array<ComponentMetadata> = useMemo(() => {
+    return components
       .filter((componentMetadata: ComponentMetadata) => {
-        return matchesSearch(componentMetadata, tokens);
+        return matchesSearch(componentMetadata, searchTokens);
       })
       .sort((componentA: ComponentMetadata, componentB: ComponentMetadata) => {
-        if (tokens.length === 0) {
+        if (searchTokens.length === 0) {
           return componentA.title.localeCompare(componentB.title);
         }
 
         const scoreDifference: number =
-          getSearchScore(componentB, tokens) -
-          getSearchScore(componentA, tokens);
+          getSearchScore(componentB, searchTokens) -
+          getSearchScore(componentA, searchTokens);
 
         if (scoreDifference !== 0) {
           return scoreDifference;
@@ -185,9 +178,33 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
 
         return componentA.title.localeCompare(componentB.title);
       });
+  }, [components, searchTokens]);
+  const selectedComponentMetadata: ComponentMetadata | undefined =
+    componentsToShow.find((componentMetadata: ComponentMetadata) => {
+      return componentMetadata.id === selectedComponentId;
+    });
 
-    setComponentsToShow(filteredComponents);
-  }, [components, props.componentsType, search]);
+  useEffect(() => {
+    // A hidden selection must not be submitted or reappear when search clears.
+    if (!selectedComponentMetadata) {
+      setSelectedComponentId(null);
+    }
+  }, [selectedComponentMetadata]);
+
+  const searchHighlightPattern: RegExp | null = useMemo(() => {
+    if (searchTokens.length === 0) {
+      return null;
+    }
+
+    const alternatives: string = [...new Set(searchTokens)]
+      .sort((tokenA: string, tokenB: string) => {
+        return tokenB.length - tokenA.length;
+      })
+      .map(escapeRegExp)
+      .join("|");
+
+    return new RegExp(`(${alternatives})`, "ig");
+  }, [searchTokens]);
 
   /*
    * Grouped once per search rather than re-filtered inside the render loop.
@@ -270,18 +287,16 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     text: string,
     markClassName?: string,
   ): React.ReactNode => {
-    if (!hasSearchTerm) {
+    if (!searchHighlightPattern) {
       return text;
     }
 
-    const highlightedParts: Array<string> = text.split(
-      new RegExp(`(${escapeRegExp(search.trim())})`, "ig"),
-    );
+    const highlightedParts: Array<string> = text.split(searchHighlightPattern);
 
     return (
       <>
         {highlightedParts.map((part: string, index: number) => {
-          if (part.toLowerCase() === normalizedSearch) {
+          if (searchTokens.includes(part.toLowerCase())) {
             return (
               <mark
                 key={`${part}-${index}`}
@@ -424,6 +439,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                       <button
                         key={category.name}
                         type="button"
+                        aria-pressed={isActive}
                         onClick={() => {
                           setSearch(category.name);
                           searchInputRef.current?.focus();
@@ -520,19 +536,23 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                     {/* Component cards grid */}
                     <div className="grid grid-cols-1 gap-2">
                       {categoryComponents.map(
-                        (componentMetadata: ComponentMetadata, j: number) => {
+                        (componentMetadata: ComponentMetadata) => {
                           const isSelected: boolean =
-                            selectedComponentMetadata !== null &&
+                            selectedComponentMetadata !== undefined &&
                             selectedComponentMetadata.id ===
                               componentMetadata.id;
 
                           return (
-                            <div
-                              key={j}
+                            <button
+                              key={componentMetadata.id}
+                              type="button"
+                              aria-label={componentMetadata.title}
+                              aria-describedby={`workflow-component-description-${componentMetadata.id}`}
+                              aria-pressed={isSelected}
                               onClick={() => {
-                                setSelectedComponentMetadata(componentMetadata);
+                                setSelectedComponentId(componentMetadata.id);
                               }}
-                              className="cursor-pointer transition-all duration-150"
+                              className="w-full cursor-pointer text-left transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                               style={{
                                 padding: "0.75rem",
                                 borderRadius: "10px",
@@ -618,6 +638,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                   )}
                                 </div>
                                 <p
+                                  id={`workflow-component-description-${componentMetadata.id}`}
                                   style={{
                                     fontSize: "0.75rem",
                                     color: isSelected
@@ -666,7 +687,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                   />
                                 </div>
                               )}
-                            </div>
+                            </button>
                           );
                         },
                       )}

package/UI/Components/Workflow/NodePlacement.ts

@@ -0,0 +1,57 @@
+import { ComponentType, NodeType } from "../../../Types/Workflow/Component";
+import { Node, XYPosition } from "reactflow";
+
+const DEFAULT_NODE_HEIGHT: number = 200;
+const NODE_GAP: number = 80;
+
+type GetNewWorkflowNodePositionFunction = (
+  nodes: Array<Node>,
+  componentType: ComponentType,
+) => XYPosition;
+
+/** Keep new steps clear of existing cards, including cards resized by content. */
+export const getNewWorkflowNodePosition: GetNewWorkflowNodePositionFunction = (
+  nodes: Array<Node>,
+  componentType: ComponentType,
+): XYPosition => {
+  if (componentType === ComponentType.Trigger) {
+    const trigger: Node | undefined = nodes.find((node: Node) => {
+      return (
+        node.data.nodeType === NodeType.PlaceholderNode ||
+        node.data.componentType === ComponentType.Trigger
+      );
+    });
+
+    if (trigger) {
+      return { ...trigger.position };
+    }
+
+    const firstNode: Node | undefined = [...nodes].sort((a: Node, b: Node) => {
+      return a.position.y - b.position.y;
+    })[0];
+
+    return firstNode
+      ? {
+          x: firstNode.position.x,
+          y: firstNode.position.y - DEFAULT_NODE_HEIGHT - NODE_GAP,
+        }
+      : { x: 100, y: 100 };
+  }
+
+  let lastNode: Node | undefined;
+  let lowestBottom: number = -Infinity;
+
+  for (const node of nodes) {
+    const bottom: number =
+      node.position.y + (node.height || DEFAULT_NODE_HEIGHT);
+
+    if (bottom > lowestBottom) {
+      lowestBottom = bottom;
+      lastNode = node;
+    }
+  }
+
+  return lastNode
+    ? { x: lastNode.position.x, y: lowestBottom + NODE_GAP }
+    : { x: 100, y: 100 };
+};

package/UI/Components/Workflow/Workflow.tsx

@@ -2,6 +2,7 @@ import WorkflowComponent from "./Component";
 import ComponentSettingsModal from "./ComponentSettingsModal";
 import ComponentsModal from "./ComponentsModal";
 import RunModal from "./RunModal";
+import { getNewWorkflowNodePosition } from "./NodePlacement";
 import {
   LintGraphEdge,
   LintGraphNode,
@@ -40,6 +41,7 @@ import ReactFlow, {
   NodeTypes,
   OnConnect,
   ProOptions,
+  ReactFlowInstance,
   addEdge,
   getConnectedEdges,
   updateEdge,
@@ -62,7 +64,7 @@ export const getPlaceholderTriggerNode: GetPlaceholderTriggerNodeFunction =
           iconProp: IconProp.Bolt,
           componentType: ComponentType.Trigger,
           title: "Trigger",
-          description: "Please click here to add trigger",
+          description: "Choose what starts this workflow",
         },
         metadataId: "",
         internalId: "",
@@ -159,6 +161,8 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   }, []);
 
   const edgeUpdateSuccessful: any = useRef(true);
+  const flowInstance: React.MutableRefObject<ReactFlowInstance | null> =
+    useRef<ReactFlowInstance | null>(null);
   const [showComponentSettingsModal, setShowComponentSettingsModal] =
     useState<boolean>(false);
   const [selectedNodeData, setSelectedNodeData] = useState<NodeDataProp | null>(
@@ -167,7 +171,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
   type OnNodeClickFunction = (data: NodeDataProp) => void;
 
-  const onNodeClick: OnNodeClickFunction = (data: NodeDataProp) => {
+  const onNodeClick: OnNodeClickFunction = useCallback((data: NodeDataProp) => {
     // if placeholder node is clicked then show modal.
 
     if (data.nodeType === NodeType.PlaceholderNode) {
@@ -180,7 +184,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       setShowComponentSettingsModal(true);
       setSelectedNodeData(data);
     }
-  };
+  }, []);
 
   useEffect(() => {
     if (props.showComponentsPickerModal) {
@@ -194,7 +198,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.showRunModal) {
       setShowRunModal(true);
     } else {
-      setShowComponentsModal(false);
+      setShowRunModal(false);
     }
   }, [props.showRunModal]);
 
@@ -214,12 +218,12 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       });
 
       if (
-        nodeToUpdate.filter((n: Node) => {
+        !nodeToUpdate.some((n: Node) => {
           return (
-            (n.data as NodeDataProp).componentType === ComponentType.Trigger &&
-            (n.data as NodeDataProp).nodeType === NodeType.Node
+            (n.data as NodeDataProp).componentType === ComponentType.Trigger ||
+            (n.data as NodeDataProp).nodeType === NodeType.PlaceholderNode
           );
-        }).length === 0
+        })
       ) {
         nodeToUpdate = nodeToUpdate.concat(getPlaceholderTriggerNode());
       }
@@ -244,12 +248,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     });
   };
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(
-    props.initialNodes.map((node: Node) => {
-      node.data.onClick = onNodeClick;
-      return node;
-    }),
-  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(props.initialNodes);
 
   const [edges, setEdges, onEdgesChange] = useEdgesState(
     props.initialEdges.map((edge: Edge) => {
@@ -410,6 +409,11 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   const [showTriggersModal, setShowTriggersModal] = useState<boolean>(false);
 
   const [showRunModal, setShowRunModal] = useState<boolean>(false);
+  const isModalOpen: boolean =
+    showComponentsModal ||
+    showTriggersModal ||
+    showComponentSettingsModal ||
+    showRunModal;
 
   useEffect(() => {
     props.onComponentPickerModalUpdate(showComponentsModal);
@@ -457,7 +461,10 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     const compToAdd: Node = {
       id: ObjectID.generate().toString(), // react-flow id
       type: "node",
-      position: { x: 200, y: 200 },
+      position: getNewWorkflowNodePosition(
+        nodes,
+        componentMetadata.componentType,
+      ),
       selected: true,
       data: {
         nodeType: NodeType.Node,
@@ -491,13 +498,21 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           .concat({ ...compToAdd } as any);
       });
     }
+
+    setSelectedNodeData(compToAdd.data as NodeDataProp);
+    setShowComponentSettingsModal(true);
+    flowInstance.current?.setCenter(
+      compToAdd.position.x + 128,
+      compToAdd.position.y + 100,
+      { zoom: 1, duration: 200 },
+    );
   };
 
   return (
     <div
       style={{
         height: "calc(100vh - 220px)",
-        minHeight: "600px",
+        minHeight: "400px",
         borderRadius: "8px",
         overflow: "hidden",
         border: "1px solid var(--ou-border-default, #e2e8f0)",
@@ -556,20 +571,33 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         `}
       </style>
       <ReactFlow
+        onInit={(instance: ReactFlowInstance) => {
+          flowInstance.current = instance;
+        }}
         nodes={nodesToRender}
         edges={edges}
         fitView={true}
+        fitViewOptions={{ maxZoom: 1 }}
         onEdgeClick={() => {
           refreshEdges();
         }}
-        onNodeClick={() => {
+        onNodeClick={(_event: React.MouseEvent, node: Node) => {
           refreshEdges();
+          /*
+           * Handle every node through the canvas, including newly added steps
+           * and replacement trigger placeholders, without persisting callbacks.
+           */
+          onNodeClick(node.data as NodeDataProp);
         }}
         proOptions={proOptions}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         multiSelectionKeyCode={null}
+        // React Flow listens on document, even while a dialog has focus.
+        panActivationKeyCode={isModalOpen ? null : "Space"}
+        deleteKeyCode={isModalOpen ? null : "Backspace"}
+        selectionKeyCode={isModalOpen ? null : "Shift"}
         onEdgeUpdate={onEdgeUpdate}
         nodeTypes={nodeTypes}
         onEdgeUpdateStart={onEdgeUpdateStart}
@@ -704,11 +732,12 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
               ...componentData,
               error: "",
             };
+            delete dataToStore.onClick;
 
             setNodes((nds: Array<Node>) => {
               return nds.map((n: Node) => {
                 if (n.data.internalId === dataToStore.internalId) {
-                  n.data = dataToStore;
+                  return { ...n, data: dataToStore };
                 }
 
                 return n;

package/UI/Config.ts

@@ -24,9 +24,11 @@ import Protocol from "../Types/API/Protocol";
 import URL from "../Types/API/URL";
 import Route from "../Types/API/Route";
 import SubscriptionPlan from "../Types/Billing/SubscriptionPlan";
-import Dictionary from "../Types/Dictionary";
 import { JSONObject } from "../Types/JSON";
 import Version from "../Types/Version";
+import getBrowserTelemetryConfig, {
+  BrowserTelemetryConfig,
+} from "./Utils/Telemetry/BrowserTelemetryConfig";
 
 type GetAllEnvVarsFunction = () => JSONObject;
 
@@ -215,40 +217,20 @@ export const AnalyticsHost: string = env("ANALYTICS_HOST");
 export const GitSha: string = env("GIT_SHA") || "";
 export const AppVersion: string = env("APP_VERSION") || "";
 
-export const OpenTelemetryExporterOtlpEndpoint: URL | null = env(
-  "OPENTELEMETRY_EXPORTER_OTLP_ENDPOINT",
-)
-  ? URL.fromString(env("OPENTELEMETRY_EXPORTER_OTLP_ENDPOINT").toString())
-  : null;
+const BrowserTelemetryEnvironmentConfig: BrowserTelemetryConfig =
+  getBrowserTelemetryConfig(env);
 
-type GetOpenTelemetryExporterOtlpHeadersFunction = () => Dictionary<string>;
+export const BrowserOpenTelemetryExporterOtlpEndpoint: URL | null =
+  BrowserTelemetryEnvironmentConfig.endpoint;
 
-const getOpenTelemetryExporterOtlpHeaders: GetOpenTelemetryExporterOtlpHeadersFunction =
-  (): Dictionary<string> => {
-    if (!env("OPENTELEMETRY_EXPORTER_OTLP_HEADERS")) {
-      return {};
-    }
-
-    const headersStrings: Array<string> = env(
-      "OPENTELEMETRY_EXPORTER_OTLP_HEADERS",
-    )
-      .toString()
-      .split(";");
-
-    const headers: Dictionary<string> = {};
-
-    for (const headerString of headersStrings) {
-      const header: Array<string> = headerString.split("=");
-      if (header.length === 2) {
-        headers[header[0]!.toString()] = header[1]!.toString();
-      }
-    }
-
-    return headers;
-  };
-
-export const OpenTelemetryExporterOtlpHeaders: Dictionary<string> =
-  getOpenTelemetryExporterOtlpHeaders();
+/*
+ * This value is intentionally public: it is injected into env.js. It must be
+ * a OneUptime Browser ingestion key, whose origin/surface/rate restrictions
+ * are enforced at ingest. Generic backend exporter headers are never read by
+ * browser code.
+ */
+export const BrowserOpenTelemetryExporterOtlpIngestionKey: string =
+  BrowserTelemetryEnvironmentConfig.browserIngestionKey;
 
 export const DisableTelemetry: boolean = env("DISABLE_TELEMETRY") === "true";