update tests/reports page with rd and styles

gridaco · Jun 17, 2023 · 1e192b0 · 1e192b0
1 parent 4eb8e11
commit 1e192b0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/editor/pages/_app.tsx b/editor/pages/_app.tsx
@@ -13,7 +13,6 @@ function GlobalCss() {
     <Global
       styles={css`
         html {
-          background-color: ${colors.color_editor_bg_on_dark};
           touch-action: none;
         }
       `}

diff --git a/editor/pages/tests/reports/index.tsx b/editor/pages/tests/reports/index.tsx
@@ -2,31 +2,53 @@ import Head from "next/head";
 import React from "react";
 import { Client } from "@codetest/editor-client";
 import Link from "next/link";
+import styled from "@emotion/styled";
+import { ArchiveIcon } from "@radix-ui/react-icons";
 
 export default function QAFilesPage({ files }) {
   return (
     <>
       <Head>
-        <title>QA - Files</title>
+        <title>@codetest/reports</title>
       </Head>
-      <main>
-        <h1>QA - Files</h1>
+      <main
+        style={{
+          fontFamily: "monospace",
+          margin: "auto",
+          marginTop: 120,
+          width: 400,
+        }}
+      >
+        <h1>
+          <code>@codetest/reports</code>
+        </h1>
+        <p>
+          reports coverage generated by <code>@codetest/reports</code> (locally)
+          will be listed here
+        </p>
         <div
           style={{
             display: "flex",
             flexDirection: "column",
+            gap: 8,
           }}
         >
           {files.map((file) => (
             <Link
               href={{
-                pathname: `/test/reports/[key]`,
+                pathname: `/tests/reports/[key]`,
                 query: {
                   key: file,
                 },
               }}
             >
-              <a>{file}</a>
+              <Row>
+                <a href={file}>
+                  <ArchiveIcon />
+                  <div style={{ width: 8 }} />
+                  reports/{file}
+                </a>
+              </Row>
             </Link>
           ))}
         </div>
@@ -35,6 +57,23 @@ export default function QAFilesPage({ files }) {
   );
 }
 
+const Row = styled.div`
+  cursor: pointer;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 4;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  a {
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+`;
+
 export async function getServerSideProps(context: any) {
   const client = Client({
     baseURL: "http://localhost:6627",
@@ -50,7 +89,10 @@ export async function getServerSideProps(context: any) {
     };
   } catch (e) {
     return {
-      notFound: true,
+      redirect: {
+        destination: "/tests/reports/how-to-setup",
+        permanent: false,
+      },
     };
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,6 @@ function GlobalCss() { @@
         <Global
           styles={css`
             html {
-              background-color: ${colors.color_editor_bg_on_dark};
               touch-action: none;
             }
           `}
@@ Expand Down @@