@oneuptime/common 14.0.11 → 14.0.12

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

@@ -0,0 +1,195 @@
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import * as React from "react";
+
+/*
+ * The dashboard's own English strings, so the search below runs over the
+ * titles and descriptions a person actually sees rather than over i18n keys.
+ */
+jest.mock("react-i18next", () => {
+  const fileSystem: typeof import("fs") = jest.requireActual(
+    "fs",
+  ) as typeof import("fs");
+  const filePath: typeof import("path") = jest.requireActual(
+    "path",
+  ) as typeof import("path");
+
+  const english: Record<string, unknown> = JSON.parse(
+    fileSystem.readFileSync(
+      filePath.join(
+        __dirname,
+        "..",
+        "..",
+        "..",
+        "..",
+        "App",
+        "FeatureSet",
+        "Dashboard",
+        "src",
+        "Locales",
+        "en.json",
+      ),
+      "utf8",
+    ),
+  ) as Record<string, unknown>;
+
+  // "navbar.items.runbooksTitle" is nested; plain UI strings are flat keys.
+  const lookUp: (key: string) => unknown = (key: string): unknown => {
+    if (typeof english[key] === "string") {
+      return english[key];
+    }
+
+    return key.split(".").reduce((node: unknown, part: string): unknown => {
+      return node && typeof node === "object"
+        ? (node as Record<string, unknown>)[part]
+        : undefined;
+    }, english);
+  };
+
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, fallback?: unknown): string => {
+          const found: unknown = lookUp(key);
+
+          if (typeof found === "string") {
+            return found;
+          }
+
+          return typeof fallback === "string" ? fallback : key;
+        },
+      };
+    },
+  };
+});
+
+import { useDashboardNavigationItems } from "../../../../App/FeatureSet/Dashboard/src/Utils/NavigationItems";
+import { MoreMenuItem } from "../../../UI/Components/Navbar/NavBar";
+import NavBarMenuModal from "../../../UI/Components/Navbar/NavBarMenuModal";
+import Navigation from "../../../UI/Utils/Navigation";
+import { PROJECT_ID, goTo } from "./SideMenuHarness";
+
+/*
+ * Runners used to be a Project Settings page; they are now part of Runbooks.
+ * Somebody who only uses a Runner for AI code fixes has no reason to think of
+ * runbooks, so the products menu (and the command palette, which searches the
+ * same catalog) has to answer "runner" with the product they live in.
+ *
+ * This renders the real products menu over the dashboard's real catalog and
+ * types into it.
+ */
+
+const RUNBOOKS: string = `/dashboard/${PROJECT_ID}/runbooks`;
+
+const ProductsMenu: React.FunctionComponent = (): React.ReactElement => {
+  const { moreMenuItems } = useDashboardNavigationItems();
+
+  return <NavBarMenuModal items={moreMenuItems} onClose={() => {}} />;
+};
+
+let catalog: Array<MoreMenuItem> = [];
+
+const CatalogProbe: React.FunctionComponent = (): React.ReactElement => {
+  catalog = useDashboardNavigationItems().moreMenuItems;
+
+  return <></>;
+};
+
+function queryFor(value: string): void {
+  fireEvent.change(screen.getByRole("combobox"), {
+    target: { value },
+  });
+}
+
+function resultTitles(): Array<string> {
+  return screen.queryAllByRole("option").map((option: HTMLElement): string => {
+    return option.querySelector("span.truncate")?.textContent ?? "";
+  });
+}
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = (): void => {};
+});
+
+beforeEach(() => {
+  window.localStorage.clear();
+  goTo(`/dashboard/${PROJECT_ID}`);
+  jest.spyOn(Navigation, "navigate").mockImplementation((): void => {});
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+  window.localStorage.clear();
+});
+
+describe("the products menu's own search, over the real catalog", () => {
+  test.each([
+    ["playbooks", "Runbooks"],
+    ["billing", "Project Settings"],
+  ])("%j still finds %s", (query: string, title: string) => {
+    render(<ProductsMenu />);
+
+    queryFor(query);
+
+    expect(resultTitles()).toEqual([title]);
+  });
+});
+
+describe("searching the products menu for a Runner", () => {
+  test.each(["runner", "Runners", "  runners  ", "RUNNER"])(
+    "%j offers Runbooks, where Runners are set up",
+    (query: string) => {
+      render(<ProductsMenu />);
+
+      queryFor(query);
+
+      expect(resultTitles()).toEqual(["Runbooks"]);
+      expect(
+        within(screen.getByRole("option")).getByRole("link"),
+      ).toHaveAttribute("href", RUNBOOKS);
+    },
+  );
+
+  test("it does not offer Project Settings, where they used to be", () => {
+    render(<ProductsMenu />);
+
+    queryFor("runner");
+
+    expect(resultTitles()).not.toContain("Project Settings");
+  });
+
+  test("the match is the Runbooks entry's keyword, so the command palette finds it too", () => {
+    // The palette builds its commands from the same catalog entries.
+    render(<CatalogProbe />);
+
+    const runbooks: MoreMenuItem | undefined = catalog.find(
+      (item: MoreMenuItem): boolean => {
+        return item.route.toString() === RUNBOOKS;
+      },
+    );
+
+    expect(runbooks?.title).toBe("Runbooks");
+    expect(runbooks?.keywords).toContain("runners");
+    expect(
+      catalog.filter((item: MoreMenuItem): boolean => {
+        return (item.keywords || []).includes("runners");
+      }),
+    ).toHaveLength(1);
+  });
+});

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

@@ -10,7 +10,7 @@ import {
 import { cleanup, render, screen } from "@testing-library/react";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
-import RunnerView from "../../../../App/FeatureSet/Dashboard/src/Pages/Settings/RunnerView";
+import RunnerView from "../../../../App/FeatureSet/Dashboard/src/Pages/Runbook/Runners/RunnerView";
 import {
   KUBERNETES_AGENT_RUNNER_SUPERSEDED_NOTE,
   NO_RUNNER_FORM_RESTRICTIONS,
@@ -19,7 +19,7 @@ import {
   getRunnerFormFields,
   getRunnerFormRestrictions,
   getRunnerTableFormFields,
-} from "../../../../App/FeatureSet/Dashboard/src/Pages/Settings/RunnerFormFields";
+} from "../../../../App/FeatureSet/Dashboard/src/Pages/Runbook/Runners/RunnerFormFields";
 import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
 import RouteMap from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
 import Runner from "../../../Models/DatabaseModels/Runner";
@@ -255,12 +255,12 @@ describe("the Runner detail page", () => {
   });
 
   function openRunnerView(runnerId: string): void {
-    const path: string = `/dashboard/${PROJECT_ID}/settings/runners/${runnerId}`;
+    const path: string = `/dashboard/${PROJECT_ID}/runbooks/runners/${runnerId}`;
     goTo(path);
     render(
       <MemoryRouter initialEntries={[path]}>
         <RunnerView
-          pageRoute={RouteMap[PageMap.SETTINGS_RUNNER_VIEW] as Route}
+          pageRoute={RouteMap[PageMap.RUNBOOKS_RUNNER_VIEW] as Route}
           currentProject={null}
           hasPaymentMethod={true}
         />
@@ -285,9 +285,22 @@ describe("the Runner detail page", () => {
   test("says nothing of the sort on an ordinary Runner", async () => {
     openRunnerView(HOST_RUNNER_ID);
 
+    /*
+     * The details show the name, and so does the Delete card at the foot of
+     * the page ("Permanently delete bash-runner."), so it is found twice.
+     */
+    const names: Array<HTMLElement> = await screen.findAllByText(
+      "bash-runner",
+      {},
+      { timeout: WAIT_TIMEOUT },
+    );
     expect(
-      await screen.findByText("bash-runner", {}, { timeout: WAIT_TIMEOUT }),
-    ).toBeInTheDocument();
+      names.some((element: HTMLElement) => {
+        return (
+          element.getAttribute("data-testid") !== "delete-confirmation-name"
+        );
+      }),
+    ).toBe(true);
     expect(
       screen.queryByTestId("kubernetes-agent-runner-note"),
     ).not.toBeInTheDocument();

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

@@ -77,7 +77,7 @@ describe("Scheduled maintenance side menu", () => {
   });
 
   describe("sections", () => {
-    test("renders Overview, Workspace, Rules and Settings in order", async () => {
+    test("renders Overview, Workspace, Rules, Settings and Developer in order", async () => {
       await renderScheduledMaintenanceMenu();
 
       expect(sectionTitlesInOrder()).toEqual([
@@ -85,6 +85,7 @@ describe("Scheduled maintenance side menu", () => {
         "Workspace",
         "Rules",
         "Settings",
+        "Developer",
       ]);
     });
 

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

@@ -1,11 +1,15 @@
 import "@testing-library/jest-dom";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, within } from "@testing-library/react";
 import React from "react";
 import { afterEach, describe, expect, test } from "@jest/globals";
 import SecurityEventSeverityPill, {
   getSeverityColor,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventSeverityPill";
 import { PillSize } from "../../../UI/Components/Pill/Pill";
+import {
+  getPillColors,
+  parseColor,
+} from "../../../UI/Components/Pill/PillColors";
 import Color from "../../../Types/Color";
 import { Blue, Gray500, Orange, Red, Yellow } from "../../../Types/BrandColors";
 import OcsfSeverity from "../../../Types/SecurityEvent/OcsfSeverity";
@@ -42,6 +46,11 @@ const getPill: GetPillFunction = (): HTMLElement => {
   return screen.getByTestId("pill");
 };
 
+// The pill is a tint of its colour; the dot is the colour itself.
+const getDot: GetPillFunction = (): HTMLElement => {
+  return within(getPill()).getByTestId("pill-dot");
+};
+
 describe("getSeverityColor", () => {
   test("the expectation table covers every OCSF severity", () => {
     expect(Object.keys(EXPECTED_SEVERITY_COLORS).sort()).toEqual(
@@ -106,11 +115,9 @@ describe("getSeverityColor", () => {
     (severity: OcsfSeverity) => {
       const color: Color = getSeverityColor(severity);
       expect(color).toBeInstanceOf(Color);
-      // Pill derives its text colour from the hex; anything else throws.
+      // Pill derives its shades from the hex; anything else reads as gray.
       expect(color.toString()).toMatch(/^#[0-9a-f]{6}$/i);
-      expect(() => {
-        return Color.shouldUseDarkText(color);
-      }).not.toThrow();
+      expect(parseColor(color)).not.toBeNull();
     },
   );
 });
@@ -130,7 +137,7 @@ describe("<SecurityEventSeverityPill />", () => {
     render(<SecurityEventSeverityPill severityName="Vendor Special" />);
 
     expect(getPill()).toHaveTextContent(/^Vendor Special$/);
-    expect(getPill()).toHaveStyle({
+    expect(getDot()).toHaveStyle({
       backgroundColor: Gray500.toString(),
     });
   });
@@ -139,7 +146,7 @@ describe("<SecurityEventSeverityPill />", () => {
     render(<SecurityEventSeverityPill />);
 
     expect(getPill()).toHaveTextContent(/^Unknown$/);
-    expect(getPill()).toHaveStyle({
+    expect(getDot()).toHaveStyle({
       backgroundColor: Gray500.toString(),
     });
   });
@@ -151,25 +158,41 @@ describe("<SecurityEventSeverityPill />", () => {
   });
 
   test.each(ALL_SEVERITIES)(
-    "fills the %s pill with getSeverityColor",
+    "colours the %s pill with getSeverityColor",
     (severity: OcsfSeverity) => {
       render(<SecurityEventSeverityPill severityName={severity} />);
 
-      expect(getPill()).toHaveStyle({
+      expect(getDot()).toHaveStyle({
         backgroundColor: getSeverityColor(severity).toString(),
       });
+      expect(getPill()).toHaveStyle({
+        backgroundColor: getPillColors(getSeverityColor(severity)).light
+          .backgroundColor,
+      });
     },
   );
 
-  test("picks dark text on the light yellow Medium fill and white text on red", () => {
+  test("sets the Medium and Critical text in a readable shade of their colour", () => {
+    /*
+     * This used to be black on the yellow fill and white on the red one -
+     * and white on #fd625e is 3:1. Pill now picks the shade (PillColors
+     * holds it to 4.5:1 and up); what matters here is that it is used.
+     */
     const { unmount } = render(
       <SecurityEventSeverityPill severityName={OcsfSeverity.Medium} />,
     );
-    expect(getPill()).toHaveStyle({ color: "#000000" });
+    expect(getPill()).toHaveStyle({
+      color: getPillColors(getSeverityColor(OcsfSeverity.Medium)).light
+        .textColor,
+    });
     unmount();
 
     render(<SecurityEventSeverityPill severityName={OcsfSeverity.Critical} />);
-    expect(getPill()).toHaveStyle({ color: "#ffffff" });
+    expect(getPill()).toHaveStyle({
+      color: getPillColors(getSeverityColor(OcsfSeverity.Critical)).light
+        .textColor,
+    });
+    expect(getPill().style.color).not.toBe("rgb(255, 255, 255)");
   });
 
   test("keeps the normal 13px size when no size is passed", () => {
@@ -201,9 +224,9 @@ describe("<SecurityEventSeverityPill />", () => {
       );
 
       expect(getPill().style.fontSize).toBe(size);
-      // Size must not disturb the text or the severity fill.
+      // Size must not disturb the text or the severity colour.
       expect(getPill()).toHaveTextContent(/^Critical$/);
-      expect(getPill()).toHaveStyle({
+      expect(getDot()).toHaveStyle({
         backgroundColor: getSeverityColor(OcsfSeverity.Critical).toString(),
       });
     },
@@ -228,6 +251,7 @@ describe("<SecurityEventSeverityPill />", () => {
     expect(container.firstElementChild).toBe(getPill());
     expect(getPill().tagName).toBe("SPAN");
     expect(getPill().querySelector("svg")).toBeNull();
-    expect(screen.getByText("High")).toBe(getPill());
+    expect(getPill().textContent).toBe("High");
+    expect(getPill()).toContainElement(screen.getByText("High"));
   });
 });

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

@@ -43,12 +43,13 @@ describe("SLO list side menu", () => {
     cleanup();
   });
 
-  test("renders the SLO pages, then Settings", async () => {
+  test("renders the SLO pages, then Settings, then Developer", async () => {
     await renderSloMenuAt(PageMap.SLOS);
 
     expect(sectionTitlesInOrder()).toEqual([
       "Service Level Objectives",
       "Settings",
+      "Developer",
     ]);
     expect(linksIn("Service Level Objectives")).toEqual([
       { title: "SLOs", href: routeFor(PageMap.SLOS) },

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

@@ -28,6 +28,10 @@ import RouteMap, {
   SloRoutePath,
 } from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
 import Route from "../../../Types/API/Route";
+import {
+  DeveloperDocsChildPage,
+  getDeveloperDocsChildPages,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/DeveloperDocs/DeveloperDocsPages";
 import Link from "../../../Types/Link";
 import ObjectID from "../../../Types/ObjectID";
 import Navigation from "../../../UI/Utils/Navigation";
@@ -421,7 +425,22 @@ describe("SLO navigation wiring", () => {
   test.each([PageMap.SLOS, PageMap.SLO_VIEW])(
     "every link in the %s side menu opens a distinct SLO page",
     async (menuPage: string) => {
-      const sloPagePaths: Set<string> = new Set(SLO_PAGE_KEYS.map(pathFor));
+      // The SLO pages, and the Developer pages under the list and the view.
+      const sloPagePaths: Set<string> = new Set(
+        [
+          ...SLO_PAGE_KEYS,
+          ...getDeveloperDocsChildPages(PageMap.SLOS).map(
+            (child: DeveloperDocsChildPage): string => {
+              return child.key;
+            },
+          ),
+          ...getDeveloperDocsChildPages(PageMap.SLO_VIEW).map(
+            (child: DeveloperDocsChildPage): string => {
+              return child.key;
+            },
+          ),
+        ].map(pathFor),
+      );
 
       await renderSideMenuFor(menuPage);
 

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

@@ -85,6 +85,17 @@ const DETAIL_PAGES: ReadonlyArray<DetailPage> = [
     section: "Configuration",
     path: `${SLO_PATH}/burn-rate-rules`,
   },
+  {
+    title: "Terraform",
+    section: "Developer",
+    path: `${SLO_PATH}/developer/terraform`,
+  },
+  { title: "API", section: "Developer", path: `${SLO_PATH}/developer/api` },
+  {
+    title: "AI Assistants",
+    section: "Developer",
+    path: `${SLO_PATH}/developer/ai-assistants`,
+  },
   { title: "Owners", section: "Management", path: `${SLO_PATH}/owners` },
   { title: "Settings", section: "Management", path: `${SLO_PATH}/settings` },
   {
@@ -116,6 +127,7 @@ describe("SLO detail side menu", () => {
       "Overview",
       "Activity",
       "Configuration",
+      "Developer",
       "Management",
     ]);
   });
@@ -138,13 +150,13 @@ describe("SLO detail side menu", () => {
     },
   );
 
-  test("keeps all twelve destinations unique and fully populated", async () => {
+  test("keeps all fifteen destinations unique and fully populated", async () => {
     await renderSloMenu();
 
     const hrefs: Array<string> = hrefsInMenu();
     const titles: Array<string> = titlesInMenu();
 
-    expect(hrefs).toHaveLength(12);
+    expect(hrefs).toHaveLength(15);
     expect(hrefs).toEqual(Array.from(new Set(hrefs)));
     expect(titles).toEqual(Array.from(new Set(titles)));
     expect(hrefs).toEqual(

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

@@ -199,6 +199,25 @@ function editDialog(): HTMLElement {
   return screen.getByRole("dialog", { name: "Edit Telemetry Ingestion Key" });
 }
 
+function activeStep(): string {
+  return (
+    within(editDialog())
+      .getByRole("navigation", { name: "Progress" })
+      .querySelector('[aria-current="step"]')?.textContent || ""
+  );
+}
+
+async function next(user: UserEvent): Promise<void> {
+  await user.click(
+    await within(editDialog()).findByRole("button", { name: "Next" }),
+  );
+}
+
+/*
+ * The edit form walks three steps - Details, Access & Limits, Browser
+ * Settings - so opening it lands on the first, and the origins are two
+ * Next clicks away.
+ */
 async function openEditForm(user: UserEvent): Promise<void> {
   await user.click(
     await screen.findByRole("button", { name: "Edit Telemetry Ingestion Key" }),
@@ -206,6 +225,18 @@ async function openEditForm(user: UserEvent): Promise<void> {
   await waitFor(() => {
     expect(editDialog()).toBeVisible();
   });
+  await within(editDialog()).findByPlaceholderText(
+    "Telemetry Ingestion Key Name",
+  );
+}
+
+async function openBrowserSettings(user: UserEvent): Promise<void> {
+  await openEditForm(user);
+  await next(user);
+  await waitFor(() => {
+    expect(activeStep()).toBe("Access & Limits");
+  });
+  await next(user);
   await within(editDialog()).findByRole("textbox", {
     name: /^Allowed Origins/,
   });
@@ -213,7 +244,7 @@ async function openEditForm(user: UserEvent): Promise<void> {
 
 async function save(user: UserEvent): Promise<TelemetryIngestionKey> {
   await user.click(
-    within(editDialog()).getByRole("button", { name: "Save Changes" }),
+    await within(editDialog()).findByRole("button", { name: "Save Changes" }),
   );
   await waitFor(() => {
     expect(createOrUpdateMock).toHaveBeenCalledTimes(1);
@@ -238,10 +269,64 @@ describe("Telemetry ingestion key detail page", () => {
     });
   });
 
-  test("loads the stored origins into the editor as JSON text", async () => {
+  test("walks Details, then Access & Limits, then Browser Settings", async () => {
     const user: UserEvent = await renderDetail();
     await openEditForm(user);
 
+    expect(activeStep()).toBe("Details");
+    expect(
+      within(editDialog()).getByPlaceholderText("Telemetry Ingestion Key Name"),
+    ).toHaveValue("Storefront key");
+    expect(
+      within(editDialog()).queryByRole("textbox", {
+        name: /^Allowed Origins/,
+      }),
+    ).not.toBeInTheDocument();
+    // An edit form saves from any step: Save is there from the first one.
+    expect(
+      within(editDialog()).getByRole("button", { name: "Save Changes" }),
+    ).toBeVisible();
+
+    await next(user);
+    await waitFor(() => {
+      expect(activeStep()).toBe("Access & Limits");
+    });
+    expect(
+      within(editDialog()).getByRole("switch", { name: /^Enabled/ }),
+    ).toBeVisible();
+    expect(
+      within(editDialog()).getByRole("spinbutton", {
+        name: /^Requests Per Minute Limit/,
+      }),
+    ).toBeVisible();
+    expect(
+      within(editDialog()).queryByPlaceholderText(
+        "Telemetry Ingestion Key Name",
+      ),
+    ).not.toBeInTheDocument();
+
+    await next(user);
+    await waitFor(() => {
+      expect(activeStep()).toBe("Browser Settings");
+    });
+    expect(
+      within(editDialog()).getByRole("textbox", { name: /^Allowed Origins/ }),
+    ).toBeVisible();
+    expect(
+      within(editDialog()).getByPlaceholderText("storefront-web"),
+    ).toBeVisible();
+    expect(
+      await within(editDialog()).findByRole("button", {
+        name: "Save Changes",
+      }),
+    ).toBeVisible();
+    expect(createOrUpdateMock).not.toHaveBeenCalled();
+  });
+
+  test("loads the stored origins into the editor as JSON text", async () => {
+    const user: UserEvent = await renderDetail();
+    await openBrowserSettings(user);
+
     expect(
       within(editDialog()).getByRole("textbox", { name: /^Allowed Origins/ }),
     ).toHaveValue(JSON.stringify(["https://app.example.com"], null, 4));
@@ -256,12 +341,21 @@ describe("Telemetry ingestion key detail page", () => {
     const user: UserEvent = await renderDetail();
     await openEditForm(user);
 
-    expect(
-      within(editDialog()).queryByRole("radiogroup", { name: "Key Type" }),
-    ).not.toBeInTheDocument();
-    expect(
-      within(editDialog()).queryByText("Key Type", { exact: true }),
-    ).not.toBeInTheDocument();
+    // On no step: not on the first, nor on either step after it.
+    for (let step: number = 0; step < 3; step++) {
+      expect(
+        within(editDialog()).queryByRole("radiogroup", { name: "Key Type" }),
+      ).not.toBeInTheDocument();
+      expect(
+        within(editDialog()).queryByText("Key Type", { exact: true }),
+      ).not.toBeInTheDocument();
+
+      if (step < 2) {
+        await next(user);
+      }
+    }
+
+    expect(activeStep()).toBe("Browser Settings");
   });
 
   /*
@@ -272,7 +366,7 @@ describe("Telemetry ingestion key detail page", () => {
    */
   test("sends edited origins as an array, not as JSON text", async () => {
     const user: UserEvent = await renderDetail();
-    await openEditForm(user);
+    await openBrowserSettings(user);
 
     fireEvent.change(
       within(editDialog()).getByRole("textbox", { name: /^Allowed Origins/ }),
@@ -293,7 +387,7 @@ describe("Telemetry ingestion key detail page", () => {
 
   test("keeps the untouched origins an array when another field is edited", async () => {
     const user: UserEvent = await renderDetail();
-    await openEditForm(user);
+    await openBrowserSettings(user);
 
     fireEvent.change(
       within(editDialog()).getByPlaceholderText("storefront-web"),
@@ -320,7 +414,7 @@ describe("Telemetry ingestion key detail page", () => {
     });
 
     const user: UserEvent = await renderDetail();
-    await openEditForm(user);
+    await openBrowserSettings(user);
 
     fireEvent.change(
       within(editDialog()).getByRole("textbox", { name: /^Allowed Origins/ }),
@@ -334,7 +428,7 @@ describe("Telemetry ingestion key detail page", () => {
 
   test("refuses to save origins that are not valid JSON", async () => {
     const user: UserEvent = await renderDetail();
-    await openEditForm(user);
+    await openBrowserSettings(user);
 
     fireEvent.change(
       within(editDialog()).getByRole("textbox", { name: /^Allowed Origins/ }),
@@ -355,7 +449,7 @@ describe("Telemetry ingestion key detail page", () => {
 
   test("refuses to save an origin list that is not a list", async () => {
     const user: UserEvent = await renderDetail();
-    await openEditForm(user);
+    await openBrowserSettings(user);
 
     fireEvent.change(
       within(editDialog()).getByRole("textbox", { name: /^Allowed Origins/ }),