FORMS-2662: Add CHEFS web component (chefs-form-viewer) (bcgov#1768)

* FORMS-2662: Add CHEFS web component (chefs-form-viewer)

- Add web component for loading CHEFS forms outside of the hosted environment
- Add embedding web component to simplify external hosting
- Add routes/paths to isolate webcomponent API from CHEFS API
- Comprehensive unit testing
- Documentation and demo html files to load chefs-form-viewer

* config json updates - NO SECRETS!

Signed-off-by: Jason Sherman <[email protected]>

* BC Gov Address components plus Advanced Address component (generic)

Signed-off-by: Jason Sherman <[email protected]>

* simplify cors.
chefs-form-viewer-generator to use base url.

Signed-off-by: Jason Sherman <[email protected]>

* Clean up documentation.

Signed-off-by: Jason Sherman <[email protected]>

* lint fix

Signed-off-by: Jason Sherman <[email protected]>

* Sonarqube issues

Signed-off-by: Jason Sherman <[email protected]>

* Sonarqube issues

Signed-off-by: Jason Sherman <[email protected]>

* some devcontainer startup checks, was timing out.

Signed-off-by: Jason Sherman <[email protected]>

* Pulling in changes that we "lost"/overwritten with the Git Guardian debacle.
Number component rounding
Action/Floating Bar for designer.

Signed-off-by: Jason Sherman <[email protected]>

* sonarqube issues

Signed-off-by: Jason Sherman <[email protected]>

* updates to component webpack (basically revert)

Signed-off-by: Jason Sherman <[email protected]>

* point readme at techdocs

Signed-off-by: Jason Sherman <[email protected]>

* make for viewer auto reload after submission success by default.

Signed-off-by: Jason Sherman <[email protected]>

* runtime-auth security middleware.

Signed-off-by: Jason Sherman <[email protected]>

---------

Signed-off-by: Jason Sherman <[email protected]>

Author: usingtechnology

.devcontainer/chefs_local/local.sample.json

@@ -112,5 +112,13 @@
       "matchPrecision": "occupant, unit, site, civic_number, intersection, block, street, locality, province",
       "precisionPoints": 100
     }
+  },
+  "webcomponents": {
+    "assets": {
+      "roots": "/workspaces/common-hosted-form-service/app/webcomponents/v1/assets"
+    }
+  },
+  "gateway": {
+    "jwtLifetime": "30m"
   }
 }

.devcontainer/chefs_local/test.json

@@ -111,5 +111,13 @@
       "matchPrecision": "occupant, unit, site, civic_number, intersection, block, street, locality, province",
       "precisionPoints": 100
     }
+  },
+  "webcomponents": {
+    "assets": {
+      "roots": "/workspaces/common-hosted-form-service/app/webcomponents/v1/assets"
+    }
+  },
+  "gateway": {
+    "jwtLifetime": "30m"
   }
 }

.devcontainer/post-install.sh

@@ -78,6 +78,15 @@ cd ${WORKSPACE_DIR}/app/frontend
 npm run build:formio
 npm run deploy:formio
 
+# make an initial build of webcomponents
+# need to build the frontend first to get the formio and font awesome assets
+cd ${WORKSPACE_DIR}/app/frontend
+npm run build
+# then build the webcomponents
+cd ${WORKSPACE_DIR}/app
+npm run webcomponents:build
+
+
 # copy over the sample files to the image...
 if [ ! -f "${CHEFS_LOCAL_DIR}/local.json" ]; then
   cp ${CHEFS_LOCAL_DIR}/local.sample.json ${CHEFS_LOCAL_DIR}/local.json
@@ -95,6 +104,7 @@ echo "⏳ Waiting for PostgreSQL to be ready..."
 max_attempts=30
 attempt=1
 while [ $attempt -le $max_attempts ]; do
+  # Check if PostgreSQL is accepting connections by testing the port
   if docker compose -f ${CHEFS_LOCAL_DIR}/docker-compose.yml exec -T postgres pg_isready -U app -d chefs > /dev/null 2>&1; then
     echo "✅ PostgreSQL is ready!"
     break
@@ -106,6 +116,10 @@ done
 
 if [ $attempt -gt $max_attempts ]; then
   echo "❌ PostgreSQL failed to start within expected time"
+  echo "📋 PostgreSQL container status:"
+  docker compose -f ${CHEFS_LOCAL_DIR}/docker-compose.yml ps postgres
+  echo "📋 PostgreSQL logs:"
+  docker compose -f ${CHEFS_LOCAL_DIR}/docker-compose.yml logs postgres
   exit 1
 fi
 

.devcontainer/webcomponents.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Define explicit paths - handle running from .devcontainer directory
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+WORKSPACE_ROOT="${WORKSPACE_ROOT:-$(dirname "${SCRIPT_DIR}")}"
+
+echo "📍 Script directory: ${SCRIPT_DIR}"
+echo "📍 Workspace root: ${WORKSPACE_ROOT}"
+
+# make an initial build of formio components and ready them for frontend
+cd ${WORKSPACE_ROOT}/app/frontend
+npm run build:formio
+npm run deploy:formio
+
+# make an initial build of webcomponents
+# need to build the frontend first to get the formio and font awesome assets
+cd ${WORKSPACE_ROOT}/app/frontend
+npm run build
+# then build the webcomponents
+cd ${WORKSPACE_ROOT}/app
+npm run webcomponents:build
+
+

.dockerignore

@@ -107,3 +107,13 @@ Thumbs.db
 tests/functional/cypress/videos/
 tests/functional/cypress/screenshots/
 tests/functional/cypress/downloads/
+
+# Do not send demo or minified viewer to build context
+# app/frontend/public/embed/chefs-form-viewer-demo.html
+app/frontend/public/embed/chefs-form-viewer.min.js
+app/frontend/public/embed/chefs-form-viewer.min.js.map
+app/frontend/public/embed/chefs-form-viewer-embed.min.js
+app/frontend/public/embed/chefs-form-viewer-embed.min.js.map
+app/frontend/public/embed/chefs-index.css
+app/frontend/public/embed/chefs-theme.css
+app/webcomponents/*

.gitignore

@@ -16,7 +16,14 @@ node_modules
 /package-lock.json
 
 
-
+# Embed viewer build artifacts
+app/frontend/public/embed/chefs-form-viewer.min.js
+app/frontend/public/embed/chefs-form-viewer.min.js.map
+app/frontend/public/embed/chefs-form-viewer-embed.min.js
+app/frontend/public/embed/chefs-form-viewer-embed.min.js.map
+app/frontend/public/embed/chefs-index.css
+app/frontend/public/embed/chefs-theme.css
+app/webcomponents/*
 
 # local env files
 local.*
@@ -32,6 +39,7 @@ yarn-error.log*
 
 # Editor directories and files
 .idea
+.cursor
 *.iml
 *.suo
 *.ntvs*

.vscode/launch.json

@@ -25,7 +25,7 @@
       "name": "CHEFS API",
       "outputCapture": "std",
       "request": "launch",
-      "runtimeArgs": ["run", "serve"],
+      "runtimeArgs": ["run", "serve", "--trace-warnings"],
       "runtimeExecutable": "npm",
       "type": "node",
       "env": {
@@ -35,7 +35,7 @@
     {
       "cwd": "${workspaceFolder}/app/frontend",
       "env": {
-        "VITE_CHEFS_GEO_ADDRESS_APIURL": "http://localhost:8080/app/api/v1/bcgeoaddress/advance/address",
+        "VITE_CHEFS_GEO_ADDRESS_APIURL": "../api/v1/bcgeoaddress/advance/address",
         "VITE_CHEFSTOURURL": "https://www.youtube.com/embed/obOhyYusMjM",
         "VITE_CONTACT": "[email protected]",
         "VITE_FRONTEND_BASEPATH": "/app",
@@ -77,6 +77,23 @@
         "program": "${workspaceFolder}/app/node_modules/jest/bin/jest"
       }
     },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest: current file (no coverage)",
+      "env": { "NODE_ENV": "test" },
+      "program": "${workspaceFolder}/app/node_modules/.bin/jest",
+      "args": [
+        "${file}",
+        "--config",
+        "${workspaceFolder}/app/jest.config.js",
+        "--coverage=false"
+      ],
+      "console": "integratedTerminal",
+      "windows": {
+        "program": "${workspaceFolder}/app/node_modules/jest/bin/jest"
+      }
+    },
     {
       "type": "node",
       "request": "launch",

.vscode/tasks.json

@@ -138,6 +138,27 @@
         "panel": "shared"
       },
       "problemMatcher": []
+    },
+    {
+      "label": "Refresh Webcomponents",
+      "type": "shell",
+      "command": "${workspaceFolder}/.devcontainer/webcomponents.sh",
+      "options": {
+        "cwd": "${workspaceFolder}",
+        "env": {
+          "WORKSPACE_ROOT": "${workspaceFolder}"
+        }
+      },
+      "group": "build",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "focus": false,
+        "panel": "shared",
+        "showReuseMessage": true,
+        "clear": false
+      },
+      "problemMatcher": []
     }
   ],
   "version": "2.0.0"

Dockerfile

@@ -9,13 +9,15 @@ COPY . /opt/app-root/src
 
 RUN npm run all:ci \
   && npm run all:build \
+  && cd ../components && npm run build \
+  && cd ../app \
+  && npm run webcomponents:build \
   && npm run frontend:purge \
-  && npm run components:clean \
   && npm run components:purge \
   && mkdir /.npm \
   && chgrp -R 0 /.npm \
   && chmod -R g=u /.npm
 
 EXPOSE 8000
 
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start"]

app/app.js

@@ -1,15 +1,18 @@
 const compression = require('compression');
 const config = require('config');
 const express = require('express');
-const path = require('path');
+const path = require('node:path');
 const Problem = require('api-problem');
-const querystring = require('querystring');
+const querystring = require('node:querystring');
+const clsRtracer = require('cls-rtracer');
 
 const log = require('./src/components/log')(module.filename);
 const httpLogger = require('./src/components/log').httpLogger;
 const middleware = require('./src/forms/common/middleware');
 const rateLimiter = require('./src/forms/common/middleware').apiKeyRateLimiter;
 const v1Router = require('./src/routes/v1');
+const webcomponentRouter = require('./src/webcomponents');
+const gatewayRouter = require('./src/gateway');
 
 const DataConnection = require('./src/db/dataConnection');
 const dataConnection = new DataConnection();
@@ -37,6 +40,11 @@ app.set('trust proxy', 1);
 
 app.set('x-powered-by', false);
 
+// Add correlation ID middleware early in the chain
+// useHeader: true - Use existing X-Request-ID header if present, otherwise generate one
+// echoHeader: true - Add the request ID to response headers
+app.use(clsRtracer.expressMiddleware({ enableRequestId: true, useHeader: true, echoHeader: true }));
+
 // Skip if running tests
 if (process.env.NODE_ENV !== 'test') {
   // Initialize connections and exit if unsuccessful
@@ -54,12 +62,12 @@ app.use((req, res, next) => {
     return next();
   }
   const status = statusService.getStatus();
-  if (status.stopped) {
+  if (status.ready) {
+    next();
+  } else if (status.stopped) {
     new Problem(503, { details: { message: 'Server is shutting down', ...status } }).send(res);
-  } else if (!status.ready) {
-    new Problem(503, { details: { message: 'Server is not ready', ...status } }).send(res);
   } else {
-    next();
+    new Problem(503, { details: { message: 'Server is not ready', ...status } }).send(res);
   }
 });
 
@@ -99,6 +107,13 @@ apiRouter.get('/api', (_req, res) => {
 // Host API endpoints
 apiRouter.use(config.get('server.apiPath'), v1Router);
 app.use(config.get('server.basePath'), apiRouter);
+
+// Host web component endpoints (separate from API) and apply rate limiting
+app.use(`${config.get('server.basePath')}/webcomponents`, rateLimiter, webcomponentRouter);
+
+// Host gateway endpoints (separate from API) and apply rate limiting
+app.use(`${config.get('server.basePath')}/gateway`, rateLimiter, gatewayRouter);
+
 app.use(middleware.errorHandler);
 
 // Host the static frontend assets