Rewrite for console

.dockerignore

@@ -0,0 +1,5 @@
+.env
+.git
+node_modules
+dist
+.yarn

.env.example

@@ -0,0 +1,24 @@
+# Copy to .env to override compose defaults. Every value here has a working default,
+# so the stack runs with no .env at all.
+
+# Ports published on the host. Change these if something already holds them.
+TRAEFIK_HTTP_PORT=88
+TRAEFIK_DASHBOARD_PORT=8088
+API_EXTERNAL_PORT=3005
+POSTGRES_EXTERNAL_PORT=5433
+TEST_POSTGRES_EXTERNAL_PORT=5444
+KEYCLOAK_EXTERNAL_PORT=8280
+
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=psql
+POSTGRES_DB=postgres
+
+KEYCLOAK_ADMIN=admin
+KEYCLOAK_ADMIN_PASSWORD=admin
+
+DEPLOYMENT=dev
+LOG_LEVEL=info,deepreefmap_api=debug
+
+# Off by default locally so repeated enrolment attempts while testing the desktop
+# sync path do not trip the per-IP limiter.
+DISABLE_RATE_LIMITING=true

.github/workflows/publish-container.yml

@@ -32,7 +32,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v7
 
       # Install the cosign tool
       # https://github.com/sigstore/cosign-installer

.github/workflows/test.yml

@@ -0,0 +1,119 @@
+name: CI
+
+on: [push, pull_request]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+env:
+  # Mirrors node:22.23.2-alpine in both Dockerfiles.
+  NODE_VERSION: '22.23.2'
+
+jobs:
+  checks:
+    name: type-check, lint, format, build
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Check out ui repository
+        uses: actions/checkout@v7
+
+      - name: Set up Node
+        uses: actions/setup-node@v7
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      # After setup-node, so the shims land on the Node this job runs.
+      - name: Enable corepack
+        run: corepack enable
+
+      # Yarn 4 caches globally under ~/.yarn/berry, so ask rather than assume a path.
+      - name: Resolve Yarn cache folder
+        id: yarn-cache
+        run: echo "dir=$(yarn config get cacheFolder)" >> "$GITHUB_OUTPUT"
+
+      - name: Restore Yarn cache
+        uses: actions/cache@v6
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+
+      # Fails when yarn.lock does not already satisfy package.json.
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Type check
+        run: yarn type-check
+
+      # Not `yarn lint`, which carries --fix. CI must not rewrite the tree.
+      - name: Lint
+        run: yarn eslint ./src
+
+      - name: Format check
+        run: yarn prettier --check ./src
+
+      - name: Build
+        run: yarn build
+
+  contract:
+    # A stale api.d.ts means the console's types disagree with the server it calls.
+    name: contract types are current
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Check out ui repository
+        uses: actions/checkout@v7
+
+      # Public repo, so the default token suffices. Only contract/ is needed.
+      - name: Check out api contract
+        uses: actions/checkout@v7
+        with:
+          repository: eceo-epfl/deepreefmap-api
+          ref: main
+          path: api
+          sparse-checkout: contract
+          sparse-checkout-cone-mode: false
+
+      - name: Set up Node
+        uses: actions/setup-node@v7
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Resolve Yarn cache folder
+        id: yarn-cache
+        run: echo "dir=$(yarn config get cacheFolder)" >> "$GITHUB_OUTPUT"
+
+      - name: Restore Yarn cache
+        uses: actions/cache@v6
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      # The committed file is generator output passed through prettier, so do both.
+      - name: Regenerate contract types
+        env:
+          DRM_API_DIR: ${{ github.workspace }}/api
+        run: |
+          yarn contract-types
+          yarn prettier --write src/contract/api.d.ts
+
+      - name: Check the checked-in types are current
+        run: |
+          if ! git diff --exit-code -- src/contract/api.d.ts; then
+            echo "::error::src/contract/api.d.ts is stale. Run 'yarn contract-types && yarn format' and commit the result."
+            exit 1
+          fi

.gitignore

@@ -12,6 +12,11 @@ dist
 dist-ssr
 *.local
 
+# Yarn keeps its install state here. Only patches and plugins are ours to commit.
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

.yarnrc.yml

@@ -0,0 +1,14 @@
+# Vite resolves from a real node_modules tree, so PnP is not used.
+nodeLinker: node-modules
+
+# Rolldown and lightningcss ship per-platform binaries. The build image is alpine,
+# so musl builds must be in the lockfile beside the host's glibc ones.
+supportedArchitectures:
+  os:
+    - linux
+  cpu:
+    - x64
+    - arm64
+  libc:
+    - glibc
+    - musl

Dockerfile

@@ -1,17 +1,20 @@
-FROM node:20.8.1-alpine as builder
+FROM node:22.23.2-alpine AS builder
 
 # Set the working directory in the container
 WORKDIR /app
 
-COPY package.json yarn.lock ./
-RUN yarn install
+RUN corepack enable
+
+COPY package.json yarn.lock .yarnrc.yml ./
+RUN yarn install --immutable
 
 # Copy the rest of your application source code to the container
 COPY . .
 RUN yarn build
 
-FROM nginx:1.12-alpine
+FROM nginx:1.31-alpine
 
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/dist /usr/share/nginx/html
 # Expose the port your application will listen on (if applicable)
 EXPOSE 80

Dockerfile.dev

@@ -1,9 +1,14 @@
-FROM node:20.8.1-alpine as builder
+FROM node:22.23.2-alpine AS builder
 
 # Set the working directory in the container
 WORKDIR /app
 
-COPY package.json yarn.lock ./
+RUN corepack enable
+
+# Install before copying the source, so a source edit does not re-run yarn.
+COPY package.json yarn.lock .yarnrc.yml ./
+RUN yarn install --immutable
+
 COPY . .
 
 # Start your Yarn application

README.md

@@ -1,43 +1,47 @@
-# deepreefmap-frontend
+# deepreefmap-ui
 
-## Installation
+**The web console for the DeepReefMap metadata registry.**
 
-Install the application dependencies by running:
+Administrators define the sites, campaigns and transects that field laptops download,
+enrol those laptops, and browse the survey metadata they upload.
 
-```sh
-yarn
+## Quick Start
+
+The console needs the registry and a Keycloak realm. The compose stack in this repository
+brings up all three:
+
+```bash
+docker compose up -d
 ```
 
-## Development
+The console is then at `http://localhost:88`, and everything binds to loopback only.
 
-Start the application in development mode by running:
+For a local dev server against a registry that is already running:
 
-```sh
+```bash
+yarn install
 yarn dev
 ```
 
-## Production
+## Types from the contract
 
-Build the application in production mode by running:
+Every entity type is generated from the registry's published `OpenAPI` document, so a
+field the server renamed becomes a compile error here:
 
-```sh
-yarn build
+```bash
+yarn contract-types
 ```
 
-## DataProvider
+It reads `../deepreefmap-api/contract/openapi.json`, or `$DRM_API_DIR/contract` when the
+registry lives elsewhere.
 
-The included data provider use [FakeREST](https://github.com/marmelab/fakerest) to simulate a backend.
-You'll find a `data.json` file in the `src` directory that includes some fake data for testing purposes.
+## Checks
 
-It includes two resources, posts and comments.
-Posts have the following properties: `id`, `title` and `content`.
-Comments have the following properties: `id`, `post_id` and `content`.
-
-## Authentication
+```bash
+yarn type-check
+yarn build
+```
 
-The included auth provider should only be used for development and test purposes.
-You'll find a `users.json` file in the `src` directory that includes the users you can use.
+## Licence
 
-You can sign in to the application with the following usernames and password:
-- janedoe / password
-- johndoe / password
+MIT