@oneuptime/common 14.0.11 → 14.0.12

package/Tests/UI/Components/Workflow/ComponentPicker/PickerCatalog.test.ts

@@ -0,0 +1,352 @@
+import {
+  COMMON_RESOURCE_TABLE_NAMES,
+  DATABASE_OPERATION_ORDER,
+  PickerBuiltInGroup,
+  PickerCatalog,
+  PickerResource,
+  POPULAR_COMPONENT_IDS,
+  buildPickerCatalog,
+  getComponentOperation,
+  getOperationRank,
+  getPickerCatalog,
+  isResourceComponent,
+  tableNameToWords,
+} from "../../../../../UI/Components/Workflow/ComponentPicker/PickerCatalog";
+import IconProp from "../../../../../Types/Icon/IconProp";
+import ComponentMetadata, {
+  ComponentType,
+} from "../../../../../Types/Workflow/Component";
+import { DatabaseOperation } from "../../../../../Types/Workflow/DatabaseOperation";
+import {
+  FIXTURE_MODELS,
+  FixtureModel,
+  FixturePalette,
+  buildFixturePalette,
+} from "./PickerFixtures";
+import { describe, expect, test } from "@jest/globals";
+
+const palette: FixturePalette = buildFixturePalette();
+
+type CatalogForFunction = (
+  componentsType: ComponentType,
+  source?: FixturePalette,
+) => PickerCatalog;
+
+const catalogFor: CatalogForFunction = (
+  componentsType: ComponentType,
+  source: FixturePalette = palette,
+): PickerCatalog => {
+  return buildPickerCatalog({
+    components: source.components,
+    categories: source.categories,
+    componentsType: componentsType,
+  });
+};
+
+const ACTIONS: PickerCatalog = catalogFor(ComponentType.Component);
+const TRIGGERS: PickerCatalog = catalogFor(ComponentType.Trigger);
+
+type TitlesOfFunction = (components: Array<ComponentMetadata>) => Array<string>;
+
+const titlesOf: TitlesOfFunction = (
+  components: Array<ComponentMetadata>,
+): Array<string> => {
+  return components.map((componentMetadata: ComponentMetadata): string => {
+    return componentMetadata.title;
+  });
+};
+
+type ResourceFunction = (catalog: PickerCatalog, key: string) => PickerResource;
+
+const resource: ResourceFunction = (
+  catalog: PickerCatalog,
+  key: string,
+): PickerResource => {
+  const found: PickerResource | undefined = catalog.resourcesByKey.get(key);
+
+  if (!found) {
+    throw new Error(`No resource ${key} in this catalog.`);
+  }
+
+  return found;
+};
+
+describe("what the picker leads with", () => {
+  test("the popular actions, in order: the steps most workflows are built from", () => {
+    expect(titlesOf(ACTIONS.popular)).toEqual([
+      "Log",
+      "If / Else",
+      "API Post (JSON)",
+      "API Get (JSON)",
+      "Send Message to Slack",
+      "Send Message to Teams",
+      "Send Message to Discord",
+      "Send Email",
+      "Run Custom JavaScript",
+      "Create One Incident",
+    ]);
+  });
+
+  test("the popular triggers, in order", () => {
+    expect(titlesOf(TRIGGERS.popular)).toEqual([
+      "Manual",
+      "Schedule",
+      "Webhook",
+      "Incoming Email",
+      "On Create Incident",
+      "On Update Incident",
+      "On Create Alert",
+      "On Update Monitor",
+    ]);
+  });
+
+  test("a popular step the catalog does not have is skipped, not an error", () => {
+    const withoutIncident: FixturePalette = buildFixturePalette(
+      FIXTURE_MODELS.filter((model: FixtureModel): boolean => {
+        return model.tableName !== "Incident";
+      }),
+    );
+    const catalog: PickerCatalog = catalogFor(
+      ComponentType.Component,
+      withoutIncident,
+    );
+
+    expect(titlesOf(catalog.popular)).not.toContain("Create One Incident");
+    expect(catalog.popular).toHaveLength(
+      POPULAR_COMPONENT_IDS[ComponentType.Component].length - 1,
+    );
+  });
+
+  test("the other hand-written steps, by category in the categories' order, without the popular ones again", () => {
+    expect(
+      ACTIONS.otherBuiltInGroups.map((group: PickerBuiltInGroup): string => {
+        return group.name;
+      }),
+    ).toEqual(["AI", "API", "Telegram", "JSON", "Utils"]);
+
+    const others: Array<string> = ACTIONS.otherBuiltInGroups.flatMap(
+      (group: PickerBuiltInGroup): Array<string> => {
+        return titlesOf(group.components);
+      },
+    );
+
+    expect(others).toEqual([
+      "Generate Text with AI",
+      "API Put (JSON)",
+      "API Patch (JSON)",
+      "API Delete (JSON)",
+      "Send Message to Telegram",
+      "JSON to Text",
+      "Text to JSON",
+      "Merge JSON",
+      "Execute Workflow",
+      "Sleep",
+    ]);
+
+    for (const title of titlesOf(ACTIONS.popular)) {
+      expect(others).not.toContain(title);
+    }
+  });
+
+  test("every trigger that is not generated is popular, so the trigger picker has no other group", () => {
+    expect(TRIGGERS.otherBuiltInGroups).toEqual([]);
+  });
+});
+
+describe("database steps, by resource", () => {
+  test("every model with a step of the picker's kind is a resource, A to Z", () => {
+    const names: Array<string> = ACTIONS.resources.map(
+      (item: PickerResource): string => {
+        return item.name;
+      },
+    );
+
+    expect(names).toEqual(
+      [...names].sort((a: string, b: string): number => {
+        return a.localeCompare(b);
+      }),
+    );
+    expect(ACTIONS.resources).toHaveLength(FIXTURE_MODELS.length);
+  });
+
+  test("a resource's actions run create, find, update, delete; one before many", () => {
+    expect(titlesOf(resource(ACTIONS, "Incident").components)).toEqual([
+      "Create One Incident",
+      "Create Many Incidents",
+      "Find One Incident",
+      "Find Many Incidents",
+      "Update One Incident",
+      "Update Many Incidents",
+      "Delete One Incident",
+      "Delete Many Incidents",
+    ]);
+    expect(titlesOf(resource(TRIGGERS, "Incident").components)).toEqual([
+      "On Create Incident",
+      "On Update Incident",
+      "On Delete Incident",
+    ]);
+  });
+
+  test("a resource offers only what its model allows", () => {
+    // Read only: two actions, and no triggers at all.
+    expect(titlesOf(resource(ACTIONS, "AIAgent").components)).toEqual([
+      "Find One AI Agent",
+      "Find Many AI Agents",
+    ]);
+    expect(TRIGGERS.resourcesByKey.has("AIAgent")).toBe(false);
+
+    // Create only.
+    expect(titlesOf(resource(ACTIONS, "EmailLog").components)).toEqual([
+      "Create One Email Log",
+      "Create Many Email Logs",
+    ]);
+    expect(titlesOf(resource(TRIGGERS, "EmailLog").components)).toEqual([
+      "On Create Email Log",
+    ]);
+  });
+
+  test("a resource takes its description and icon from its own model's category", () => {
+    const incident: PickerResource = resource(ACTIONS, "Incident");
+
+    expect(incident.name).toBe("Incident");
+    expect(incident.description).toBe("Manage incidents for your project");
+    expect(incident.icon).toBe(IconProp.Alert);
+    expect(incident.disambiguation).toBeNull();
+  });
+
+  test("two models with the same name stay two resources, each with its own icon, told apart by table", () => {
+    const templates: PickerResource = resource(
+      ACTIONS,
+      "StatusPageSubscriberNotificationTemplate",
+    );
+    const links: PickerResource = resource(
+      ACTIONS,
+      "StatusPageSubscriberNotificationTemplateStatusPage",
+    );
+
+    expect(templates.name).toBe(links.name);
+    expect(templates.icon).toBe(IconProp.Email);
+    expect(links.icon).toBe(IconProp.Link);
+    expect(templates.disambiguation).toBe(
+      "Status Page Subscriber Notification Template",
+    );
+    expect(links.disambiguation).toBe(
+      "Status Page Subscriber Notification Template Status Page",
+    );
+    expect(templates.components).toHaveLength(8);
+    expect(links.components).toHaveLength(8);
+  });
+
+  test("the common resources are shown in their own order, and only those the catalog has", () => {
+    const keys: Array<string> = ACTIONS.commonResources.map(
+      (item: PickerResource): string => {
+        return item.key;
+      },
+    );
+
+    expect(keys).toEqual(
+      COMMON_RESOURCE_TABLE_NAMES.filter((tableName: string): boolean => {
+        return ACTIONS.resourcesByKey.has(tableName);
+      }),
+    );
+    expect(keys.slice(0, 3)).toEqual(["Incident", "Alert", "Monitor"]);
+    expect(keys).not.toContain("IncidentState");
+    expect(resource(ACTIONS, "Incident").commonRank).toBe(0);
+    expect(resource(ACTIONS, "IncidentState").commonRank).toBeNull();
+  });
+});
+
+describe("telling the steps apart", () => {
+  test("generated steps carry their table, hand-written ones do not", () => {
+    for (const componentMetadata of palette.components) {
+      expect(isResourceComponent(componentMetadata)).toBe(
+        Boolean(componentMetadata.tableName),
+      );
+    }
+  });
+
+  test("every generated step's operation is read off its id", () => {
+    const generated: Array<ComponentMetadata> =
+      palette.components.filter(isResourceComponent);
+
+    expect(generated.length).toBeGreaterThan(100);
+
+    for (const componentMetadata of generated) {
+      expect({
+        id: componentMetadata.id,
+        operation: getComponentOperation(componentMetadata),
+      }).toEqual({
+        id: componentMetadata.id,
+        operation: expect.any(String),
+      });
+    }
+
+    const incidentState: ComponentMetadata = palette.components.find(
+      (componentMetadata: ComponentMetadata): boolean => {
+        return componentMetadata.id === "incident-state-find-many";
+      },
+    )!;
+
+    expect(getComponentOperation(incidentState)).toBe(
+      DatabaseOperation.FindMany,
+    );
+  });
+
+  test("a hand-written step, or an id with an unknown ending, has no operation", () => {
+    const log: ComponentMetadata = palette.components.find(
+      (componentMetadata: ComponentMetadata): boolean => {
+        return componentMetadata.id === "log";
+      },
+    )!;
+
+    expect(getComponentOperation(log)).toBeNull();
+    expect(
+      getComponentOperation({
+        ...log,
+        id: "incident-archive-one",
+        tableName: "Incident",
+      }),
+    ).toBeNull();
+    expect(getOperationRank(null)).toBe(DATABASE_OPERATION_ORDER.length);
+    expect(getOperationRank(DatabaseOperation.CreateOne)).toBe(0);
+    expect(getOperationRank(DatabaseOperation.OnDelete)).toBe(10);
+  });
+
+  test("a table name reads as words", () => {
+    expect(tableNameToWords("OnCallDutyPolicy")).toBe("On Call Duty Policy");
+    expect(tableNameToWords("AIAgent")).toBe("AI Agent");
+    expect(tableNameToWords("Incident")).toBe("Incident");
+  });
+});
+
+describe("only the first opening pays", () => {
+  test("the same arrays give the same catalog; new arrays or another kind, a new one", () => {
+    const first: PickerCatalog = getPickerCatalog({
+      components: palette.components,
+      categories: palette.categories,
+      componentsType: ComponentType.Component,
+    });
+
+    expect(
+      getPickerCatalog({
+        components: palette.components,
+        categories: palette.categories,
+        componentsType: ComponentType.Component,
+      }),
+    ).toBe(first);
+    expect(
+      getPickerCatalog({
+        components: palette.components,
+        categories: [...palette.categories],
+        componentsType: ComponentType.Component,
+      }),
+    ).not.toBe(first);
+    expect(
+      getPickerCatalog({
+        components: palette.components,
+        categories: palette.categories,
+        componentsType: ComponentType.Trigger,
+      }).componentsType,
+    ).toBe(ComponentType.Trigger);
+  });
+});

package/Tests/UI/Components/Workflow/ComponentPicker/PickerFixtures.ts

@@ -0,0 +1,240 @@
+import BaseModel from "../../../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import IconProp from "../../../../../Types/Icon/IconProp";
+import ComponentMetadata, {
+  ComponentCategory,
+} from "../../../../../Types/Workflow/Component";
+import BuiltInComponents, {
+  Categories,
+} from "../../../../../Types/Workflow/Components";
+import BaseModelComponentFactory from "../../../../../Types/Workflow/Components/BaseModel";
+
+/*
+ * A small palette for the picker's tests, made the way the real one is: the
+ * real hand-written steps, plus the real generator's output for a handful of
+ * models. Only the four fields the generator reads are faked, so every
+ * title, description and id here is the generator's own, never an
+ * approximation of it - the search lives in the gap between those strings
+ * and what people type.
+ *
+ * The full catalog (every model) is used by ComponentPickerRealCatalog.test,
+ * which loads all the models; this keeps the other suites fast.
+ */
+
+export interface FixtureModel {
+  tableName: string;
+  singularName: string;
+  pluralName: string;
+  icon?: IconProp | undefined;
+  description?: string | undefined;
+  create?: boolean | undefined;
+  read?: boolean | undefined;
+  update?: boolean | undefined;
+  delete?: boolean | undefined;
+}
+
+export const FIXTURE_MODELS: Array<FixtureModel> = [
+  // Registered before Incident, as in the real registry.
+  {
+    tableName: "IncidentState",
+    singularName: "Incident State",
+    pluralName: "Incident States",
+    icon: IconProp.ArrowCircleRight,
+  },
+  {
+    tableName: "Incident",
+    singularName: "Incident",
+    pluralName: "Incidents",
+    icon: IconProp.Alert,
+    description: "Manage incidents for your project",
+  },
+  {
+    tableName: "IncidentFeed",
+    singularName: "Incident Feed",
+    pluralName: "Incident Feeds",
+  },
+  {
+    tableName: "IncidentEpisode",
+    singularName: "Incident Episode",
+    pluralName: "Incident Episodes",
+  },
+  {
+    tableName: "IncidentEpisodeStateTimeline",
+    singularName: "Incident Episode State Timeline",
+    pluralName: "Incident Episode State Timelines",
+  },
+  {
+    tableName: "IncidentPublicNote",
+    singularName: "Incident Public Note",
+    pluralName: "Incident Public Notes",
+  },
+  {
+    tableName: "IncidentInternalNote",
+    singularName: "Incident Internal Note",
+    pluralName: "Incident Internal Notes",
+  },
+  {
+    tableName: "IncidentNoteTemplate",
+    singularName: "Incident Note Template",
+    pluralName: "Incident Note Templates",
+  },
+  {
+    tableName: "IncidentSeverity",
+    singularName: "Incident Severity",
+    pluralName: "Incident Severities",
+  },
+  {
+    tableName: "Alert",
+    singularName: "Alert",
+    pluralName: "Alerts",
+    icon: IconProp.Alert,
+  },
+  {
+    tableName: "Monitor",
+    singularName: "Monitor",
+    pluralName: "Monitors",
+    icon: IconProp.AltGlobe,
+  },
+  {
+    tableName: "MonitorStatus",
+    singularName: "Monitor Status",
+    pluralName: "Monitor Statuses",
+  },
+  {
+    tableName: "Team",
+    singularName: "Team",
+    pluralName: "Teams",
+    icon: IconProp.Team,
+  },
+  // A create-only model, as the notification logs are.
+  {
+    tableName: "EmailLog",
+    singularName: "Email Log",
+    pluralName: "Email Logs",
+    read: false,
+    update: false,
+    delete: false,
+  },
+  {
+    tableName: "OnCallDutyPolicy",
+    singularName: "On-Call Policy",
+    pluralName: "On-Call Duty Policies",
+  },
+  {
+    tableName: "ServiceLevelObjective",
+    singularName: "Service Level Objective",
+    pluralName: "Service Level Objectives",
+  },
+  {
+    tableName: "IoTFleetLabelRule",
+    singularName: "IoT Fleet Label Rule",
+    pluralName: "IoT Fleet Label Rules",
+  },
+  {
+    tableName: "StatusPage",
+    singularName: "Status Page",
+    pluralName: "Status Pages",
+  },
+  // Two models really do share this name.
+  {
+    tableName: "StatusPageSubscriberNotificationTemplate",
+    singularName: "Subscriber Notification Template",
+    pluralName: "Subscriber Notification Templates",
+    icon: IconProp.Email,
+  },
+  {
+    tableName: "StatusPageSubscriberNotificationTemplateStatusPage",
+    singularName: "Subscriber Notification Template",
+    pluralName: "Subscriber Notification Templates",
+    icon: IconProp.Link,
+  },
+  // Read only, as AI Agent is.
+  {
+    tableName: "AIAgent",
+    singularName: "AI Agent",
+    pluralName: "AI Agents",
+    create: false,
+    update: false,
+    delete: false,
+  },
+];
+
+export type GetModelComponentsFunction = (
+  model: FixtureModel,
+) => Array<ComponentMetadata>;
+
+// The real generator, handed just the fields it reads.
+export const getModelComponents: GetModelComponentsFunction = (
+  model: FixtureModel,
+): Array<ComponentMetadata> => {
+  return BaseModelComponentFactory.getComponents({
+    tableName: model.tableName,
+    singularName: model.singularName,
+    pluralName: model.pluralName,
+    enableWorkflowOn: {
+      create: model.create !== false,
+      read: model.read !== false,
+      update: model.update !== false,
+      delete: model.delete !== false,
+    },
+  } as unknown as BaseModel);
+};
+
+export interface FixturePalette {
+  components: Array<ComponentMetadata>;
+  categories: Array<ComponentCategory>;
+}
+
+export type BuildFixturePaletteFunction = (
+  models?: Array<FixtureModel>,
+) => FixturePalette;
+
+/*
+ * Shaped like loadComponentsAndCategories' result: the hand-written steps
+ * and their categories first, then each model's steps and its category.
+ */
+export const buildFixturePalette: BuildFixturePaletteFunction = (
+  models: Array<FixtureModel> = FIXTURE_MODELS,
+): FixturePalette => {
+  const components: Array<ComponentMetadata> = [...BuiltInComponents];
+  const categories: Array<ComponentCategory> = [...Categories];
+
+  for (const model of models) {
+    components.push(...getModelComponents(model));
+    categories.push({
+      name: model.singularName,
+      description:
+        model.description ||
+        `Interact with ${model.singularName} in your workflow.`,
+      icon: model.icon || IconProp.Database,
+      tableName: model.tableName,
+    });
+  }
+
+  return { components: components, categories: categories };
+};
+
+export type FindByTitleFunction = (
+  components: Array<ComponentMetadata>,
+  title: string,
+) => ComponentMetadata;
+
+export const findByTitle: FindByTitleFunction = (
+  components: Array<ComponentMetadata>,
+  title: string,
+): ComponentMetadata => {
+  const found: ComponentMetadata | undefined = components.find(
+    (componentMetadata: ComponentMetadata): boolean => {
+      return componentMetadata.title === title;
+    },
+  );
+
+  if (!found) {
+    /*
+     * A mistyped title would otherwise resolve to undefined and quietly
+     * weaken every assertion that reads it.
+     */
+    throw new Error(`No component titled "${title}" in the fixture palette.`);
+  }
+
+  return found;
+};

package/Tests/UI/Components/Workflow/ComponentPortViewer.test.tsx

@@ -0,0 +1,91 @@
+/*
+ * The Inputs and Outputs sections of a step's settings dialog: a plain list of
+ * each port's title and what it is for.
+ */
+
+import ComponentPortViewer from "../../../../UI/Components/Workflow/ComponentPortViewer";
+import { Port } from "../../../../Types/Workflow/Component";
+import { describe, expect, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { RenderResult, render } from "@testing-library/react";
+import React from "react";
+
+const PORTS: Array<Port> = [
+  {
+    id: "success",
+    title: "Success",
+    description: "Runs when the server answers with a success status (2xx).",
+  },
+  {
+    id: "error",
+    title: "Error",
+    description:
+      "Runs when the request fails or the server answers with an error status.",
+  },
+];
+
+describe("ComponentPortViewer", () => {
+  test("lists each port's title and description, in order", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentPortViewer name="" description="" ports={PORTS} />,
+    );
+
+    const rows: Array<HTMLElement> = getAllByTestId("workflow-port");
+
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveTextContent(
+      "SuccessRuns when the server answers with a success status (2xx).",
+    );
+    expect(rows[1]).toHaveTextContent(
+      "ErrorRuns when the request fails or the server answers with an error status.",
+    );
+  });
+
+  test("does not show the internal port id next to its title", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentPortViewer
+        name=""
+        description=""
+        ports={[{ id: "out", title: "Out", description: "Runs next." }]}
+      />,
+    );
+
+    // "Out out" in the old viewer: the id only repeated the title.
+    expect(getAllByTestId("workflow-port")[0]!.textContent).toBe(
+      "OutRuns next.",
+    );
+  });
+
+  test("a port without a description is just its title", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentPortViewer
+        name=""
+        description=""
+        ports={[{ id: "in", title: "In", description: "" }]}
+      />,
+    );
+
+    expect(getAllByTestId("workflow-port")[0]!.textContent).toBe("In");
+  });
+
+  test("the bullet is decoration, hidden from screen readers", () => {
+    const { getAllByTestId }: RenderResult = render(
+      <ComponentPortViewer name="" description="" ports={PORTS} />,
+    );
+
+    const bullet: Element | null =
+      getAllByTestId("workflow-port")[0]!.firstElementChild;
+
+    expect(bullet).toHaveAttribute("aria-hidden", "true");
+    expect(bullet?.textContent).toBe("");
+  });
+
+  test("says so when there are no ports", () => {
+    const { getByText, queryAllByTestId }: RenderResult = render(
+      <ComponentPortViewer name="" description="" ports={[]} />,
+    );
+
+    expect(getByText("No connections.")).toBeVisible();
+    expect(queryAllByTestId("workflow-port")).toHaveLength(0);
+  });
+});