Add user customization support (#31)

Makefile

@@ -102,10 +102,10 @@ start-dev: setup-integration-tests ## launch WebUI/ControlPlane/Proxy for develo
 
 .PHONY: stop-dev
 stop-dev: teardown-integration-tests ## stop development environment processes (WebUI/ControlPlane/Proxy)
-	@PID=$(shell netstat -a -n -p 2> /dev/null | sed -n -E "s/.* 0\.0\.0\.0:3000 .* LISTEN .* ([0-9]+)\/node/\1/p")
-	@if [ "${PID}" != "" ] ; then kill -9 ${PID}; fi
-	@PID=$(shell docker ps -aq --filter "name=nuodb-webui-dev")
-	@if [ "${PID}" != "" ] ; then docker stop ${PID}; fi
+	@PID=$(shell netstat -a -n -p 2> /dev/null | sed -n -E "s/.* 0\.0\.0\.0:3000 .* LISTEN .* ([0-9]+)\/node/\1/p"); \
+	if [ "$$PID" != "" ] ; then kill -9 $$PID; fi
+	@PID=$(shell docker ps -aq --filter "name=nuodb-webui-dev"); \
+	if [ "$$PID" != "" ] ; then docker stop $$PID; fi
 
 $(KWOKCTL): $(KUBECTL)
 	mkdir -p bin

docker/production/Dockerfile

@@ -9,6 +9,7 @@ RUN npm install
 COPY ui/public/ /app/public
 COPY ui/src/ /app/src
 RUN npm run build
+RUN npm test -- --watchAll=false
 
 FROM nginx:alpine
 COPY --from=build-ui /app/build /usr/share/nginx/html/ui/

ui/customizations.md

@@ -1,7 +1,7 @@
 # NuoDBaaS WebUI customizations
 
 The NuoDBaaS WebUI allows for UI customizations to handle special cases which are not defined in the OpenAPI spec file. These are currently action buttons in the views and in the future will be extended to simplified forms.
-The configuration file is currently stored in `public/customizations.js` and is a JavaScript file containing configurations, function callbacks and constants referencing other parts of the file to avoid duplication.
+The configuration file is currently stored in `public/customizations.json` and is a JSON file containing configurations, macros ("value" and "disabled" attributes).
 
 ## Example configuration file
 
@@ -11,7 +11,7 @@ function getCustomizations() {
     "views": {
         "/databases": {
             status: {
-                value: (data) => data.status && (data.status.ready ? "Ready" : "Not Ready"),
+                value: "status.ready",
                 buttons: [
                     {
                         "label": "Start Database",
@@ -21,7 +21,7 @@ function getCustomizations() {
                                 "path": "/maintenance"
                             }
                         ],
-                        "visible": (data) => data.maintenance ? true : false,
+                        "visible": "maintenance",
                         "confirm": "Do you want to start Database {organization}/{project}/{name}?",
                     },
                 ]
@@ -78,7 +78,7 @@ function getCustomizations() {
 
 ### Explanation of configuration file definition
 
-The NuoDBaaS WebUI will include the `customizations.js` file and call `getCustomizations()` to retrieve the customization definitions and callback functions.
+The NuoDBaaS WebUI will include the `customizations.json` file to retrieve the customization definitions.
 
 - The only root keyword is `views` right now defining view definitions
 - The `views` object contains a list of `RESOURCE_PATH` definition based on the Control Plane Rest API. These paths can have placeholders, i.e. `/databases/{organization}/{project}` which match with the definitions in the OpenAPI spec. All child elements below this resource path define how the view for this resource path is customized.

ui/package.json

@@ -9,9 +9,9 @@
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@popperjs/core": "^2.11.8",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.5",