From 051c1237d5d8fd00732f7d998318be95b0451ae2 Mon Sep 17 00:00:00 2001 From: TurtleWolfe Date: Tue, 5 May 2026 17:39:58 +0000 Subject: [PATCH] =?UTF-8?q?fix(setup-banner):=20#24=20=E2=80=94=20name=20e?= =?UTF-8?q?nv=20vars=20in=20copy,=20fix=20docsUrl,=20document=20auto-banne?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The SetupBanner component already shipped (5-file pattern, consent-aware, auto-detects via isSupabaseConfigured()). #24 closes by improving three small clarity gaps the audit identified at docs/interoffice/audits/ 2026-05-02-supabase-banner-audit.md: 1. Default message named the env vars to set. Fork users seeing "Supabase is not configured. Some features may be unavailable." couldn't tell which two NEXT_PUBLIC_* vars to populate. New copy: "Supabase is not configured: set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in your .env file." 2. Default docsUrl points at the actual setup guide. Was pointing at github.com/.../ScriptHammer#supabase-setup — a non-existent README anchor. Now points at docs/FORKING.md#supabase-setup, which exists and is the canonical setup walkthrough. 3. docs/FORKING.md mentions the auto-banner. Added a paragraph at the top of the Supabase Setup section explaining the banner is intentional, auto-disappears once env vars are populated, and is dismissible. Fork users were arriving at FORKING.md with no indication that the yellow alert wasn't a bug. Tests: kept the existing default-prop test (URL match updated to new href). Added a regression pin asserting both env-var names appear in the default message, so a future copy refactor can't drop one. Verification: - pnpm run type-check: clean - pnpm run lint: clean - pnpm test: 3248/3248 pass (one new regression test) Closes #24 Refs: PRP at docs/prp-docs/supabase-banner-clarity-prp.md (Option A chosen for docsUrl — direct link to FORKING.md, no README change) Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/FORKING.md | 2 ++ src/components/SetupBanner/SetupBanner.test.tsx | 13 ++++++++++++- src/components/SetupBanner/SetupBanner.tsx | 4 ++-- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/docs/FORKING.md b/docs/FORKING.md index 57ed1cb3..37d4ee25 100644 --- a/docs/FORKING.md +++ b/docs/FORKING.md @@ -158,6 +158,8 @@ The deployment automatically detects your repository name and sets the correct b ## Supabase Setup +While Supabase env vars are unset, you'll see a yellow "Setup required" banner on every page of the running app. This is intentional — it disappears automatically once `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` are populated. The banner is also dismissible via the × button if you want to focus on non-Supabase features first. + ### 1. Create Supabase Project 1. Go to [supabase.com](https://supabase.com) and create a new project diff --git a/src/components/SetupBanner/SetupBanner.test.tsx b/src/components/SetupBanner/SetupBanner.test.tsx index 6e07c49f..1d6d953b 100644 --- a/src/components/SetupBanner/SetupBanner.test.tsx +++ b/src/components/SetupBanner/SetupBanner.test.tsx @@ -61,10 +61,21 @@ describe('SetupBanner', () => { const link = screen.getByText('View setup guide'); expect(link).toHaveAttribute( 'href', - 'https://github.com/TortoiseWolfe/ScriptHammer#supabase-setup' + 'https://github.com/TortoiseWolfe/ScriptHammer/blob/main/docs/FORKING.md#supabase-setup' ); }); + it('should name both required env vars in default message', () => { + // Fork users seeing the banner need to know exactly which two + // NEXT_PUBLIC_* vars to populate. Pin both names so a future copy + // refactor doesn't drop one. + render(); + expect(screen.getByText(/NEXT_PUBLIC_SUPABASE_URL/)).toBeInTheDocument(); + expect( + screen.getByText(/NEXT_PUBLIC_SUPABASE_ANON_KEY/) + ).toBeInTheDocument(); + }); + it('should render setup guide link with custom URL', () => { render(); diff --git a/src/components/SetupBanner/SetupBanner.tsx b/src/components/SetupBanner/SetupBanner.tsx index f0a56d1c..5597d087 100644 --- a/src/components/SetupBanner/SetupBanner.tsx +++ b/src/components/SetupBanner/SetupBanner.tsx @@ -20,8 +20,8 @@ const STORAGE_KEY = 'supabase_setup_banner_dismissed'; * Auto-detects Supabase configuration status when show prop is not provided. */ export function SetupBanner({ - message = 'Supabase is not configured. Some features may be unavailable.', - docsUrl = 'https://github.com/TortoiseWolfe/ScriptHammer#supabase-setup', + message = 'Supabase is not configured: set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in your .env file.', + docsUrl = 'https://github.com/TortoiseWolfe/ScriptHammer/blob/main/docs/FORKING.md#supabase-setup', show, }: SetupBannerProps) { const [isDismissed, setIsDismissed] = useState(true); // Start hidden to avoid flash