@oneuptime/common 14.0.11 → 14.0.12

package/Types/Workflow/Templates.ts

@@ -54,6 +54,113 @@ export const WorkflowTemplateCategories: Array<WorkflowTemplateCategory> = [
   WorkflowTemplateCategory.Integrations,
 ];
 
+/*
+ * How the picker shows a category: an icon in its list of categories, and a
+ * line under its heading saying what the templates in it are for. The icons
+ * are the ones the product's own navigation uses for the same area, so
+ * Incidents looks the same here as it does in the menu.
+ */
+export interface WorkflowTemplateCategoryInfo {
+  category: WorkflowTemplateCategory;
+  /**
+   * The name the picker shows. Mostly the category itself; shorter where the
+   * full name does not fit beside its count in the list of categories.
+   */
+  label: string;
+  /** One line, said as what someone wants to get done. */
+  description: string;
+  icon: IconProp;
+}
+
+/*
+ * A Record rather than a list, so a new category that is not described here
+ * fails to compile instead of showing up in the picker without an icon.
+ */
+const WORKFLOW_TEMPLATE_CATEGORY_INFO: Record<
+  WorkflowTemplateCategory,
+  WorkflowTemplateCategoryInfo
+> = {
+  [WorkflowTemplateCategory.Basics]: {
+    category: WorkflowTemplateCategory.Basics,
+    /*
+     * Not "Basics": that key is a form step's in the Dashboard's locales,
+     * where it reads "basic information", and these are first workflows.
+     */
+    label: "Learn the basics",
+    description:
+      "Small workflows that show how a trigger, its steps and their values fit together.",
+    icon: IconProp.BookOpen,
+  },
+  [WorkflowTemplateCategory.Incidents]: {
+    category: WorkflowTemplateCategory.Incidents,
+    label: "Incidents",
+    description:
+      "Tell your team and your other tools the moment an incident opens or changes.",
+    icon: IconProp.Alert,
+  },
+  [WorkflowTemplateCategory.Alerts]: {
+    category: WorkflowTemplateCategory.Alerts,
+    label: "Alerts",
+    description: "Send new alerts to the chat your team already watches.",
+    icon: IconProp.ExclaimationCircle,
+  },
+  [WorkflowTemplateCategory.Monitors]: {
+    category: WorkflowTemplateCategory.Monitors,
+    label: "Monitors",
+    description:
+      "Act when a monitor goes down, comes back up or changes status.",
+    icon: IconProp.AltGlobe,
+  },
+  [WorkflowTemplateCategory.OnCall]: {
+    category: WorkflowTemplateCategory.OnCall,
+    label: "On-Call",
+    description: "Follow an on-call escalation from start to finish.",
+    icon: IconProp.Call,
+  },
+  [WorkflowTemplateCategory.StatusPage]: {
+    category: WorkflowTemplateCategory.StatusPage,
+    label: "Status Pages",
+    description:
+      "Pass new status page subscribers on once they have confirmed.",
+    icon: IconProp.CheckCircle,
+  },
+  [WorkflowTemplateCategory.ScheduledMaintenance]: {
+    category: WorkflowTemplateCategory.ScheduledMaintenance,
+    label: "Maintenance",
+    description: "Let people know as soon as maintenance is scheduled.",
+    icon: IconProp.Clock,
+  },
+  [WorkflowTemplateCategory.Scheduled]: {
+    category: WorkflowTemplateCategory.Scheduled,
+    label: "On a Schedule",
+    description: "Run checks, heartbeats and emails at set times.",
+    icon: IconProp.Calendar,
+  },
+  [WorkflowTemplateCategory.Jira]: {
+    category: WorkflowTemplateCategory.Jira,
+    label: "Jira",
+    description:
+      "Keep Jira issues in step with your incidents and alerts, both ways.",
+    icon: IconProp.Ticket,
+  },
+  [WorkflowTemplateCategory.Integrations]: {
+    category: WorkflowTemplateCategory.Integrations,
+    label: "Integrations",
+    description:
+      "Use a workflow's own webhook URL to join two other systems together.",
+    icon: IconProp.Integrations,
+  },
+};
+
+export type GetWorkflowTemplateCategoryInfoFunction = (
+  category: WorkflowTemplateCategory,
+) => WorkflowTemplateCategoryInfo;
+
+export const getWorkflowTemplateCategoryInfo: GetWorkflowTemplateCategoryInfoFunction =
+  (category: WorkflowTemplateCategory): WorkflowTemplateCategoryInfo => {
+    return WORKFLOW_TEMPLATE_CATEGORY_INFO[category];
+  };
+
 /*
  * A variable name becomes two things that must match exactly: the `name` column
  * on the created WorkflowVariable row, and the tail of the
@@ -90,6 +197,13 @@ export interface WorkflowTemplate {
   /** What the builder should look at once it opens. */
   teaches: string;
   category: WorkflowTemplateCategory;
+  /**
+   * Splits a large category into parts the picker shows under headings of
+   * their own: the Jira templates come in an incident and an alert version,
+   * and seventeen of them in one run read as one long list. Absent on the
+   * categories that are short enough to read at a glance.
+   */
+  subcategory?: string | undefined;
   icon: IconProp;
   /** Suggested name for the created workflow. */
   workflowName: string;
@@ -3256,7 +3370,11 @@ type JiraTemplatesForKindFunction = (
   kind: JiraRecordKind,
 ) => Array<TemplateDefinition>;
 
-/** One kind's set, OneUptime -> Jira first. Public notes exist only on incidents. */
+/*
+ * One kind's set, OneUptime -> Jira first. Public notes exist only on
+ * incidents. Each is filed under its kind ("Incidents" or "Alerts"), which is
+ * how the picker splits the seventeen into two lists.
+ */
 const jiraTemplatesForKind: JiraTemplatesForKindFunction = (
   kind: JiraRecordKind,
 ): Array<TemplateDefinition> => {
@@ -3270,7 +3388,9 @@ const jiraTemplatesForKind: JiraTemplatesForKindFunction = (
     jiraStatusToStateTemplate(kind),
     jiraCommentToNoteTemplate(kind),
     jiraIssueChangesToNoteTemplate(kind),
-  ];
+  ].map((definition: TemplateDefinition): TemplateDefinition => {
+    return { ...definition, subcategory: kind.Plural };
+  });
 };
 
 const JIRA_TEMPLATE_DEFINITIONS: Array<TemplateDefinition> = [
@@ -5404,4 +5524,161 @@ export const buildGraphForTemplate: BuildGraphForTemplateFunction = (
   return buildTemplateGraph(spec, generateId);
 };
 
+/*
+ * The handful the picker opens on. Forty-odd templates shown at once, each as
+ * large as the next, is a wall nobody can choose from, so the picker starts
+ * on these and leaves the rest to the categories and the search. They cover
+ * the jobs people most often come to workflows for: tell the team's chat
+ * about a new incident (in Slack or in Teams), hear about a monitor only when
+ * it is down, open a Jira issue, send each incident to another system, and
+ * watch an endpoint on a schedule. Each works with nothing more than the
+ * settings it asks for - no AI provider, no Jira webhook to register first.
+ * In the order the picker lists them.
+ */
+export const RECOMMENDED_WORKFLOW_TEMPLATE_IDS: ReadonlyArray<string> = [
+  "incident-created-slack",
+  "incident-created-teams",
+  "monitor-offline-only-slack",
+  "jira-create-issue-for-incident",
+  "incident-created-forward",
+  "scheduled-check-alert-slack",
+];
+
+export type GetRecommendedWorkflowTemplatesFunction =
+  () => Array<WorkflowTemplate>;
+
+export const getRecommendedWorkflowTemplates: GetRecommendedWorkflowTemplatesFunction =
+  (): Array<WorkflowTemplate> => {
+    return RECOMMENDED_WORKFLOW_TEMPLATE_IDS.map(
+      (templateId: string): WorkflowTemplate | null => {
+        return getWorkflowTemplate(templateId);
+      },
+    ).filter(
+      (template: WorkflowTemplate | null): template is WorkflowTemplate => {
+        return template !== null;
+      },
+    );
+  };
+
+/*
+ * What a template is made of, for the picker's preview: its trigger, then
+ * every other kind of block in it.
+ */
+export interface WorkflowTemplateOutline {
+  /** The trigger's component id, such as "incident-on-create". */
+  triggerComponentId: string;
+  /**
+   * Every other kind of block, once each. In the order a run can reach them
+   * from the trigger, the way things go when they work before the ways they
+   * fail, so the part the template is about comes first. Log goes last:
+   * nearly every path in a template ends in one, and it would otherwise lead
+   * the list.
+   */
+  stepComponentIds: Array<string>;
+  /** How many blocks the created workflow has, the trigger included. */
+  blockCount: number;
+}
+
+/*
+ * Ports a run leaves by when things go wrong, or when a check says no. Their
+ * blocks are listed after the ones on the way that works. Not a reason to
+ * leave them out: "Check an API and notify Slack if it fails" posts to Slack
+ * from its Error port, and that is the whole point of it.
+ */
+const SIDE_PORTS: ReadonlyArray<string> = ["no", "error"];
+
+export type GetWorkflowTemplateOutlineFunction = (
+  templateId: string,
+) => WorkflowTemplateOutline | null;
+
+export const getWorkflowTemplateOutline: GetWorkflowTemplateOutlineFunction = (
+  templateId: string,
+): WorkflowTemplateOutline | null => {
+  const spec: TemplateGraphSpec | null = getTemplateGraphSpec(templateId);
+
+  if (!spec) {
+    return null;
+  }
+
+  const trigger: TemplateNodeSpec | undefined = spec.nodes.find(
+    (node: TemplateNodeSpec) => {
+      return node.componentType === ComponentType.Trigger;
+    },
+  );
+
+  if (!trigger) {
+    return null;
+  }
+
+  const nodeByComponentId: Map<string, TemplateNodeSpec> = new Map();
+
+  for (const node of spec.nodes) {
+    nodeByComponentId.set(node.componentId, node);
+  }
+
+  type PortRankFunction = (edge: TemplateEdgeSpec) => number;
+
+  const portRank: PortRankFunction = (edge: TemplateEdgeSpec): number => {
+    return SIDE_PORTS.includes(edge.fromPort) ? 1 : 0;
+  };
+
+  // Breadth first from the trigger, so blocks near the start come first.
+  const visitOrder: Array<TemplateNodeSpec> = [];
+  const visited: Set<string> = new Set([trigger.componentId]);
+  const queue: Array<string> = [trigger.componentId];
+
+  while (queue.length > 0) {
+    const componentId: string = queue.shift() as string;
+
+    const outgoing: Array<TemplateEdgeSpec> = spec.edges
+      .filter((edge: TemplateEdgeSpec) => {
+        return edge.fromComponentId === componentId;
+      })
+      .sort((a: TemplateEdgeSpec, b: TemplateEdgeSpec): number => {
+        return portRank(a) - portRank(b);
+      });
+
+    for (const edge of outgoing) {
+      const next: TemplateNodeSpec | undefined = nodeByComponentId.get(
+        edge.toComponentId,
+      );
+
+      if (next && !visited.has(next.componentId)) {
+        visited.add(next.componentId);
+        visitOrder.push(next);
+        queue.push(next.componentId);
+      }
+    }
+  }
+
+  // Anything no edge reaches still exists in the workflow, so it is listed too.
+  for (const node of spec.nodes) {
+    if (!visited.has(node.componentId)) {
+      visited.add(node.componentId);
+      visitOrder.push(node);
+    }
+  }
+
+  const stepComponentIds: Array<string> = [];
+
+  for (const node of visitOrder) {
+    if (!stepComponentIds.includes(node.metadataId)) {
+      stepComponentIds.push(node.metadataId);
+    }
+  }
+
+  const logIndex: number = stepComponentIds.indexOf(ComponentID.Log);
+
+  if (logIndex !== -1) {
+    stepComponentIds.splice(logIndex, 1);
+    stepComponentIds.push(ComponentID.Log);
+  }
+
+  return {
+    triggerComponentId: trigger.metadataId,
+    stepComponentIds: stepComponentIds,
+    blockCount: spec.nodes.length,
+  };
+};
+
 export default getWorkflowTemplates;

package/Types/Workflow/WebhookTrigger.ts

@@ -0,0 +1,87 @@
+import HTTPMethod from "../API/HTTPMethod";
+
+/*
+ * What a caller needs in order to start a workflow through its Webhook
+ * trigger: where to send the request and which methods it accepts.
+ *
+ * The builder shows these at the top of the Webhook step's settings, because
+ * the URL is what someone opening that step has come for. The server registers
+ * the routes on its own (Server/Types/Workflow/Components/Webhook.ts), and
+ * Tests/Types/Workflow/WebhookTrigger.test.ts holds the two together, so the
+ * dialog can never advertise a method or a path the server does not answer.
+ */
+
+// Relative to the workflow service, which the dashboard knows as WORKFLOW_URL.
+export const WEBHOOK_TRIGGER_PATH: string = "/trigger";
+
+export const WEBHOOK_TRIGGER_HTTP_METHODS: ReadonlyArray<HTTPMethod> = [
+  HTTPMethod.GET,
+  HTTPMethod.POST,
+];
+
+/*
+ * The body the example request sends. A flat object with one field, so the
+ * request reads at a glance and the field shows up as
+ * returnValues.request-body.message in the next step.
+ */
+export const WEBHOOK_TRIGGER_EXAMPLE_BODY: string = '{"message": "Hello"}';
+
+/*
+ * Shown in place of the secret key until the reader asks to see it: the URL is
+ * the credential, and a dialog is often open on a shared screen. A fixed
+ * length, so the mask says nothing about the key behind it.
+ */
+export const WEBHOOK_TRIGGER_SECRET_MASK: string = "•".repeat(16);
+
+export type GetWebhookTriggerUrlPrefixFunction = (data: {
+  workflowServiceUrl: string;
+}) => string;
+
+// Everything before the secret key, ending in a slash.
+export const getWebhookTriggerUrlPrefix: GetWebhookTriggerUrlPrefixFunction =
+  (data: { workflowServiceUrl: string }): string => {
+    // With or without a trailing slash, the base gives the same URL.
+    const base: string = data.workflowServiceUrl.replace(/\/+$/, "");
+
+    return `${base}${WEBHOOK_TRIGGER_PATH}/`;
+  };
+
+export type GetWebhookTriggerUrlFunction = (data: {
+  workflowServiceUrl: string;
+  secretKey: string;
+}) => string;
+
+export const getWebhookTriggerUrl: GetWebhookTriggerUrlFunction = (data: {
+  workflowServiceUrl: string;
+  secretKey: string;
+}): string => {
+  return `${getWebhookTriggerUrlPrefix(data)}${encodeURIComponent(data.secretKey)}`;
+};
+
+export type GetMaskedWebhookTriggerUrlFunction = (data: {
+  workflowServiceUrl: string;
+}) => string;
+
+// The same URL with the secret key masked. Never built from the key.
+export const getMaskedWebhookTriggerUrl: GetMaskedWebhookTriggerUrlFunction =
+  (data: { workflowServiceUrl: string }): string => {
+    return `${getWebhookTriggerUrlPrefix(data)}${WEBHOOK_TRIGGER_SECRET_MASK}`;
+  };
+
+export type GetWebhookTriggerCurlExampleFunction = (
+  webhookUrl: string,
+) => string;
+
+/*
+ * A request that can be pasted into a terminal as it is. One option per line,
+ * so the URL stays readable in a narrow dialog and nothing has to be scrolled
+ * sideways to check what is being sent.
+ */
+export const getWebhookTriggerCurlExample: GetWebhookTriggerCurlExampleFunction =
+  (webhookUrl: string): string => {
+    return [
+      `curl -X ${HTTPMethod.POST} "${webhookUrl}" \\`,
+      `  -H "Content-Type: application/json" \\`,
+      `  -d '${WEBHOOK_TRIGGER_EXAMPLE_BODY}'`,
+    ].join("\n");
+  };

package/Types/Workflow/WorkflowArchive.ts

@@ -0,0 +1,45 @@
+/*
+ * What an archived workflow says when something tries to run it.
+ *
+ * An archived workflow never runs, from any trigger: the queue refuses to
+ * start a run (QueueWorkflow.addWorkflowToQueue - a manual run, "Run this
+ * step", a webhook, a model event, an incoming email and the Run Workflow
+ * step all go through it), its schedule is unregistered, and a run that was
+ * already queued or sleeping is stopped by the runner. Kept in one place so
+ * the API error, the run log and the tests all say the same thing.
+ */
+
+// The error a manual run or a webhook call gets back.
+export const WORKFLOW_ARCHIVED_RUN_REFUSED_MESSAGE: string =
+  "This workflow is archived, so it does not run. Unarchive it to run it again.";
+
+// Written into the log of a run that was queued before the workflow was archived.
+export const WORKFLOW_ARCHIVED_BEFORE_RUN_MESSAGE: string =
+  "Workflow was archived before this run started, so it did not run.";
+
+// Written into the log of a run that was sleeping when the workflow was archived.
+export const WORKFLOW_ARCHIVED_WHILE_WAITING_MESSAGE: string =
+  "Workflow was archived while it was waiting. Cancelling the run.";
+
+export type GetChildWorkflowArchivedMessageFunction = (data: {
+  workflowId: string;
+  workflowName?: string | null | undefined;
+}) => string;
+
+/*
+ * The same refusal as an Execute Workflow step reports it, in the run of the
+ * workflow that called the archived one. "This workflow is archived" would
+ * read there as the calling workflow, which is plainly running, so the
+ * message names the workflow it called: by name, or by ID when it has none.
+ * (The same reasoning, and shape, as getChildWorkflowTurnedOffMessage.)
+ */
+export const getChildWorkflowArchivedMessage: GetChildWorkflowArchivedMessageFunction =
+  (data: {
+    workflowId: string;
+    workflowName?: string | null | undefined;
+  }): string => {
+    const name: string = (data.workflowName || "").trim();
+    const workflow: string = name ? `"${name}"` : data.workflowId;
+
+    return `The workflow ${workflow} is archived, so this step could not start it. Unarchive it to run it again.`;
+  };

package/Types/Workflow/WorkflowEnabled.ts

@@ -0,0 +1,51 @@
+/*
+ * A workflow runs only while it is turned on: its Enabled switch, stored as
+ * Workflow.isEnabled. New workflows start turned off, and so do duplicated
+ * and imported ones, so nearly everyone meets the off state, usually the
+ * first time they try out a workflow they have just built.
+ *
+ * Nothing runs a workflow that is off. Its trigger is ignored, and Run
+ * Workflow, Run just this step, its webhook URL and other workflows' Execute
+ * Workflow steps are all refused. That is deliberate: off is how a workflow
+ * is built without its trigger firing on real events, and how one is paused.
+ * What was wrong was the refusal, "This workflow is not enabled", which said
+ * neither how to turn the workflow on nor where. The messages here say both.
+ *
+ * The switch is called "Enabled" wherever it is drawn: at the top of the
+ * Builder, in the Overview's Workflow Details, and as a column of the
+ * Workflows list. The messages name it, so a reader knows what to look for.
+ */
+
+// The switch's name, as the Builder's toolbar and the Overview draw it.
+export const WORKFLOW_ENABLED_SWITCH_LABEL: string = "Enabled";
+
+/*
+ * The server's answer when something tries to run a workflow that is off
+ * (App/FeatureSet/Workflow/Services/QueueWorkflow.ts). It is read in more
+ * places than the Builder: a webhook sender's delivery log shows it as the
+ * response body, and so does a script calling the workflow's URL. So it says
+ * what is wrong, what to do about it, and where the switch is.
+ */
+export const WORKFLOW_TURNED_OFF_MESSAGE: string = `This workflow is turned off, so it can't run. Turn it on with the ${WORKFLOW_ENABLED_SWITCH_LABEL} switch at the top of its Builder, then try again.`;
+
+export type GetChildWorkflowTurnedOffMessageFunction = (data: {
+  workflowId: string;
+  workflowName?: string | null | undefined;
+}) => string;
+
+/*
+ * The same refusal as an Execute Workflow step reports it, in the run of the
+ * workflow that called the one that is off. "This workflow is turned off"
+ * would read there as the calling workflow, which is plainly running, so the
+ * message names the workflow it called: by name, or by ID when it has none.
+ */
+export const getChildWorkflowTurnedOffMessage: GetChildWorkflowTurnedOffMessageFunction =
+  (data: {
+    workflowId: string;
+    workflowName?: string | null | undefined;
+  }): string => {
+    const name: string = (data.workflowName || "").trim();
+    const workflow: string = name ? `"${name}"` : data.workflowId;
+
+    return `The workflow ${workflow} is turned off, so this step could not start it. Turn it on with the ${WORKFLOW_ENABLED_SWITCH_LABEL} switch at the top of its Builder.`;
+  };

package/Types/Workflow/WorkflowStatus.ts

@@ -8,4 +8,40 @@ enum WorkflowStatus {
   WorkflowCountExceeded = "Workflow Count Exceeded",
 }
 
+/*
+ * A run's status in the words the dashboard shows it in. Two of them read
+ * differently from their stored value: a run that worked is "Executed", and a
+ * run the plan did not allow is "Execution Exceeded Current Plan". The status
+ * pill and a downloaded run both read from here, so a log someone downloads
+ * says what the list they downloaded it from said.
+ */
+const WORKFLOW_STATUS_LABELS: Record<WorkflowStatus, string> = {
+  [WorkflowStatus.Scheduled]: "Scheduled",
+  [WorkflowStatus.Running]: "Running",
+  [WorkflowStatus.Waiting]: "Waiting",
+  [WorkflowStatus.Success]: "Executed",
+  [WorkflowStatus.Error]: "Error",
+  [WorkflowStatus.Timeout]: "Timeout",
+  [WorkflowStatus.WorkflowCountExceeded]: "Execution Exceeded Current Plan",
+};
+
+export const UNKNOWN_WORKFLOW_STATUS_LABEL: string = "Unknown";
+
+export type GetWorkflowStatusLabelFunction = (
+  status: WorkflowStatus | string | null | undefined,
+) => string;
+
+export const getWorkflowStatusLabel: GetWorkflowStatusLabelFunction = (
+  status: WorkflowStatus | string | null | undefined,
+): string => {
+  if (!status) {
+    return UNKNOWN_WORKFLOW_STATUS_LABEL;
+  }
+
+  return (
+    WORKFLOW_STATUS_LABELS[status as WorkflowStatus] ||
+    UNKNOWN_WORKFLOW_STATUS_LABEL
+  );
+};
+
 export default WorkflowStatus;

package/Types/Workspace/NotificationRules/NotificationRuleCondition.ts

@@ -76,14 +76,27 @@ export default interface NotificationRuleCondition {
 }
 
 export class NotificationRuleConditionUtil {
+  /*
+   * Why a rule cannot be saved, or null when it can: its conditions first,
+   * then where it posts. The rule form asks the two on separate steps
+   * (Conditions, then Destination), and each step checks its own half.
+   */
   public static getValidationError(data: {
     notificationRule: IncidentNotificationRule;
     eventType: NotificationRuleEventType;
     workspaceType: WorkspaceType;
   }): string | null {
-    const { notificationRule, eventType, workspaceType } = data;
+    return (
+      NotificationRuleConditionUtil.getConditionsValidationError(data) ||
+      NotificationRuleConditionUtil.getDestinationValidationError(data)
+    );
+  }
 
-    for (const condition of notificationRule.filters) {
+  // The rule's conditions: every one complete. No conditions at all is fine.
+  public static getConditionsValidationError(data: {
+    notificationRule: IncidentNotificationRule | undefined;
+  }): string | null {
+    for (const condition of data.notificationRule?.filters || []) {
       if (!condition.checkOn) {
         return "Check On is required";
       }
@@ -101,6 +114,23 @@ export class NotificationRuleConditionUtil {
       }
     }
 
+    return null;
+  }
+
+  /*
+   * Where the rule posts: an event that can get a channel of its own needs
+   * at least one destination, and every destination picked needs what it
+   * posts to.
+   */
+  public static getDestinationValidationError(data: {
+    notificationRule: IncidentNotificationRule | undefined;
+    eventType: NotificationRuleEventType;
+    workspaceType: WorkspaceType;
+  }): string | null {
+    const { eventType, workspaceType } = data;
+    const notificationRule: Partial<IncidentNotificationRule> =
+      data.notificationRule || {};
+
     if (
       eventType === NotificationRuleEventType.Incident ||
       eventType === NotificationRuleEventType.Alert ||

package/UI/Components/ActionButton/RowActions.tsx

@@ -41,7 +41,7 @@ export interface ComponentProps<T extends GenericObject> {
 /*
  * OUTLINE and its hover variants are drawn by a `btn-outline-secondary` class
  * that no stylesheet defines, so they render as bare text. That was tolerable
- * in a strip of buttons; as the row's one button, sat beside a bordered ⋯, it
+ * in a strip of buttons; as the row's one button, sat beside a bare ⋯, it
  * reads as a stray label. The row's button always looks like a button.
  */
 const getRowButtonStyle: (style: ButtonStyleType) => ButtonStyleType = (
@@ -218,11 +218,14 @@ const RowActions: RowActionsFunction = <T extends GenericObject>(
               type="button"
               data-testid="row-actions-more-button"
               /*
-               * Sized to the Small row button beside it: that button's label
-               * is text-base below md and text-sm above, so the trigger's
-               * vertical padding steps down at md to keep the two level.
+               * A bare ⋯, like the one in a card header: no outline, fill or
+               * shadow until it is hovered. It keeps a transparent border so
+               * it stays the height of the Small row button beside it - that
+               * button's label is text-base below md and text-sm above, so the
+               * trigger's vertical padding steps down at md to keep the two
+               * level.
                */
-              className="inline-flex shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white px-1.5 py-1.5 md:py-1 text-gray-500 shadow-sm transition-colors duration-150 ease-out hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+              className="inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent px-1.5 py-1.5 md:py-1 text-gray-500 transition-colors duration-150 ease-out hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
             >
               <Icon icon={IconProp.EllipsisHorizontal} className="h-5 w-5" />
             </button>

package/UI/Components/ActionCard/ActionCard.tsx

@@ -18,6 +18,12 @@ export interface ComponentProps {
   actions: Array<ConfirmAction>;
 }
 
+const DESTRUCTIVE_ACTION_STYLES: Array<ButtonStyleType> = [
+  ButtonStyleType.DANGER,
+  ButtonStyleType.DANGER_OUTLINE,
+  ButtonStyleType.HOVER_DANGER_OUTLINE,
+];
+
 const ActionCard: (props: ComponentProps) => ReactElement = (
   props: ComponentProps,
 ): ReactElement => {
@@ -33,7 +39,11 @@ const ActionCard: (props: ComponentProps) => ReactElement = (
         buttons={props.actions.map((action: ConfirmAction) => {
           return {
             title: action.actionName,
-            buttonStyle: action.actionButtonStyle || ButtonStyleType.NORMAL,
+            /*
+             * `??`: ButtonStyleType.PRIMARY is 0, and `||` turned an action
+             * its author marked PRIMARY into a plain button.
+             */
+            buttonStyle: action.actionButtonStyle ?? ButtonStyleType.NORMAL,
             onClick: () => {
               setCurrentAction(action);
             },
@@ -51,7 +61,17 @@ const ActionCard: (props: ComponentProps) => ReactElement = (
             currentAction.onConfirmAction();
             setCurrentAction(undefined);
           }}
-          submitButtonText={`Confirm`}
+          /*
+           * The button says what it does, and is the dialog's one primary
+           * action - red when the action it confirms destroys something.
+           */
+          submitButtonText={currentAction.actionName}
+          submitButtonType={
+            currentAction.actionButtonStyle !== undefined &&
+            DESTRUCTIVE_ACTION_STYLES.includes(currentAction.actionButtonStyle)
+              ? ButtonStyleType.DANGER
+              : ButtonStyleType.PRIMARY
+          }
           onClose={() => {
             setCurrentAction(undefined);
           }}

package/UI/Components/BulkUpdate/BulkLabelActions.tsx

@@ -505,6 +505,7 @@ function useBulkLabelActions<T extends BaseModel>(
             isLoading={isLoadingRemoveLabels}
             onClose={closeRemoveModal}
             submitButtonText="Remove Labels"
+            submitButtonStyleType={ButtonStyleType.DANGER}
             onSubmit={async (formData: { labelIds: Array<string> }) => {
               await applyLabels(formData.labelIds || [], "remove");
             }}

package/UI/Components/BulkUpdate/BulkOwnerActions.tsx

@@ -524,6 +524,7 @@ function useBulkOwnerActions<T extends BaseModel>(
             setBulkActionProps(null);
           }}
           submitButtonText="Remove Owner"
+          submitButtonStyleType={ButtonStyleType.DANGER}
           onSubmit={async (formData: { ownerKeys: Array<string> }) => {
             await applyOwners(formData.ownerKeys || [], "remove");
           }}