refactor of templates and add new theme in geonode pages (#325)

GeoNode · Jul 14, 2021 · e1b7900 · e1b7900
1 parent b4e7f2a
commit e1b7900
Show file tree

Hide file tree

Showing 79 changed files with 2,830 additions and 1,845 deletions.
diff --git a/geonode_mapstore_client/apps.py b/geonode_mapstore_client/apps.py
@@ -23,7 +23,7 @@ def run_setup_hooks(*args, **kwargs):
     urlpatterns += [
         url(r'^mapstore/', include('mapstore2_adapter.urls')),
         url(r'^', include('mapstore2_adapter.geoapps.geostories.api.urls')),
-        url(r'^viewer/', TemplateView.as_view(template_name='geonode-mapstore-client/viewer.html')),
+        url(r'^catalogue/', TemplateView.as_view(template_name='geonode-mapstore-client/catalogue.html')),
     ]
 
 

diff --git a/geonode_mapstore_client/client/js/api/geonode/config/index.js b/geonode_mapstore_client/client/js/api/geonode/config/index.js
@@ -22,4 +22,3 @@ export default {
     getNewMapConfiguration,
     getNewGeoStoryConfig
 };
-
diff --git a/...i/geonode/adapter/__tests__/index-test.js → ...js/api/geonode/v2/__tests__/index-test.js b/...i/geonode/adapter/__tests__/index-test.js → ...js/api/geonode/v2/__tests__/index-test.js
@@ -16,7 +16,7 @@ import {
 
 let mockAxios;
 
-describe('GeoNode adapter api', () => {
+describe('GeoNode v2 api', () => {
     beforeEach(done => {
         global.__DEVTOOLS__ = true;
         mockAxios = new MockAdapter(axios);

diff --git a/...pstore_client/client/js/apps/gn-viewer.js → ...ore_client/client/js/apps/gn-catalogue.js b/...pstore_client/client/js/apps/gn-viewer.js → ...ore_client/client/js/apps/gn-catalogue.js
@@ -36,11 +36,14 @@ import searchconfig from '@mapstore/framework/reducers/searchconfig';
 import widgets from '@mapstore/framework/reducers/widgets';
 // end
 
+import SearchRoute from '@js/routes/Search';
+import DetailRoute from '@js/routes/Detail';
 import LayerViewerRoute from '@js/routes/LayerViewer';
 import MapViewerRoute from '@js/routes/MapViewer';
 import GeoStoryViewerRoute from '@js/routes/GeoStoryViewer';
 import DocumentViewerRoute from '@js/routes/DocumentViewer';
 
+import gnsearch from '@js/reducers/gnsearch';
 import gnresource from '@js/reducers/gnresource';
 import gnsettings from '@js/reducers/gnsettings';
 
@@ -52,7 +55,6 @@ import {
 
 import {
     setupConfiguration,
-    getVersion,
     initializeApp,
     getPluginsConfiguration
 } from '@js/utils/AppUtils';
@@ -64,6 +66,8 @@ import {
     gnSetLayersPermissions
 } from '@js/epics';
 import gnviewerEpics from '@js/epics/gnviewer';
+import gnsearchEpics from '@js/epics/gnsearch';
+import gnlocaleEpics from '@js/epics/gnlocale';
 import maplayout from '@mapstore/framework/reducers/maplayout';
 
 import pluginsDefinition from '@js/plugins/index';
@@ -126,6 +130,23 @@ const routes = [
             '/document/:pk'
         ],
         component: DocumentViewerRoute
+    },
+    {
+        name: 'resources',
+        path: [
+            '/',
+            '/search/',
+            '/search/filter'
+        ],
+        component: SearchRoute
+    },
+    {
+        name: 'detail',
+        path: [
+            '/detail/:pk',
+            '/detail/:ctype/:pk'
+        ],
+        component: DetailRoute
     }
 ];
 
@@ -172,13 +193,7 @@ Promise.all([
                             }
                         }
                     },
-                    themeCfg: {
-                        path: '/static/mapstore/dist/themes',
-                        prefixContainer: undefined,
-                        version: getVersion(),
-                        prefix: 'msgapi',
-                        theme: 'geonode'
-                    },
+                    themeCfg: null,
                     pluginsConfig: getPluginsConfiguration(localConfig.plugins, pluginsConfigKey),
                     lazyPlugins: pluginsDefinition.lazyPlugins,
                     pluginsDef: {
@@ -210,6 +225,7 @@ Promise.all([
                         searchconfig,
                         widgets,
                         geostory,
+                        gnsearch,
                         ...pluginsDefinition.reducers
                     },
                     appEpics: {
@@ -218,7 +234,9 @@ Promise.all([
                         gnCheckSelectedLayerPermissions,
                         gnSetLayersPermissions,
                         ...pluginsDefinition.epics,
-                        ...gnviewerEpics
+                        ...gnviewerEpics,
+                        ...gnsearchEpics,
+                        ...gnlocaleEpics
                     },
                     geoNodeConfiguration,
                     initialActions: [

diff --git a/geonode_mapstore_client/client/js/apps/gn-home.jsx b/geonode_mapstore_client/client/js/apps/gn-home.jsx
@@ -15,8 +15,6 @@ import security from '@mapstore/framework/reducers/security';
 import controls from '@mapstore/framework/reducers/controls';
 
 import Home from '@js/routes/Home';
-import SearchRoute from '@js/routes/Search';
-import DetailRoute from '@js/routes/Detail';
 
 import gnsearch from '@js/reducers/gnsearch';
 import gnresource from '@js/reducers/gnresource';
@@ -33,8 +31,7 @@ import {
 
 import {
     setupConfiguration,
-    initializeApp,
-    getVersion
+    initializeApp
 } from '@js/utils/AppUtils';
 
 const DEFAULT_LOCALE = {};
@@ -47,23 +44,7 @@ const routes = [
         name: 'homepage',
         path: '/',
         component: Home
-    },
-    {
-        name: 'resources',
-        path: [
-            '/search/'
-        ],
-        component: SearchRoute
-    },
-    {
-        name: 'detail',
-        path: [
-            '/detail/:pk',
-            '/detail/:ctype/:pk'
-        ],
-        component: DetailRoute
     }
-
 ];
 
 initializeApp();
@@ -94,13 +75,7 @@ Promise.all([
                 }
             },
             pluginsConfig: localConfig.plugins || [],
-            themeCfg: {
-                path: '/static/mapstore/dist/themes',
-                prefixContainer: 'body',
-                version: getVersion(),
-                prefix: 'msgapi',
-                theme: 'geonode'
-            },
+            themeCfg: null,
             appReducers: {
                 gnsearch,
                 gnresource,

diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
@@ -13,7 +13,7 @@ import BurgerMenu from '@js/components/Menu/BurgerMenu';
 import useResizeElement from '@js/hooks/useResizeElement';
 
 
-const LeftContentMenu = ({ items, formatHref, query }) => {
+const LeftContentMenu = ({ items, formatHref, query, variant, size }) => {
 
     const navbarContentLeft = useRef();
     const navbarLeft = useRef();
@@ -26,23 +26,23 @@ const LeftContentMenu = ({ items, formatHref, query }) => {
 
     return (
         <div
-            className={`gn-action-navbar-content-left`}
+            className={`gn-menu-content-side gn-menu-content-left`}
             ref={navbarContentLeft}
         >
             {
-                (switchToBurgerMenu) && items && <BurgerMenu items={items} />
+                (switchToBurgerMenu) && items && <BurgerMenu items={items} variant={variant}/>
             }
 
             { (!switchToBurgerMenu) && items &&
 
                 <Menu
                     ref={navbarLeft}
                     items={items}
-                    containerClass={`gn-brand-navbar-left-side`}
-                    childrenClass={`gn-user-dropdown`}
+                    containerClass={`gn-menu-list`}
                     formatHref={formatHref}
                     query={query}
-                    variant="primary"
+                    variant={variant}
+                    size={size}
                 />
 
             }
@@ -52,7 +52,7 @@ const LeftContentMenu = ({ items, formatHref, query }) => {
 };
 
 
-const RightContentMenu = ({ items, formatHref, query, parentRef, cfg }) => {
+const RightContentMenu = ({ items, formatHref, query, parentRef, cfg, variant, size }) => {
 
     const navbarContentRight = useRef();
     const navbarRight = useRef();
@@ -68,24 +68,24 @@ const RightContentMenu = ({ items, formatHref, query, parentRef, cfg }) => {
     return (
         <div
             ref={navbarContentRight}
-            className={`gn-action-navbar-content-right`}
+            className={`gn-menu-content-right`}
             style={cfg?.style}
         >
 
             {
-                (switchToBurgerMenu) && items && <BurgerMenu items={items} />
+                (switchToBurgerMenu) && items && <BurgerMenu items={items} variant={variant}/>
             }
 
             {(!switchToBurgerMenu) && items &&
                 <Menu
                     ref={navbarRight}
                     items={items}
-                    containerClass={`gn-brand-navbar-right-side`}
-                    childrenClass={`gn-user-dropdown`}
+                    containerClass={`gn-menu-list`}
                     formatHref={formatHref}
                     query={query}
-                    variant="primary"
+                    variant={variant}
                     alignRight
+                    size={size}
                 />
 
             }
@@ -103,20 +103,21 @@ const ActionNavbar = forwardRef(({
     rightItems,
     query,
     formatHref,
-    tools,
-    cfg
+    cfg,
+    variant,
+    size
 }, ref) => {
 
     return (
         <nav
             ref={ref}
-            className={`gn-action-navbar`}
+            className={`gn-menu gn-${variant}`}
             style={style}
         >
-            <div className={`gn-action-navbar-container`}>
+            <div className={`gn-menu-container`}>
 
                 <div
-                    className={`gn-action-navbar-content`}
+                    className={`gn-menu-content`}
                 >
 
                     {
@@ -125,6 +126,8 @@ const ActionNavbar = forwardRef(({
                             items={leftItems}
                             formatHref={formatHref}
                             query={query}
+                            variant={variant}
+                            size={size}
                         />
                     }
 
@@ -137,13 +140,10 @@ const ActionNavbar = forwardRef(({
                             query={query}
                             parentRef={ref}
                             cfg={cfg?.rightContents}
+                            variant={variant}
+                            size={size}
                         />
                     }
-
-
-                    <div className={`gn-action-navbar-content-tools`}>
-                        {tools}
-                    </div>
                 </div>
 
 
@@ -159,14 +159,16 @@ ActionNavbar.propTypes = {
     leftItems: PropTypes.array,
     rightItems: PropTypes.array,
     query: PropTypes.object,
-    formatHref: PropTypes.func
+    formatHref: PropTypes.func,
+    variant: PropTypes.string
 };
 
 ActionNavbar.defaultProps = {
     leftItems: [],
     rightItems: [],
     query: {},
-    formatHref: () => '#'
+    formatHref: () => '#',
+    variant: 'primary'
 };
 
 

diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/__test__/ActionNavbar-test.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/__test__/ActionNavbar-test.jsx
@@ -186,7 +186,7 @@ describe('Test GeoNode action navbar component', () => {
     });
     it('should render with default', () => {
         ReactDOM.render( <ActionNavbar/>, document.getElementById("container"));
-        const el = document.querySelector('.gn-action-navbar');
+        const el = document.querySelector('.gn-menu');
         expect(el).toExist();
     });
 
@@ -196,9 +196,9 @@ describe('Test GeoNode action navbar component', () => {
             rightItems={conf.rightItems.items}
         />, document.getElementById("container"));
 
-        const el = document.querySelector('.gn-action-navbar');
+        const el = document.querySelector('.gn-menu');
         expect(el).toExist();
-        const navBarContent = document.querySelector('.gn-action-navbar-content');
+        const navBarContent = document.querySelector('.gn-menu-content');
         expect(navBarContent).toExist();
 
     });