Material-ui initial setup (#19)

Beautify page using material-ui. This PR is mostly quick wins, broader changes will be done in subsequent PRs.
Orbitalize · Sep 8, 2023 · 807779b · 807779b
1 parent 36d30d0
commit 807779b
Show file tree

Hide file tree

Showing 8 changed files with 467 additions and 121 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ on:
   pull_request:
   push:
     tags:
-      - '*'
+      - "*"
 jobs:
   build_and_release:
     name: Build and Release
@@ -13,7 +13,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: '20.x'
+          node-version: "20.5"
       - name: Build
         run: scripts/build.sh
       - name: Release

diff --git a/reports/package.json b/reports/package.json
@@ -13,6 +13,11 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.5",
     "jsonpath": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/reports/src/App.css b/reports/src/App.css
@@ -41,13 +41,3 @@ th {
     background-color: dimgray;
   }
 }
-
-.detailOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  overflow: scroll;
-}
diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx
@@ -1,4 +1,12 @@
-import { Link } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
+import {
+  Breadcrumbs,
+  Button,
+  Link,
+  Dialog,
+  DialogContent,
+  Typography,
+} from "@mui/material";
 import { Capability, Check, Requirement } from "./capabilityTypes";
 import { useEffect, useState } from "react";
 import { useMatches } from "react-router-dom";
@@ -15,7 +23,7 @@ export const CheckLabel = ({
   name: string;
   docUrl?: string;
 }) => {
-  return docUrl ? <a href={docUrl}>{name}</a> : <>{name}</>;
+  return docUrl ? <Link href={docUrl}>{name}</Link> : <>{name}</>;
 };
 
 export const CheckRow = ({ check }: { check: Check }) => {
@@ -40,19 +48,21 @@ export const CheckRow = ({ check }: { check: Check }) => {
         {check.result === "pass" ? "PASS" : "FAIL"}
       </td>
       <td>
-        <button onClick={() => setShowDetails(true)}>Open</button>
-        {/* TODO: Beautify popup / move to a dedicated page */}
-        {showDetails && (
-          <div className="detailOverlay">
-            <div onClick={() => setShowDetails(false)}>
-              <i>Click anywhere to close.</i>
-              <h2>
-                {check.name} was evaluated in step {check.step.name}. Details:
-              </h2>
-              <pre>{JSON.stringify(check.details, null, 2)}</pre>
-            </div>
-          </div>
-        )}
+        <Button onClick={() => setShowDetails(true)}>Open</Button>
+        <Dialog
+          fullWidth
+          maxWidth="xl"
+          onClose={() => setShowDetails(false)}
+          open={showDetails}
+        >
+          <DialogContent>
+            <Typography variant="h2" gutterBottom>
+              {check.name} was evaluated in step {check.step.name}
+            </Typography>
+            <Typography>Details:</Typography>
+            <pre>{JSON.stringify(check.details, null, 2)}</pre>
+          </DialogContent>
+        </Dialog>
       </td>
     </tr>
   );
@@ -84,7 +94,7 @@ export const ChildCapabilityRow = ({
   return (
     <tr>
       <td colSpan={2}>
-        <Link to={path}>
+        <Link to={path} component={RouterLink}>
           {capability.name} ({capability.participant_id})
         </Link>
       </td>
@@ -139,7 +149,8 @@ export const CapabilityDebug = ({ capability }: { capability: Capability }) => {
 };
 
 type CrumbHandle = { crumb: () => ReactNode };
-function Breadcrumbs() {
+
+function CapabilityBreadcrumbs() {
   const matches = useMatches();
   const crumbs = matches
     // first get rid of any matches that don't have handle and crumb
@@ -150,16 +161,7 @@ function Breadcrumbs() {
     .map((match) => (match.handle as CrumbHandle).crumb())
     .reverse();
 
-  return (
-    <div>
-      {crumbs.map((crumb, index) => (
-        <span key={index}>
-          {crumb}
-          {index === crumbs.length - 1 ? "" : " <= "}
-        </span>
-      ))}
-    </div>
-  );
+  return <Breadcrumbs separator="<=">{crumbs}</Breadcrumbs>;
 }
 
 export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
@@ -168,7 +170,7 @@ export const CapabilityTable = ({ capability }: CapabilityTableProps) => {
   }
   return (
     <>
-      <Breadcrumbs />
+      <CapabilityBreadcrumbs />
       <table>
         <thead>
           <tr>

diff --git a/reports/src/capability/reportNavigation.tsx b/reports/src/capability/reportNavigation.tsx
@@ -1,4 +1,5 @@
-import { Link, RouteObject } from "react-router-dom";
+import { Link } from "@mui/material";
+import { Link as RouterLink, RouteObject } from "react-router-dom";
 import { Capability } from "./capabilityTypes";
 import { CapabilityTable } from "./CapabilityTable";
 
@@ -30,7 +31,11 @@ export const getNavFromCapability = (
     {
       path: path,
       handle: {
-        crumb: () => <Link to={fullPath}>{capability.name}</Link>,
+        crumb: () => (
+          <Link to={fullPath} component={RouterLink}>
+            {capability.name}
+          </Link>
+        ),
       },
       children: [
         {

diff --git a/reports/src/index.css b/reports/src/index.css
@@ -1,70 +1,7 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
 body {
-  margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid black;
-  padding: 0.3em 0.6em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: turquoise;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
diff --git a/reports/src/main.tsx b/reports/src/main.tsx
@@ -1,13 +1,20 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import { ErrorBoundary } from './utils/ErrorBoundary.tsx';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { ErrorBoundary } from "./utils/ErrorBoundary.tsx";
+import { CssBaseline } from "@mui/material";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ErrorBoundary>
-    <App />
+      <CssBaseline />
+      <App />
     </ErrorBoundary>
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);