Added support for loading custom global CSS (#7708)

ClementBouvierN · freddidierRTE · commit 7572153e2b39 · 2025-01-30T10:39:12.000+01:00
Signed-off-by: ClementBouvierN &lt;clement.bouvierneveu@rte-france.com&gt;
diff --git a/config/docker/docker-compose.yml b/config/docker/docker-compose.yml
@@ -155,6 +155,7 @@ services:
       - "./ui-config:/usr/share/nginx/html/config"
       - "./nginx.conf:/etc/nginx/conf.d/default.conf"
       - "./externalJs:/usr/share/nginx/html/externalJs"
+      - "./externalCss:/usr/share/nginx/html/externalCss"
       - "../../src/test/externalWebAppExample:/usr/share/nginx/html/external/appExample"
   cards-external-diffusion:
     container_name: cards-external-diffusion
diff --git a/config/docker/externalCss/externalStyle.css b/config/docker/externalCss/externalStyle.css
@@ -0,0 +1,12 @@
+/* Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * See AUTHORS.txt
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ * SPDX-License-Identifier: MPL-2.0
+ * This file is part of the OperatorFabric project.
+ */
+
+.custom-external-font-color {
+    color: #777;
+}
diff --git a/config/docker/ui-config/web-ui.json b/config/docker/ui-config/web-ui.json
@@ -153,6 +153,7 @@
     "useDescriptionFieldForEntityList": false
   },
   "customJsToLoad": ["http://localhost:2002/externalJs/handlebarsExample.js","http://localhost:2002/externalJs/loadTags.js"],
+  "customCssToLoad": ["http://localhost:2002/externalCss/externalStyle.css"],
   "dashboard": {
     "processStateRedirects": [
       {
diff --git a/src/docs/asciidoc/deployment/configuration/web-ui_configuration.adoc b/src/docs/asciidoc/deployment/configuration/web-ui_configuration.adoc
@@ -193,6 +193,8 @@ a|authentication mode, available options:
 
 |customJsToLoad||no|List of URLs of javascript files to be loaded at startup
 
+|customCssToLoad||no|List of URLs of css files to be loaded at startup
+
 |===
 
 IMPORTANT:
diff --git a/src/docs/asciidoc/reference_doc/template_description.adoc b/src/docs/asciidoc/reference_doc/template_description.adoc
@@ -1,4 +1,4 @@
-// Copyright (c) 2018-2024 RTE (http://www.rte-france.com)
+// Copyright (c) 2018-2025 RTE (http://www.rte-france.com)
 // See AUTHORS.txt
 // This document is subject to the terms of the Creative Commons Attribution 4.0 International license.
 // If a copy of the license was not distributed with this
@@ -794,7 +794,8 @@ The library https://www.chartjs.org/[charts.js] is integrated in OperatorFabric,
 
 The version of chartjs integrated in OperatorFabric is v3.7.1.
 
-== Custom javascript files
+== Custom javascript or css files
 
-It is possible to configure Opfab to load custom javascript files at startup. This allows to share common functions and business logic between templates.
-The list of URLs of javascript files to be loaded can be configured using `customJsToLoad` parameter in `web-ui.json` file.
+It is possible to configure Opfab to load custom javascript or css files at startup. This allows to share common functions, business logic and styling between templates.
+The list of URLs of javascript files to be loaded can be configured using `customJsToLoad` parameter in `web-ui.json` file.
+The list of URLs of css files to be loaded can be configured using `customCssToLoad` parameter in `web-ui.json` file.
diff --git a/src/test/cypress/cypress/integration/CardDetail.spec.js b/src/test/cypress/cypress/integration/CardDetail.spec.js
@@ -1,4 +1,4 @@
-/* Copyright (c) 2021-2024, RTE (http://www.rte-france.com)
+/* Copyright (c) 2021-2025, RTE (http://www.rte-france.com)
  * See AUTHORS.txt
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -10,16 +10,16 @@
 /* This test file focuses on some state-type specific behaviour in card details header. As the Cypress test suite grows,
 it might make sense to merge it with other tests.
 * */
-import { OpfabGeneralCommands } from '../support/opfabGeneralCommands';
-import { FeedCommands } from '../support/feedCommands';
-import { ScriptCommands } from "../support/scriptCommands";
+import {OpfabGeneralCommands} from '../support/opfabGeneralCommands';
+import {FeedCommands} from '../support/feedCommands';
+import {ScriptCommands} from '../support/scriptCommands';
 
-describe('Card detail', function() {
+describe('Card detail', function () {
     const opfab = new OpfabGeneralCommands();
     const feed = new FeedCommands();
     const script = new ScriptCommands();
 
-    before('Set up configuration', function() {
+    before('Set up configuration', function () {
         // This can stay in a `before` block rather than `beforeEach` as long as the test does not change configuration
         script.resetUIConfigurationFiles();
         script.deleteAllSettings();
@@ -29,9 +29,8 @@ describe('Card detail', function() {
         script.sendCard('cypress/cardDetail/cardDetail.json');
     });
 
-    describe('Check card detail', function() {
-
-        it(`Check card detail`, function() {
+    describe('Check card detail', function () {
+        it(`Check card detail`, function () {
             opfab.loginWithUser('operator1_fr');
             feed.openFirstCard();
 
@@ -86,36 +85,38 @@ describe('Card detail', function() {
             cy.get('#handlebars-if').contains(/^ok$/);
             cy.get('#handlebars-each').contains(/^123$/);
 
+            // external css
+            cy.get('#external-text').should('have.css', 'color', 'rgb(119, 119, 119)');
             // Check card detail footer contains card reception date and time and not contains 'Addressed to' (because operator1_fr is member of only one entity)
             cy.get('.opfab-card-received-footer').contains(
-                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5][0-9]) ([AP]M))/
+                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5]\d) ([AP]M))/
             );
             cy.get('#opfab-card-details-address-to').should('not.exist');
 
             cy.get('#severityColor').contains('#1074ad');
         });
 
-        it(`Check card footer for operator4_fr (member of several entities)`, function() {
+        it(`Check card footer for operator4_fr (member of several entities)`, function () {
             opfab.loginWithUser('operator4_fr');
             feed.openFirstCard();
 
             // Check card detail footer contains card reception date and time and contains 'Addressed to' with user entities to which the card was sent
             cy.get('.opfab-card-received-footer').contains(
-                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5][0-9]) ([AP]M))/
+                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5]\d) ([AP]M))/
             );
             cy.get('#opfab-card-details-address-to').contains('Control Center FR North');
             cy.get('#opfab-card-details-address-to').contains('Control Center FR South');
         });
 
-        it(`Check card detail spinner when simulating card processed `, function() {
+        it(`Check card detail spinner when simulating card processed `, function () {
             opfab.loginWithUser('operator1_fr');
             feed.openFirstCard();
             cy.get('#opfabAPI-display-spinner-button').click();
             opfab.checkLoadingSpinnerIsDisplayed();
             opfab.checkLoadingSpinnerIsNotDisplayed();
         });
 
-        it(`Check card detail in archives`, function() {
+        it(`Check card detail in archives`, function () {
             opfab.loginWithUser('operator1_fr');
             opfab.navigateToArchives();
             // We click the search button
@@ -161,12 +162,12 @@ describe('Card detail', function() {
 
             // Check card detail footer contains card reception date and time and not contains 'Addressed to'
             cy.get('.opfab-card-received-footer').contains(
-                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5][0-9]) ([AP]M))/
+                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5]\d) ([AP]M))/
             );
             cy.get('#opfab-card-details-address-to').should('not.exist');
         });
 
-        it(`Check card detail footer for archives for operator4_fr (member of several entities)`, function() {
+        it(`Check card detail footer for archives for operator4_fr (member of several entities)`, function () {
             opfab.loginWithUser('operator4_fr');
             opfab.navigateToArchives();
 
@@ -184,28 +185,28 @@ describe('Card detail', function() {
 
             // Check card detail footer contains card reception date and time and not contains 'Addressed to'
             cy.get('.opfab-card-received-footer').contains(
-                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5][0-9]) ([AP]M))/
+                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5]\d) ([AP]M))/
             );
             cy.get('#opfab-card-details-address-to').should('not.exist');
         });
 
-        it(`Check opfab API when response not required `, function() {
+        it(`Check opfab API when response not required `, function () {
             script.sendCard('cypress/cardDetail/cardDetailResponseNotRequired.json');
             opfab.loginWithUser('operator1_fr');
             feed.openFirstCard();
             cy.get('#opfab-currentCard-isUserAllowedToRespond').contains('true');
             cy.get('#opfab-currentCard-isUserMemberOfAnEntityRequiredToRespond').contains('false');
         });
 
-        it(`Check opfab API when response is not possible `, function() {
+        it(`Check opfab API when response is not possible `, function () {
             script.sendCard('cypress/cardDetail/cardDetailResponseNotPossible.json');
             opfab.loginWithUser('operator1_fr');
             feed.openFirstCard();
             cy.get('#opfab-currentCard-isUserAllowedToRespond').contains('false');
             cy.get('#opfab-currentCard-isUserMemberOfAnEntityRequiredToRespond').contains('false');
         });
 
-        it(`Check that a spinner is displayed when the card takes time to load `, function() {
+        it(`Check that a spinner is displayed when the card takes time to load `, function () {
             script.sendCard('cypress/cardDetail/cardDetailResponseNotPossible.json');
             cy.delayRequestResponse('/cards-consultation/cards/**');
             opfab.loginWithUser('operator1_fr');
@@ -214,7 +215,7 @@ describe('Card detail', function() {
             opfab.checkLoadingSpinnerIsNotDisplayed();
         });
 
-        it(`Check deleted card detail footer in archives`, function() {
+        it(`Check deleted card detail footer in archives`, function () {
             script.sendCard('cypress/userCard/message.json');
             opfab.loginWithUser('operator1_fr');
             feed.openFirstCard();
@@ -229,18 +230,17 @@ describe('Card detail', function() {
             cy.waitDefaultTime();
             cy.get('#opfab-archives-cards-list').find('.opfab-archive-sev-information').first().click();
 
-            // Check card detail footer contains card reception date 
+            // Check card detail footer contains card reception date
             cy.get('.opfab-card-received-footer').contains(
-                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5][0-9]) ([AP]M))/
+                /Received : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5]\d) ([AP]M))/
             );
-            // Check card detail footer contains card deletion date 
+            // Check card detail footer contains card deletion date
             cy.get('.opfab-card-received-footer').contains(
-                /Deleted or updated : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5][0-9]) ([AP]M))/
+                /Deleted or updated : \d{2}\/\d{2}\/\d{4} at ((1[0-2]|0?[1-9]):([0-5]\d) ([AP]M))/
             );
         });
 
-
-        it(`Check showCard link`, function() {
+        it(`Check showCard link`, function () {
             script.sendCard('cypress/userCard/message.json');
             script.sendCard('cypress/cardDetail/cardDetail.json');
 
@@ -253,12 +253,12 @@ describe('Card detail', function() {
             cy.get('#showCardLink').click();
 
             cy.hash().should('eq', '#/feed/cards/defaultProcess.process1');
-            cy.get('#opfab-div-card-template-processed').contains('Hello operator1_fr, you received the following message');
-
+            cy.get('#opfab-div-card-template-processed').contains(
+                'Hello operator1_fr, you received the following message'
+            );
         });
 
-
-        it(`Check show alert message links`, function() {
+        it(`Check show alert message links`, function () {
             script.sendCard('cypress/cardDetail/cardDetail.json');
 
             opfab.loginWithUser('operator1_fr');
@@ -285,10 +285,9 @@ describe('Card detail', function() {
             cy.get('#opfab-alert-detail-msg').contains('Alarm message');
             cy.get('#opfab-alert-detail-msg').should('have.css', 'background-color', 'rgb(167, 26, 26)');
             cy.get('.opfab-alert-close').click();
-
         });
 
-        it(`Check getCards API call`, function() {
+        it(`Check getCards API call`, function () {
             script.sendCard('cypress/userCard/message.json');
             script.sendCard('cypress/cardDetail/cardDetail.json');
 
@@ -300,10 +299,9 @@ describe('Card detail', function() {
             cy.get('#opfabGetCardsResult').contains('"numberOfElements":1');
             cy.get('#opfabGetCardsResult').contains('"_id":"defaultProcess.process1"');
             cy.get('#opfabGetCardsResult').contains('"titleTranslated":"Message"');
-
         });
 
-        it(`Check isUserAllowedToEdit and editCard API call`, function() {
+        it(`Check isUserAllowedToEdit and editCard API call`, function () {
             script.sendCard('defaultProcess/message.json');
             opfab.loginWithUser('operator1_fr');
 
@@ -314,7 +312,7 @@ describe('Card detail', function() {
             cy.get('#opfab-div-card-template-processed').find('#editButton').eq(0).should('contain.text', 'Edit');
             cy.get('#opfab-div-card-template-processed').find('#editButton').eq(0).click();
 
-            cy.get("of-usercard").should('exist');
+            cy.get('of-usercard').should('exist');
             cy.get('#opfab-usercard-btn-cancel').click();
 
             opfab.logout();
@@ -327,8 +325,6 @@ describe('Card detail', function() {
             // check user not allowed to edit does not see the edit button
             cy.get('#opfab-div-card-template-processed').should('exist');
             cy.get('#editButton').should('not.be.visible');
-
         });
     });
-
 });
diff --git a/src/test/resources/bundles/cypress/template/kitchenSink.handlebars b/src/test/resources/bundles/cypress/template/kitchenSink.handlebars
@@ -1,4 +1,4 @@
-<!-- Copyright (c) 2021-2024, RTE (http://www.rte-france.com)              -->
+<!-- Copyright (c) 2021-2025, RTE (http://www.rte-france.com)              -->
 <!-- See AUTHORS.txt                                                       -->
 <!-- This Source Code Form is subject to the terms of the Mozilla Public   -->
 <!-- License, v. 2.0. If a copy of the MPL was not distributed with this   -->
@@ -49,6 +49,10 @@
 <div> Card id : <a onclick="opfab.navigate.showCardInFeed('{{card.id}}')"><span id="cardId">{{card.id}}</span></a></div>
 <div> Card uid : <span id="cardUid">{{card.uid}}</span></div>
 <div>Card severity: <span id="severityColor">{{example_severityColor card.severity}}</span></div>
+
+<H3> EXTERNAL CSS </H3>
+<div id="external-text" class="custom-external-font-color"> Some test text </div>
+
 <script>
 
 
diff --git a/ui/main/src/app/services/applicationLoader/ApplicationLoader.ts b/ui/main/src/app/services/applicationLoader/ApplicationLoader.ts
@@ -121,6 +121,7 @@ export class ApplicationLoader {
         await this.setActivityArea();
         this.initOpfabAPI();
         await this.loadCustomScripts();
+        await this.loadCustomStyles();
         this.initServices();
         await this.waitForStreamInitDone();
         logger.info('Card stream connection established');
@@ -319,4 +320,19 @@ export class ApplicationLoader {
             }
         }
     }
+
+    private async loadCustomStyles() {
+        const customStyles = ConfigService.getConfigValue('customCssToLoad');
+        if (customStyles) {
+            for (const style of customStyles) {
+                await new Promise<void>((resolve) => {
+                    const link = document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = style;
+                    link.onload = () => resolve();
+                    document.head.appendChild(link);
+                });
+            }
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,7 @@`
`153`	`153`	`"useDescriptionFieldForEntityList": false`
`154`	`154`	`},`
`155`	`155`	`"customJsToLoad": ["http://localhost:2002/externalJs/handlebarsExample.js","http://localhost:2002/externalJs/loadTags.js"],`
	`156`	`+ "customCssToLoad": ["http://localhost:2002/externalCss/externalStyle.css"],`
`156`	`157`	`"dashboard": {`
`157`	`158`	`"processStateRedirects": [`
`158`	`159`	`{`