EasyTheming plugin not loaded on home and admin page

[Agath21]

Describe the bug
We use the plugin to customise our mapstore. It works very well for the viewer. But there's a problem with home and admin pages: the theme doesn't apply. The default colour is pink. After checking, custom stylesheet and variables are not loaded in these pages.

Do I need to change the plugin configuration?

To Reproduce
Steps to reproduce the behavior:
1 - Go to mapstore/#
2 - Change to mapstore/#/home
3 - Empty the cache

Expected behavior
The custom theme is applied to the home and admin pages

Screenshots

Desktop (please complete the following information):
Chrome, firefox

[Gaetanbrl]

Just an idea, what append if we load CSS via new header component ?

[Gaetanbrl]

To Reproduce
Steps to reproduce the behavior:
1 - Go to mapstore/#
2 - Change to mapstore/#/home
3 - Empty the cache

In addition, if we go to mapstore/# directly, CSS is correctly loaded.
If we just go to mapstore/#/home (same for /admin) , CSS is not loaded.

It seems requried to load Viewer first to display custom CSS.

[Gaetanbrl]

After a short compare with Header.jsx, header component seems refresh (via useEffect) in many cases :

https://github.com/georchestra/mapstore2-georchestra/blob/master/js/plugins/Header.jsx#L41C9-L41C13

}, [page, url, height, window.location, window.parent.location]);

It could be interesting to change the useEffect with EasyTheming plugin to force component refresh / upload :

https://github.com/georchestra/mapstore2-
georchestra/blob/d1582f5b2ddbd972baa24632ef8c63ecab152b0d/js/plugins/EasyTheming.jsx#L20C8-L20C11

We need to test...

[Gaetanbrl]

@catmorales @Agath21 @f-necas

I think I've found the right configuration.
In the configs/localConfig.json, some Easytheming insertion missing.

Just search "Header"' reference and complete parent section with Easytheming to activate this extension :

• Insert "Easytheming" in context-creator extensions list

https://github.com/georchestra/datadir/blob/6c247aaa4c82e3a81ebd407d58d1b4c387fa4ec5/mapstore/configs/localConfig.json#L1069-L1073

• Same in admin list

https://github.com/georchestra/datadir/blob/6c247aaa4c82e3a81ebd407d58d1b4c387fa4ec5/mapstore/configs/localConfig.json#L1043-L1046

• etc....

In conclusion, activate the Easytheming plugin wherever you need to apply the custom CSS stylesheet.

Tests

https://gis.jdev.fr/mapstore/#/home

• change localconfig.json
• Go to /mapstore/# - CSS OK
• Got to /mapstore/#/home -> clean cache -> CSS always OK
• Open a new private browser page
• Go to mapstore/#/home -> CSS OK

[catmorales]

Thank you @Gaetanbrl OK I will try

[catmorales]

@Gaetanbrl To complete that in all sections we need to add "Easytheming", in all the sections:

Could be the the "common" section used for all ?

[catmorales]

It works for almost everything !!! Thank you @Gaetanbrl
Quick, simple and efficient !!

The case where it don't work is this one (creating a new context):

It's not a problem, but I imagine it will have to be passed on to Geosolutions.

[Gaetanbrl]

It's not a problem, but I imagine it will have to be passed on to Geosolutions.

2 possibility :

• Stylesheet needs more CSS
• One more logcalConfig.json section need Easytheming

By default, geOrchestra's default.css file seems read :

[catmorales]

Il est bien positionné ici:

    "context-creator": [
          {
            "name": "Header",
            "cfg": {
              "page": "msadmin"
            }
          },
          {
            "name": "OmniBar",
            "cfg": {
              "containerPosition": "header",
              "className": "navbar shadow navbar-home"
            }
          },
          "Easytheming",
          "Login",
          "Language",
          "NavMenu",
          "Attribution",
          "Tutorial",
          {
            "name": "ContextCreator",
            "cfg": {
              "documentationBaseURL": "https://mapstore.geo-solutions.it/mapstore/docs/api/plugins",
              "saveDestLocation": "/admin",
              "backToPageDestRoute": "/admin"
            }
          },
          "Notifications",
          {
            "name": "FeedbackMask",
            "cfg": {
              "containerPosition": "header"
            }
          },
          "ContextImport",
          "ContextExport"
        ],
        "context": [
          "Header", "Easytheming"
        ]
    }

[Gaetanbrl]

Il faut voir s'il ne manque pas une variable au thème par défaut. Je vais regarder avec @Agath21