Rebuild Proposal Wizard 2.0

.github/workflows/code.yml

@@ -24,6 +24,10 @@ jobs:
             skip-build: true
           - command: build
             skip-build: true
+          - command: test
+            skip-build: true
+            # The cross-repo contract suite requires a sibling server checkout.
+            args: --exclude "tests/e2e/**" --exclude tests/api/cross-repo-contract.test.js
 
       fail-fast: false
 
@@ -42,7 +46,37 @@ jobs:
         with:
           skip-yarn-build: ${{ matrix.mode.skip-build }}
 
-      - run: yarn ${{ matrix.mode.command }}
+      - run: yarn ${{ matrix.mode.command }} ${{ matrix.mode.args }}
+
+  playwright:
+    name: playwright
+    runs-on: ubuntu-24.04
+    timeout-minutes: 25
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - uses: ./.github/actions/setup
+        with:
+          skip-yarn-build: true
+
+      - name: Install Chromium
+        run: yarn playwright install --with-deps chromium
+
+      - name: Run proposal journeys
+        run: yarn test:e2e
+
+      - name: Upload browser artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: proposal-wizard-playwright
+          path: test-results/playwright
+          if-no-files-found: ignore
 
   check-cache:
     name: Cache integrity check

.gitignore

@@ -21,6 +21,8 @@ node_modules
 # production
 dist
 storybook-static
+playwright-report
+test-results
 
 # ts
 *.tsbuildinfo

package.json

@@ -9,6 +9,7 @@
     "build": "rsbuild build",
     "preview": "rsbuild preview",
     "test": "RSTEST=1 rstest",
+    "test:e2e": "playwright test",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "prettier:check": "prettier --list-different .",
     "prettier:fix": "prettier --write ."
@@ -18,6 +19,12 @@
     "@polkadot/util": "^14.0.1",
     "@polkadot/util-crypto": "^14.0.1",
     "@radix-ui/react-slot": "^1.2.4",
+    "@tiptap/core": "^3.28.0",
+    "@tiptap/extension-link": "^3.28.0",
+    "@tiptap/markdown": "^3.28.0",
+    "@tiptap/pm": "^3.28.0",
+    "@tiptap/react": "^3.28.0",
+    "@tiptap/starter-kit": "^3.28.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.554.0",
@@ -29,6 +36,7 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@rsbuild/core": "^1.6.6",
     "@rsbuild/plugin-react": "^1.4.2",
     "@rstest/core": "^0.7.9",

playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  outputDir: "./test-results/playwright",
+  fullyParallel: false,
+  retries: 0,
+  reporter: "line",
+  use: {
+    baseURL: "http://127.0.0.1:4189",
+    colorScheme: "dark",
+    reducedMotion: "reduce",
+    screenshot: "only-on-failure",
+    trace: "retain-on-failure",
+  },
+  webServer: {
+    command: "yarn dev --host 127.0.0.1 --port 4189",
+    url: "http://127.0.0.1:4189",
+    reuseExistingServer: true,
+    timeout: 120_000,
+  },
+});

rstest.config.ts

@@ -19,6 +19,7 @@ const rstestServerPlugin = (): RsbuildPlugin => ({
 });
 
 export default defineConfig({
+  exclude: ["tests/e2e/**"],
   testMatch: ["tests/**/*.test.js"],
   environment: "node",
   browser: { enabled: false },

src/app/AppSidebar.css

@@ -442,7 +442,7 @@
     padding: 0.95rem 1rem;
     border-right: 0;
     border-bottom: 1px solid var(--sidebar-border);
-    overflow: visible;
+    overflow: clip;
   }
 
   .sidebar__brand {

src/app/MainAtmosphere.css

@@ -3,7 +3,7 @@
   inset: 0 0 0 var(--app-sidebar-width, 260px);
   z-index: 0;
   pointer-events: none;
-  overflow: hidden;
+  overflow: clip;
   contain: paint;
 }
 

src/components/AttachmentList.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 
+import { safeExternalHref } from "@/lib/safeExternalHref";
 import { cn } from "@/lib/utils";
 import { Surface } from "@/components/Surface";
 
@@ -29,34 +30,37 @@ export function AttachmentList({
     >
       <p className="text-sm font-semibold">{title}</p>
       <ul className="space-y-2 text-sm text-muted">
-        {items.map((file) => (
-          <Surface
-            key={file.id}
-            as="li"
-            variant="panel"
-            radius="xl"
-            shadow="control"
-            className="flex items-center justify-between gap-3 px-3 py-2"
-          >
-            <span className="min-w-0 flex-1 [overflow-wrap:anywhere] break-words">
-              {file.title}
-            </span>
-            {file.href ? (
-              <a
-                href={file.href}
-                target="_blank"
-                rel="noreferrer"
-                className="shrink-0 text-sm font-semibold text-primary"
-              >
-                {file.actionLabel ?? "View"}
-              </a>
-            ) : (
-              <span className="shrink-0 text-sm font-semibold text-muted">
-                {file.actionLabel ?? "Attached"}
+        {items.map((file) => {
+          const href = file.href ? safeExternalHref(file.href) : null;
+          return (
+            <Surface
+              key={file.id}
+              as="li"
+              variant="panel"
+              radius="xl"
+              shadow="control"
+              className="flex items-center justify-between gap-3 px-3 py-2"
+            >
+              <span className="min-w-0 flex-1 [overflow-wrap:anywhere] break-words">
+                {file.title}
               </span>
-            )}
-          </Surface>
-        ))}
+              {href ? (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="shrink-0 text-sm font-semibold text-primary"
+                >
+                  {file.actionLabel ?? "View"}
+                </a>
+              ) : (
+                <span className="shrink-0 text-sm font-semibold text-muted">
+                  {file.actionLabel ?? "Attached"}
+                </span>
+              )}
+            </Surface>
+          );
+        })}
       </ul>
     </Surface>
   );