Fix geosolutions-it#11826 - namespaced localstorage usage in core components (geosolutions-it#11874)

Author: offtherailz

web/client/api/userPersistedStorage/__tests__/index-test.js

@@ -7,7 +7,7 @@
  */
 
 import expect from 'expect';
-import { setApi, getApi } from '..';
+import { setApi, getApi, getNameSpace, getItemKey } from '..';
 
 
 describe('UserPersistedSession', () => {
@@ -43,6 +43,50 @@ describe('UserPersistedSession', () => {
                 done();
             }
         });
+
+    });
+    describe('getItemKey and namespace', () => {
+        it('test namespace creation', () => {
+            expect(getNameSpace('http://hello.world/')).toEqual('');
+            expect(getNameSpace('http://hello.world/index.html')).toEqual('');
+            expect(getNameSpace('')).toEqual('');
+            expect(getNameSpace('/')).toEqual('');
+            expect(getNameSpace('https://hello.world/mapstore')).toEqual('');
+            expect(getNameSpace('https://hello.world/mapstore/')).toEqual('');
+            expect(getNameSpace('https://hello.world/mapstore/index.html')).toEqual('');
+            expect(getNameSpace('https://hello.world/mapstore/embedded.html?something/#/complicated')).toEqual('');
+            expect(getNameSpace('https://hello.world/MApStore/embedded.html?something/#/complicated')).toEqual('');
+            expect(getNameSpace('/mapstore-ctx-1/embedded.html?something/#/complicated')).toEqual('mapstore-ctx-1');
+            expect(getNameSpace('/app')).toEqual('app');
+            expect(getNameSpace('/app/')).toEqual('app');
+            expect(getNameSpace('/app/index.html')).toEqual('app');
+            expect(getNameSpace('https://hello.world/app')).toEqual('app');
+            expect(getNameSpace('https://hello.world/app/')).toEqual('app');
+            expect(getNameSpace('/mapstore-ctx-2/')).toEqual('mapstore-ctx-2');
+            expect(getNameSpace('https://hello.world/mapstore2/embedded.html?something/#/complicated')).toEqual('mapstore2');
+        });
+        it('test getItemKey', () => {
+            expect(getItemKey('a', 'b')).toEqual('mapstore.a.b');
+            expect(getItemKey('a.b', 'c')).toEqual('mapstore.a.b.c');
+            expect(getItemKey('a', 'b', {ns: 'app'})).toEqual('app:mapstore.a.b');
+            expect(getItemKey('a', 'b', {base: 'other'})).toEqual('other.a.b');
+            expect(getItemKey('a', 'b', {ns: 'app', base: 'other'})).toEqual('app:other.a.b');
+            // check MAPSTORE_STORAGE_NAMESPACE
+            const original = window.MAPSTORE_STORAGE_NAMESPACE;
+            window.MAPSTORE_STORAGE_NAMESPACE = 'fromGlobal';
+            expect(getItemKey('a', 'b')).toEqual('fromGlobal:mapstore.a.b');
+            window.MAPSTORE_STORAGE_NAMESPACE = undefined;
+            expect(getItemKey('a', 'b')).toEqual('mapstore.a.b');
+            // restore
+            window.MAPSTORE_STORAGE_NAMESPACE = original;
+        });
+        it('getItemKey backward conpatibility', () => {
+            // geostory tutorial
+            expect(getItemKey("plugin.tutorial", "geostory.disabled")).toEqual("mapstore.plugin.tutorial.geostory.disabled");
+            // tutorial
+            const ID = "ID_ACT";
+            expect(getItemKey("plugin.tutorial", ID + '.disabled')).toEqual('mapstore.plugin.tutorial.' + ID + '.disabled');
+        });
     });
 
 });

web/client/api/userPersistedStorage/index.js

@@ -11,6 +11,51 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import unset from 'lodash/unset';
 
+/**
+ * This utility function extract a namespace from the application to
+ * make a local persistence space for each application.
+ * @param {string} url URL provider
+ * @returns
+ */
+export const getNameSpace = (urlInput) => {
+    try {
+    // handle also relative URL
+        const firstSegment = new URL(urlInput, "https://sample.com")?.pathname?.split('/')?.[1];
+
+        // clean path
+        if (!firstSegment || firstSegment.toLowerCase() === 'mapstore' || firstSegment.endsWith('.html')) {
+            return "";
+        }
+        return firstSegment;
+    } catch (e) {
+        console.error("Invalid URL", e);
+        return null;
+    }
+};
+/**
+ * Creates a standardized key for the items to store in the storage API.
+ * Usually the key is made this way `ns:base.section.fragment`.
+ * When `config` 3rd parameter is not passed, the string will be typically `mapstore.section.fragment`.
+ * Typical usage is `getApi().getItem(getItemKey('plugins.myPlugin', 'myOption'))`.
+ * This will produce a key that is typically `mapstore.plugins.myPlugin.myOption`.
+ * Depending on execution context `ns` can be different.
+ * @param {string} section the first part of the string where store the data.
+ * @param {string} fragment the last part of the key where to store the effective data.
+ * @param {object} config an object with the parameters for the itemkey generation
+ * @param {string} config.ns when defined is the namespace. When not passed as parameter, it is derived from the local environment base path, to provide different namespaces for different applications.
+ *     - If the application is deployed on `/` or `/mapstore/` the namespace is empty (so the `:` separator will not be included).
+ *     - if the application is deployed on `/app1` or `/app2` (different from mapstore), the namespace will become respectively `/app1` and `/app2`.
+ *     - if `window.MAPSTORE_STORAGE_NAMESPACE` is defined, the value of this variable will be used as namespace.
+ *   This is implemented this way to allow 2 different instances of mapstore deployed on the same domain to continue using separate namespaces.
+ * @param {string} [config.base='mapstore'] the base of the key to generate
+ * @returns {string}
+ */
+export const getItemKey = ( section, fragment, {ns, base = "mapstore"} = {}) => {
+    // parse path to see if
+    const NS = ns ?? window?.MAPSTORE_STORAGE_NAMESPACE ?? getNameSpace(window?.location?.href);
+    return `${ NS ? NS + ":" : ""}${base}.${section}.${fragment}`;
+};
+
 let UserPersistedSession = {
 };
 let ls;
@@ -37,7 +82,7 @@ const ApiProviders = {
             if (ApiProviders.memoryStorage.accessDenied) {
                 throw Error("Cannot Access memoryStorage");
             }
-            return get(MemoryStorage, path);
+            return get(MemoryStorage, path) || null;
         },
         setItem: (path, value) => {
             if (ApiProviders.memoryStorage.accessDenied) {

web/client/components/cookie/Cookie.jsx

@@ -12,7 +12,7 @@ import { Glyphicon, Col } from 'react-bootstrap';
 import Button from '../misc/Button';
 import Message from '../../components/I18N/Message';
 import MoreDetails from './MoreDetails';
-import { getApi } from '../../api/userPersistedStorage';
+import { getApi, getItemKey } from '../../api/userPersistedStorage';
 
 /**
   * Component used to show a panel with the information about cookies
@@ -131,7 +131,7 @@ class Cookie extends React.Component {
     }
     accept = () => {
         try {
-            getApi().setItem("cookies-policy-approved", true);
+            getApi().setItem(getItemKey('cookie', 'approved'), true);
         } catch (e) {
             console.error(e);
         }

web/client/epics/cookies.js

@@ -12,7 +12,12 @@ import Rx from 'rxjs';
 import { SET_MORE_DETAILS_VISIBILITY, setCookieVisibility, setDetailsCookieHtml } from '../actions/cookie';
 import { CHANGE_LOCALE } from '../actions/locale';
 import axios from '../libs/ajax';
-import { getApi } from '../api/userPersistedStorage';
+import { getApi, getItemKey } from '../api/userPersistedStorage';
+
+const checkCookiesPolicyApproved = () => {
+    return getApi().getItem(getItemKey('cookie', 'approved'))
+        || getApi().getItem("cookies-policy-approved"); // legacy old item key
+};
 
 /**
  * Show the cookie policy notification
@@ -21,13 +26,12 @@ import { getApi } from '../api/userPersistedStorage';
  * @memberof epics.cookies
  * @return {external:Observable} the steam of actions to trigger to display the noitification.
  */
-
 export const cookiePolicyChecker = (action$) =>
     action$.ofType(LOCATION_CHANGE )
         .take(1)
         .filter( () => {
             try {
-                return !getApi().getItem("cookies-policy-approved");
+                return !checkCookiesPolicyApproved();
             } catch (e) {
                 console.error(e);
                 return false;
@@ -39,7 +43,7 @@ export const cookiePolicyChecker = (action$) =>
 
 export const loadCookieDetailsPage = (action$, store) =>
     action$.ofType(SET_MORE_DETAILS_VISIBILITY, CHANGE_LOCALE )
-        .filter( () => !getApi().getItem("cookies-policy-approved") && store.getState().cookie.seeMore && !store.getState().cookie.html[store.getState().locale.current])
+        .filter( () => !checkCookiesPolicyApproved() && store.getState().cookie.seeMore && !store.getState().cookie.html[store.getState().locale.current])
         .switchMap(() => Rx.Observable.fromPromise(
             axios.get("translations/fragments/cookie/cookieDetails-" + store.getState().locale.current + ".html", null, {
                 timeout: 60000,

web/client/epics/tutorial.js

@@ -25,7 +25,7 @@ import { creationStepSelector } from '../selectors/contextcreator';
 import { CONTEXT_TUTORIALS } from '../actions/contextcreator';
 import { LOCATION_CHANGE } from 'connected-react-router';
 import { isEmpty, isArray, isObject } from 'lodash';
-import { getApi } from '../api/userPersistedStorage';
+import { getApi, getItemKey } from '../api/userPersistedStorage';
 import {REDUCERS_LOADED} from "../actions/storemanager";
 import { VISUALIZATION_MODE_CHANGED } from '../actions/maptype';
 import { detailsSettingsSelector } from '../selectors/details';
@@ -112,7 +112,7 @@ export const switchGeostoryTutorialEpic = (action$, store) =>
             const steps = !isEmpty(presetList) ? presetList[id + geostoryMode + '_tutorial'] : null;
             let isGeostoryTutorialDisabled = false;
             try {
-                isGeostoryTutorialDisabled = getApi().getItem("mapstore.plugin.tutorial.geostory.disabled") === "true";
+                isGeostoryTutorialDisabled = getApi().getItem(getItemKey("plugin.tutorial", "geostory.disabled")) === "true";
             } catch (e) {
                 console.error(e);
             }

web/client/plugins/ResourcesCatalog/components/__tests__/FilterAccordion-test.jsx

@@ -13,6 +13,7 @@ import expect from 'expect';
 import FilterAccordion from '../FilterAccordion';
 import { waitFor } from '@testing-library/react';
 import { Simulate } from 'react-dom/test-utils';
+import { removeValue } from '../../hooks/useLocalStorage';
 
 describe('FilterAccordion component', () => {
     beforeEach((done) => {
@@ -22,7 +23,7 @@ describe('FilterAccordion component', () => {
     afterEach((done) => {
         ReactDOM.unmountComponentAtNode(document.getElementById('container'));
         document.body.innerHTML = '';
-        localStorage.removeItem('accordionsExpanded');
+        removeValue('accordionsExpanded');
         setTimeout(done);
     });
     it('should render with default', () => {

web/client/plugins/ResourcesCatalog/hooks/__tests__/useCardLayoutStyle-test.js

@@ -8,9 +8,11 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import useCardLayoutStyle from '../useCardLayoutStyle';
+import useCardLayoutStyle, { STORAGE_FRAGMENT } from '../useCardLayoutStyle';
 import expect from 'expect';
 import { Simulate, act } from 'react-dom/test-utils';
+import { getApi, getItemKey } from '../../../../api/userPersistedStorage';
+import { removeValue, USE_LOCAL_STORAGE_SECTION } from '../useLocalStorage';
 
 const Component = (props) => {
     const { cardLayoutStyle, setCardLayoutStyle, hideCardLayoutButton } = useCardLayoutStyle(props);
@@ -26,7 +28,7 @@ describe('useCardLayoutStyle', () => {
     afterEach((done) => {
         ReactDOM.unmountComponentAtNode(document.getElementById('container'));
         document.body.innerHTML = '';
-        localStorage.removeItem('layoutCardsStyle');
+        removeValue('layoutCardsStyle');
         setTimeout(done);
     });
     it('should store layoutCardsStyle in localStorage', () => {
@@ -37,7 +39,7 @@ describe('useCardLayoutStyle', () => {
         expect(button.innerHTML).toBe('grid-false');
         Simulate.click(button);
         expect(button.innerHTML).toBe('list-false');
-        expect(localStorage.getItem('layoutCardsStyle')).toBe('"list"');
+        expect(getApi().getItem(getItemKey(USE_LOCAL_STORAGE_SECTION, STORAGE_FRAGMENT))).toBe('"list"');
     });
     it('should force the value if cardLayoutStyle is passed', () => {
         act(() => {

web/client/plugins/ResourcesCatalog/hooks/__tests__/useLocalStorage-test.js

@@ -10,8 +10,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import expect from 'expect';
-import useLocalStorage from '../useLocalStorage';
+import useLocalStorage, { removeValue, USE_LOCAL_STORAGE_SECTION } from '../useLocalStorage';
 import { Simulate, act } from 'react-dom/test-utils';
+import { getApi, getItemKey } from '../../../../api/userPersistedStorage';
 
 const VALUE_KEY = 'test';
 
@@ -28,7 +29,7 @@ describe('useLocalStorage', () => {
     afterEach((done) => {
         ReactDOM.unmountComponentAtNode(document.getElementById("container"));
         document.body.innerHTML = '';
-        localStorage.removeItem(VALUE_KEY);
+        removeValue(VALUE_KEY);
         setTimeout(done);
     });
     it('should store new value in localStorage', () => {
@@ -39,11 +40,18 @@ describe('useLocalStorage', () => {
             );
         });
         let button = document.querySelector('button');
-        expect(button.innerHTML).toBe('defaultValue');
-        expect(localStorage.getItem(VALUE_KEY)).toBe(null);
-        Simulate.click(button);
-        expect(button.innerHTML).toBe('newValue');
-        expect(localStorage.getItem(VALUE_KEY)).toBe('"newValue"');
+        act(() => {
+            expect(button.innerHTML).toBe('defaultValue');
+        });
+        expect(getApi().getItem(getItemKey(USE_LOCAL_STORAGE_SECTION, VALUE_KEY))).toBe(null);
+        act(() => {
+            Simulate.click(button);
+        });
+        act(() => {
+            expect(button.innerHTML).toBe('newValue');
+            expect(getApi().getItem(getItemKey(USE_LOCAL_STORAGE_SECTION, VALUE_KEY))).toBe('"newValue"');
+        });
+
         act(() => {
             ReactDOM.render(
                 <div id="unmount"/>,
@@ -60,5 +68,7 @@ describe('useLocalStorage', () => {
         });
         button = document.querySelector('button');
         expect(button.innerHTML).toBe('newValue');
+        // cleanup
+        getApi().removeItem(getItemKey(USE_LOCAL_STORAGE_SECTION, VALUE_KEY));
     });
 });

web/client/plugins/ResourcesCatalog/hooks/useCardLayoutStyle.js

@@ -7,7 +7,7 @@
  */
 
 import useLocalStorage from './useLocalStorage';
-
+export const STORAGE_FRAGMENT = 'layoutCardsStyle';
 /**
  * menage the card layout using the localStorage
  * @param {string} props.cardLayoutStyle one of `list` or `grid`, if not `undefined` it forces the type of cards style
@@ -18,7 +18,7 @@ const useCardLayoutStyle = ({
     cardLayoutStyle,
     defaultCardLayoutStyle
 } = {}) => {
-    const [_cardLayoutStyleState, setCardLayoutStyle] = useLocalStorage('layoutCardsStyle', defaultCardLayoutStyle);
+    const [_cardLayoutStyleState, setCardLayoutStyle] = useLocalStorage(STORAGE_FRAGMENT, defaultCardLayoutStyle);
     const cardLayoutStyleState = cardLayoutStyle || _cardLayoutStyleState; // Force style when `cardLayoutStyle` is configured
     const hideCardLayoutButton = !!cardLayoutStyle;
     return {

web/client/plugins/ResourcesCatalog/hooks/useLocalStorage.js

@@ -7,22 +7,27 @@
  */
 
 import { useState } from 'react';
+import { getApi, getItemKey } from '../../../api/userPersistedStorage';
 
+export const USE_LOCAL_STORAGE_SECTION = 'useLocalStorageHook';
+export const removeValue = (key) => {
+    getApi().removeItem(getItemKey(USE_LOCAL_STORAGE_SECTION, key));
+};
 const getValue = (key, defaultValue) => {
     if (typeof window === 'undefined') {
         return defaultValue;
     }
     try {
-        const item = window.localStorage.getItem(key);
+        const item = getApi().getItem(getItemKey(USE_LOCAL_STORAGE_SECTION, key));
         return item ? JSON.parse(item) : defaultValue;
     } catch (error) {
         return defaultValue;
     }
 };
 
-const setValue = (key, value) => {
+const saveValue = (key, value) => {
     try {
-        window.localStorage.setItem(key, JSON.stringify(value));
+        getApi().setItem(getItemKey(USE_LOCAL_STORAGE_SECTION, key), JSON.stringify(value));
     } catch (error) {
         //
     }
@@ -39,13 +44,14 @@ const setValue = (key, value) => {
  * }
  */
 const useLocalStorage = (key, defaultValue) => {
-    const [storedValue, setStoredValue] = useState(getValue(key, defaultValue));
-    const [prevStoredValue, setPrevStoredValue] = useState(storedValue);
-    if (storedValue !== prevStoredValue) {
-        setPrevStoredValue(storedValue);
-        setValue(key, storedValue);
-    }
-    return [storedValue, setStoredValue];
+    const [storedValue, setStoredValue] = useState(() => getValue(key, defaultValue));
+
+    const setValue = (value) => {
+        setStoredValue(value);
+        saveValue(key, value);
+    };
+
+    return [storedValue, setValue];
 };
 
 export default useLocalStorage;