test: add diagnostic layout without BCGov components to isolate CSP violations

- Create LayoutTest.tsx without Header/Footer from BCGov design-system
- Temporarily switch __root.tsx to use LayoutTest
- This will help us identify if BCGov components are the source of inline styles
- If violations disappear, we know BCGov is the culprit
- If violations persist, the source is elsewhere (likely react-aria-components)

Author: DerekRoberts

CSP_FIX_PLAN.md

@@ -0,0 +1,87 @@
+# CSP Fix Plan - Systematic Approach
+
+## Problem
+58 CSP violations from inline styles in `index-*.js:10`. We've removed react-bootstrap but violations persist.
+
+## Root Cause Analysis Plan
+
+### Step 1: Identify the Source
+The errors point to `index-Bf2rhuza.js:10`. We need to:
+1. **Build locally and inspect the bundle**
+   - Build: `cd frontend && npm run build`
+   - Search the built JS file for `.style` or `setProperty` calls
+   - Identify which library/component is generating inline styles
+
+### Step 2: Likely Culprits (Priority Order)
+
+#### A. react-aria-components
+- **Why**: Used by BCGov design-system, known to use inline styles
+- **Check**: Search for `style=` or `style.setProperty` in react-aria-components source
+- **Fix**: If confirmed, we need to either:
+  - Patch react-aria-components to not use inline styles
+  - Find a CSP-compliant alternative
+  - Use a CSP proxy/interceptor to convert inline styles to classes
+
+#### B. BCGov Design System Components
+- **Why**: Header/Footer might internally use components that inject styles
+- **Check**: Inspect the built BCGov bundle for inline style usage
+- **Fix**: Work with BCGov team or patch the fork
+
+#### C. Bootstrap JavaScript (if we're using it)
+- **Why**: Bootstrap JS sometimes injects inline styles for modals/tooltips
+- **Check**: We're NOT importing Bootstrap JS (good!), but verify
+- **Fix**: Not applicable (we don't use Bootstrap JS)
+
+### Step 3: Immediate Diagnostic Actions
+
+1. **Create a minimal test page** without BCGov components
+   - Temporarily remove Header/Footer
+   - Check if violations go away
+   - This isolates whether BCGov components are the source
+
+2. **Build and inspect the bundle**
+   - Run: `cd frontend && npm run build`
+   - Open `dist/index-*.js` in editor
+   - Search for: `style=`, `.style`, `setProperty`, `style-src`
+   - Look at line 10 or nearby for style manipulation
+
+3. **Browser console inspection**
+   - Open the deployed site
+   - In console, expand one of the CSP errors
+   - Click the file link to see source mapping
+   - Identify the actual component/library causing it
+
+### Step 4: Fix Strategy
+
+#### Option A: If react-aria-components is the problem
+1. Create a Vite plugin to intercept and convert inline styles to CSS classes
+2. OR: Fork/patch react-aria-components to not use inline styles
+3. OR: Replace BCGov components that use react-aria-components
+
+#### Option B: If BCGov components are the problem
+1. Check our fork - are we using the right branch?
+2. Inspect the built BCGov bundle in `/tmp/bcgov-design-system/packages/react-components/dist/`
+3. Search for inline style usage
+4. Fix in our fork and test
+
+#### Option C: Runtime style interceptor (temporary)
+1. Create a script that runs before React renders
+2. Intercepts `element.style.setProperty` calls
+3. Converts them to CSS classes dynamically
+4. This is a workaround, not a permanent fix
+
+## Next Immediate Steps
+
+1. **Build locally and inspect**
+   ```bash
+   cd frontend
+   npm run build
+   grep -r "\.style\|setProperty" dist/
+   ```
+
+2. **Create minimal test** - Remove Header/Footer temporarily to isolate
+
+3. **Check browser source maps** - Use devtools to find exact source
+
+4. **Report findings** - Once we identify the source, we can fix it properly
+

frontend/src/components/LayoutTest.tsx

@@ -0,0 +1,36 @@
+import type { FC } from 'react'
+// TEMPORARY: Commented out to test if BCGov components cause CSP violations
+// import { Footer, Header } from '@bcgov/design-system-react-components'
+import { Link } from '@tanstack/react-router'
+
+type Props = {
+  children: React.ReactNode
+}
+
+const LayoutTest: FC<Props> = ({ children }) => {
+  return (
+    <div className="d-flex flex-column min-vh-100">
+      {/* TEMPORARY: Simplified header to test CSP violations */}
+      <header className="bg-dark text-white p-3">
+        <div className="d-flex justify-content-between align-items-center">
+          <h1 className="h5 mb-0">QuickStart OpenShift (Test Mode - No BCGov Components)</h1>
+          <Link to="/">
+            <button type="button" className="btn btn-light btn-sm">
+              <i className="bi bi-house-door-fill" />
+            </button>
+          </Link>
+        </div>
+      </header>
+      <div className="d-flex flex-grow-1 align-items-start justify-content-center mt-5 mb-5 ml-1 mr-1">
+        {children}
+      </div>
+      {/* TEMPORARY: Simplified footer */}
+      <footer className="bg-dark text-white p-3 text-center">
+        <small>Test Footer - BCGov components removed</small>
+      </footer>
+    </div>
+  )
+}
+
+export default LayoutTest
+

frontend/src/routes/__root.tsx

@@ -1,12 +1,14 @@
 import { createRootRoute, ErrorComponent, Outlet } from '@tanstack/react-router'
-import Layout from '@/components/Layout'
+// TEMPORARY: Using LayoutTest to isolate CSP violations
+import LayoutTest from '@/components/LayoutTest'
+// import Layout from '@/components/Layout'
 import NotFound from '@/components/NotFound'
 
 export const Route = createRootRoute({
   component: () => (
-    <Layout>
+    <LayoutTest>
       <Outlet />
-    </Layout>
+    </LayoutTest>
   ),
   notFoundComponent: () => <NotFound />,
   errorComponent: ({ error }) => <ErrorComponent error={error} />,