feat(setup): center onboarding and add secure token help

2026-09-19 18:22:25 +12:00
parent 5fa5d45535
commit 4aba89c063
8 changed files with 218 additions and 28 deletions
@@ -0,0 +1,60 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import SetupTokenHelp from "./SetupTokenHelp";
+import { copySetupTokenCommand, SETUP_TOKEN_COMMAND } from "./setup-token-help";
+
+describe("setup token console help", () => {
+  it("copies only the retrieval command when clipboard access succeeds", async () => {
+    const clipboard = { writeText: vi.fn().mockResolvedValue(undefined) };
+    const commandField = { focus: vi.fn(), select: vi.fn() };
+
+    expect(await copySetupTokenCommand(clipboard, commandField)).toBe("copied");
+    expect(clipboard.writeText).toHaveBeenCalledExactlyOnceWith("python -m app.container_bootstrap setup-token");
+    expect(commandField.select).not.toHaveBeenCalled();
+  });
+
+  it("selects the command for manual copying when LAN HTTP has no clipboard API", async () => {
+    const commandField = { focus: vi.fn(), select: vi.fn() };
+
+    expect(await copySetupTokenCommand(undefined, commandField)).toBe("selected");
+    expect(commandField.focus).toHaveBeenCalledOnce();
+    expect(commandField.select).toHaveBeenCalledOnce();
+  });
+
+  it("offers manual copying instead of reporting success when clipboard permission is denied", async () => {
+    const clipboard = { writeText: vi.fn().mockRejectedValue(new Error("Clipboard permission denied")) };
+    const commandField = { focus: vi.fn(), select: vi.fn() };
+
+    expect(await copySetupTokenCommand(clipboard, commandField)).toBe("selected");
+    expect(commandField.focus).toHaveBeenCalledOnce();
+    expect(commandField.select).toHaveBeenCalledOnce();
+  });
+
+  it("does not claim a selection or successful copy if the command field is unavailable", async () => {
+    expect(await copySetupTokenCommand(undefined, null)).toBe("manual");
+  });
+
+  it("provides labelled native dialog controls and the managed and manual retrieval instructions", () => {
+    const html = renderToStaticMarkup(<SetupTokenHelp />);
+
+    expect(html).toContain('aria-haspopup="dialog"');
+    expect(html).toContain('aria-controls="setup-token-help"');
+    expect(html).toContain('<dialog id="setup-token-help"');
+    expect(html).toContain('aria-labelledby="setup-token-help-title"');
+    expect(html).toContain('aria-describedby="setup-token-help-description"');
+    expect(html).toContain('for="setup-token-command"');
+    expect(html).toMatch(/readonly=""/i);
+    expect(html).toContain('role="status"');
+    expect(html).toContain("Portainer");
+    expect(html).toContain("/bin/ash");
+    expect(html).toContain("<code>magent</code>");
+    expect(html).toContain(SETUP_TOKEN_COMMAND);
+    expect(html).toContain("<code>SETUP_TOKEN</code>");
+    expect(html).not.toContain('type="submit"');
+    expect(html).not.toContain("Command copied.");
+  });
+
+  it("can disable the help trigger while account creation is busy", () => {
+    expect(renderToStaticMarkup(<SetupTokenHelp disabled />)).toMatch(/<button[^>]*disabled=""[^>]*aria-haspopup/);
+  });
+});