Schreiaj/blank main page (#221)

* Add root page with structure in place.

Added playwright tests to ensure behavior
Updated dev docker image to support playwright which required moving to
a Debian based base image (Alpine linux base image
is smaller but doesn't work well with Chrome runner because Chrome
doesn't publish a precompiled package for it in Alpine)

* Remove inline styles

Remove commented out code

* Update Playwright tests to work in CI

Parameterize baseURL so we can just work with internal routes

OCR/dev-env.yaml

@@ -15,8 +15,9 @@ services:
       dockerfile: dev-dockerfile
     ports:
       - "5173:5173"
+      - "8080:8080"
     volumes:
       - ./frontend:/app
     restart: no
-    command: "/bin/sh -c 'npm install && npm run dev -- --host'" 
+    command: "/bin/sh -c 'npm install && npx playwright install && npx playwright test --ui-port=8080 --ui-host=0.0.0.0 & npm run dev -- --host'" 
 

OCR/frontend/dev-dockerfile

@@ -1,12 +1,9 @@
-FROM node:20.17.0-alpine3.20
-
-RUN apk add --update nodejs npm
-
-
+FROM node:20.17.0
 COPY . /app
 
 WORKDIR /app
 RUN npm install 
+RUN npx playwright install --with-deps
 
-EXPOSE 5173
+EXPOSE 5173 8080
 CMD npm run dev -- --host

OCR/frontend/e2e/App.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+import {Simulate} from "react-dom/test-utils";
+import click = Simulate.click;
+
+test('has STLT Name', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page.getByText('Demo STLT')).toBeVisible()
+});
+
+test('has new template button', async ({ page , baseURL}) => {
+    await page.goto('/');
+    await expect(page.getByRole('button', { name: '+ New Template' })).toBeVisible()
+    await page.getByRole('button', { name: '+ New Template' }).click()
+    expect(page.url()).toEqual(`${baseURL}/new-template/upload`)
+
+});

OCR/frontend/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",

OCR/frontend/playwright.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'http://localhost:5173',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -70,9 +70,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'npm run build && npm run preview -- --host',
+    url: 'http://127.0.0.1:5173',
+    reuseExistingServer: !process.env.CI,
+  },
 });

OCR/frontend/src/App.scss

@@ -2,44 +2,20 @@
   max-width: 100vw;
   width: 100vw;
   height: 100vh;
-  margin: 0 auto;
-  padding: 0;
-  text-align: center;
-  background-color: --background-lighter-blue;
+  //margin: 0 auto;
+  //padding: 0;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.bg-idwa-light {
+  background-color: #f5fbff
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.flex-gap-1 {
+  gap: 1rem;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.maxw-30 {
+  max-width: 30rem;
 }
 
-.card {
-  padding: 2em;
-}
 
-.read-the-docs {
-  color: #888;
-}

OCR/frontend/src/App.tsx

@@ -1,37 +1,52 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import {useState} from 'react'
 import './App.scss'
-import { Button } from '@trussworks/react-uswds'
+import {Button, Link, SideNav} from "@trussworks/react-uswds";
+import {useLocation, useNavigate, useNavigation} from "react-router-dom";
 
+import {AppHeader} from "./components/AppHeader/AppHeader.tsx";
+import dataLinkLogo from "./assets/datalink_placeholder_logo.svg";
+import extractImage from "./assets/extract_image.svg"
 function App() {
-  const [count, setCount] = useState(0)
+    const {pathname} = useLocation()
+    const navigate = useNavigate()
+    const navLinks = [
+        {text: "Annotate and Extract", url: "/annotate"},
+        {text: "Label Management", url: "/labels"},
+        {text: "Dashboard", url: "/"}
+    ]
 
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-      <Button type="button">Click Me</Button>
-    </>
-  )
+
+    return (
+        <>
+            <div className='display-flex flex-column width-full height-full'>
+                <AppHeader jurisdiction={`Demo STLT`}/>
+                <div className="display-flex flex-row height-full">
+                    <div
+                        className="flex-3 padding-top-1 padding-left-1 padding-right-4 minw-15 usa-dark-background bg-primary-dark text-base-lightest display-flex flex-column flex-gap-1 maxw-30"
+                        >
+                        <div className='display-flex flex-column flex-align-start padding-top-2'>
+                            {navLinks.map((i, idx) => {
+                                return <Link key={idx} href={i.url}
+                                             className={`border-left-2px padding-left-1 padding-top-2 padding-bottom-2 ${i.url === pathname ? 'text-bold' : 'border-primary-dark'}`}>{i.text}</Link>
+                            })}
+                        </div>
+                    </div>
+                    <div className="flex-10 display-flex flex-column">
+                        <h2 className="padding-left-2">Annotate and Extract</h2>
+                        <div className=" flex-1 padding-left-2  padding-right-2 bg-idwa-light" >
+                            <p><span className="text-bold">Welcome Blake, </span></p>
+                            <p>Extract data from any PDFs, or images to send to your surveillance systems using data from your saved templates or create new segmentations.</p>
+                            <img className="display-block margin-left-auto margin-right-auto padding-top-8"  src={extractImage} alt="Extract From Documents"/>
+                            <p className="text-bold text-center">You have no segmentation templates set up yet. The templates will be used to extract data for your lab forms.</p>
+                            <Button type="button" className="usa-button display-flex flex-align-center margin-left-auto margin-right-auto" onClick={() => navigate("/new-template/upload")}>+ New Template</Button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </>
+    )
 }
 
 export default App

OCR/frontend/src/components/AppHeader/AppHeader.scss

@@ -0,0 +1,4 @@
+
+.flex-gap-half {
+  gap: 0.5rem;
+}

OCR/frontend/src/components/AppHeader/AppHeader.tsx

@@ -0,0 +1,52 @@
+import {FC} from "react";
+import {Button, Icon, Header} from "@trussworks/react-uswds";
+
+import './AppHeader.scss'
+import dataLinkLogo from '../../assets/datalink_placeholder_logo.svg';
+import {useNavigate} from "react-router-dom";
+
+interface IndexHeaderProps {
+    jurisdiction: string
+}
+
+export const AppHeader: FC<IndexHeaderProps> = ({jurisdiction}: IndexHeaderProps) => {
+    const navigate = useNavigate()
+    return (
+        <>
+            <Header basic={true} role={`banner`}
+                    className='header width-full display-flex flex-row flex-justify-start bg-primary-darker padding-1 padding-left-4 padding-right-4 text-base-lightest flex-gap-half'
+            >
+                <div className="display-flex flex-justify-center">
+                    <Button unstyled type="button" onClick={() => navigate("/")}>
+                        <img
+                            className='width-3'
+                            src={dataLinkLogo}
+                            alt={`IDWA`}
+                        />
+                    </Button>
+                </div>
+                <div className='text-bold font-ui-md  display-flex flex-align-center'>
+                    Datalink
+                </div>
+                <div className='padding-left-1 display-flex flex-align-center'>{jurisdiction}</div>
+                <div className='flex-align-end flex-justify-end flex-1'></div>
+                <div className=" display-flex flex-justify-center">
+                    <a>
+                        Log Out
+                    </a>
+                </div>
+                <div className="display-flex flex-justify-center">
+                    <a>
+                        <Icon.Person className={`text-base-lightest usa-icon--size-3`}/>
+                    </a>
+                </div>
+                <div className="display-flex flex-justify-center">
+                    <a>
+                        <Icon.Settings className={`text-base-lightest usa-icon--size-3`}/>
+                    </a>
+                </div>
+
+            </Header>
+        </>
+    )
+}

OCR/frontend/vite.config.ts

@@ -14,6 +14,9 @@ export default defineConfig({
       '**/e2e/**',
     ],
   },
+  preview: {
+    port: 5173,
+  },
   css: {
     preprocessorOptions: {
       scss: {