feat: make frontend config and theme file locations configurable (#1830)

## Description
Add backend configuration options to customize the file locations of
`frontend.config.json` and `frontend.theme.json` via new environment
variables `FRONTEND_CONFIG_FILE` and `FRONTEND_THEME_FILE`. The default
location has been changed from /src/config to project root for
consistency with other customizable configuration files (up for
discussion).

## Motivation
The backend will serve a configuration and theme to a connected frontend
via the `/api/v3/admin/config` and `/api/v3/admin/theme` endpoints. The
data sources for these endpoints are currently hardcoded to
`/src/config/frontend.config.json` and
`/src/config/frontend.config.json`. This is inconsistent with other
configuration files which are located at the project root and can be
configured in `.env`.

This PR introduces environment variables `FRONTEND_CONFIG_FILE` and
`FRONTEND_THEME_FILE` for customizing the location of the json files.
The default location of both files has been moved to the project root
directory.

## Changes:

* added `FRONTEND_CONFIG_FILE` and `FRONTEND_THEME_FILE` environment
variables
* admin.service gets config and theme from ConfigService instead of
static location
* moved `frontend.config.json` and `frontend.theme.json` from
`/src/config` to project root directory
* null returns from admin controller/service now indicate missing
frontend configuration or theme
* admin.servoce.spec unit tests use mock objects instead of static json

## Tests included

- [x] Included for each change/fix?
- [x] Passing? <!-- Merge will not be approved unless tests pass -->

## Documentation
- [x] swagger documentation updated (required for API changes)
- [x] official documentation updated

### official documentation info
<!-- If you have updated the official documentation, please provide PR #
and URL of the updated pages -->

Author: nitrosx

.env.example

@@ -82,6 +82,8 @@ ES_USERNAME="elastic"
 ES_PASSWORD="duo-password"
 ES_REFRESH=<"wait_for"|"false">
 
+FRONTEND_CONFIG_FILE="./src/config/frontend.config.json"
+FRONTEND_THEME_FILE="./src/config/frontend.theme.json"
 LOGGERS_CONFIG_FILE="loggers.json"
 DATASET_TYPES_FILE="datasetTypes.json"
 PROPOSAL_TYPES_FILE="proposalTypes.json"

README.md

@@ -40,24 +40,26 @@ Thank you for your interest in contributing to our project!
 3. `npm install`
 4. Add _.env_ file to project root folder. See [Environment variables](#environment-variables).
 5. _Optional_ Add [functionalAccounts.json](#local-user-accounts) file to project root folder to create local users.
-6. _Optional_ Add [loggers.json](#loggers-configuration) file to the root folder and configure multiple loggers.
-7. _Optional_ Add [proposalTypes.json](#proposal-types-configuration) file to the root folder and configure the proposal types.
-8. _Optional_ Add [datasetTypes.json](#dataset-types-configuration) file to the root folder and configure the dataset types.
-9. `npm run start:dev`
-10. Go to http://localhost:3000/explorer to get an overview of available endpoints and database schemas.
-11. To be able to run the e2e tests with the same setup as in the Github actions you will need to run `npm run  prepare:local` and after that run `npm run start:dev`. This will start all needed containers and copy some configuration to the right place.
+6. _Optional_ Edit or replace [frontend.config.json](#frontend-configuration-and-theme) and [frontend.theme.json](#frontend-configuration-and-theme) files in the `/src/config` directory to change frontend configuration served from the backend.
+7. _Optional_ Add [loggers.json](#loggers-configuration) file to the root folder and configure multiple loggers.
+8. _Optional_ Add [proposalTypes.json](#proposal-types-configuration) file to the root folder and configure the proposal types.
+9. _Optional_ Add [datasetTypes.json](#dataset-types-configuration) file to the root folder and configure the dataset types.
+10. `npm run start:dev`
+11. Go to http://localhost:3000/explorer to get an overview of available endpoints and database schemas.
+12. To be able to run the e2e tests with the same setup as in the Github actions you will need to run `npm run  prepare:local` and after that run `npm run start:dev`. This will start all needed containers and copy some configuration to the right place.
 
 ## Develop in a container using the docker-compose.dev file
 
 1. `git clone https://github.com/SciCatProject/scicat-backend-next.git`
 2. `docker-compose -f docker-compose.dev.yaml up -d`
 3. _Optional_ Mount [functionalAccounts.json](#local-user-accounts) file to a volume in the container to create local users.
-4. _Optional_ Mount [loggers.json](#loggers-configuration) file to a volume in the container to configure multiple loggers.
-5. _Optional_ Mount [proposalTypes.json](#proposal-types-configuration) file to a volume in the container to configure the proposal types.
-6. _Optional_ Mount [datasetTypes.json](#dataset-types-configuration) file to a volume in the container to configure the dataset types.
-7. _Optional_ Change the container env variables.
-8. Attach to the container.
-9. `npm run start:dev`
+4. _Optional_ Mount [frontend.config.json](#frontend-configuration-and-theme) and [frontend.theme.json](#frontend-configuration-and-theme) files to a volume in the container in the `/src/config` directory to change frontend configuration served from the backend.
+5. _Optional_ Mount [loggers.json](#loggers-configuration) file to a volume in the container to configure multiple loggers.
+6. _Optional_ Mount [proposalTypes.json](#proposal-types-configuration) file to a volume in the container to configure the proposal types.
+7. _Optional_ Mount [datasetTypes.json](#dataset-types-configuration) file to a volume in the container to configure the dataset types.
+8. _Optional_ Change the container env variables.
+9. Attach to the container.
+10. `npm run start:dev`
 10. Go to http://localhost:3000/explorer to get an overview of available endpoints and database schemas.
 
 ## Test the app
@@ -95,6 +97,12 @@ automatically create the specified accounts on startup. If this file is not prov
 Follow the structure of [functionalAccounts.json.minimal.example](/functionalAccounts.json.minimal.example) to create
 your own _functionalAccounts.json_ file.
 
+## Frontend configuration and theme
+
+The SciCat backend provides functionality to serve a configuration and theme to a connected frontend. The default files are _frontend.config.json_ and _frontend.theme.json_ located in the `/src/config` directory, locally or in the container. The file names and locations can be configured via the environment variables `FRONTEND_CONFIG_FILE` and `FRONTEND_THEME_FILE`.
+
+Follow the structure of the provided [frontend.config.json](/frontend.config.json) and [frontend.theme.json](/frontend.theme.json) to create your own files.
+
 ### Loggers configuration
 
 Providing a file called _loggers.json_ at the root of the project, locally or in the container, and create an external logger class in the `src/loggers/loggingProviders/`directory will automatically create specified one or multiple loggers instances.
@@ -199,6 +207,8 @@ Valid environment variables for the .env file. See [.env.example](/.env.example)
 | `ES_MAX_RESULT` | number | | Maximum records that can be indexed into Elasticsearch. | 10000 |
 | `ES_FIELDS_LIMIT` | number | | The total number of fields in an index. | 1000 |
 | `ES_REFRESH` | string | | If set to `wait_for`, Elasticsearch will wait till data is inserted into the specified index before returning a response. | false |
+| `FRONTEND_CONFIG_FILE` | string | | The file name for frontend configuration, located in the `/src/config` directory by default. | "./src/config/frontend.config.json" |
+| `FRONTEND_THEME_FILE` | string | | The file name for frontend theme, located in the `/src/config` directory by default. | "./src/config/frontend.theme.json" |
 | `LOGGERS_CONFIG_FILE` | string | | The file name for loggers configuration, located in the project root directory. | "loggers.json" |
 | `PROPOSAL_TYPES_FILE` | string | | The file name for proposal types configuration, located in the project root directory. | "proposalTypes.json" |
 | `SWAGGER_PATH` | string | Yes | swaggerPath is the path where the swagger UI will be available. | "explorer"|

docs/frontend-config-guide/dynamic-dataset-detail-component.md

@@ -3,7 +3,7 @@
 ## Overview
 
 This guide provides details on configuring the **Dynamic Dataset Detail Component** on the frontend. This component can be customized to display dataset information in various templates and layouts based on your needs.
-The configuration needs to be provided or mounted in `/src/config/frontend.config.json`
+The configuration needs to be provided or mounted in the location specified by the environment variable `FRONTEND_CONFIG_FILE` (default `src/config/frontend.config.json`).
 
 ## Configuration guide
 

src/admin/admin.service.spec.ts

@@ -1,15 +1,104 @@
 import { Test, TestingModule } from "@nestjs/testing";
 import { ConfigService } from "@nestjs/config";
 import { AdminService } from "./admin.service";
-import config from "../config/frontend.config.json";
-import theme from "../config/frontend.theme.json";
+
+const mockConfig: Record<string, unknown> = {
+  accessTokenPrefix: "Bearer ",
+  addDatasetEnabled: false,
+  archiveWorkflowEnabled: false,
+  datasetReduceEnabled: true,
+  datasetJsonScientificMetadata: true,
+  editDatasetSampleEnabled: true,
+  editMetadataEnabled: true,
+  editPublishedData: false,
+  addSampleEnabled: false,
+  externalAuthEndpoint: "/api/v3/auth/msad",
+  facility: "SciCat Vanilla",
+  siteIcon: "site-header-logo.png",
+  loginFacilityLabel: "SciCat Vanilla",
+  loginLdapLabel: "Ldap",
+  loginLocalLabel: "Local",
+  loginFacilityEnabled: true,
+  loginLdapEnabled: true,
+  loginLocalEnabled: true,
+  localLoginLabel: "Local",
+  fileColorEnabled: true,
+  fileDownloadEnabled: true,
+  gettingStarted: null,
+  ingestManual: null,
+  jobsEnabled: true,
+  jsonMetadataEnabled: true,
+  jupyterHubUrl: "",
+  landingPage: "doi.ess.eu/detail/",
+  lbBaseURL: "http://localhost:3000",
+  logbookEnabled: true,
+  loginFormEnabled: true,
+  metadataPreviewEnabled: true,
+  metadataStructure: "",
+  multipleDownloadAction: "http:/127.0.0.1:3012/zip",
+  multipleDownloadEnabled: true,
+  oAuth2Endpoints: [
+    {
+      authURL: "api/v3/auth/oidc",
+      displayText: "ESS One Identity",
+    },
+  ],
+  policiesEnabled: true,
+  retrieveDestinations: [],
+  riotBaseUrl: "http://scichat.esss.lu.se",
+  scienceSearchEnabled: true,
+  scienceSearchUnitsEnabled: true,
+  searchPublicDataEnabled: true,
+  searchSamples: true,
+  sftpHost: "login.esss.dk",
+  sourceFolder: "/data/ess",
+  maxDirectDownloadSize: 5000000000,
+  maxFileSizeWarning:
+    "Some files are above <maxDirectDownloadSize> and cannot be downloaded directly. These file can be downloaded via sftp host: <sftpHost> in directory: <sourceFolder>",
+  shareEnabled: true,
+  shoppingCartEnabled: true,
+  shoppingCartOnHeader: true,
+  tableSciDataEnabled: true,
+  datasetDetailsShowMissingProposalId: false,
+  notificationInterceptorEnabled: true,
+  metadataEditingUnitListDisabled: true,
+  datafilesActionsEnabled: true,
+  datafilesActions: [],
+  labelMaps: {
+    filters: {},
+  },
+  defaultDatasetsListSettings: {
+    columns: [],
+    filters: [],
+    conditions: [],
+  },
+  labelsLocalization: {
+    datasetDefault: {},
+    datasetCustom: {},
+    proposalDefault: {},
+  },
+  dateFormat: "yyyy-MM-dd HH:mm",
+  datasetDetailComponent: {
+    enableCustomizedComponent: false,
+    customization: [],
+  },
+};
+
+const mockTheme: Record<string, unknown> = {
+  name: "light",
+  properties: {
+    "--theme-primary-default": "#27aae1",
+  },
+};
 
 describe("AdminService", () => {
   let service: AdminService;
   const mockConfigService = {
     get: jest.fn((propertyPath: string) => {
       const config = {
         maxFileUploadSizeInMb: "12mb",
+        frontendConfig: mockConfig,
+        frontendTheme: mockTheme,
       } as Record<string, unknown>;
 
       return config[propertyPath];
@@ -39,7 +128,7 @@ describe("AdminService", () => {
       const result = await service.getConfig();
 
       expect(result).toEqual({
-        ...config,
+        ...mockConfig,
         maxFileUploadSizeInMb: "12mb",
       });
     });
@@ -48,7 +137,7 @@ describe("AdminService", () => {
   describe("getTheme", () => {
     it("should return theme config", async () => {
       const result = await service.getTheme();
-      expect(result).toEqual(theme);
+      expect(result).toEqual(mockTheme);
     });
   });
 });

src/admin/admin.service.ts

@@ -1,6 +1,4 @@
 import { Injectable } from "@nestjs/common";
-import config from "../config/frontend.config.json";
-import theme from "../config/frontend.theme.json";
 import { ConfigService } from "@nestjs/config";
 
 @Injectable()
@@ -14,15 +12,21 @@ export class AdminService {
   }
 
   async getTheme(): Promise<Record<string, unknown> | null> {
+    const theme =
+      this.configService.get<Record<string, unknown>>("frontendTheme") || null;
     return theme;
   }
 
   // NOTE: Adjusts backend config values for frontend use (e.g., file upload limits).
   // Add future backend-dependent adjustments here as needed.
-  private applyBackendConfigAdjustments(): Record<string, unknown> {
+  private applyBackendConfigAdjustments(): Record<string, unknown> | null {
+    const config =
+      this.configService.get<Record<string, unknown>>("frontendConfig") || null;
+    if (!config) {
+      return null;
+    }
     const postEncodedMaxFileUploadSize =
       this.configService.get<string>("maxFileUploadSizeInMb") || "16mb";
-
     return {
       ...config,
       maxFileUploadSizeInMb: postEncodedMaxFileUploadSize,

src/config/configuration.ts

@@ -51,6 +51,10 @@ const configuration = () => {
     proposalTypes: {},
   };
   const jsonConfigFileList: { [key: string]: string } = {
+    frontendConfig:
+      process.env.FRONTEND_CONFIG_FILE || "./src/config/frontend.config.json",
+    frontendTheme:
+      process.env.FRONTEND_THEME_FILE || "./src/config/frontend.theme.json",
     loggers: process.env.LOGGERS_CONFIG_FILE || "loggers.json",
     datasetTypes: process.env.DATASET_TYPES_FILE || "datasetTypes.json",
     proposalTypes: process.env.PROPOSAL_TYPES_FILE || "proposalTypes.json",
@@ -301,6 +305,8 @@ const configuration = () => {
     },
     datasetTypes: jsonConfigMap.datasetTypes,
     proposalTypes: jsonConfigMap.proposalTypes,
+    frontendConfig: jsonConfigMap.frontendConfig,
+    frontendTheme: jsonConfigMap.frontendTheme,
   };
   return merge(config, localconfiguration);
 };