Merge branch 'feat/ui-ux-validation-fixes' into develop

fabiendostie · fabiendostie · commit 8dc2c4b90ced · 2025-04-18T07:33:36.000-04:00
diff --git a/.babelrc.bckp b/.babelrc.bckp
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -12,15 +12,15 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Install pnpm
+        run: npm install -g pnpm
+
       - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'pnpm'
 
-      - name: Install pnpm
-        run: npm install -g pnpm
-
       - name: Install dependencies
         run: pnpm install
 
@@ -30,11 +30,14 @@ jobs:
       - name: Format check
         run: pnpm format --check || true
 
-      - name: Run unit tests
-        run: pnpm test
-
       - name: Build
         run: pnpm build
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run unit tests
+        run: pnpm test
+
       - name: Run Playwright e2e tests
-        run: pnpm e2e
+        run: pnpm test:e2e
diff --git a/app/api/schemas/route.ts b/app/api/schemas/route.ts
@@ -13,6 +13,7 @@ export async function GET() {
     }));
     return NextResponse.json({ schemas });
   } catch (error) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
+    const message = error instanceof Error ? error.message : String(error);
+    return NextResponse.json({ error: message }, { status: 500 });
   }
 }
diff --git a/components/code-editor.tsx b/components/code-editor.tsx
@@ -181,9 +181,10 @@ export default function CodeEditor({
         }
         /* Style for highlighted line */
         .editor-highlight-line {
-          background-color: rgba(56, 189, 248, 0.5) !important;
-          border-left: 4px solid #38bdf8 !important;
+          background-color: rgba(56, 189, 248, 0.15) !important; // much less opaque
+          border-left: 2px solid #38bdf8 !important;
           z-index: 10;
+          pointer-events: none; // allow editing even when highlighted
         }
       `}</style>
       <Editor
diff --git a/components/csv-validator.tsx b/components/csv-validator.tsx
@@ -856,8 +856,6 @@ export default function CsvValidator() {
                             onClick={handleUploadClick}
                             disabled={isLoadingSchemaContent || workerBusy || isLoadingCsv}
                             className={`w-8 h-8 flex items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed ${csvFileName ? 'border-green-400 bg-green-50/60 dark:bg-green-900/20' : ''}`}
-                            disabled={isLoadingSchemaContent || isValidatingCsv || isLoadingCsv}
-                            className={`w-8 h-8 flex items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed ${csvFileName ? 'border-green-400 bg-green-50/60 dark:bg-green-900/20' : ''}`}
                             tabIndex={0}
                             aria-label="Upload another CSV file"
                           >
@@ -869,8 +867,6 @@ export default function CsvValidator() {
                             onClick={handleUploadClick}
                             disabled={isLoadingSchemaContent || workerBusy || isLoadingCsv}
                             className={`w-28 h-10 flex flex-col items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed`}
-                            disabled={isLoadingSchemaContent || isValidatingCsv || isLoadingCsv}
-                            className={`w-28 h-10 flex flex-col items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed`}
                             tabIndex={0}
                           >
                             <Upload className="h-5 w-5 text-[#1e007d] dark:text-blue-300" />
@@ -1019,8 +1015,6 @@ export default function CsvValidator() {
                           onClick={handleUploadClick}
                           disabled={isLoadingSchemaContent || workerBusy || isLoadingCsv}
                           className={`w-8 h-8 flex items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed ${csvFileName ? 'border-green-400 bg-green-50/60 dark:bg-green-900/20' : ''}`}
-                          disabled={isLoadingSchemaContent || isValidatingCsv || isLoadingCsv}
-                          className={`w-8 h-8 flex items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed ${csvFileName ? 'border-green-400 bg-green-50/60 dark:bg-green-900/20' : ''}`}
                           tabIndex={0}
                           aria-label="Upload another CSV file"
                         >
@@ -1032,8 +1026,6 @@ export default function CsvValidator() {
                           onClick={handleUploadClick}
                           disabled={isLoadingSchemaContent || workerBusy || isLoadingCsv}
                           className={`w-28 h-10 flex flex-col items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed`}
-                          disabled={isLoadingSchemaContent || isValidatingCsv || isLoadingCsv}
-                          className={`w-28 h-10 flex flex-col items-center justify-center rounded border-2 border-dashed border-[#1e007d]/30 dark:border-zinc-600 bg-white/60 dark:bg-zinc-900/40 shadow-sm hover:shadow-lg transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:opacity-60 disabled:cursor-not-allowed`}
                           tabIndex={0}
                         >
                           <Upload className="h-5 w-5 text-[#1e007d] dark:text-blue-300" />
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -1,5 +1,9 @@
 module.exports = {
+  preset: 'ts-jest',
   testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[jt]sx?$': 'ts-jest',
+  },
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
   },
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.14.0",
     "@types/papaparse": "^5.3.15",
     "@types/react": "^19",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ export async function GET() {`
`13`	`13`	`}));`
`14`	`14`	`return NextResponse.json({ schemas });`
`15`	`15`	`} catch (error) {`
`16`		`- return NextResponse.json({ error: error.message }, { status: 500 });`
	`16`	`+ const message = error instanceof Error ? error.message : String(error);`
	`17`	`+ return NextResponse.json({ error: message }, { status: 500 });`
`17`	`18`	`}`
`18`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -181,9 +181,10 @@ export default function CodeEditor({`
`181`	`181`	`}`
`182`	`182`	`/* Style for highlighted line */`
`183`	`183`	`.editor-highlight-line {`
`184`		`- background-color: rgba(56, 189, 248, 0.5) !important;`
`185`		`- border-left: 4px solid #38bdf8 !important;`
	`184`	`+ background-color: rgba(56, 189, 248, 0.15) !important; // much less opaque`
	`185`	`+ border-left: 2px solid #38bdf8 !important;`
`186`	`186`	`z-index: 10;`
	`187`	`+ pointer-events: none; // allow editing even when highlighted`
`187`	`188`	`}`
`188`	`189`	`}</style>
`189`	`190`	`<Editor`