diff --git a/src/Web/autopilot-monitor-web/app/progress/components/ProgressAccessHint.tsx b/src/Web/autopilot-monitor-web/app/progress/components/ProgressAccessHint.tsx index 2bc46fdf..bbbe3293 100644 --- a/src/Web/autopilot-monitor-web/app/progress/components/ProgressAccessHint.tsx +++ b/src/Web/autopilot-monitor-web/app/progress/components/ProgressAccessHint.tsx @@ -1,12 +1,25 @@ import { SUPPORT_EMAIL } from "@/lib/supportContact"; +import { DOCS_URL } from "@/utils/config"; import type { ProgressAccessHint as Hint } from "../hooks/progressAccessHint"; +export const ACCESS_HINT_DOCS_URL = `${DOCS_URL}/troubleshooting/progress-portal-only`; + +const LINK_CLASS = "text-green-700 underline hover:text-green-800"; + /** One muted line below the search telling a member without a role whom to ask for the full portal. */ export function ProgressAccessHint({ hint }: { hint: Hint }) { + const learnMore = ( + + Learn more + + ); + if (hint.kind === "member") { return (

{"Looking for the full portal? Your organization already uses Autopilot Monitor. Ask your Autopilot Monitor admin for a role."} + {" "} + {learnMore}

); } @@ -16,11 +29,13 @@ export function ProgressAccessHint({ hint }: { hint: Hint }) {

{`Looking for the full portal? Your organization signed up for Autopilot Monitor${signedUp}, but no device has been monitored recently. Ask your Autopilot Monitor admin for a role, or write to`} {" "} - + {SUPPORT_EMAIL} {" "} {"if no one looks after it anymore."} + {" "} + {learnMore}

); } diff --git a/src/Web/autopilot-monitor-web/app/progress/components/__tests__/ProgressAccessHint.test.ts b/src/Web/autopilot-monitor-web/app/progress/components/__tests__/ProgressAccessHint.test.ts index de4ba752..8ac2afea 100644 --- a/src/Web/autopilot-monitor-web/app/progress/components/__tests__/ProgressAccessHint.test.ts +++ b/src/Web/autopilot-monitor-web/app/progress/components/__tests__/ProgressAccessHint.test.ts @@ -1,8 +1,9 @@ import { describe, expect, it } from "vitest"; import { createElement } from "react"; import { renderToStaticMarkup } from "react-dom/server"; -import { ProgressAccessHint } from "../ProgressAccessHint"; +import { ACCESS_HINT_DOCS_URL, ProgressAccessHint } from "../ProgressAccessHint"; import { SUPPORT_EMAIL } from "@/lib/supportContact"; +import { DOCS_URL } from "@/utils/config"; const render = (hint: Parameters[0]["hint"]) => renderToStaticMarkup(createElement(ProgressAccessHint, { hint })); @@ -30,4 +31,14 @@ describe("ProgressAccessHint", () => { expect(html).toContain("signed up for Autopilot Monitor, but no device"); }); + + it("links both variants to the troubleshooting article, after a space", () => { + // The article's path is in the docs navigation; renaming it there breaks this link. + expect(ACCESS_HINT_DOCS_URL).toBe(`${DOCS_URL}/troubleshooting/progress-portal-only`); + for (const hint of [{ kind: "member" as const }, { kind: "unused" as const, signedUpOn: null }]) { + expect(render(hint)).toMatch( + new RegExp(`[.] ]*>Learn more`), + ); + } + }); });