Adds UI configuration (#18)

images/ui/test.Dockerfile

@@ -0,0 +1,13 @@
+ARG NODE_VERSION="21.2.0"
+ARG CHROME_VERSION="119.0.6045.159-1"
+ARG FIREFOX_VERSION="120.0"
+ARG EDGE_VERSION=
+ARG YARN_VERSION=
+ARG CYPRESS_VERSION=
+
+FROM cypress/factory:3.2.0
+
+WORKDIR /ci
+COPY ./ui/package.json .
+COPY ./ui/package-lock.json .
+RUN npm install

ui/.gitignore

@@ -1,3 +1,5 @@
 dist/
 node_modules/
 testdata/
+src/config.json
+cypress/downloads

ui/config.default.json

@@ -0,0 +1,4 @@
+{
+    "userExpiration": 300000,
+    "apiExpiration": 120000
+}

ui/cypress/e2e/spec.cy.js

@@ -1,11 +1,13 @@
 /* eslint no-undef: "off" */
 
 import { loremIpsum } from "lorem-ipsum";
-import { newUser, existingUser } from "../../src/test-helpers/mock/auth";
+
+import config from "../../src/config.json";
 import { newSubject, existingSubject } from "../../src/test-helpers/mock/api";
+import { newUser, existingUser } from "../../src/test-helpers/mock/auth";
 
 const userSignInWait = 1000;
-const userExpiration = 2000 + 250;
+const userExpiration = config.userExpiration + 250;
 
 describe("UI e2e tests", () => {
     it("Views subject list", () => {

ui/package.json

@@ -5,9 +5,9 @@
   "main": "src/main.js",
   "type": "module",
   "scripts": {
-    "dev": "nodemon tools/dev-server.js",
-    "build": "node tools/prod.js",
-    "test": "node --test",
+    "dev": "nodemon tools/serve.js",
+    "build": "node tools/build.js",
+    "test": "node tools/configure.js && node --test",
     "lint": "eslint \"./**/*.js\""
   },
   "repository": {
@@ -37,7 +37,8 @@
   },
   "nodemonConfig": {
     "ignore": [
-      "dist/**"
+      "dist/**",
+      "src/config.json"
     ]
   },
   "eslintConfig": {

ui/src/api/mock/subject.js

@@ -1,5 +1,5 @@
-import * as mockSubjects from "./subjects.json";
 import { user } from "../../store/user";
+import mockSubjects from "./subjects.json";
 
 const timeout = 400;
 

ui/src/auth/mock/user.js

@@ -1,8 +1,7 @@
-import * as mockUsers from "./users.json";
+import config from "../../config.json";
+import mockUsers from "./users.json";
 
 const timeout = 400;
-const refreshExpiration = 2000; // 5 minutes
-const tokenExpiration = 1000;
 
 let m = new Map();
 
@@ -32,12 +31,12 @@ export const user = {
                         token: token(
                             username,
                             password,
-                            Date.now() + tokenExpiration,
+                            Date.now() + config.apiExpiration,
                         ),
                         refresh: token(
                             username,
                             password,
-                            Date.now() + refreshExpiration,
+                            Date.now() + config.userExpiration,
                         ),
                     });
                 } else {
@@ -58,12 +57,12 @@ export const user = {
                         token: token(
                             username,
                             password,
-                            Date.now() + tokenExpiration,
+                            Date.now() + config.apiExpiration,
                         ),
                         refresh: token(
                             username,
                             password,
-                            Date.now() + refreshExpiration,
+                            Date.now() + config.userExpiration,
                         ),
                     });
                 } else {

ui/src/components/App.js

@@ -1,4 +1,5 @@
 import { render } from "reefjs";
+
 import { router, navigate } from "../store/router";
 
 class App extends HTMLElement {

ui/src/components/EditSubject.js

@@ -1,10 +1,12 @@
-import { render } from "reefjs";
-import { extract } from "../store/inject";
-import { user, signal as userSignal } from "../store/user";
 import ace from "ace-builds/src-min/ace";
 import "ace-builds/src-min/theme-github";
 import "ace-builds/src-min/mode-markdown";
 
+import { render } from "reefjs";
+
+import { extract } from "../store/inject";
+import { user, signal as userSignal } from "../store/user";
+
 const signal = "subject-edited";
 const event = new Event("wiki:signal-" + signal, {
     bubbles: true,

ui/src/components/ListSubjects.js

@@ -1,6 +1,7 @@
 import { signal, render } from "reefjs";
-import { subjects, signal as subjectsSignal } from "../store/subjects";
+
 import { navigate } from "../store/router";
+import { subjects, signal as subjectsSignal } from "../store/subjects";
 
 const errorSignal = "list-subjects-error";
 

ui/src/components/ListSubjects.test.js

@@ -1,7 +1,8 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
-import { waitFor } from "../test-helpers/waitFor.js";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
+import { waitFor } from "../test-helpers/waitFor.js";
 
 describe("List Subjects component", () => {
     let dom, window, document;

ui/src/components/Router.js

@@ -1,4 +1,5 @@
 import { component } from "reefjs";
+
 import {
     router,
     getSubject,

ui/src/components/Router.test.js

@@ -1,5 +1,6 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
 
 describe("Router component", () => {

ui/src/components/Subject.js

@@ -1,11 +1,12 @@
 import { render } from "reefjs";
-import { setTitle } from "../store/title";
+
 import { inject } from "../store/inject";
+import { router } from "../store/router";
 import {
     subjects as subjectStore,
     Subject as StoreSubject,
 } from "../store/subjects";
-import { router } from "../store/router";
+import { setTitle } from "../store/title";
 import { user, signal as userSignal } from "../store/user";
 
 const errTimeout = 3000;

ui/src/components/Subject.test.js

@@ -1,7 +1,8 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
-import { waitFor } from "../test-helpers/waitFor.js";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
+import { waitFor } from "../test-helpers/waitFor.js";
 
 describe("Subject component", () => {
     let dom, window, document;

ui/src/components/User.js

@@ -1,4 +1,5 @@
 import { component, render } from "reefjs";
+
 import { user, signal as userSignal } from "../store/user";
 
 const errTimeout = 3000;

ui/src/components/User.test.js

@@ -1,5 +1,6 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
 import { waitFor } from "../test-helpers/waitFor.js";
 

ui/src/components/ViewSubject.js

@@ -1,5 +1,6 @@
-import { render } from "reefjs";
 import { marked } from "marked";
+import { render } from "reefjs";
+
 import { extract } from "../store/inject";
 
 class ViewSubject extends HTMLElement {

ui/src/components/ViewSubject.test.js

@@ -1,7 +1,8 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
-import { waitFor } from "../test-helpers/waitFor.js";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
+import { waitFor } from "../test-helpers/waitFor.js";
 
 describe("View Subject component", () => {
     let dom, window, document;

ui/src/store/router.test.js

@@ -1,7 +1,8 @@
-import { describe, beforeEach, afterEach, test } from "node:test";
 import assert from "node:assert";
-import { waitFor } from "../test-helpers/waitFor.js";
+import { describe, beforeEach, afterEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
+import { waitFor } from "../test-helpers/waitFor.js";
 
 describe("router store", () => {
     let dom, window, document, previousConsoleError;

ui/src/store/subjects.test.js

@@ -1,7 +1,8 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
-import { waitFor } from "../test-helpers/waitFor.js";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
+import { waitFor } from "../test-helpers/waitFor.js";
 
 describe("subjects store", () => {
     let dom, window, document;

ui/src/store/user.js

@@ -1,4 +1,5 @@
 import { store } from "reefjs";
+
 import { user as auth } from "../auth/mock/user";
 
 export const signal = "user";

ui/src/store/user.test.js

@@ -1,5 +1,6 @@
-import { describe, beforeEach, test } from "node:test";
 import assert from "node:assert";
+import { describe, beforeEach, test } from "node:test";
+
 import { DOM } from "../test-helpers/dom.js";
 import { waitFor } from "../test-helpers/waitFor.js";
 

ui/src/test-helpers/build.js

@@ -1,4 +1,4 @@
-import * as esbuild from "esbuild";
+import esbuild from "esbuild";
 
 export function buildSync(options = {}) {
     let baseOptions = {

ui/src/test-helpers/dom.js

@@ -1,4 +1,5 @@
 import { JSDOM } from "jsdom";
+
 import { buildSync } from "./build.js";
 
 export class DOM {

ui/src/test-helpers/mock/api.js

@@ -1,6 +1,7 @@
-import * as mockSubjects from "../../api/mock/subjects.json";
 import { loremIpsum } from "lorem-ipsum";
 
+import * as mockSubjects from "../../api/mock/subjects.json";
+
 let a = [];
 
 for (const s of Object.getOwnPropertyNames(mockSubjects)) {

ui/src/test-helpers/waitFor.js

@@ -1,4 +1,5 @@
 import assert from "node:assert";
+
 import { waitFor as domWaitFor } from "@testing-library/dom";
 
 export async function waitFor(

ui/tools/build.js

@@ -1,7 +1,13 @@
 /* eslint-env node */
 
-import fs from "fs";
+import fs from "node:fs";
+
 import esbuild from "esbuild";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+import { prod, dev } from "./build-options.js";
+import { defaults, configure } from "./configure.js";
 
 const outdir = "dist";
 
@@ -30,3 +36,26 @@ export async function build(options = {}, env = "") {
 
     console.log(`finishing building for ${env}`);
 }
+
+async function main() {
+    const argv = yargs(hideBin(process.argv))
+        .default("build", "prod")
+        .default(defaults).argv;
+
+    configure(argv);
+
+    let options;
+    switch (argv.build) {
+        case "prod":
+            options = prod;
+            break;
+        case "dev":
+            options = dev;
+            break;
+    }
+
+    await build(options, argv.build);
+}
+
+if (process.argv.includes(import.meta.url.substring("file://".length)))
+    await main();

ui/tools/configure.js

@@ -0,0 +1,26 @@
+/* eslint-env node */
+
+import fs from "node:fs";
+
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+const configFile = "./src/config.json";
+export const defaults = JSON.parse(fs.readFileSync("config.default.json"));
+
+export function configure(config) {
+    let mergedConfig = defaults;
+    for (const v in defaults) {
+        if (v in config) {
+            mergedConfig[v] = config[v];
+        }
+    }
+    fs.writeFileSync(configFile, JSON.stringify(mergedConfig));
+}
+
+function main() {
+    const argv = yargs(hideBin(process.argv)).default(defaults).argv;
+    configure(argv);
+}
+
+if (process.argv.includes(import.meta.url.substring("file://".length))) main();