chore: streamline E2E report (#2489)

* Streamline & simplify E2E report

* chore: format with prettier

* chore: SVG badge, responsive design, data util

* chore: format with prettier

* chore: add copy badge button

* chore: badge - consts, smaller, get host name

* chore: review notes + tweaks

* nicer shortening of long test names/reasons
* show tooltip for long text

* Update stats.js

---------

Co-authored-by: Philippe Serhal <[email protected]>

Author: eladroz

Diff for: e2e-report/app/badge/route.js

@@ -0,0 +1,47 @@
+import { ImageResponse } from 'next/og'
+import testData from '@/utils/data'
+import { badgeSettings, badgeSize } from '@/utils/consts'
+
+export const dynamic = 'force-static'
+
+const labelStyle = {
+  background: 'linear-gradient(#2e51ed, #316bf4)',
+  color: 'white',
+}
+
+const bgStyles = {
+  ok: { background: 'linear-gradient(to bottom, #22c55e, #86efac)' },
+  warning: { background: 'linear-gradient(to bottom, #ca8a04, #fef08a)' },
+  error: { background: 'linear-gradient(to bottom, #dc2626, #f87171)', color: 'white' },
+}
+
+// Generate an SVG badge with test status and target Next.js version
+export async function GET(request) {
+  const valueStyle =
+    bgStyles[testData.failed === 0 ? 'ok' : testData.unknownFailuresCount > 0 ? 'error' : 'warning']
+
+  const badge = (
+    <Badge
+      label={badgeSettings.label}
+      labelStyle={labelStyle}
+      value={testData.nextVersion}
+      valueStyle={valueStyle}
+    />
+  )
+  return new ImageResponse(badge, {
+    ...badgeSettings.imageSize,
+  })
+}
+
+function Badge({ label, labelStyle, value, valueStyle }) {
+  return (
+    <div tw="flex items-center w-full h-full text-[26px] rounded-md overflow-hidden bg-transparent">
+      <span tw="items-center h-full p-3.5" style={labelStyle}>
+        {label}
+      </span>
+      <span tw="items-center h-full flex-grow justify-center" style={valueStyle}>
+        {value}
+      </span>
+    </div>
+  )
+}

Diff for: e2e-report/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: Mulish;
+    src: url(/MulishVar-latin.woff2) format('woff2');
+    unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A,
+      U+D7, U+2019, U+201C, U+201D;
+    font-weight: 200 900;
+    font-display: swap;
+  }
+}
+
+@layer components {
+  .table.issues-table :where(td) {
+    @apply py-1.5;
+  }
+
+  .table.issues-table :where(td:nth-last-child(-n + 4)) {
+    @apply text-center p-1 md:p-4;
+  }
+
+  .table.issues-table :where(td:nth-last-child(-n + 3)) {
+    @apply text-neutral-content;
+  }
+
+  .stat-value {
+    @apply font-bold;
+    @apply text-3xl;
+  }
+}