Make time dropdowns user configurable via an environmental config file path supplied as a build arg to Docker

Author: rktoomey

.env.production.example

@@ -12,4 +12,4 @@ REACT_SENTRY_DSN=https://<key>@sentry.io/<project>
 CLOUDFLARE_TEAM_DOMAIN=<CLOUDFLARE_ACCESS_TEAM_DOMAIN>
 CLOUDFLARE_APPLICATION_AUDIENCE=<CLOUFLARE_ACCESS_AUDIENCE_TAG>
 SECRET_KEY=<YOUR_SECRET_KEY>
-OIDC_CLIENT_SECRETS=<YOUR_CLIENT_SECRETS>
+OIDC_CLIENT_SECRETS=<YOUR_CLIENT_SECRETS>

.gitignore

@@ -497,3 +497,9 @@ $RECYCLE.BIN/
 *.lnk
 
 # End of https://www.toptal.com/developers/gitignore/api/macos,windows,visualstudiocode,jetbrains+all,node,python,flask
+
+config.production.json
+config.staging.json
+config.development.json
+config.test.json
+config.overrides.json

Dockerfile

@@ -6,14 +6,17 @@ ARG PUSH_SENTRY_RELEASE="false"
 FROM node:22-alpine AS build-step
 ARG SENTRY_RELEASE=""
 WORKDIR /app
-ENV PATH /app/node_modules/.bin:$PATH
+ENV PATH=/app/node_modules/.bin:$PATH
 COPY craco.config.js package.json package-lock.json tsconfig.json tsconfig.paths.json .env.production* ./
 COPY ./src ./src
 COPY ./public ./public
+ARG ACCESS_FILE_CONFIG_PATH="src/config/config.empty.json"
+COPY $ACCESS_FILE_CONFIG_PATH /app/config.overrides.json
+
 RUN npm install
 RUN touch .env.production
-ENV REACT_APP_SENTRY_RELEASE $SENTRY_RELEASE
-ENV REACT_APP_API_SERVER_URL ""
+ENV REACT_APP_SENTRY_RELEASE=$SENTRY_RELEASE
+ENV REACT_APP_API_SERVER_URL=""
 RUN npm run build
 
 # Optional build step #2: upload the source maps by pushing a release to sentry
@@ -48,9 +51,9 @@ COPY --from=sentry /app/sentry ./sentry
 # Choose whether to include the sentry release push build step or not
 FROM ${PUSH_SENTRY_RELEASE}
 
-ENV FLASK_ENV production
-ENV FLASK_APP api.app:create_app
-ENV SENTRY_RELEASE $SENTRY_RELEASE
+ENV FLASK_ENV=production
+ENV FLASK_APP=api.app:create_app
+ENV SENTRY_RELEASE=$SENTRY_RELEASE
 
 EXPOSE 3000
 

README.md

@@ -248,6 +248,29 @@ If you are using Cloudflare Access, ensure that you configure `CLOUDFLARE_TEAM_D
 
 Else, if you are using a generic OIDC identity provider (such as Okta), then you should configure `SECRET_KEY` and `OIDC_CLIENT_SECRETS`. `CLOUDFLARE_TEAM_DOMAIN` and `CLOUDFLARE_APPLICATION_AUDIENCE` do not need to be set and can be removed from your env file. Make sure to also mount your `client-secrets.json` file to the container if you don't have it inline.
 
+### Access application configuration overrides
+
+The default config for the application is at `src/config/config.default.json`. 
+
+If you want to override those values, create your own config file containing JSON that overrides values in the default config.
+
+- `ACCESS_TIME_LABELS`: _Optional._ Specifies the time access labels to use for dropdowns on the front end. Contains a JSON object of the format `{"NUM_SECONDS": "LABEL"}`. **Example:** `{"86400": "1 day", "604800": "1 week", "2592000": "1 month"}`.
+- `DEFAULT_ACCESS_TIME`: _Optional._ Specifies the default time access label to use for dropdowns on the front end. Contains a string with a number of seconds corresponding to a key in the access time labels, e.g. `"86400"`.
+
+To use your custom config file, edit `docker-compose.yml` to add a build arg `ACCESS_FILE_CONFIG_PATH` with a local path to your config override file:
+
+```yaml
+services:
+  discord-access:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        ACCESS_FILE_CONFIG_PATH: 'path/to/config.production.json'
+```
+
+If `ACCESS_FILE_CONFIG_PATH` is not set as a build arg when building the Docker image, then the default config will be used.
+
 #### Database Setup
 
 After `docker compose up --build`, you can run the following commands to setup the database:

craco.config.js

@@ -1,4 +1,48 @@
 const CracoAlias = require('react-app-alias');
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+
+function load_access_config() {
+  // Load the default config
+  const defaultConfigPath = path.resolve(__dirname, 'src/config/config.default.json');
+  const accessConfig = JSON.parse(fs.readFileSync(defaultConfigPath, 'utf8'));
+
+  // Dockerfile copies the file at build arg ACCESS_FILE_CONFIG_PATH to config.overrides.json
+  const dockerConfigOverrideFile = 'config.overrides.json';
+  const overrideConfigPath = fs.existsSync(path.resolve(__dirname, dockerConfigOverrideFile))
+    ? path.resolve(__dirname, dockerConfigOverrideFile)
+    : null;
+
+  // Load override config, if present
+  if (overrideConfigPath) {
+    try {
+      const overrideConfig = JSON.parse(fs.readFileSync(overrideConfigPath, 'utf8'));
+
+      // Merge override config with default config
+      Object.assign(accessConfig, overrideConfig);
+    } catch (err) {
+      console.error(`Failed to load override config from ${overrideConfigPath}: ${err}`);
+      process.exit(1); // Exit with an error status
+    }
+  }
+
+  // Sanity check for ACCESS_TIME_LABELS
+  if (accessConfig.ACCESS_TIME_LABELS && typeof accessConfig.ACCESS_TIME_LABELS !== 'object') {
+    throw new Error('ACCESS_TIME_LABELS must be a dictionary');
+  }
+
+  // Sanity check for DEFAULT_ACCESS_TIME
+  if (accessConfig.DEFAULT_ACCESS_TIME) {
+    const defaultAccessTime = parseInt(accessConfig.DEFAULT_ACCESS_TIME, 10);
+    if (isNaN(defaultAccessTime) || !accessConfig.ACCESS_TIME_LABELS.hasOwnProperty(defaultAccessTime)) {
+      throw new Error('DEFAULT_ACCESS_TIME must be a valid key in ACCESS_TIME_LABELS');
+    }
+  }
+  return accessConfig;
+}
+
+const accessConfig = load_access_config();
 
 module.exports = {
   plugins: [
@@ -15,5 +59,11 @@ module.exports = {
     alias: {
       '@mui/styled-engine': '@mui/styled-engine-sc',
     },
+    plugins: [
+      /* defined in src/globals.d.ts, which is included in tsconfig.json */
+      new webpack.DefinePlugin({
+        ACCESS_CONFIG: JSON.stringify(accessConfig),
+      }),
+    ],
   },
 };

docker-compose.yml

@@ -1,6 +1,10 @@
 services:
   discord-access:
-    build: .
+    build:
+      context: .
+      dockerfile: Dockerfile
+#      args:
+#        ACCESS_FILE_CONFIG_PATH: 'src/config/config.empty.json'
     container_name: discord-access
     env_file:
       - .env.production