@oneuptime/common 14.0.11 → 14.0.12

package/Tests/App/Dashboard/PermissionModePicker.test.tsx

@@ -0,0 +1,316 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import PermissionModePicker from "../../../../App/FeatureSet/Dashboard/src/Components/AIChat/PermissionModePicker";
+import AIChatPermissionMode from "../../../Types/AI/AIChatPermissionMode";
+
+/*
+ * The control that says what the AI may do with a request: act at once, ask
+ * first, or only read. The Ask AI panel has it at the right end of its
+ * composer's controls; the AI Investigation card's composer has it at the
+ * left end, where a menu lined up on the button's right edge opened past the
+ * card's left edge. It is also a menu a keyboard and a screen reader can
+ * use: it says it is one, whether it is open, and which mode is chosen.
+ */
+
+function trigger(): HTMLElement {
+  return screen.getByTitle("Choose what the AI is allowed to do");
+}
+
+function menu(): HTMLElement | null {
+  return screen.queryByRole("menu");
+}
+
+function open(): HTMLElement {
+  fireEvent.click(trigger());
+  return screen.getByRole("menu");
+}
+
+function renderPicker(
+  props: Partial<React.ComponentProps<typeof PermissionModePicker>> = {},
+): { onChange: MockFunction } {
+  const onChange: MockFunction = getJestMockFunction();
+
+  render(
+    <PermissionModePicker
+      value={AIChatPermissionMode.AutoRun}
+      onChange={onChange}
+      {...props}
+    />,
+  );
+
+  return { onChange };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PermissionModePicker — the button", () => {
+  test.each([
+    [AIChatPermissionMode.AutoRun, "Auto-run"],
+    [AIChatPermissionMode.AskForApproval, "Ask to act"],
+    [AIChatPermissionMode.ReadOnly, "Read-only"],
+  ])(
+    "names the chosen mode (%s) in a word or two",
+    (mode: AIChatPermissionMode, label: string) => {
+      renderPicker({ value: mode });
+
+      expect(trigger()).toHaveTextContent(label);
+      expect(trigger().querySelectorAll("svg")).toHaveLength(2);
+    },
+  );
+
+  test("says it opens a menu, and that the menu is closed", () => {
+    renderPicker();
+
+    expect(trigger()).toHaveAttribute("type", "button");
+    expect(trigger()).toHaveAttribute("aria-haspopup", "menu");
+    expect(trigger()).toHaveAttribute("aria-expanded", "false");
+    expect(trigger()).not.toHaveAttribute("aria-controls");
+    expect(menu()).toBeNull();
+  });
+
+  test("shows its focus to a keyboard", () => {
+    renderPicker();
+
+    expect(trigger()).toHaveClass(
+      "focus:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-indigo-500",
+    );
+  });
+
+  test("a disabled picker does not open", () => {
+    renderPicker({ disabled: true });
+
+    fireEvent.click(trigger());
+
+    expect(trigger()).toBeDisabled();
+    expect(menu()).toBeNull();
+  });
+});
+
+describe("PermissionModePicker — the menu", () => {
+  test("opens on a click and says so on the button", () => {
+    renderPicker();
+
+    const opened: HTMLElement = open();
+
+    expect(opened).toHaveAccessibleName("AI permissions");
+    expect(trigger()).toHaveAttribute("aria-expanded", "true");
+    expect(trigger()).toHaveAttribute("aria-controls", opened.id);
+    expect(opened.id.length).toBeGreaterThan(0);
+  });
+
+  test("offers the three modes, each with what it means", () => {
+    renderPicker();
+
+    const items: Array<HTMLElement> =
+      within(open()).getAllByRole("menuitemradio");
+
+    expect(
+      items.map((item: HTMLElement): string => {
+        return item.textContent || "";
+      }),
+    ).toEqual([
+      "Ask for approvalThe copilot pauses and asks before it changes anything (creating incidents, acknowledging alerts, etc).",
+      "Auto-run (bypass approvals)The copilot performs actions immediately, still limited to what your role can do.",
+      "Read-onlyThe copilot can investigate and answer questions but can never change anything.",
+    ]);
+  });
+
+  test.each([
+    [AIChatPermissionMode.AskForApproval, [true, false, false]],
+    [AIChatPermissionMode.AutoRun, [false, true, false]],
+    [AIChatPermissionMode.ReadOnly, [false, false, true]],
+  ])(
+    "marks %s as the chosen one, and only it",
+    (mode: AIChatPermissionMode, checked: Array<boolean>) => {
+      renderPicker({ value: mode });
+
+      expect(
+        within(open())
+          .getAllByRole("menuitemradio")
+          .map((item: HTMLElement): boolean => {
+            return item.getAttribute("aria-checked") === "true";
+          }),
+      ).toEqual(checked);
+    },
+  );
+
+  test("choosing a mode calls back, closes the menu and returns focus to the button", () => {
+    const { onChange } = renderPicker();
+
+    fireEvent.click(
+      within(open()).getByRole("menuitemradio", { name: /^Read-only/ }),
+    );
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(AIChatPermissionMode.ReadOnly);
+    expect(menu()).toBeNull();
+    expect(trigger()).toHaveAttribute("aria-expanded", "false");
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  test("choosing the mode already chosen still calls back and closes", () => {
+    const { onChange } = renderPicker();
+
+    fireEvent.click(
+      within(open()).getByRole("menuitemradio", { name: /^Auto-run/ }),
+    );
+
+    expect(onChange).toHaveBeenCalledWith(AIChatPermissionMode.AutoRun);
+    expect(menu()).toBeNull();
+  });
+
+  test("a second click on the button closes it", () => {
+    renderPicker();
+
+    open();
+    fireEvent.click(trigger());
+
+    expect(menu()).toBeNull();
+    expect(trigger()).toHaveAttribute("aria-expanded", "false");
+  });
+
+  test("Escape closes it and returns focus to the button", () => {
+    const { onChange } = renderPicker();
+
+    const opened: HTMLElement = open();
+    within(opened).getAllByRole("menuitemradio")[0]!.focus();
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(menu()).toBeNull();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(document.activeElement).toBe(trigger());
+  });
+
+  test("other keys leave it open", () => {
+    renderPicker();
+
+    open();
+    for (const key of ["a", "Enter", "ArrowDown", "Tab"]) {
+      fireEvent.keyDown(document, { key });
+    }
+
+    expect(menu()).not.toBeNull();
+  });
+
+  test("a press outside closes it; a press inside does not", () => {
+    render(
+      <div>
+        <button type="button">Elsewhere</button>
+        <PermissionModePicker
+          value={AIChatPermissionMode.AutoRun}
+          onChange={() => {}}
+        />
+      </div>,
+    );
+
+    const opened: HTMLElement = open();
+    fireEvent.mouseDown(opened);
+    expect(menu()).not.toBeNull();
+
+    fireEvent.mouseDown(screen.getByRole("button", { name: "Elsewhere" }));
+    expect(menu()).toBeNull();
+  });
+
+  test("a closed menu listens for nothing", () => {
+    const add: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      document,
+      "addEventListener",
+    );
+    const remove: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      document,
+      "removeEventListener",
+    );
+
+    try {
+      renderPicker();
+
+      const listened: (spy: ReturnType<typeof jest.spyOn>) => Array<string> = (
+        spy: ReturnType<typeof jest.spyOn>,
+      ): Array<string> => {
+        return spy.mock.calls
+          .map((call: Array<unknown>): string => {
+            return String(call[0]);
+          })
+          .filter((type: string): boolean => {
+            return type === "mousedown" || type === "keydown";
+          })
+          .sort();
+      };
+
+      expect(listened(add)).toEqual([]);
+
+      open();
+      expect(listened(add)).toEqual(["keydown", "mousedown"]);
+
+      fireEvent.keyDown(document, { key: "Escape" });
+      expect(listened(remove)).toEqual(["keydown", "mousedown"]);
+    } finally {
+      add.mockRestore();
+      remove.mockRestore();
+    }
+  });
+
+  test("each item shows its focus to a keyboard", () => {
+    renderPicker();
+
+    for (const item of within(open()).getAllByRole("menuitemradio")) {
+      expect(item).toHaveAttribute("type", "button");
+      expect(item).toHaveClass(
+        "focus:outline-none",
+        "focus-visible:bg-gray-100",
+      );
+    }
+  });
+});
+
+describe("PermissionModePicker — where the menu opens", () => {
+  test("lines up on the button's right edge by default (the Ask AI panel)", () => {
+    renderPicker();
+
+    const opened: HTMLElement = open();
+    expect(opened).toHaveClass("right-0");
+    expect(opened).not.toHaveClass("left-0");
+  });
+
+  test("an explicit right is the same as the default", () => {
+    renderPicker({ menuAlign: "right" });
+
+    expect(open()).toHaveClass("right-0");
+  });
+
+  test("lines up on the button's left edge when asked (the AI Investigation card)", () => {
+    renderPicker({ menuAlign: "left" });
+
+    const opened: HTMLElement = open();
+    expect(opened).toHaveClass("left-0");
+    expect(opened).not.toHaveClass("right-0");
+  });
+
+  test.each([["left"], ["right"]] as Array<["left" | "right"]>)(
+    "opens upwards and never wider than the screen (%s)",
+    (menuAlign: "left" | "right") => {
+      renderPicker({ menuAlign });
+
+      // Above the composer, which sits at the bottom of what holds it.
+      expect(open()).toHaveClass(
+        "absolute",
+        "bottom-full",
+        "w-72",
+        "max-w-[calc(100vw-2rem)]",
+      );
+    },
+  );
+});

package/Tests/App/Dashboard/ProductMenuBreadcrumbs.test.tsx

@@ -13,16 +13,19 @@ import { ReactElement } from "react";
 
 /*
  * A page's section is stated twice: once by the side menu, which highlights
- * it, and once by the breadcrumb trail above the page body. Moving AI and the
- * rule pages out of Settings changes the first; nothing forces the second to
- * follow. The failure is quiet and permanent — the menu highlights "Rules"
- * while the header still reads "Incidents / Settings / SLA Rules", and only a
- * user notices.
+ * it, and once by the breadcrumb trail above the page body. Moving a page
+ * between sections changes the first; nothing forces the second to follow.
+ * The failure is quiet and permanent — the menu highlights "Rules" while the
+ * header still reads "Incidents / Settings / SLA Rules", and only a user
+ * notices.
+ *
+ * The latest move took the AI section out of the menu: the AI settings page
+ * is now Settings → AI, and auto-remediation rules are a Rules page.
  *
  * So rather than pinning the trails on their own, this derives the sections
  * from each rendered menu and requires the trails to agree. Adding a page to
- * AI or Rules without a matching breadcrumb fails here, for whichever of the
- * three products it was added to.
+ * Rules (or moving the AI page) without a matching breadcrumb fails here, for
+ * whichever of the three products it was added to.
  *
  * Settings is checked more loosely — only that the trail still says
  * "Settings". Those trails predate this change and word some leaf titles
@@ -75,7 +78,8 @@ interface Product {
   menu: ReactElement;
   getBreadcrumbs: BreadcrumbGetter;
   landingRoute: string;
-  aiPages: Array<[string, string]>;
+  // The product's AI settings page, filed under Settings as "AI".
+  aiSettingsPage: string | null;
   rulePages: Array<[string, string]>;
 }
 
@@ -86,15 +90,16 @@ const PRODUCTS: Array<Product> = [
     menu: <AlertsSideMenu />,
     getBreadcrumbs: getAlertsBreadcrumbs,
     landingRoute: PageMap.ALERTS,
-    aiPages: [
-      [PageMap.ALERTS_SETTINGS_AI, "Investigation"],
-      [PageMap.ALERTS_SETTINGS_AUTO_REMEDIATION_RULES, "Remediation"],
-    ],
+    aiSettingsPage: PageMap.ALERTS_SETTINGS_AI,
     rulePages: [
       [PageMap.ALERTS_SETTINGS_GROUPING_RULES, "Grouping Rules"],
       [PageMap.ALERTS_SETTINGS_ON_CALL_RULES, "On-Call Rules"],
       [PageMap.ALERTS_SETTINGS_OWNER_RULES, "Owner Rules"],
       [PageMap.ALERTS_SETTINGS_RUNBOOK_RULES, "Runbook Rules"],
+      [
+        PageMap.ALERTS_SETTINGS_AUTO_REMEDIATION_RULES,
+        "Auto Remediation Rules",
+      ],
       [PageMap.ALERTS_SETTINGS_PRIVACY_RULES, "Privacy Rules"],
       [PageMap.ALERTS_SETTINGS_LABEL_RULES, "Label Rules"],
       [PageMap.ALERTS_SETTINGS_REMINDER_RULES, "Reminder Rules"],
@@ -106,15 +111,16 @@ const PRODUCTS: Array<Product> = [
     menu: <IncidentsSideMenu />,
     getBreadcrumbs: getIncidentsBreadcrumbs,
     landingRoute: PageMap.INCIDENTS,
-    aiPages: [
-      [PageMap.INCIDENTS_SETTINGS_AI, "Investigation"],
-      [PageMap.INCIDENTS_SETTINGS_AUTO_REMEDIATION_RULES, "Remediation"],
-    ],
+    aiSettingsPage: PageMap.INCIDENTS_SETTINGS_AI,
     rulePages: [
       [PageMap.INCIDENTS_SETTINGS_GROUPING_RULES, "Grouping Rules"],
       [PageMap.INCIDENTS_SETTINGS_ON_CALL_RULES, "On-Call Rules"],
       [PageMap.INCIDENTS_SETTINGS_OWNER_RULES, "Owner Rules"],
       [PageMap.INCIDENTS_SETTINGS_RUNBOOK_RULES, "Runbook Rules"],
+      [
+        PageMap.INCIDENTS_SETTINGS_AUTO_REMEDIATION_RULES,
+        "Auto Remediation Rules",
+      ],
       [PageMap.INCIDENTS_SETTINGS_PRIVACY_RULES, "Privacy Rules"],
       [PageMap.INCIDENTS_SETTINGS_LABEL_RULES, "Label Rules"],
       [PageMap.INCIDENTS_SETTINGS_SLA_RULES, "SLA Rules"],
@@ -127,7 +133,7 @@ const PRODUCTS: Array<Product> = [
     menu: <ScheduledMaintenanceSideMenu />,
     getBreadcrumbs: getScheduleMaintenanceBreadcrumbs,
     landingRoute: PageMap.SCHEDULED_MAINTENANCE_EVENTS,
-    aiPages: [],
+    aiSettingsPage: null,
     rulePages: [
       [
         PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_OWNER_RULES,
@@ -236,15 +242,23 @@ describe.each(
       cleanup();
     });
 
-    test("the AI pages are named AI, not Settings", () => {
-      product.aiPages.forEach(([pageMapKey, title]: [string, string]) => {
-        expect(trailTitlesFor(product, pageMapKey)).toEqual([
-          "Project",
-          product.productCrumb,
-          "AI",
-          title,
-        ]);
-      });
+    test("the AI settings page is filed under Settings, as AI", () => {
+      if (!product.aiSettingsPage) {
+        return;
+      }
+
+      expect(trailTitlesFor(product, product.aiSettingsPage)).toEqual([
+        "Project",
+        product.productCrumb,
+        "Settings",
+        "AI",
+      ]);
+    });
+
+    test("the menu has no AI section left for a trail to name", async () => {
+      await renderMenu(product.menu);
+
+      expect(sectionTitlesInOrder()).not.toContain("AI");
     });
 
     test("every rule page is named Rules, not Settings", () => {
@@ -260,12 +274,27 @@ describe.each(
       });
     });
 
-    test("no trail still files an AI or rule page under Settings", () => {
-      [...product.aiPages, ...product.rulePages].forEach(
-        ([pageMapKey]: [string, string]) => {
-          expect(trailTitlesFor(product, pageMapKey)).not.toContain("Settings");
-        },
-      );
+    test("no trail still files a rule page under Settings, or names the old AI section", () => {
+      product.rulePages.forEach(([pageMapKey]: [string, string]) => {
+        expect(trailTitlesFor(product, pageMapKey)).not.toContain("Settings");
+      });
+
+      [
+        ...product.rulePages.map(([pageMapKey]: [string, string]): string => {
+          return pageMapKey;
+        }),
+        ...(product.aiSettingsPage ? [product.aiSettingsPage] : []),
+      ].forEach((pageMapKey: string) => {
+        const trail: Array<string> | undefined = trailTitlesFor(
+          product,
+          pageMapKey,
+        );
+
+        expect(trail).not.toContain("Investigation");
+        expect(trail).not.toContain("Remediation");
+        // "AI" may only ever be the AI page's own title, never a section.
+        expect(trail?.slice(0, 3)).not.toContain("AI");
+      });
     });
 
     /*
@@ -273,18 +302,21 @@ describe.each(
      * sides to say the same thing, so a page added to AI or Rules later cannot
      * quietly keep a Settings trail (or no trail at all).
      */
-    test("every AI and Rules entry has a trail naming its menu section and title", async () => {
+    test("every Rules entry, and the AI entry, has a trail naming its menu section and title", async () => {
       const entries: Array<MenuEntry> = await renderMenuEntries(product);
 
       const moved: Array<MenuEntry> = entries.filter(
         (entry: MenuEntry): boolean => {
-          return entry.section === "AI" || entry.section === "Rules";
+          return (
+            entry.section === "Rules" ||
+            entry.pageMapKey === product.aiSettingsPage
+          );
         },
       );
 
-      // Guard against a vacuous pass if the menu stops rendering these sections.
+      // Guard against a vacuous pass if the menu stops rendering these entries.
       expect(moved.length).toBe(
-        product.aiPages.length + product.rulePages.length,
+        product.rulePages.length + (product.aiSettingsPage ? 1 : 0),
       );
 
       moved.forEach((entry: MenuEntry) => {
@@ -351,14 +383,26 @@ describe("breadcrumb sections across products", () => {
 
   /*
    * Scheduled maintenance has no AI page, so it must not gain an AI trail
-   * either — a heading with nothing behind it in the menu would be matched by
+   * either — an entry with nothing behind it in the menu would be matched by
    * a trail pointing nowhere.
    */
-  test("scheduled maintenance declares no AI pages", () => {
+  test("scheduled maintenance declares no AI settings page", () => {
     const scheduledMaintenance: Product = PRODUCTS[2]!;
 
     expect(scheduledMaintenance.name).toBe("Scheduled maintenance");
-    expect(scheduledMaintenance.aiPages).toEqual([]);
+    expect(scheduledMaintenance.aiSettingsPage).toBeNull();
+  });
+
+  test("incidents and alerts each file their own AI page under Settings", () => {
+    expect(
+      PRODUCTS.map((product: Product): string | null => {
+        return product.aiSettingsPage;
+      }),
+    ).toEqual([
+      PageMap.ALERTS_SETTINGS_AI,
+      PageMap.INCIDENTS_SETTINGS_AI,
+      null,
+    ]);
   });
 
   test("the products under test cover the three that were reorganised", () => {

package/Tests/App/Dashboard/ProductOrientation.test.tsx

@@ -40,7 +40,7 @@ import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
  * orient a new user, by mounting the real components and reading them the
  * way a user would:
  *
- *  - the Products menu groups 42 products into small, named sections, with
+ *  - the Products menu groups 41 products into small, named sections, with
  *    the core products first and in the order a problem flows through them;
  *  - Home explains how the core products fit together;
  *  - Help links to the documentation.
@@ -270,6 +270,7 @@ describe("Products menu sections", () => {
       "Essentials",
       "Observability",
       "AI",
+      "Code",
       "Resources",
       "Infrastructure",
       "Dashboards & Automation",
@@ -277,6 +278,34 @@ describe("Products menu sections", () => {
     ]);
   });
 
+  test("AI is what you ask and read; Code is the work AI does in your code", () => {
+    openProductsMenu();
+
+    const sections: Array<MenuSection> = readMenuSections();
+    expect(
+      sections.find((section: MenuSection): boolean => {
+        return section.heading === "AI";
+      }),
+    ).toEqual({ heading: "AI", items: ["Chat", "Insights"] });
+    /*
+     * One item, not Tasks plus Code Repositories: repositories are where
+     * tasks open pull requests, so they are a page in the Tasks side menu.
+     */
+    expect(
+      sections.find((section: MenuSection): boolean => {
+        return section.heading === "Code";
+      }),
+    ).toEqual({ heading: "Code", items: ["Tasks"] });
+  });
+
+  test("the Tasks item says repositories are connected there", () => {
+    openProductsMenu();
+
+    expect(optionFor("Tasks")).toHaveTextContent(
+      "AI opens pull requests that fix your code. Connect GitHub here.",
+    );
+  });
+
   test("no section is a catch-all called 'More' inside the products menu", () => {
     openProductsMenu();
 
@@ -353,7 +382,7 @@ describe("Products menu sections", () => {
     ]);
   });
 
-  test("regrouping lost no product: all 42 are still listed exactly once", () => {
+  test("regrouping lost no product: all 41 are still listed exactly once", () => {
     openProductsMenu();
 
     const titles: Array<string> = readMenuSections().flatMap(
@@ -361,8 +390,10 @@ describe("Products menu sections", () => {
         return section.items;
       },
     );
-    expect(titles).toHaveLength(42);
-    expect(new Set(titles).size).toBe(42);
+    // 41, not 42: Code Repositories became a page of Tasks.
+    expect(titles).toHaveLength(41);
+    expect(new Set(titles).size).toBe(41);
+    expect(titles).not.toContain("Code Repositories");
   });
 });
 
@@ -416,7 +447,9 @@ describe("Products menu descriptions say what each product is for", () => {
     expect(headings).toContain(
       lookupNested(DE, "navbar.categories.analyticsAutomation"),
     );
+    expect(headings).toContain(lookupNested(DE, "navbar.categories.code"));
     expect(headings).not.toContain("navbar.categories.infrastructure");
+    expect(headings).not.toContain("navbar.categories.code");
   });
 });