fix: [GSHDF-846] update header plugin for mapstore

Author: f-necas

.github/workflows/mapstore.yml

@@ -3,7 +3,7 @@ on: [push, pull_request]
 
 jobs:
   build:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
@@ -67,7 +67,7 @@ jobs:
       run: mkdir -p scratch && cp web/target/georchestra-mapstore*.deb scratch/georchestra-mapstore-${{ github.sha }}.deb
 
     - name: "publish deb as artifact"
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v4
       with:
         name: georchestra-mapstore.deb
         path: scratch/georchestra-mapstore-${{ github.sha }}.deb
@@ -76,7 +76,7 @@ jobs:
       run: mkdir -p scratch && cp web/target/mapstore.war scratch/mapstore-${{ github.sha }}.war
 
     - name: "publish war as artifact"
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v4
       with:
         name: mapstore.war
         path: scratch/mapstore-${{ github.sha }}.war

js/plugins/EasyTheming.jsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2019, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useEffect} from "react";
+import {createPlugin, connect} from "@mapstore/utils/PluginsUtils";
+
+export const Easytheming = ({stylesheet = ""}) => {
+    useEffect(() => {
+        if (stylesheet) {
+            const link = document.createElement("link");
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("type", "text/css");
+            link.setAttribute("href", stylesheet);
+            document.head.appendChild(link);
+        }
+    }, []);
+    return null;
+};
+
+export default createPlugin('Easytheming', {
+    component: connect((state) => ({
+        stylesheet: state.localConfig && state.localConfig.stylesheetUri
+    }))(Easytheming)
+});

js/plugins/Header.jsx

@@ -8,9 +8,14 @@
 import {useEffect} from "react";
 import { createPlugin, connect } from "@mapstore/utils/PluginsUtils";
 
-export const Header = ({url = "/header/", page = "mapstore", height = 90, ignoreIFrame = false}) => {
+export const Header = ({url = "/header/", page = "mapstore", height = 90, ignoreIFrame = false,
+    script = "https://cdn.jsdelivr.net/gh/georchestra/header@dist/header.js",
+    legacy = false,
+    logoUrl = "https://www.georchestra.org/public/georchestra-logo.svg",
+    stylesheet = "", configFile = ""}) => {
     useEffect(() => {
         const header = document.getElementById("georchestra-header");
+        const headerScript = document.getElementById("georchestra-header-script");
         const container = document.getElementById("container");
         if (header) {
             if (!ignoreIFrame && window.location !== window.parent.location) {
@@ -19,9 +24,14 @@ export const Header = ({url = "/header/", page = "mapstore", height = 90, ignore
                     container.style.top = '0';
                 }
             } else {
-                header.style.display = 'block';
-                header.src = url + "?active=" + page;
-                header.style.height = height + "px";
+                header.setAttribute("active-app", page);
+                header.setAttribute("legacy-url", url);
+                header.setAttribute("legacy-header", legacy);
+                header.setAttribute("logo-url", logoUrl);
+                header.setAttribute("stylesheet", stylesheet);
+                header.setAttribute("config-file", configFile);
+                header.setAttribute("height", height);
+                headerScript.src = script;
 
                 if (container) {
                     container.style.top = height + "px";
@@ -36,6 +46,11 @@ export const Header = ({url = "/header/", page = "mapstore", height = 90, ignore
 export default createPlugin('Header', {
     component: connect((state) => ({
         url: state.localConfig && state.localConfig.header && state.localConfig.header.url,
-        height: state.localConfig && state.localConfig.header && state.localConfig.header.height
+        height: state.localConfig && state.localConfig.header && state.localConfig.header.height,
+        script: state.localConfig && state.localConfig.header && state.localConfig.header.script,
+        legacy: state.localConfig && state.localConfig.header && state.localConfig.header.legacy,
+        logoUrl: state.localConfig && state.localConfig.header && state.localConfig.header.logoUrl,
+        stylesheet: state.localConfig && state.localConfig.header && state.localConfig.header.stylesheet,
+        configFile: state.localConfig && state.localConfig.header && state.localConfig.header.configFile
     }))(Header)
 });