@oneuptime/common 14.0.11 → 14.0.12

package/UI/Components/Workflow/ComponentPortViewer.tsx

@@ -7,6 +7,12 @@ export interface ComponentProps {
   description: string;
 }
 
+/*
+ * A plain list: a port is a name and a sentence, and boxing each one made a
+ * two-port step look as heavy as a form. The port's internal id ("out",
+ * "success") is not shown. The canvas labels ports by their titles, so the id
+ * only repeated the title in lower case.
+ */
 const ComponentPortViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -16,79 +22,37 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
         <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
       )}
       {props.description && (
-        <p className="text-xs text-gray-400 mb-2">{props.description}</p>
+        <p className="mb-2 text-xs text-gray-500">{props.description}</p>
       )}
       {props.ports && props.ports.length === 0 && (
-        <p className="text-xs text-gray-400 italic">No connections.</p>
+        <p className="text-xs italic text-gray-500">No connections.</p>
       )}
-      <div>
-        {props.ports &&
-          props.ports.length > 0 &&
-          props.ports.map((port: Port, i: number) => {
+      {props.ports && props.ports.length > 0 && (
+        <ul className="space-y-2">
+          {props.ports.map((port: Port, i: number) => {
             return (
-              <div
-                key={i}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.625rem",
-                  padding: "0.5rem 0.75rem",
-                  borderRadius: "8px",
-                  backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
-                  border: "1px solid var(--ou-border-subtle, #f1f5f9)",
-                  marginBottom: "0.375rem",
-                }}
+              <li
+                key={port.id || i}
+                className="flex items-start gap-2.5"
+                data-testid="workflow-port"
               >
-                <div
-                  style={{
-                    width: "8px",
-                    height: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: "var(--ou-text-subtle, #94a3b8)",
-                    flexShrink: 0,
-                  }}
+                <span
+                  aria-hidden="true"
+                  className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-gray-300"
                 />
-                <div style={{ minWidth: 0, flex: 1 }}>
-                  <p
-                    style={{
-                      fontSize: "0.8125rem",
-                      fontWeight: 500,
-                      color: "var(--ou-text-secondary, #334155)",
-                      margin: 0,
-                      lineHeight: "1.25rem",
-                    }}
-                  >
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-gray-900">
                     {port.title}
-                    <span
-                      style={{
-                        color: "var(--ou-text-subtle, #94a3b8)",
-                        fontWeight: 400,
-                        fontSize: "0.6875rem",
-                        marginLeft: "0.375rem",
-                        fontFamily:
-                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                      }}
-                    >
-                      {port.id}
-                    </span>
                   </p>
                   {port.description && (
-                    <p
-                      style={{
-                        fontSize: "0.75rem",
-                        color: "var(--ou-text-subtle, #94a3b8)",
-                        margin: 0,
-                        lineHeight: "1rem",
-                      }}
-                    >
-                      {port.description}
-                    </p>
+                    <p className="text-xs text-gray-500">{port.description}</p>
                   )}
                 </div>
-              </div>
+              </li>
             );
           })}
-      </div>
+        </ul>
+      )}
     </div>
   );
 };

package/UI/Components/Workflow/ComponentPrimaryPanel.tsx

@@ -0,0 +1,171 @@
+import IncomingEmailTriggerPanel from "./IncomingEmailTriggerPanel";
+import ManualTriggerPanel from "./ManualTriggerPanel";
+import WebhookTriggerPanel from "./WebhookTriggerPanel";
+import { getIncomingEmailSecretKeyResetGate } from "./WorkflowIncomingEmailSecretKey";
+import {
+  getWebhookSecretKeyResetGate,
+  isWebhookSecretKeyTheWorkflowId,
+} from "./WorkflowWebhookSecretKey";
+import { DOCS_URL, INBOUND_EMAIL_DOMAIN, WORKFLOW_URL } from "../../Config";
+import { PermissionGateResult } from "../../Utils/PermissionGate";
+import ObjectID from "../../../Types/ObjectID";
+import { NodeDataProp } from "../../../Types/Workflow/Component";
+import ComponentID from "../../../Types/Workflow/ComponentID";
+import { WorkflowDocsPaths } from "../../../Types/Workflow/Documentation/DocumentationLinks";
+import IncomingEmailTrigger from "../../../Types/Workflow/IncomingEmailTrigger";
+import {
+  getWebhookTriggerUrl,
+  getWebhookTriggerUrlPrefix,
+} from "../../../Types/Workflow/WebhookTrigger";
+import React, { ReactElement } from "react";
+
+export interface ComponentPrimaryPanelContext {
+  component: NodeDataProp;
+  workflowId?: ObjectID | undefined;
+  webhookSecretKey?: string | undefined;
+  /*
+   * Whether the user may read the workflow's webhook secret key - and so
+   * whether webhookSecretKey is what the workflow really has. The builder only
+   * asks for the key when the user may read it (WorkflowWebhookSecretKey).
+   *
+   * Left out, a key that was passed is shown as it is.
+   */
+  canSeeWebhookSecretKey?: boolean | undefined;
+  /*
+   * Gives the workflow a new webhook secret key and resolves once it is saved;
+   * the caller then passes the new key in. Only offered when the caller also
+   * says canSeeWebhookSecretKey: without that, an empty key could mean "hidden"
+   * rather than "none", and creating one would replace the real one.
+   */
+  onResetWebhookSecretKey?: (() => Promise<void>) | undefined;
+  /*
+   * The same three for the Incoming Email trigger's address, which is built
+   * from the workflow's incoming email secret key
+   * (WorkflowIncomingEmailSecretKey). The reset also creates the first key of
+   * a workflow that has none.
+   */
+  incomingEmailSecretKey?: string | undefined;
+  canSeeIncomingEmailSecretKey?: boolean | undefined;
+  onResetIncomingEmailSecretKey?: (() => Promise<void>) | undefined;
+}
+
+export type GetComponentPrimaryPanelFunction = (
+  context: ComponentPrimaryPanelContext,
+) => ReactElement | null;
+
+/*
+ * The section a step's settings dialog opens on, for the steps whose settings
+ * are not what someone opens them for. The Webhook trigger has no settings at
+ * all - it is opened for its URL, and its URL's secret key is managed there
+ * too. The Manual trigger has none either, and the question there is how it
+ * gets started.
+ *
+ * The Incoming Email trigger has no settings either: it is opened for its
+ * email address, which is shown, copied and reset the way the Webhook
+ * trigger's URL is.
+ *
+ * Every other step opens on its settings, so this returns null for it. A new
+ * trigger whose address is the point of it adds a case here.
+ */
+export const getComponentPrimaryPanel: GetComponentPrimaryPanelFunction = (
+  context: ComponentPrimaryPanelContext,
+): ReactElement | null => {
+  switch (context.component.metadata.id) {
+    case ComponentID.Webhook: {
+      const workflowServiceUrl: string = WORKFLOW_URL.toString();
+      const canSeeUrl: boolean = context.canSeeWebhookSecretKey !== false;
+      const secretKey: string = canSeeUrl ? context.webhookSecretKey || "" : "";
+
+      const resetGate: PermissionGateResult = getWebhookSecretKeyResetGate();
+      /*
+       * Offered when the user may reset the key, and shown disabled - with the
+       * permission that is missing - when they may not. Hidden while the
+       * permission snapshot has not landed (no reason to give).
+       */
+      const offersReset: boolean = Boolean(
+        context.onResetWebhookSecretKey &&
+          context.canSeeWebhookSecretKey === true &&
+          (resetGate.isAllowed || resetGate.disabledReason),
+      );
+
+      return (
+        <WebhookTriggerPanel
+          webhookUrl={
+            secretKey
+              ? getWebhookTriggerUrl({
+                  workflowServiceUrl: workflowServiceUrl,
+                  secretKey: secretKey,
+                })
+              : null
+          }
+          webhookUrlPrefix={getWebhookTriggerUrlPrefix({
+            workflowServiceUrl: workflowServiceUrl,
+          })}
+          canSeeUrl={canSeeUrl}
+          isUrlBuiltFromWorkflowId={Boolean(
+            secretKey &&
+              context.workflowId &&
+              isWebhookSecretKeyTheWorkflowId({
+                secretKey: secretKey,
+                workflowId: context.workflowId,
+              }),
+          )}
+          onResetUrl={offersReset ? context.onResetWebhookSecretKey : undefined}
+          resetDisabledReason={
+            offersReset && !resetGate.isAllowed
+              ? resetGate.disabledReason
+              : undefined
+          }
+        />
+      );
+    }
+    case ComponentID.IncomingEmail: {
+      // Empty when this server receives no email; the panel then says so.
+      const inboundDomain: string = INBOUND_EMAIL_DOMAIN || "";
+      const canSeeAddress: boolean =
+        context.canSeeIncomingEmailSecretKey !== false;
+      const secretKey: string = canSeeAddress
+        ? context.incomingEmailSecretKey || ""
+        : "";
+
+      const resetGate: PermissionGateResult =
+        getIncomingEmailSecretKeyResetGate();
+      /*
+       * Offered when the user may reset the address, and shown disabled -
+       * with the permission that is missing - when they may not. Only with
+       * canSeeIncomingEmailSecretKey: without it an empty key could mean
+       * "hidden" rather than "none", and creating one would replace the real
+       * one.
+       */
+      const offersReset: boolean = Boolean(
+        context.onResetIncomingEmailSecretKey &&
+          context.canSeeIncomingEmailSecretKey === true &&
+          (resetGate.isAllowed || resetGate.disabledReason),
+      );
+
+      return (
+        <IncomingEmailTriggerPanel
+          inboundDomain={inboundDomain}
+          address={IncomingEmailTrigger.getAddress({
+            secretKey: secretKey,
+            inboundDomain: inboundDomain,
+          })}
+          canSeeAddress={canSeeAddress}
+          onResetAddress={
+            offersReset ? context.onResetIncomingEmailSecretKey : undefined
+          }
+          resetDisabledReason={
+            offersReset && !resetGate.isAllowed
+              ? resetGate.disabledReason
+              : undefined
+          }
+          setupGuideUrl={`${DOCS_URL.toString()}${WorkflowDocsPaths.inboundEmailSetup}`}
+        />
+      );
+    }
+    case ComponentID.Manual:
+      return <ManualTriggerPanel />;
+    default:
+      return null;
+  }
+};

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -1,3 +1,5 @@
+import CopyTextButton from "../CopyTextButton/CopyTextButton";
+import BreakableCode from "./BreakableCode";
 import { ReturnValue } from "../../../Types/Workflow/Component";
 import { componentReturnValueReference } from "../../../Types/Workflow/TemplateSyntax";
 import React, { FunctionComponent, ReactElement } from "react";
@@ -15,6 +17,13 @@ export interface ComponentProps {
   componentId?: string | undefined;
 }
 
+/*
+ * One row per value, the full width of the dialog: its name and type, what it
+ * holds, and the reference that reads it with a button to copy it. The
+ * reference wraps only between its parts (see BreakableCode). In the old narrow
+ * sidebar it wrapped wherever it hit a hyphen, three lines to a reference, and
+ * there was no way to copy it short of selecting it by hand.
+ */
 const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -24,105 +33,75 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
         <h2 className="text-sm font-semibold text-gray-600">{props.name}</h2>
       )}
       {props.description && (
-        <p className="text-xs text-gray-400 mb-2">{props.description}</p>
+        <p className="mb-2 text-xs text-gray-500">{props.description}</p>
       )}
       {props.returnValues && props.returnValues.length === 0 && (
-        <p className="text-xs text-gray-400 italic">
+        <p className="text-xs italic text-gray-500">
           This step does not return any data.
         </p>
       )}
-      <div>
-        {props.returnValues &&
-          props.returnValues.length > 0 &&
-          props.returnValues.map((returnValue: ReturnValue, i: number) => {
+      {props.returnValues && props.returnValues.length > 0 && (
+        <ul className="space-y-2">
+          {props.returnValues.map((returnValue: ReturnValue, i: number) => {
+            const reference: string | null = props.componentId
+              ? componentReturnValueReference(props.componentId, returnValue.id)
+              : null;
+
             return (
-              <div
-                key={i}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  gap: "0.625rem",
-                  padding: "0.5rem 0.75rem",
-                  borderRadius: "8px",
-                  backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
-                  border: "1px solid var(--ou-border-subtle, #f1f5f9)",
-                  marginBottom: "0.375rem",
-                }}
+              <li
+                key={returnValue.id || i}
+                className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2.5"
+                data-testid="workflow-return-value"
               >
-                <div style={{ minWidth: 0, flex: 1 }}>
-                  <p
-                    style={{
-                      fontSize: "0.8125rem",
-                      fontWeight: 500,
-                      color: "var(--ou-text-secondary, #334155)",
-                      margin: 0,
-                      lineHeight: "1.25rem",
-                    }}
+                {/*
+                 * The type sits right after the name rather than at the far
+                 * end of the row: on a phone a pill pinned to the right edge
+                 * squeezed the name onto two lines, and on a wide dialog it
+                 * was a long way from the name it describes.
+                 */}
+                <p className="text-sm font-medium text-gray-900">
+                  {returnValue.name}
+                  <span
+                    className="ml-2 inline-block whitespace-nowrap rounded-full border border-indigo-100 bg-indigo-50 px-2 py-0.5 align-middle text-[11px] font-medium leading-4 text-indigo-700"
+                    data-testid="workflow-return-value-type"
                   >
-                    {returnValue.name}
-                    <span
-                      style={{
-                        color: "var(--ou-text-subtle, #94a3b8)",
-                        fontWeight: 400,
-                        fontSize: "0.6875rem",
-                        marginLeft: "0.375rem",
-                        fontFamily:
-                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                      }}
-                    >
-                      {returnValue.id}
-                    </span>
+                    {returnValue.type}
+                  </span>
+                </p>
+                {returnValue.description && (
+                  <p className="mt-0.5 text-xs text-gray-500">
+                    {returnValue.description}
                   </p>
-                  {returnValue.description && (
-                    <p
-                      style={{
-                        fontSize: "0.75rem",
-                        color: "var(--ou-text-subtle, #94a3b8)",
-                        margin: 0,
-                        lineHeight: "1rem",
-                      }}
-                    >
-                      {returnValue.description}
-                    </p>
-                  )}
-                  {props.componentId && (
-                    <code
-                      style={{
-                        display: "block",
-                        marginTop: "0.25rem",
-                        fontSize: "0.6875rem",
-                        color: "var(--ou-text-subtle, #94a3b8)",
-                        fontFamily:
-                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                        overflowWrap: "anywhere",
-                      }}
-                    >
-                      {componentReturnValueReference(
-                        props.componentId,
-                        returnValue.id,
-                      )}
-                    </code>
-                  )}
-                </div>
-                <span
-                  style={{
-                    fontSize: "0.6875rem",
-                    fontWeight: 500,
-                    color: "var(--ou-link, #6366f1)",
-                    backgroundColor: "var(--ou-accent-soft, #eef2ff)",
-                    padding: "0.125rem 0.5rem",
-                    borderRadius: "100px",
-                    whiteSpace: "nowrap",
-                    border: "1px solid var(--ou-accent-muted, #e0e7ff)",
-                  }}
-                >
-                  {returnValue.type}
-                </span>
-              </div>
+                )}
+                {reference ? (
+                  <div className="mt-2 flex items-start gap-2">
+                    <BreakableCode
+                      text={reference}
+                      breakAfter="."
+                      dataTestId="workflow-return-value-reference"
+                      className="block min-w-0 overflow-x-auto rounded-md border border-gray-200 bg-white px-2 py-1 text-xs leading-5 text-gray-700"
+                    />
+                    <CopyTextButton
+                      textToBeCopied={reference}
+                      iconOnly={true}
+                      size="sm"
+                      title={`Copy the reference to ${returnValue.name}`}
+                      className="mt-0.5 shrink-0"
+                    />
+                  </div>
+                ) : (
+                  <BreakableCode
+                    text={returnValue.id}
+                    breakAfter="-"
+                    dataTestId="workflow-return-value-id"
+                    className="mt-1 block text-[11px] text-gray-500"
+                  />
+                )}
+              </li>
             );
           })}
-      </div>
+        </ul>
+      )}
     </div>
   );
 };