@oneuptime/common 14.0.6 → 14.0.7

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

@@ -1,5 +1,6 @@
 import EventStatusPanel, {
   ComponentProps,
+  EventPanelAction,
   EventStateAction,
   EventStateItem,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/EventView/EventStatusPanel";
@@ -19,6 +20,9 @@ import { Black, Red500 } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
 
+// React's warning for list items without a (unique) key.
+const KEY_WARNING_PATTERN: RegExp = /unique "key"|same key/;
+
 jest.mock("react-i18next", () => {
   return {
     useTranslation: () => {
@@ -542,7 +546,7 @@ describe("EventStatusPanel disabled behavior", () => {
 });
 
 describe("EventStatusPanel action-group layout", () => {
-  test("labels one responsive wrapping group for every action control", () => {
+  test("labels one responsive wrapping group for every action control (compact layout)", () => {
     renderPanel();
 
     const group: HTMLElement = getActionGroup();
@@ -607,11 +611,53 @@ describe("EventStatusPanel header layouts", () => {
 
     expect(identifier).toHaveTextContent("INC-42");
     expect(identifier).toHaveClass("bg-gray-100", "uppercase");
-    expect(headerRow).toHaveClass("md:items-start", "md:justify-between");
+    expect(headerRow).toHaveClass("xl:items-start", "xl:justify-between");
     expect(headerRow).toContainElement(group);
     expect(headerRow).not.toContainElement(screen.getByTestId("pill"));
   });
 
+  /*
+   * Beside a side menu, a header that went side by side from md squeezed the
+   * title to a few characters and stacked the actions one per row, so the
+   * titled header stacks the actions under the title until xl.
+   */
+  test("stacks the actions under the title until xl, and puts them beside it only from xl", () => {
+    renderPanel({ title: "Database connection failures" });
+
+    const heading: HTMLElement = screen.getByRole("heading", {
+      level: 2,
+      name: "Database connection failures",
+    });
+    const headerRow: HTMLElement = (heading.parentElement as HTMLElement)
+      .parentElement as HTMLElement;
+
+    expect(headerRow).toHaveClass(
+      "flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between",
+      { exact: true },
+    );
+    expect(headerRow).not.toHaveClass("md:flex-row");
+    expect(headerRow).not.toHaveClass("md:items-start");
+    expect(headerRow).not.toHaveClass("md:justify-between");
+  });
+
+  test("keeps the titled header's action group full width until xl", () => {
+    renderPanel({ title: "Database connection failures" });
+
+    const group: HTMLElement = getActionGroup();
+
+    expect(group).toHaveClass(
+      "flex w-full flex-wrap items-center justify-end gap-2 xl:w-auto xl:shrink-0",
+      { exact: true },
+    );
+    expect(group).not.toHaveClass("md:w-auto");
+    expect(group).toHaveAttribute("aria-label", "Event actions");
+    expect(within(group).getAllByRole("button")).toEqual([
+      screen.getByRole("button", { name: "Acknowledge" }),
+      screen.getByRole("button", { name: "Resolve" }),
+      screen.getByRole("button", { name: "More actions" }),
+    ]);
+  });
+
   test("uses the compact inline metadata layout when no title is supplied", () => {
     renderPanel();
 
@@ -628,6 +674,25 @@ describe("EventStatusPanel header layouts", () => {
     expect(compactRow).toContainElement(screen.getByTestId("pill"));
   });
 
+  // Only the titled header moved to xl; the compact layout is as it was.
+  test("keeps the compact layout side by side from md, with its action group full width until md", () => {
+    renderPanel();
+
+    const group: HTMLElement = getActionGroup();
+    const compactRow: HTMLElement = group.parentElement as HTMLElement;
+
+    expect(compactRow).toHaveClass(
+      "flex flex-col gap-3 px-4 py-4 sm:px-5 md:flex-row md:items-center md:justify-between",
+      { exact: true },
+    );
+    expect(compactRow).not.toHaveClass("xl:flex-row");
+    expect(group).toHaveClass(
+      "flex w-full flex-wrap items-center justify-end gap-2 md:w-auto",
+      { exact: true },
+    );
+    expect(group).not.toHaveClass("xl:w-auto");
+  });
+
   test("falls back to black when hydrated current-state color is absent", () => {
     renderPanel({
       states: [
@@ -992,3 +1057,734 @@ describe("EventStatusPanel header facts", () => {
     expect(getActionGroup()).not.toContainElement(getFacts());
   });
 });
+
+/*
+ * Secondary actions are the header's non-state buttons - "Declare Incident"
+ * on an alert is the first. They share the state buttons' row and size but
+ * never their primary look, never reach onActionClick (which would open a
+ * state-change modal for a state that does not exist), never change what the
+ * "More actions" menu offers, and stay on screen when no state action is
+ * left. A locked one explains itself through a hoverable, focusable wrapper,
+ * because a disabled <button> cannot trigger a tooltip.
+ */
+describe("EventStatusPanel secondary actions", () => {
+  const DECLARE_ID: string = "alert-declare-incident-btn";
+  const DECLARE_LABEL: string = "Declare Incident";
+  const LOCKED_REASON: string =
+    "You do not have permission to create this Incident.";
+
+  type MakeSecondaryActionFunction = (
+    overrides?: Partial<EventPanelAction> | undefined,
+  ) => EventPanelAction;
+
+  const makeSecondaryAction: MakeSecondaryActionFunction = (
+    overrides?: Partial<EventPanelAction> | undefined,
+  ): EventPanelAction => {
+    return {
+      id: DECLARE_ID,
+      label: DECLARE_LABEL,
+      icon: IconProp.Alert,
+      onClick: (): void => {},
+      ...overrides,
+    };
+  };
+
+  type GetButtonFunction = (name: string) => HTMLElement;
+
+  const getButton: GetButtonFunction = (name: string): HTMLElement => {
+    return screen.getByRole("button", { name: name });
+  };
+
+  type IsBeforeFunction = (first: Node, second: Node) => boolean;
+
+  const isBefore: IsBeforeFunction = (first: Node, second: Node): boolean => {
+    return Boolean(
+      first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+  };
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  /*
+   * First in this block on purpose: React reports a missing list key only
+   * once per owner component, so the first render with secondary actions is
+   * the one that would warn.
+   */
+  test("keys each action by its id, so reordering moves rather than relabels them", () => {
+    const consoleErrorSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      console,
+      "error",
+    );
+
+    const first: EventPanelAction = makeSecondaryAction({
+      id: "first-secondary-btn",
+      label: "First",
+    });
+    const second: EventPanelAction = makeSecondaryAction({
+      id: "second-secondary-btn",
+      label: "Second",
+      isDisabled: true,
+      tooltip: LOCKED_REASON,
+    });
+    const third: EventPanelAction = makeSecondaryAction({
+      id: "third-secondary-btn",
+      label: "Third",
+    });
+
+    const baseProps: ComponentProps = {
+      states: defaultStates(),
+      identifier: "ALR-12",
+      currentStateId: "created",
+      actions: defaultActions(),
+      onActionClick: (): void => {},
+      onStateSelect: (): void => {},
+    };
+
+    const { rerender } = render(
+      <EventStatusPanel
+        {...baseProps}
+        secondaryActions={[first, second, third]}
+      />,
+    );
+
+    const firstNode: HTMLElement = getButton("First");
+    const secondWrapper: HTMLElement = screen.getByTestId(
+      "second-secondary-btn-disabled-wrapper",
+    );
+    const thirdNode: HTMLElement = getButton("Third");
+
+    rerender(
+      <EventStatusPanel
+        {...baseProps}
+        secondaryActions={[third, second, first]}
+      />,
+    );
+
+    // Same DOM nodes, now in the new order.
+    expect(getButton("First")).toBe(firstNode);
+    expect(getButton("Third")).toBe(thirdNode);
+    expect(screen.getByTestId("second-secondary-btn-disabled-wrapper")).toBe(
+      secondWrapper,
+    );
+    expect(firstNode).toHaveAttribute("id", "first-secondary-btn");
+    expect(thirdNode).toHaveAttribute("id", "third-secondary-btn");
+    expect(isBefore(thirdNode, secondWrapper)).toBe(true);
+    expect(isBefore(secondWrapper, firstNode)).toBe(true);
+
+    const keyWarnings: Array<unknown> = consoleErrorSpy.mock.calls.filter(
+      (call: Array<unknown>): boolean => {
+        return KEY_WARNING_PATTERN.test(String(call[0]));
+      },
+    );
+
+    expect(keyWarnings).toEqual([]);
+  });
+
+  test("renders after the state buttons and before the More actions trigger", () => {
+    renderPanel({ secondaryActions: [makeSecondaryAction()] });
+
+    const group: HTMLElement = getActionGroup();
+    const acknowledge: HTMLElement = within(group).getByRole("button", {
+      name: "Acknowledge",
+    });
+    const resolve: HTMLElement = within(group).getByRole("button", {
+      name: "Resolve",
+    });
+    const declare: HTMLElement = within(group).getByRole("button", {
+      name: DECLARE_LABEL,
+    });
+    const more: HTMLElement = within(group).getByRole("button", {
+      name: "More actions",
+    });
+
+    expect(within(group).getAllByRole("button")).toEqual([
+      acknowledge,
+      resolve,
+      declare,
+      more,
+    ]);
+    // A direct child of the group, like the state buttons - not nested.
+    expect(declare.parentElement).toBe(group);
+  });
+
+  test("is a native button with its id and label as title", () => {
+    renderPanel({ secondaryActions: [makeSecondaryAction()] });
+
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+    expect(declare.tagName).toBe("BUTTON");
+    expect(declare).toHaveAttribute("type", "button");
+    expect(declare).toHaveAttribute("id", DECLARE_ID);
+    expect(declare).toHaveAttribute("title", DECLARE_LABEL);
+    expect(declare).toBeEnabled();
+    expect(declare).toHaveAttribute("aria-disabled", "false");
+    expect(declare.querySelector("span")).toHaveClass("truncate");
+    expect(declare.querySelector("span")).toHaveTextContent(DECLARE_LABEL);
+  });
+
+  test("uses the state buttons' base classes with the neutral, never the indigo, look", () => {
+    renderPanel({ secondaryActions: [makeSecondaryAction()] });
+
+    const acknowledge: HTMLElement = getButton("Acknowledge");
+    // DANGER renders neutral, so Resolve is the neutral reference.
+    const resolve: HTMLElement = getButton("Resolve");
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+    const primaryVariantClasses: Array<string> = [
+      "border-indigo-600",
+      "bg-indigo-600",
+      "text-white",
+      "hover:border-indigo-700",
+      "hover:bg-indigo-700",
+    ];
+    const baseClasses: Array<string> = acknowledge.className
+      .split(/\s+/)
+      .filter((className: string): boolean => {
+        return (
+          className.length > 0 && !primaryVariantClasses.includes(className)
+        );
+      });
+
+    expect(baseClasses).toEqual(
+      expect.arrayContaining(["inline-flex", "h-9", "min-w-[7rem]"]),
+    );
+    expect(declare).toHaveClass(...baseClasses);
+    expect(declare.className).toBe(resolve.className);
+    expect(declare).toHaveClass(
+      "border-gray-300",
+      "bg-white",
+      "text-gray-700",
+      "hover:bg-gray-50",
+    );
+    expect(declare).not.toHaveClass(
+      "bg-indigo-600",
+      "border-indigo-600",
+      "text-white",
+      "pointer-events-none",
+      "w-full",
+    );
+    expect(declare).not.toHaveAttribute("style");
+
+    // The state action stays the one primary button in the row.
+    const primaryButtons: Array<HTMLElement> = within(getActionGroup())
+      .getAllByRole("button")
+      .filter((button: HTMLElement): boolean => {
+        return button.classList.contains("bg-indigo-600");
+      });
+
+    expect(primaryButtons).toEqual([acknowledge]);
+  });
+
+  test("translates its label like the state labels", () => {
+    renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({ label: "Resolve translation key" }),
+      ],
+    });
+
+    const translated: HTMLElement = getButton("Résoudre");
+
+    expect(translated).toHaveAttribute("id", DECLARE_ID);
+    expect(translated).toHaveAttribute("title", "Résoudre");
+    expect(
+      screen.queryByRole("button", { name: "Resolve translation key" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("renders its icon at the state buttons' icon size, and none when it has no icon", () => {
+    renderPanel({
+      secondaryActions: [
+        makeSecondaryAction(),
+        makeSecondaryAction({
+          id: "iconless-secondary-btn",
+          label: "Iconless",
+          icon: undefined,
+        }),
+      ],
+    });
+
+    const declareIcon: SVGElement | null =
+      getButton(DECLARE_LABEL).querySelector("svg");
+    const acknowledgeIcon: SVGElement | null =
+      getButton("Acknowledge").querySelector("svg");
+
+    expect(declareIcon).not.toBeNull();
+    expect(declareIcon).toHaveClass("h-4", "w-4", "shrink-0");
+    expect(declareIcon?.innerHTML).not.toEqual(acknowledgeIcon?.innerHTML);
+    expect(getButton("Iconless").querySelector("svg")).toBeNull();
+  });
+
+  test("calls its own onClick exactly once and never the state callbacks", () => {
+    const onDeclare: MockFunction = getJestMockFunction();
+    const rendered: RenderedPanel = renderPanel({
+      secondaryActions: [makeSecondaryAction({ onClick: onDeclare })],
+    });
+
+    fireEvent.click(getButton(DECLARE_LABEL));
+
+    expect(onDeclare).toHaveBeenCalledTimes(1);
+    expect(onDeclare).toHaveBeenCalledWith();
+    expect(rendered.actionClicks).toEqual([]);
+    expect(rendered.stateSelections).toEqual([]);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+
+    // The state buttons beside it still report their own states only.
+    fireEvent.click(getButton("Acknowledge"));
+
+    expect(rendered.actionClicks).toEqual(["acknowledged"]);
+    expect(onDeclare).toHaveBeenCalledTimes(1);
+  });
+
+  test("never reaches onActionClick even when its id matches a state id", () => {
+    const onClick: MockFunction = getJestMockFunction();
+    const rendered: RenderedPanel = renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({
+          id: "resolved",
+          label: "Look-alike",
+          onClick: onClick,
+        }),
+      ],
+    });
+
+    fireEvent.click(getButton("Look-alike"));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(rendered.actionClicks).toEqual([]);
+  });
+
+  test("leaves the More actions menu exactly as it was", () => {
+    renderPanel();
+
+    const withoutSecondary: Array<string> = menuChoiceNames(openMenu());
+
+    cleanup();
+
+    renderPanel({ secondaryActions: [makeSecondaryAction()] });
+
+    const menu: HTMLElement = openMenu();
+
+    expect(withoutSecondary).toEqual(["Investigating"]);
+    expect(menuChoiceNames(menu)).toEqual(withoutSecondary);
+    expect(within(menu).queryByText(DECLARE_LABEL)).not.toBeInTheDocument();
+  });
+
+  test.each(["investigating", "acknowledged", "resolved", "created"])(
+    "does not hide the %s state from the menu when an action shares its id",
+    (sharedId: string) => {
+      renderPanel({
+        actions: [],
+        secondaryActions: [
+          makeSecondaryAction({ id: sharedId, label: "Look-alike" }),
+        ],
+      });
+
+      expect(menuChoiceNames(openMenu())).toEqual([
+        "Acknowledged",
+        "Investigating",
+        "Resolved",
+      ]);
+    },
+  );
+
+  test("reports a menu selection as a state change, not a secondary click", () => {
+    const onDeclare: MockFunction = getJestMockFunction();
+    const rendered: RenderedPanel = renderPanel({
+      secondaryActions: [makeSecondaryAction({ onClick: onDeclare })],
+    });
+
+    fireEvent.click(getMenuChoice(openMenu(), "Investigating"));
+
+    expect(rendered.stateSelections).toEqual(["investigating"]);
+    expect(onDeclare).not.toHaveBeenCalled();
+  });
+
+  test("does not conjure a More actions menu when every other state already has a button", () => {
+    renderPanel({
+      states: [
+        makeState("created", "Created"),
+        makeState("acknowledged", "Acknowledged"),
+        makeState("resolved", "Resolved"),
+      ],
+      secondaryActions: [makeSecondaryAction()],
+    });
+
+    expect(
+      screen.queryByRole("button", { name: "More actions" }),
+    ).not.toBeInTheDocument();
+    expect(within(getActionGroup()).getAllByRole("button")).toEqual([
+      getButton("Acknowledge"),
+      getButton("Resolve"),
+      getButton(DECLARE_LABEL),
+    ]);
+  });
+
+  test("stays on a resolved event, where it is the only button", () => {
+    const onDeclare: MockFunction = getJestMockFunction();
+
+    renderPanel({
+      currentStateId: "resolved",
+      actions: [],
+      secondaryActions: [makeSecondaryAction({ onClick: onDeclare })],
+    });
+
+    const group: HTMLElement = getActionGroup();
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+    expect(within(group).getAllByRole("button")).toEqual([declare]);
+    expect(declare).toBeEnabled();
+
+    fireEvent.click(declare);
+
+    expect(onDeclare).toHaveBeenCalledTimes(1);
+  });
+
+  test("renders even when the panel has no states at all", () => {
+    render(
+      <EventStatusPanel
+        title="Database latency"
+        states={[]}
+        actions={[]}
+        onActionClick={() => {}}
+        secondaryActions={[makeSecondaryAction()]}
+      />,
+    );
+
+    expect(within(getActionGroup()).getAllByRole("button")).toEqual([
+      getButton(DECLARE_LABEL),
+    ]);
+  });
+
+  test.each([
+    ["undefined", undefined],
+    ["an empty list", []],
+  ])(
+    "renders nothing extra when secondaryActions is %s",
+    (_label: string, secondaryActions: Array<EventPanelAction> | undefined) => {
+      renderPanel({ secondaryActions: secondaryActions });
+
+      const group: HTMLElement = getActionGroup();
+
+      expect(within(group).getAllByRole("button")).toEqual([
+        getButton("Acknowledge"),
+        getButton("Resolve"),
+        getMoreActionsTrigger(),
+      ]);
+      expect(document.getElementById(DECLARE_ID)).toBeNull();
+      expect(
+        document.querySelector('[data-testid$="-disabled-wrapper"]'),
+      ).toBeNull();
+    },
+  );
+
+  test("is disabled with the rest of the panel, and a click does nothing", () => {
+    const onDeclare: MockFunction = getJestMockFunction();
+
+    renderPanel({
+      isDisabled: true,
+      secondaryActions: [makeSecondaryAction({ onClick: onDeclare })],
+    });
+
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+    expect(declare).toBeDisabled();
+    expect(declare).toHaveAttribute("aria-disabled", "true");
+    // No reason to show, so no wrapper and the label stays as the title.
+    expect(screen.queryByTestId(`${DECLARE_ID}-disabled-wrapper`)).toBeNull();
+    expect(declare).toHaveAttribute("title", DECLARE_LABEL);
+
+    fireEvent.click(declare);
+
+    expect(onDeclare).not.toHaveBeenCalled();
+  });
+
+  test("gets the tooltip wrapper when the panel is disabled and the action carries a reason", () => {
+    renderPanel({
+      isDisabled: true,
+      secondaryActions: [makeSecondaryAction({ tooltip: LOCKED_REASON })],
+    });
+
+    const wrapper: HTMLElement = screen.getByTestId(
+      `${DECLARE_ID}-disabled-wrapper`,
+    );
+
+    expect(wrapper).toContainElement(getButton(DECLARE_LABEL));
+    expect(getButton(DECLARE_LABEL)).toBeDisabled();
+  });
+
+  test.each([
+    ["no tooltip", undefined],
+    ["an empty tooltip", ""],
+  ])(
+    "a disabled action with %s is disabled in place, with no wrapper",
+    (_label: string, tooltip: string | undefined) => {
+      const onDeclare: MockFunction = getJestMockFunction();
+      const rendered: RenderedPanel = renderPanel({
+        secondaryActions: [
+          makeSecondaryAction({
+            isDisabled: true,
+            tooltip: tooltip,
+            onClick: onDeclare,
+          }),
+        ],
+      });
+
+      const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+      expect(declare).toBeDisabled();
+      expect(declare).toHaveAttribute("aria-disabled", "true");
+      expect(declare).toHaveAttribute("title", DECLARE_LABEL);
+      expect(declare).not.toHaveClass("pointer-events-none", "w-full");
+      expect(declare.parentElement).toBe(getActionGroup());
+      expect(screen.queryByTestId(`${DECLARE_ID}-disabled-wrapper`)).toBeNull();
+
+      fireEvent.click(declare);
+
+      expect(onDeclare).not.toHaveBeenCalled();
+      // Only this action is locked; the state controls still work.
+      expect(getButton("Acknowledge")).toBeEnabled();
+      expect(getButton("Resolve")).toBeEnabled();
+      expect(getMoreActionsTrigger()).toBeEnabled();
+
+      fireEvent.click(getButton("Resolve"));
+
+      expect(rendered.actionClicks).toEqual(["resolved"]);
+    },
+  );
+
+  test("a disabled action with a reason hands the pointer and focus to a wrapper", () => {
+    renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({ isDisabled: true, tooltip: LOCKED_REASON }),
+      ],
+    });
+
+    const group: HTMLElement = getActionGroup();
+    const wrapper: HTMLElement = screen.getByTestId(
+      `${DECLARE_ID}-disabled-wrapper`,
+    );
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+    expect(wrapper.tagName).toBe("SPAN");
+    expect(wrapper).toHaveAttribute("tabindex", "0");
+    expect(wrapper.tabIndex).toBe(0);
+    expect(wrapper).toHaveClass(
+      "inline-flex",
+      "min-w-[7rem]",
+      "max-w-full",
+      "flex-auto",
+      "rounded-md",
+      "sm:max-w-64",
+      "sm:flex-none",
+    );
+    expect(declare.parentElement).toBe(wrapper);
+    expect(wrapper.parentElement).toBe(group);
+
+    // Taken out of hit-testing so the wrapper receives the hover.
+    expect(declare).toHaveClass("pointer-events-none", "w-full");
+    // The tooltip carries the message; a native title would compete with it.
+    expect(declare).not.toHaveAttribute("title");
+    expect(declare).toBeDisabled();
+    expect(declare).toHaveAttribute("aria-disabled", "true");
+    // Still the neutral look.
+    expect(declare).toHaveClass("border-gray-300", "bg-white", "text-gray-700");
+    expect(declare).not.toHaveClass("bg-indigo-600");
+
+    // Still between the state buttons and the menu.
+    expect(isBefore(getButton("Resolve"), wrapper)).toBe(true);
+    expect(isBefore(wrapper, getMoreActionsTrigger())).toBe(true);
+  });
+
+  test("shows the reason when the wrapper is hovered", () => {
+    renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({ isDisabled: true, tooltip: LOCKED_REASON }),
+      ],
+    });
+
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+
+    fireEvent.mouseEnter(screen.getByTestId(`${DECLARE_ID}-disabled-wrapper`));
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(LOCKED_REASON);
+  });
+
+  test("shows the reason when the wrapper is focused from the keyboard", () => {
+    renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({ isDisabled: true, tooltip: LOCKED_REASON }),
+      ],
+    });
+
+    const wrapper: HTMLElement = screen.getByTestId(
+      `${DECLARE_ID}-disabled-wrapper`,
+    );
+
+    wrapper.focus();
+
+    expect(document.activeElement).toBe(wrapper);
+
+    fireEvent.focus(wrapper);
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(LOCKED_REASON);
+  });
+
+  test("translates the reason like the label", () => {
+    renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({
+          isDisabled: true,
+          tooltip: "Resolve translation key",
+        }),
+      ],
+    });
+
+    fireEvent.mouseEnter(screen.getByTestId(`${DECLARE_ID}-disabled-wrapper`));
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent("Résoudre");
+    expect(screen.getByRole("tooltip")).not.toHaveTextContent(
+      "Resolve translation key",
+    );
+  });
+
+  test("a click on a locked action with a reason does nothing", () => {
+    const onDeclare: MockFunction = getJestMockFunction();
+    const rendered: RenderedPanel = renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({
+          isDisabled: true,
+          tooltip: LOCKED_REASON,
+          onClick: onDeclare,
+        }),
+      ],
+    });
+
+    fireEvent.click(screen.getByTestId(`${DECLARE_ID}-disabled-wrapper`));
+    fireEvent.click(getButton(DECLARE_LABEL));
+
+    expect(onDeclare).not.toHaveBeenCalled();
+    expect(rendered.actionClicks).toEqual([]);
+  });
+
+  test("an enabled action ignores its tooltip and gets no wrapper", () => {
+    renderPanel({
+      secondaryActions: [makeSecondaryAction({ tooltip: LOCKED_REASON })],
+    });
+
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+
+    expect(screen.queryByTestId(`${DECLARE_ID}-disabled-wrapper`)).toBeNull();
+    expect(declare.parentElement).toBe(getActionGroup());
+    expect(declare).toBeEnabled();
+    expect(declare).toHaveAttribute("title", DECLARE_LABEL);
+    expect(declare).not.toHaveClass("pointer-events-none");
+  });
+
+  test.each([
+    ["titled", "Database latency"],
+    ["compact", undefined],
+  ])("works in the %s layout", (_layout: string, title: string | undefined) => {
+    const onDeclare: MockFunction = getJestMockFunction();
+
+    renderPanel({
+      title: title,
+      secondaryActions: [
+        makeSecondaryAction({ onClick: onDeclare }),
+        makeSecondaryAction({
+          id: "locked-secondary-btn",
+          label: "Locked",
+          isDisabled: true,
+          tooltip: LOCKED_REASON,
+        }),
+      ],
+    });
+
+    if (title) {
+      expect(
+        screen.getByRole("heading", { level: 2, name: title }),
+      ).toBeInTheDocument();
+    } else {
+      expect(
+        screen.queryByRole("heading", { level: 2 }),
+      ).not.toBeInTheDocument();
+    }
+
+    const group: HTMLElement = getActionGroup();
+    const declare: HTMLElement = getButton(DECLARE_LABEL);
+    const locked: HTMLElement = getButton("Locked");
+
+    expect(within(group).getAllByRole("button")).toEqual([
+      getButton("Acknowledge"),
+      getButton("Resolve"),
+      declare,
+      locked,
+      getMoreActionsTrigger(),
+    ]);
+    expect(
+      within(group).getByTestId("locked-secondary-btn-disabled-wrapper"),
+    ).toContainElement(locked);
+
+    fireEvent.click(declare);
+
+    expect(onDeclare).toHaveBeenCalledTimes(1);
+  });
+
+  test("keeps several secondary actions in caller order, each with its own handler", () => {
+    const onFirst: MockFunction = getJestMockFunction();
+    const onSecond: MockFunction = getJestMockFunction();
+    const onThird: MockFunction = getJestMockFunction();
+
+    const rendered: RenderedPanel = renderPanel({
+      secondaryActions: [
+        makeSecondaryAction({
+          id: "first-secondary-btn",
+          label: "First",
+          onClick: onFirst,
+        }),
+        makeSecondaryAction({
+          id: "second-secondary-btn",
+          label: "Second",
+          onClick: onSecond,
+          isDisabled: true,
+          tooltip: LOCKED_REASON,
+        }),
+        makeSecondaryAction({
+          id: "third-secondary-btn",
+          label: "Third",
+          onClick: onThird,
+        }),
+      ],
+    });
+
+    const group: HTMLElement = getActionGroup();
+    const first: HTMLElement = getButton("First");
+    const second: HTMLElement = getButton("Second");
+    const third: HTMLElement = getButton("Third");
+
+    expect(within(group).getAllByRole("button")).toEqual([
+      getButton("Acknowledge"),
+      getButton("Resolve"),
+      first,
+      second,
+      third,
+      getMoreActionsTrigger(),
+    ]);
+    expect(first).toHaveAttribute("id", "first-secondary-btn");
+    expect(second).toHaveAttribute("id", "second-secondary-btn");
+    expect(third).toHaveAttribute("id", "third-secondary-btn");
+
+    fireEvent.click(third);
+    fireEvent.click(second);
+    fireEvent.click(first);
+
+    expect(onFirst).toHaveBeenCalledTimes(1);
+    expect(onSecond).not.toHaveBeenCalled();
+    expect(onThird).toHaveBeenCalledTimes(1);
+    expect(onThird.mock.invocationCallOrder[0]!).toBeLessThan(
+      onFirst.mock.invocationCallOrder[0]!,
+    );
+    expect(rendered.actionClicks).toEqual([]);
+  });
+});