@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Workflow/WorkflowIssuesModal.tsx

@@ -0,0 +1,255 @@
+/*
+ * Everything the static checks found, arranged so it can be fixed.
+ *
+ * The list used to be one card per issue, each headed by the step id in caps,
+ * so a step with two problems announced itself twice and a workflow with six
+ * looked like six unrelated failures. Here the issues belong to the step they
+ * are about: one card per step, headed by the step's name, with a button that
+ * takes the builder to it. The panel says "fixing them here saves a failed run
+ * later" — this is the part that makes "here" mean something.
+ */
+
+import Icon, { SizeProp } from "../Icon/Icon";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import IconProp from "../../../Types/Icon/IconProp";
+import Dictionary from "../../../Types/Dictionary";
+import {
+  WorkflowLintIssue,
+  WorkflowLintResult,
+  WorkflowLintSeverity,
+} from "./GraphLint";
+import {
+  WorkflowIssueGroup,
+  getWorkflowLintSeverityLabel,
+  groupWorkflowLintIssues,
+} from "./GraphLintSummary";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  lintResult: WorkflowLintResult;
+  /**
+   * Step titles by react-flow node id, so a group is headed the way the canvas
+   * heads the node rather than only by the id the builder typed.
+   */
+  stepTitlesByNodeId?: Dictionary<string> | undefined;
+  onClose: () => void;
+  /**
+   * Opens a step's settings. Without it the groups have no action and the
+   * panel is read-only, which is what happens for issues about the graph
+   * itself — there is no step to open.
+   */
+  onGoToStep?: ((nodeId: string) => void) | undefined;
+}
+
+type RenderSeverityIconFunction = (
+  severity: WorkflowLintSeverity,
+) => ReactElement;
+
+const renderSeverityIcon: RenderSeverityIconFunction = (
+  severity: WorkflowLintSeverity,
+): ReactElement => {
+  const isError: boolean = severity === WorkflowLintSeverity.Error;
+
+  return (
+    <span
+      className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
+        isError ? "bg-red-100 text-red-600" : "bg-amber-100 text-amber-600"
+      }`}
+      data-testid={
+        isError ? "workflow-issue-error-icon" : "workflow-issue-warning-icon"
+      }
+    >
+      <Icon
+        icon={isError ? IconProp.Close : IconProp.Alert}
+        size={SizeProp.ExtraSmall}
+        className="h-2.5 w-2.5"
+      />
+    </span>
+  );
+};
+
+type RenderCountPillFunction = (params: {
+  count: number;
+  singular: string;
+  className: string;
+  testId: string;
+}) => ReactElement | null;
+
+const renderCountPill: RenderCountPillFunction = (params: {
+  count: number;
+  singular: string;
+  className: string;
+  testId: string;
+}): ReactElement | null => {
+  if (params.count <= 0) {
+    return null;
+  }
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 whitespace-nowrap ${params.className}`}
+      data-testid={params.testId}
+    >
+      {params.count} {params.singular}
+      {params.count === 1 ? "" : "s"}
+    </span>
+  );
+};
+
+const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const groups: Array<WorkflowIssueGroup> = groupWorkflowLintIssues({
+    issues: props.lintResult.issues,
+    stepTitlesByNodeId: props.stepTitlesByNodeId,
+  });
+
+  return (
+    <Modal
+      title="Problems with this workflow"
+      description="These are found by reading the workflow. Fixing them here saves a failed run later."
+      modalWidth={ModalWidth.Medium}
+      closeButtonText="Close"
+      onClose={props.onClose}
+    >
+      <div className="space-y-3" data-testid="workflow-issues">
+        {groups.length === 0 ? (
+          <div
+            className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-gray-200 px-4 py-8 text-center"
+            data-testid="workflow-issues-empty"
+          >
+            <Icon
+              icon={IconProp.CheckCircle}
+              className="h-6 w-6 text-emerald-500"
+            />
+            <p className="text-sm font-medium text-gray-900">
+              Nothing to fix here
+            </p>
+            <p className="text-sm text-gray-500">
+              The checks found nothing wrong with this workflow.
+            </p>
+          </div>
+        ) : (
+          <>
+            {/*
+              A running total up front: the groups below say what is wrong with
+              each step, and this says how much of it there is in total.
+            */}
+            <div
+              className="flex flex-wrap items-center gap-2"
+              data-testid="workflow-issues-summary"
+            >
+              {renderCountPill({
+                count: props.lintResult.errorCount,
+                singular: "error",
+                className:
+                  "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
+                testId: "workflow-issues-error-count",
+              })}
+              {renderCountPill({
+                count: props.lintResult.warningCount,
+                singular: "warning",
+                className:
+                  "bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-200",
+                testId: "workflow-issues-warning-count",
+              })}
+              <span className="text-xs text-gray-500">
+                across{" "}
+                {groups.length === 1 ? "1 place" : `${groups.length} places`}
+              </span>
+            </div>
+
+            {groups.map((group: WorkflowIssueGroup): ReactElement => {
+              const canGoToStep: boolean = Boolean(
+                props.onGoToStep && group.nodeId,
+              );
+
+              return (
+                <section
+                  key={group.key}
+                  className="overflow-hidden rounded-lg border border-gray-200"
+                  data-testid="workflow-issue-group"
+                >
+                  <header className="flex items-start justify-between gap-3 border-b border-gray-200 bg-gray-50 px-3 py-2">
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-semibold text-gray-900">
+                        {group.title}
+                      </p>
+                      {group.componentId &&
+                        group.componentId !== group.title && (
+                          <p className="truncate font-mono text-xs text-gray-500">
+                            {group.componentId}
+                          </p>
+                        )}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                      {renderCountPill({
+                        count: group.errorCount,
+                        singular: "error",
+                        className:
+                          "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
+                        testId: "workflow-issue-group-error-count",
+                      })}
+                      {renderCountPill({
+                        count: group.warningCount,
+                        singular: "warning",
+                        className:
+                          "bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-200",
+                        testId: "workflow-issue-group-warning-count",
+                      })}
+                      {canGoToStep && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            props.onGoToStep?.(group.nodeId as string);
+                          }}
+                          aria-label={`Open settings for ${group.title}`}
+                          data-testid="workflow-issue-go-to-step"
+                          className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
+                        >
+                          Open step
+                          <Icon
+                            icon={IconProp.ChevronRight}
+                            size={SizeProp.ExtraSmall}
+                            className="h-3 w-3"
+                          />
+                        </button>
+                      )}
+                    </div>
+                  </header>
+
+                  <ul className="divide-y divide-gray-100">
+                    {group.issues.map(
+                      (
+                        issue: WorkflowLintIssue,
+                        index: number,
+                      ): ReactElement => {
+                        return (
+                          <li
+                            key={`${issue.rule}-${index}`}
+                            className="flex items-start gap-2.5 px-3 py-2.5"
+                            data-testid="workflow-issue"
+                          >
+                            {renderSeverityIcon(issue.severity)}
+                            <p className="text-sm leading-5 text-gray-700">
+                              <span className="sr-only">
+                                {getWorkflowLintSeverityLabel(issue.severity)}:{" "}
+                              </span>
+                              {issue.message}
+                            </p>
+                          </li>
+                        );
+                      },
+                    )}
+                  </ul>
+                </section>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default WorkflowIssuesModal;

package/UI/Components/Workflow/WorkflowLogModal.tsx

@@ -0,0 +1,128 @@
+/*
+ * One run of a workflow, shown in one place.
+ *
+ * A run answers two different questions and they want different shapes. "Which
+ * steps ran, what did each receive and return" is structure, and reads as a
+ * list. "What did the runner actually print" is a log, and reads as lines. They
+ * used to be stacked in the same modal, which meant the log was always pushed
+ * below a step list of unknown length and neither got the height it wanted.
+ * Tabs give each the whole body.
+ *
+ * The modal is presentational: whoever opens it owns the data. That is what
+ * lets the builder point it at a run it is still polling while the Logs table
+ * points it at a finished one.
+ */
+
+import { ButtonStyleType } from "../Button/Button";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import SimpleLogViewer from "../SimpleLogViewer/SimpleLogViewer";
+import { Tab, TabType } from "../Tabs/Tab";
+import Tabs from "../Tabs/Tabs";
+import StepTraceViewer from "./StepTraceViewer";
+import {
+  WorkflowStepTrace,
+  WorkflowStepTraceEntry,
+} from "../../../Types/Workflow/StepTrace";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export const STEPS_TAB_NAME: string = "Steps";
+export const FULL_LOG_TAB_NAME: string = "Full Log";
+
+export interface ComponentProps {
+  logs: string;
+  stepTrace: WorkflowStepTrace;
+  onClose: () => void;
+  title?: string | undefined;
+  description?: string | undefined;
+  /**
+   * A line about the run itself — "Run running…", "Run finished successfully".
+   * Shown above the tabs so it is visible whichever tab is open.
+   */
+  statusMessage?: string | null | undefined;
+  /** Colours the status line as a failure. */
+  isStatusMessageError?: boolean | undefined;
+  /** The run is still being followed, so what is on screen is not final. */
+  isRunning?: boolean | undefined;
+  initialTabName?: string | undefined;
+}
+
+const WorkflowLogModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const steps: Array<WorkflowStepTraceEntry> = props.stepTrace?.steps || [];
+
+  const tabs: Array<Tab> = [
+    {
+      name: STEPS_TAB_NAME,
+      countBadge: steps.length,
+      tabType: TabType.Info,
+      children: <StepTraceViewer trace={props.stepTrace} />,
+    },
+    {
+      name: FULL_LOG_TAB_NAME,
+      children: props.logs ? (
+        <SimpleLogViewer
+          title="Workflow Execution Log"
+          height="400px"
+          autoScrollToBottom={props.isRunning}
+        >
+          {props.logs}
+        </SimpleLogViewer>
+      ) : (
+        <p className="text-sm text-gray-500">
+          {props.isRunning
+            ? "Nothing has been logged yet."
+            : "This run did not log anything."}
+        </p>
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      title={props.title || "Workflow Run"}
+      description={
+        props.description || "Here is what happened when this workflow ran."
+      }
+      isLoading={false}
+      modalWidth={ModalWidth.Large}
+      /*
+       * Nothing here is submitted — the modal only shows a run. One button,
+       * which is the same thing the header's × and the Escape key do.
+       */
+      onClose={props.onClose}
+      closeButtonText={"Close"}
+      closeButtonStyleType={ButtonStyleType.NORMAL}
+    >
+      <div>
+        {props.statusMessage && (
+          <div className="flex items-center gap-2">
+            {props.isRunning && (
+              <span
+                aria-hidden="true"
+                className="h-2 w-2 shrink-0 rounded-full bg-indigo-500 animate-pulse"
+              />
+            )}
+            <p
+              className={`text-sm font-medium ${
+                props.isStatusMessageError ? "text-red-600" : "text-gray-600"
+              }`}
+            >
+              {props.statusMessage}
+            </p>
+          </div>
+        )}
+
+        <Tabs
+          tabs={tabs}
+          initialTabName={props.initialTabName}
+          onTabChange={() => {
+            // Nothing to do — the modal shows both tabs from data it already has.
+          }}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+export default WorkflowLogModal;

package/UI/Components/Workflow/WorkflowStatusBar.tsx

@@ -0,0 +1,224 @@
+/*
+ * The strip above the canvas: whether the draft is saved, what the run it
+ * started is doing, and what the static checks have to say about it.
+ *
+ * All three used to be loose text of different shapes and colours sitting next
+ * to each other, and the checks in particular were a bare underlined link — the
+ * one thing on the strip that is clickable looked the least like a control.
+ * They are pills here so the strip reads as one row of statuses, and so the
+ * clickable one can carry a border, a hover state and a focus ring.
+ *
+ * The checks pill only appears when the checks found something. A green "no
+ * problems" pill is the normal state of a workflow, so it says nothing while
+ * taking up the same room as the pill that does.
+ */
+
+import Icon, { SizeProp } from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import { WorkflowLintResult } from "./GraphLint";
+import {
+  WorkflowLintTone,
+  getWorkflowLintCountText,
+  getWorkflowLintTone,
+} from "./GraphLintSummary";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/** Where the draft is between the last edit and the server having it. */
+export enum WorkflowSaveState {
+  /** Nothing has been edited yet. */
+  Idle = "Idle",
+  Saving = "Saving",
+  Saved = "Saved",
+  Error = "Error",
+}
+
+export interface SaveStatePresentation {
+  label: string;
+  dotClassName: string;
+  textClassName: string;
+}
+
+export type GetSaveStatePresentationFunction = (
+  state: WorkflowSaveState,
+) => SaveStatePresentation;
+
+export const getWorkflowSaveStatePresentation: GetSaveStatePresentationFunction =
+  (state: WorkflowSaveState): SaveStatePresentation => {
+    if (state === WorkflowSaveState.Saved) {
+      return {
+        label: "Saved",
+        dotClassName: "bg-emerald-500",
+        textClassName: "text-emerald-700",
+      };
+    }
+
+    if (state === WorkflowSaveState.Saving) {
+      return {
+        label: "Saving…",
+        dotClassName: "bg-indigo-500 animate-pulse",
+        textClassName: "text-indigo-700",
+      };
+    }
+
+    if (state === WorkflowSaveState.Error) {
+      return {
+        label: "Could not save",
+        dotClassName: "bg-red-500",
+        textClassName: "text-red-700",
+      };
+    }
+
+    return {
+      label: "Ready",
+      dotClassName: "bg-gray-400",
+      textClassName: "text-gray-600",
+    };
+  };
+
+const PILL_CLASS_NAME: string =
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium leading-4 whitespace-nowrap";
+
+type GetLintPillClassNameFunction = (tone: WorkflowLintTone) => string;
+
+/** Only ever asked about a tone the pill is shown for — warnings, or worse. */
+const getLintPillClassName: GetLintPillClassNameFunction = (
+  tone: WorkflowLintTone,
+): string => {
+  if (tone === WorkflowLintTone.Error) {
+    return "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 hover:border-red-300";
+  }
+
+  return "border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 hover:border-amber-300";
+};
+
+type GetRunPillClassNameFunction = (
+  hasFailed: boolean,
+  isClickable: boolean,
+) => string;
+
+const getRunPillClassName: GetRunPillClassNameFunction = (
+  hasFailed: boolean,
+  isClickable: boolean,
+): string => {
+  if (hasFailed) {
+    return `border-red-200 bg-red-50 text-red-700${
+      isClickable ? " hover:bg-red-100 hover:border-red-300" : ""
+    }`;
+  }
+
+  return `border-gray-200 bg-gray-50 text-gray-600${
+    isClickable ? " hover:bg-gray-100 hover:border-gray-300" : ""
+  }`;
+};
+
+export interface ComponentProps {
+  saveState: WorkflowSaveState;
+  /** null until the canvas has run its checks for the first time. */
+  lintResult?: WorkflowLintResult | null | undefined;
+  /** Opens the panel listing what the checks found. */
+  onShowIssues?: (() => void) | undefined;
+  /** What the run this builder started is doing, while it is doing it. */
+  runStatusMessage?: string | null | undefined;
+  runStatusFailed?: boolean | undefined;
+  /**
+   * Opens that run's log. Given one, the run pill becomes a control — the
+   * modal opens by itself when a run starts, and this is how it is got back
+   * after being closed.
+   */
+  onShowRunLog?: (() => void) | undefined;
+}
+
+const WorkflowStatusBar: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const savePresentation: SaveStatePresentation =
+    getWorkflowSaveStatePresentation(props.saveState);
+
+  const lintResult: WorkflowLintResult | null = props.lintResult || null;
+  const tone: WorkflowLintTone = lintResult
+    ? getWorkflowLintTone(lintResult)
+    : WorkflowLintTone.Clean;
+
+  const hasIssues: boolean = Boolean(
+    lintResult && lintResult.issues.length > 0,
+  );
+
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2"
+      data-testid="workflow-status-bar"
+    >
+      <span
+        className={`${PILL_CLASS_NAME} border-gray-200 bg-white ${savePresentation.textClassName}`}
+        data-testid="workflow-save-status"
+      >
+        <span
+          className={`h-1.5 w-1.5 shrink-0 rounded-full ${savePresentation.dotClassName}`}
+          aria-hidden="true"
+        />
+        {savePresentation.label}
+      </span>
+
+      {props.runStatusMessage &&
+        (props.onShowRunLog ? (
+          <button
+            type="button"
+            onClick={props.onShowRunLog}
+            title="See this run's log"
+            aria-label={`${props.runStatusMessage} Open the run log.`}
+            data-testid="workflow-run-status-button"
+            className={`${PILL_CLASS_NAME} cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${getRunPillClassName(
+              Boolean(props.runStatusFailed),
+              true,
+            )}`}
+          >
+            <Icon
+              icon={props.runStatusFailed ? IconProp.Alert : IconProp.Play}
+              size={SizeProp.ExtraSmall}
+              className="h-3 w-3 shrink-0"
+            />
+            {props.runStatusMessage}
+          </button>
+        ) : (
+          <span
+            className={`${PILL_CLASS_NAME} ${getRunPillClassName(
+              Boolean(props.runStatusFailed),
+              false,
+            )}`}
+            data-testid="workflow-run-status"
+          >
+            <Icon
+              icon={props.runStatusFailed ? IconProp.Alert : IconProp.Play}
+              size={SizeProp.ExtraSmall}
+              className="h-3 w-3 shrink-0"
+            />
+            {props.runStatusMessage}
+          </span>
+        ))}
+
+      {lintResult && hasIssues && (
+        <button
+          type="button"
+          onClick={props.onShowIssues}
+          title="See everything the checks found"
+          aria-label={`${getWorkflowLintCountText(
+            lintResult,
+          )} found in this workflow. Open the list.`}
+          data-testid="workflow-lint-status-button"
+          className={`${PILL_CLASS_NAME} cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${getLintPillClassName(
+            tone,
+          )}`}
+        >
+          <Icon
+            icon={IconProp.Alert}
+            size={SizeProp.ExtraSmall}
+            className="h-3 w-3 shrink-0"
+          />
+          {getWorkflowLintCountText(lintResult)}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default WorkflowStatusBar;

package/UI/Types/LayeredDismissal.ts

@@ -0,0 +1,31 @@
+/*
+ * Dismissal belongs to the topmost layer that is open.
+ *
+ * A colour picker, an icon grid or an autocomplete menu inside a modal is
+ * portalled to document.body so the modal body cannot clip it, and it closes
+ * itself on a press that lands anywhere else. Very often "anywhere else" is the
+ * modal's own backdrop, which reads the same press as a dismissal of the whole
+ * dialog - so one click aimed at the popup takes the half-filled form with it.
+ *
+ * A popup that consumes a press records it here, and the backdrop skips any
+ * press it finds. The set is keyed on the native event object and holds it
+ * weakly, so nothing outlives the press it describes.
+ */
+
+const pressesConsumedByAnAnchoredPopup: WeakSet<Event> = new WeakSet<Event>();
+
+export type ConsumePressFunction = (event: Event) => void;
+
+export const consumePressForAnchoredPopup: ConsumePressFunction = (
+  event: Event,
+): void => {
+  pressesConsumedByAnAnchoredPopup.add(event);
+};
+
+export type WasPressConsumedFunction = (event: Event) => boolean;
+
+export const wasPressConsumedByAnAnchoredPopup: WasPressConsumedFunction = (
+  event: Event,
+): boolean => {
+  return pressesConsumedByAnAnchoredPopup.has(event);
+};