Update report rendering to use ReactDOM.createRoot, migrate to docker-based local dynamodb for testing

.husky/pre-commit

@@ -1,9 +1,7 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged
 npx lerna run prepare # transpiles core geoprocessing code for templates
+
 # run tests including e2e tests not run by Github CI (GDAL, etc.)
+
 npx lerna run test
 npx lerna run test:e2e
-

eslint.config.mjs

@@ -38,6 +38,11 @@ export default [
   eslintPluginUnicorn.configs["flat/recommended"],
   {
     files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-unused-vars": "warn",
@@ -54,6 +59,7 @@ export default [
       "unicorn/no-array-reduce": "off",
       "unicorn/no-array-for-each": "warn",
       "unicorn/explicit-length-check": "off",
+      "unicorn/expiring-todo-comments": "off",
       "unicorn/prefer-object-from-entries": "off",
       "unicorn/prefer-array-flat": "warn",
       "unicorn/no-array-push-push": "warn",

lerna.json

@@ -1,4 +1,4 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "7.0.1"
+  "version": "7.0.2-beta.0"
 }

package.json

@@ -19,12 +19,12 @@
     "@types/react": "^18.3.5",
     "@types/request": "^2.48.12",
     "babel-plugin-i18next-extract": "0.10.0",
-    "eslint": "^9.9.1",
+    "eslint": "^9.20.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-i18next": "^6.0.9",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.2",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "fs-extra": "^11.2.0",
     "globals": "^15.9.0",
     "http-server": "^14.1.1",

packages/base-project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seasketch/base-project",
-  "version": "7.0.1",
+  "version": "7.0.2-beta.0",
   "description": "initial user-installed project",
   "private": true,
   "type": "module",
@@ -51,7 +51,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@seasketch/geoprocessing": "^7.0.1",
+    "@seasketch/geoprocessing": "^7.0.2-beta.0",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",

packages/geoprocessing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seasketch/geoprocessing",
-  "version": "7.0.1",
+  "version": "7.0.2-beta.0",
   "description": "Geoprocessing and reporting framework for SeaSketch 2.0",
   "type": "module",
   "main": "dist/src/index.js",
@@ -199,7 +199,6 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",
     "@types/finalhandler": "^1.2.3",
-    "dynamodb-local": "^0.0.34",
     "identity-obj-proxy": "^3.0.0",
     "mock-socket": "^9.3.1",
     "typedoc": "^0.26.6"

packages/geoprocessing/scripts/build/buildProjectClients.ts

@@ -56,7 +56,7 @@ export async function buildProjectClients(
     path.join(destBuildPath, "ReportApp.tsx"),
     `
     import React, { Suspense, lazy } from "react";
-    import ReactDOM from "react-dom";
+    import ReactDOM from "react-dom/client";
     import { App } from "@seasketch/geoprocessing/client-ui";
 
     const ReportApp = () => {
@@ -72,8 +72,9 @@ export async function buildProjectClients(
         </Suspense>
       );
     };
-
-    ReactDOM.render(<ReportApp />, document.getElementById("root"));
+
+    const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+    root.render(<ReportApp />);
   `,
   );
 

packages/geoprocessing/scripts/build/startClient.ts

@@ -46,7 +46,7 @@ fs.writeFileSync(
   path.join(destBuildPath, "ReportApp.tsx"),
   `
   import React, { Suspense, lazy } from "react";
-  import ReactDOM from "react-dom";
+  import ReactDOM from "react-dom/client";
   import { App } from "@seasketch/geoprocessing/client-ui";
 
   const ReportApp = () => {
@@ -62,8 +62,9 @@ fs.writeFileSync(
       </Suspense>
     );
   };
-
-  ReactDOM.render(<ReportApp />, document.getElementById("root"));
+
+  const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+  root.render(<ReportApp />);
 `,
 );
 

packages/geoprocessing/src/aws/tasks.test.e2e.ts

@@ -2,11 +2,16 @@ import { describe, test, expect, beforeAll } from "vitest";
 import { createMetric, isMetricArray } from "../metrics/helpers.js";
 import TaskModel from "./tasks.js";
 import { DynamoDBDocument } from "@aws-sdk/lib-dynamodb";
-import { DynamoDBClient, CreateTableCommand } from "@aws-sdk/client-dynamodb";
+import {
+  DynamoDBClient,
+  CreateTableCommand,
+  ListTablesCommand,
+  DeleteTableCommand,
+} from "@aws-sdk/client-dynamodb";
 import deepEqual from "fast-deep-equal";
 
 const dynamodb = new DynamoDBClient({
-  endpoint: "http://localhost:8000",
+  endpoint: "http://dynamodb:8000",
   credentials: {
     accessKeyId: "localaccesskey",
     secretAccessKey: "localsecretkey",
@@ -321,4 +326,14 @@ describe("DynamoDB local", () => {
     expect(item && item.Item && item.Item.status).toBe("failed");
     expect(item && item.Item && item.Item.duration).toBeGreaterThan(0);
   });
+
+  afterAll(async () => {
+    // Delete all tables so the next test run starts fresh
+    const { TableNames } = await dynamodb.send(new ListTablesCommand({}));
+    if (TableNames) {
+      for (const tableName of TableNames) {
+        await dynamodb.send(new DeleteTableCommand({ TableName: tableName }));
+      }
+    }
+  });
 });

packages/geoprocessing/vitest-setup-web-server.ts

@@ -1,7 +1,5 @@
 import LocalFileServer from "./scripts/base/util/localServer.js";
-import DynamoDbLocal from "dynamodb-local";
 
-const dynamoPort = 8000;
 const fileServerPort = 8001;
 
 let fileServer: LocalFileServer;
@@ -17,15 +15,10 @@ export async function setup() {
     path: dstPath,
     port: fileServerPort,
   });
-
-  console.log(`Starting DynamoDb service on port ${dynamoPort}`);
-  await DynamoDbLocal.launch(dynamoPort, null, ["-sharedDb"]);
 }
 export async function teardown() {
   if (fileServer) {
     console.log("Shutting down file server");
     fileServer.close();
   }
-  DynamoDbLocal.stop(dynamoPort);
-  console.log("Shutting down dynamodb service");
 }