@oneuptime/common 14.0.2 → 14.0.5

package/Server/Utils/Telemetry/Telemetry.ts

@@ -451,6 +451,22 @@ export default class TelemetryUtil {
     };
   }
 
+  /*
+   * Stamped on rows from a database's own telemetry (collector / Database
+   * Agent receiver batches), like oneuptime.host.id. A metric monitor
+   * series grouped by oneuptime.database.server.id links the incident or
+   * alert it opens to that database (see SeriesResourceLinker).
+   */
+  public static getAttributesForDatabaseServerIdAndName(data: {
+    databaseServerId: ObjectID;
+    databaseServerName: string;
+  }): Dictionary<AttributeType> {
+    return {
+      "oneuptime.database.server.id": data.databaseServerId.toString(),
+      "oneuptime.database.server.name": data.databaseServerName,
+    };
+  }
+
   public static getAttributes(data: {
     prefixKeysWithString: string;
     items: JSONArray;

package/Server/Utils/Telemetry/TelemetryEntity.ts

@@ -14,6 +14,14 @@ import logger from "../Logger";
 import { ONEUPTIME_LABEL_ATTRIBUTE_PREFIX } from "./OneuptimeLabel";
 import crypto from "crypto";
 
+/*
+ * `keyForContainer` moved to the isomorphic EntityKey module (the Databases
+ * product needs it in the browser too). Re-exported here so the existing
+ * server-side importers (MetricService's container rollup read path and its
+ * tests) keep working unchanged.
+ */
+export { keyForContainer } from "../../../Utils/Telemetry/EntityKey";
+
 /*
  * Generalized OpenTelemetry entity extraction (the identity layer of the
  * entity model — see Internal/Docs/OpenTelemetryEntities.md, phase 1).
@@ -211,11 +219,18 @@ export default class InventoryItem {
    * entries is usable and extraction falls back to heuristics. We never infer a
    * retirement across that boundary; in particular, an explicitly referenced
    * Host must remain authoritative on a Kubernetes resource.
+   *
+   * `suppressHeuristicEntityTypes` drops those types from the HEURISTIC
+   * resolvers only — for a resource the caller knows the heuristic would
+   * misread (a database receiver's batch carries the host.name of the
+   * machine the collector runs on, which is not what it describes). A type a
+   * producer declared through `entity_refs` is never suppressed.
    */
   public static extractEntitiesWithRetirements(data: {
     projectId: string;
     attributes: EntityAttributes;
     entityRefs?: Array<ResourceEntityRef> | undefined;
+    suppressHeuristicEntityTypes?: ReadonlyArray<EntityType> | undefined;
   }): EntityExtractionResult {
     let out: Array<ExtractedEntity> = [];
     const hasAuthoritativeEntityRefs: boolean = Boolean(
@@ -285,9 +300,15 @@ export default class InventoryItem {
   private static entitiesFromResolvers(data: {
     projectId: string;
     attributes: EntityAttributes;
+    suppressHeuristicEntityTypes?: ReadonlyArray<EntityType> | undefined;
   }): Array<ExtractedEntity> {
     const out: Array<ExtractedEntity> = [];
     const seen: Set<string> = new Set<string>();
+    const suppressed: ReadonlyArray<EntityType> = Array.isArray(
+      data.suppressHeuristicEntityTypes,
+    )
+      ? data.suppressHeuristicEntityTypes
+      : [];
 
     for (const resolve of this.resolvers) {
       const identity: {
@@ -295,7 +316,7 @@ export default class InventoryItem {
         id: Dictionary<string>;
       } | null = resolve(data.attributes);
 
-      if (!identity) {
+      if (!identity || suppressed.includes(identity.entityType)) {
         continue;
       }
 
@@ -1449,24 +1470,3 @@ export default class InventoryItem {
     return out;
   }
 }
-
-/**
- * `container.id` is the container identity (mirrors the container
- * resolver above — id-only). Read-side helper in the mold of
- * `EntityKey.keyForHost` & co.; it lives here rather than in the
- * isomorphic EntityKey module because its only consumer today is the
- * server-side container metric-rollup read path
- * (`MetricService.tryBuildEntityAggregateMVStatement` against
- * `MetricItemAggMV1mByContainer`), so there is no reason to widen the
- * browser bundle. Pass the raw `container.id` attribute value.
- */
-export function keyForContainer(
-  projectId: string,
-  containerId: string,
-): string {
-  return computeEntityKeyShared({
-    projectId,
-    entityType: EntityType.Container,
-    identifyingAttributes: { "container.id": containerId },
-  });
-}

package/Server/Utils/Telemetry/TelemetryIngestionKeyGuard.ts

@@ -11,20 +11,26 @@ import TelemetryIngestSurface, {
  *
  * TelemetryIngest (the Express middleware) runs these inline as part of a
  * longer chain that also covers the Origin allowlist and the per-key rate
- * limit, neither of which means anything off HTTP. Everything else that
- * accepts a TelemetryIngestionKey - the gRPC OTLP server, the MQTT broker,
- * and the two key-validation probes - is NOT an Express route and cannot use
- * that middleware, yet must answer these same three questions or a disabled
- * key keeps working on the pipe nobody remembered to update.
+ * limit, neither of which means anything off HTTP. Other places that accept a
+ * TelemetryIngestionKey cannot use that middleware - the gRPC OTLP server and
+ * the MQTT broker are not Express routes, and the two key-validation probes
+ * have to describe a refusal in their own JSON answer rather than let the
+ * middleware end the request - yet must answer these same three questions or
+ * a disabled key keeps working on the pipe nobody remembered to update.
  *
  * The refusal SENTENCES are deliberately identical to the middleware's, so a
- * customer who moves the same key between HTTP, gRPC and MQTT reads the same
- * explanation each time rather than three differently-worded versions of one
- * problem. If you change wording here, change it there too.
+ * customer who moves the same key between OTLP/HTTP and OTLP/gRPC reads the
+ * same explanation on both: gRPC sends `message` back as its status details,
+ * and the session replay probe returns it in its JSON body. MQTT cannot carry
+ * it - an MQTT 3.1.1 CONNACK has no reason field - so the broker logs
+ * `reason` and the device sees only a generic credential error. If you change
+ * wording here, change it in the middleware too;
+ * GrpcServerAuthStatusLive.test.ts compares the two and fails on drift.
  *
  * What this deliberately does NOT do is decide the transport-level response.
- * A refusal is a status code on HTTP, a CONNACK return code on MQTT, and a
- * silent success on gRPC (see GrpcServer for why); each caller owns that
+ * A refusal is an HTTP status, a non-retryable gRPC status (UNAUTHENTICATED
+ * or PERMISSION_DENIED, mapped from the middleware's HTTP status - see
+ * GrpcServer), or MQTT CONNACK return code 4; each caller owns that
  * translation because each transport's retry semantics are its own.
  */
 export enum TelemetryIngestionKeyRefusalReason {

package/Tests/App/Accounts/SignedInRedirect.test.tsx

@@ -0,0 +1,241 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import User from "../../../Models/DatabaseModels/User";
+import Email from "../../../Types/Email";
+import HTTPResponse from "../../../Types/API/HTTPResponse";
+import { JSONObject } from "../../../Types/JSON";
+import { DASHBOARD_URL } from "../../../UI/Config";
+import UiAnalytics from "../../../UI/Utils/Analytics";
+import API from "../../../UI/Utils/API/API";
+import ModelAPI, {
+  ModelAPIHttpResponse,
+} from "../../../UI/Utils/ModelAPI/ModelAPI";
+import Navigation from "../../../UI/Utils/Navigation";
+import UserUtil from "../../../UI/Utils/User";
+import "../../../../App/FeatureSet/Accounts/src/Utils/i18n";
+import LoginPage from "../../../../App/FeatureSet/Accounts/src/Pages/Login";
+import LoginWithSSOPage from "../../../../App/FeatureSet/Accounts/src/Pages/LoginWithSSO";
+import RegisterPage from "../../../../App/FeatureSet/Accounts/src/Pages/Register";
+
+/*
+ * The sign-in pages send a visitor who is already signed in on to the
+ * Dashboard. That check used to run on every render, and a sign-in on the
+ * page itself signs the user in and navigates to the Dashboard too
+ * (LoginUtil.login): the login form then re-rendered the page as it stopped
+ * loading, the check saw a signed-in user and navigated again, and the
+ * second navigation aborted the first. People landed on the Dashboard
+ * regardless, but every e2e spec that signed in through the login page
+ * failed on the aborted navigation (net::ERR_ABORTED / NS_BINDING_ABORTED).
+ *
+ * LoginUtil.login is the real one here, so a sign-in really stores the user
+ * and really asks to navigate; only the navigation itself is recorded
+ * instead of performed.
+ */
+
+jest.mock("../../../UI/Config", () => {
+  return {
+    ...(jest.requireActual(
+      "../../../UI/Config",
+    ) as typeof import("../../../UI/Config")),
+    __esModule: true,
+    BILLING_ENABLED: false,
+    CAPTCHA_ENABLED: false,
+  };
+});
+
+// Page chrome that fetches the instance's global config on mount.
+jest.mock("../../../UI/Components/EditionLabel/EditionLabel", () => {
+  return {
+    __esModule: true,
+    default: (): null => {
+      return null;
+    },
+  };
+});
+
+const USER_JSON: JSONObject = {
+  _id: "33333333-3333-4333-8333-333333333333",
+  email: "ada@example.com",
+  name: "Ada Lovelace",
+};
+const PASSWORD: string = "lantern river meadow";
+
+let navigations: Array<string> = [];
+
+/*
+ * What an email link would put in ?email=. Register reads it to prefill its
+ * form; the login page is typed into instead, as a person signs in.
+ */
+let linkedEmail: string = "";
+
+function navigationsToTheDashboard(): Array<string> {
+  return navigations.filter((url: string) => {
+    return url === DASHBOARD_URL.toString();
+  });
+}
+
+async function renderInRouter(
+  page: React.ReactElement,
+): Promise<ReturnType<typeof render>> {
+  let result: ReturnType<typeof render> | undefined;
+  await act(async () => {
+    result = render(<MemoryRouter>{page}</MemoryRouter>);
+  });
+  return result as ReturnType<typeof render>;
+}
+
+// Anything a stray second navigation would need to land.
+async function letTheDustSettle(): Promise<void> {
+  await act(async () => {
+    await new Promise<void>((resolve: () => void) => {
+      setTimeout(resolve, 50);
+    });
+  });
+}
+
+describe("Accounts pages navigate a signed-in user to the Dashboard once", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    navigations = [];
+    linkedEmail = "";
+
+    jest
+      .spyOn(Navigation, "navigate")
+      .mockImplementation((to: { toString: () => string }) => {
+        navigations.push(to.toString());
+      });
+    jest
+      .spyOn(Navigation, "getQueryStringByName")
+      .mockImplementation((key: string): string => {
+        return key === "email" ? linkedEmail : "";
+      });
+    jest.spyOn(UserUtil, "getUtmParams").mockReturnValue({});
+    jest.spyOn(UserUtil, "getAttributionClickIds").mockReturnValue(null);
+    jest.spyOn(UserUtil, "getFirstTouchAttribution").mockReturnValue(null);
+    jest.spyOn(UiAnalytics, "userAuth").mockImplementation(() => {});
+    jest.spyOn(UiAnalytics, "capture").mockImplementation(() => {});
+    jest.spyOn(UiAnalytics, "captureRevenueEvent").mockImplementation(() => {});
+
+    // /login and /signup both answer with the account and a session.
+    jest
+      .spyOn(ModelAPI, "createOrUpdate")
+      .mockImplementation(async (): Promise<ModelAPIHttpResponse<User>> => {
+        const response: ModelAPIHttpResponse<User> =
+          new ModelAPIHttpResponse<User>(200, USER_JSON, {});
+        response.miscData = { token: "session-token" };
+        return response;
+      });
+
+    // The SSO page lists the global providers on mount: there are none.
+    jest.spyOn(API, "get").mockImplementation(async () => {
+      return new HTTPResponse<JSONObject>(200, [] as unknown as JSONObject, {});
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    window.localStorage.clear();
+  });
+
+  test("a password sign-in on the login page navigates once", async () => {
+    await renderInRouter(<LoginPage />);
+    expect(navigations).toEqual([]);
+
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup({
+      delay: null,
+    });
+    await user.type(await screen.findByTestId("email"), "ada@example.com");
+    await user.type(screen.getByTestId("password"), PASSWORD);
+    await act(async () => {
+      await user.click(screen.getByTestId("Login"));
+    });
+
+    await waitFor(() => {
+      expect(UserUtil.isLoggedIn()).toBe(true);
+    });
+    await letTheDustSettle();
+
+    expect(navigationsToTheDashboard()).toHaveLength(1);
+    expect(navigations).toEqual([DASHBOARD_URL.toString()]);
+  });
+
+  test("a signup that signs the account in navigates once", async () => {
+    // The shared Email input loses synthetic paste events in jsdom.
+    linkedEmail = "ada@example.com";
+    await renderInRouter(<RegisterPage />);
+    await waitFor(() => {
+      expect(screen.getByTestId("email")).toHaveValue("ada@example.com");
+    });
+
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup({
+      delay: null,
+    });
+    for (const [field, value] of [
+      ["name", "Ada Lovelace"],
+      ["password", PASSWORD],
+      ["confirmPassword", PASSWORD],
+    ] as const) {
+      await user.clear(screen.getByTestId(field));
+      await user.paste(value);
+    }
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Sign Up" }));
+    });
+
+    await waitFor(() => {
+      expect(UserUtil.isLoggedIn()).toBe(true);
+    });
+    await letTheDustSettle();
+
+    expect(navigations).toEqual([DASHBOARD_URL.toString()]);
+  });
+
+  test.each([
+    ["login", LoginPage],
+    ["register", RegisterPage],
+    ["single sign-on", LoginWithSSOPage],
+  ] as Array<[string, () => React.ReactElement]>)(
+    "a visitor already signed in is sent on from the %s page once, and not again as it re-renders",
+    async (_name: string, Page: () => React.ReactElement) => {
+      UserUtil.setEmail(new Email("ada@example.com"));
+
+      const { rerender } = await renderInRouter(<Page />);
+      await waitFor(() => {
+        expect(navigations).toEqual([DASHBOARD_URL.toString()]);
+      });
+
+      // The page goes on rendering while the navigation is under way.
+      for (let render: number = 0; render < 3; render++) {
+        await act(async () => {
+          rerender(
+            <MemoryRouter>
+              <Page />
+            </MemoryRouter>,
+          );
+        });
+      }
+      await letTheDustSettle();
+
+      expect(navigations).toEqual([DASHBOARD_URL.toString()]);
+    },
+  );
+});

package/Tests/App/AdminDashboard/AdminHeaderSmallScreens.test.tsx

@@ -13,8 +13,12 @@ import {
   LAPTOP_WIDTH_IN_PX,
   PHONE_WIDTH_IN_PX,
   TABLET_WIDTH_IN_PX,
+  TAILWIND_BREAKPOINTS_IN_PX,
+  VisibilityOptions,
+  WIDE_DESKTOP_WIDTH_IN_PX,
   describeVisibility,
   isVisibleAtWidth,
+  restorePreFixMarkup,
 } from "../../ResponsiveVisibility";
 import englishLocale from "../../../../App/FeatureSet/AdminDashboard/src/Locales/en.json";
 
@@ -32,6 +36,34 @@ jest.mock("../../../UI/Images/logos/OneUptimeSVG/3-transparent.svg", () => {
   return ASSET_DATA_URL;
 });
 
+/*
+ * BILLING_ENABLED is read from the environment (UI/Config), and EditionLabel
+ * returns an empty fragment when it is on — oneuptime.com bounds plans through
+ * subscriptions and shows no edition pill at all. So the pill these tests are
+ * about only exists on a self-hosted header, and without pinning the flag the
+ * suite passes or fails depending on whether BILLING_ENABLED happened to be
+ * exported into the jest process: green locally, red in CI, which is how it
+ * reached master.
+ *
+ * Pinned false, which is the deployment whose layout is under test. Same
+ * approach as EditionLabelLicenseStatus.test.tsx.
+ */
+jest.mock("../../../UI/Config", () => {
+  const actualConfig: Record<string, unknown> = jest.requireActual(
+    "../../../UI/Config",
+  ) as Record<string, unknown>;
+
+  const mockedConfig: Record<string, unknown> = { ...actualConfig };
+
+  Object.defineProperty(mockedConfig, "BILLING_ENABLED", {
+    get: (): boolean => {
+      return false;
+    },
+  });
+
+  return mockedConfig;
+});
+
 type LocaleValue = string | { [key: string]: LocaleValue };
 
 const lookUpTranslation: (key: string) => string | undefined = (
@@ -92,12 +124,18 @@ const renderHeader: RenderHeaderFunction = async (): Promise<void> => {
   });
 };
 
+type ResetHeaderStateFunction = () => void;
+
+const resetHeaderState: ResetHeaderStateFunction = (): void => {
+  cleanup();
+  document.documentElement.className = "";
+  window.localStorage.clear();
+  isMasterAdminMock.mockReturnValue(true);
+};
+
 describe("admin dashboard header on small screens", () => {
   beforeEach(() => {
-    cleanup();
-    document.documentElement.className = "";
-    window.localStorage.clear();
-    isMasterAdminMock.mockReturnValue(true);
+    resetHeaderState();
   });
 
   test("the profile button is on screen at every width, phone included", async () => {
@@ -200,3 +238,182 @@ describe("admin dashboard header on small screens", () => {
     ).toHaveLength(0);
   });
 });
+
+/*
+ * The admin header under a foreign `.hidden { display: none !important }`
+ * (Bootstrap 3, HTML5 Boilerplate, browser extensions, user stylesheets).
+ *
+ * Its two wide-screen-only entries — the edition pill and the standalone Exit
+ * Admin button — used `hidden md:inline-flex` and `hidden lg:flex`. The rule
+ * matches the bare class and beats the breakpoint utility, so an admin with
+ * such a browser lost both on every screen, a wide desktop included. They now
+ * use `max-md:hidden` / `max-lg:hidden`, which paint the same on a clean page
+ * and never carry the class the rule targets.
+ */
+const WITH_FOREIGN_HIDDEN_RULE: VisibilityOptions = {
+  withForeignHiddenRule: true,
+};
+
+const MD_WIDTH_IN_PX: number = TAILWIND_BREAKPOINTS_IN_PX["md"]!;
+const LG_WIDTH_IN_PX: number = TAILWIND_BREAKPOINTS_IN_PX["lg"]!;
+
+const EVERY_WIDTH_IN_PX: Array<number> = [
+  PHONE_WIDTH_IN_PX,
+  MD_WIDTH_IN_PX - 1,
+  TABLET_WIDTH_IN_PX,
+  LG_WIDTH_IN_PX - 1,
+  LG_WIDTH_IN_PX,
+  LAPTOP_WIDTH_IN_PX,
+  WIDE_DESKTOP_WIDTH_IN_PX,
+];
+
+type WidthsFromFunction = (minimumWidthInPx: number) => Array<number>;
+
+const widthsFrom: WidthsFromFunction = (
+  minimumWidthInPx: number,
+): Array<number> => {
+  return EVERY_WIDTH_IN_PX.filter((width: number): boolean => {
+    return width >= minimumWidthInPx;
+  });
+};
+
+const widthsBelow: WidthsFromFunction = (
+  minimumWidthInPx: number,
+): Array<number> => {
+  return EVERY_WIDTH_IN_PX.filter((width: number): boolean => {
+    return width < minimumWidthInPx;
+  });
+};
+
+type GetElementFunction = () => HTMLElement;
+
+// The edition pill's accessible name leads with the edition it reports.
+const getEditionPill: GetElementFunction = (): HTMLElement => {
+  return screen.getByRole("button", { name: /Edition/ });
+};
+
+// Before the profile menu opens, the standalone button is the only one.
+const getStandaloneExitAdmin: GetElementFunction = (): HTMLElement => {
+  return screen.getByRole("button", { name: "Exit Admin" });
+};
+
+describe("admin dashboard header with a foreign .hidden rule on the page", () => {
+  beforeEach(() => {
+    resetHeaderState();
+  });
+
+  test("the edition pill is on screen from md up with the rule, and stays behind below md", async () => {
+    await renderHeader();
+
+    const pill: HTMLElement = getEditionPill();
+
+    for (const width of widthsFrom(MD_WIDTH_IN_PX)) {
+      expect(describeVisibility(pill, width, WITH_FOREIGN_HIDDEN_RULE)).toBe(
+        `visible at ${width}px with a foreign .hidden rule on the page`,
+      );
+    }
+
+    for (const width of widthsBelow(MD_WIDTH_IN_PX)) {
+      expect(isVisibleAtWidth(pill, width, WITH_FOREIGN_HIDDEN_RULE)).toBe(
+        false,
+      );
+      expect(isVisibleAtWidth(pill, width)).toBe(false);
+    }
+  });
+
+  test("the standalone Exit Admin is on screen from lg up with the rule, and stays behind below lg", async () => {
+    await renderHeader();
+
+    const exitAdmin: HTMLElement = getStandaloneExitAdmin();
+
+    for (const width of widthsFrom(LG_WIDTH_IN_PX)) {
+      expect(
+        describeVisibility(exitAdmin, width, WITH_FOREIGN_HIDDEN_RULE),
+      ).toBe(`visible at ${width}px with a foreign .hidden rule on the page`);
+    }
+
+    for (const width of widthsBelow(LG_WIDTH_IN_PX)) {
+      expect(isVisibleAtWidth(exitAdmin, width, WITH_FOREIGN_HIDDEN_RULE)).toBe(
+        false,
+      );
+      expect(isVisibleAtWidth(exitAdmin, width)).toBe(false);
+    }
+  });
+
+  test("help and the profile button are on screen at every width with the rule", async () => {
+    await renderHeader();
+
+    for (const button of [
+      screen.getByRole("button", { name: "Help" }),
+      screen.getByRole("button", { name: /User Profile/ }),
+    ]) {
+      for (const width of EVERY_WIDTH_IN_PX) {
+        expect(
+          describeVisibility(button, width, WITH_FOREIGN_HIDDEN_RULE),
+        ).toBe(`visible at ${width}px with a foreign .hidden rule on the page`);
+      }
+    }
+  });
+
+  test("at the customer's 1917px with the rule, the edition pill, Exit Admin, help and profile are all there", async () => {
+    await renderHeader();
+
+    const entries: Array<[string, HTMLElement]> = [
+      ["edition pill", getEditionPill()],
+      ["Exit Admin", getStandaloneExitAdmin()],
+      ["Help", screen.getByRole("button", { name: "Help" })],
+      ["User Profile", screen.getByRole("button", { name: /User Profile/ })],
+    ];
+
+    expect(
+      entries.map(([label, element]: [string, HTMLElement]): string => {
+        return `${label}: ${describeVisibility(
+          element,
+          WIDE_DESKTOP_WIDTH_IN_PX,
+          WITH_FOREIGN_HIDDEN_RULE,
+        )}`;
+      }),
+    ).toEqual(
+      entries.map(([label]: [string, HTMLElement]): string => {
+        return `${label}: visible at 1917px with a foreign .hidden rule on the page`;
+      }),
+    );
+  });
+
+  test("control: with the pre-fix classes put back, the same check fails at 1917px", async () => {
+    /*
+     * Proof that the tests above can fail: rewrite the rendered markup to what
+     * the header shipped before the fix and ask the very same question.
+     */
+    await renderHeader();
+
+    restorePreFixMarkup();
+
+    const exitAdmin: HTMLElement = getStandaloneExitAdmin();
+
+    expect(
+      describeVisibility(
+        exitAdmin,
+        WIDE_DESKTOP_WIDTH_IN_PX,
+        WITH_FOREIGN_HIDDEN_RULE,
+      ),
+    ).toBe(
+      'hidden at 1917px with a foreign .hidden rule on the page by <div class="hidden items-center lg:flex">',
+    );
+
+    const pill: HTMLElement = getEditionPill();
+
+    expect(pill.getAttribute("class")).toContain("mr-3 hidden md:inline-flex");
+    expect(
+      isVisibleAtWidth(
+        pill,
+        WIDE_DESKTOP_WIDTH_IN_PX,
+        WITH_FOREIGN_HIDDEN_RULE,
+      ),
+    ).toBe(false);
+
+    // On a clean page the old markup was fine, which is why nobody saw it.
+    expect(isVisibleAtWidth(exitAdmin, WIDE_DESKTOP_WIDTH_IN_PX)).toBe(true);
+    expect(isVisibleAtWidth(pill, WIDE_DESKTOP_WIDTH_IN_PX)).toBe(true);
+  });
+});