#1769: Implement catalog pages and page specific configurations (#1770)

* #1769: Implement catalog pages and page specific configurations * updated unit test * update reference * updated labels * update logo url and label size * update path and plugins * update redirection for all
GeoNode · May 28, 2024 · 4c369c0 · 4c369c0
1 parent 7956efc
commit 4c369c0
Show file tree

Hide file tree

Showing 33 changed files with 720 additions and 102 deletions.
diff --git a/geonode_mapstore_client/client/js/actions/gnresource.js b/geonode_mapstore_client/client/js/actions/gnresource.js
@@ -38,6 +38,7 @@ export const SET_RESOURCE_EXTENT = 'GEONODE_SET_RESOURCE_EXTENT';
 export const SET_RESOURCE_PATH_PARAMETERS = 'GEONODE:SET_RESOURCE_PATH_PARAMETERS';
 export const SET_MAP_VIEWER_LINKED_RESOURCE = 'GEONODE:SET_MAP_VIEWER_LINKED_RESOURCE';
 export const MANAGE_LINKED_RESOURCE = 'GEONODE:MANAGE_LINKED_RESOURCE';
+export const SET_SELECTED_LAYER_DATASET = 'GEONODE:SET_SELECTED_LAYER_DATASET';
 
 /**
 * Actions for GeoNode resource
@@ -349,3 +350,15 @@ export function setMapViewerLinkedResource(resource) {
  resource
  };
 }
+
+/**
+* Set selected layer type is from dataset
+* @param {Object} layer selected
+*/
+
+export function setSelectedLayerType(layer) {
+ return {
+ type: SET_SELECTED_LAYER_DATASET,
+ layer
+ };
+}
diff --git a/geonode_mapstore_client/client/js/epics/gnresource.js b/geonode_mapstore_client/client/js/epics/gnresource.js
@@ -639,9 +639,9 @@ export const gnManageLinkedResource = (action$, store) =>
  message: `gnviewer.linkedResource.message.success.${processType}`}
  ))
  )).catch(() => Observable.of(errorNotification({
-  title: "gnviewer.linkedResource.title",
-  message: `gnviewer.linkedResource.message.failure.${processType}`
-  })))
+ title: "gnviewer.linkedResource.title",
+ message: `gnviewer.linkedResource.message.failure.${processType}`
+ })))
  .let(wrapStartStop(
  setControlProperty(processType, 'loading', true),
  setControlProperty(processType, 'loading', false)

diff --git a/geonode_mapstore_client/client/js/epics/gnsearch.js b/geonode_mapstore_client/client/js/epics/gnsearch.js
@@ -149,7 +149,9 @@ const requestResourcesObservable = ({
 }, store) => {
  const state = store.getState();
  const customFilters = getCustomMenuFilters(state);
- const requestParams = cleanParams({ ...params, ...state?.gnsearch?.config?.defaultQuery });
+ let { resource, f, ...defaultQuery } = state?.gnsearch?.config?.defaultQuery ?? {};
+ f = castArray(params.f ?? []).concat([...castArray(resource ?? []), ...castArray(f ?? [])]);
+ const requestParams = cleanParams({ ...params, ...defaultQuery, ...(!isEmpty(f) && {f}) });
  return Observable
  .defer(() => getResources({
  ...requestParams,

diff --git a/geonode_mapstore_client/client/js/epics/index.js b/geonode_mapstore_client/client/js/epics/index.js
@@ -18,7 +18,7 @@ import { getDatasetByName, getDatasetsByName } from '@js/api/geonode/v2';
 import { MAP_CONFIG_LOADED } from '@mapstore/framework/actions/config';
 import { setPermission } from '@mapstore/framework/actions/featuregrid';
 import { SELECT_NODE, updateNode, ADD_LAYER } from '@mapstore/framework/actions/layers';
-import { setSelectedDatasetPermissions } from '@js/actions/gnresource';
+import { setSelectedDatasetPermissions, setSelectedLayerType } from '@js/actions/gnresource';
 import { updateMapLayoutEpic as msUpdateMapLayoutEpic } from '@mapstore/framework/epics/maplayout';
 
 // We need to include missing epics. The plugins that normally include this epic is not used.
@@ -44,12 +44,14 @@ export const gnCheckSelectedDatasetPermissions = (action$, { getState } = {}) =>
  ? Rx.Observable.of(
  setPermission({canEdit}),
  setEditPermissionStyleEditor(canEditStyles),
- setSelectedDatasetPermissions(permissions)
+ setSelectedDatasetPermissions(permissions),
+ setSelectedLayerType(layer)
  )
  : Rx.Observable.of(
  setPermission({canEdit: false}),
  setEditPermissionStyleEditor(false),
- setSelectedDatasetPermissions([])
+ setSelectedDatasetPermissions([]),
+ setSelectedLayerType(null)
  );
  });
 

diff --git a/geonode_mapstore_client/client/js/epics/layersettings.js b/geonode_mapstore_client/client/js/epics/layersettings.js
@@ -37,7 +37,7 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) =>
  },
  boundingSideBarReact: {
  ...boundingSidebarRect,
- ...layout.boundingSidebarRect
+ ...layout?.boundingSidebarRect
  }
  });
  return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.

diff --git a/geonode_mapstore_client/client/js/plugins/DeleteResource.jsx b/geonode_mapstore_client/client/js/plugins/DeleteResource.jsx
@@ -25,7 +25,7 @@ import Loader from '@mapstore/framework/components/misc/Loader';
 import controls from '@mapstore/framework/reducers/controls';
 import { isLoggedIn } from '@mapstore/framework/selectors/security';
 import { hashLocationToHref } from '@js/utils/SearchUtils';
-import { ResourceTypes } from '@js/utils/ResourceUtils';
+import { ResourceTypes, onDeleteRedirectTo } from '@js/utils/ResourceUtils';
 
 const simulateAClick = (href) => {
  const a = document.createElement('a');
@@ -70,7 +70,7 @@ function DeleteResourcePlugin({
  resources = [],
  onClose = () => {},
  onDelete = () => {},
- redirectTo = '/',
+ redirectTo,
  loading,
  location,
  selectedResource
@@ -101,7 +101,7 @@ function DeleteResourcePlugin({
  excludeQueryKeys: ['d']
  }));
  }
- onDelete(resources, redirectTo);
+ onDelete(resources, onDeleteRedirectTo(resources));
  }
  }]
  }

diff --git a/geonode_mapstore_client/client/js/plugins/ResourcesGrid.jsx b/geonode_mapstore_client/client/js/plugins/ResourcesGrid.jsx
@@ -118,6 +118,40 @@ function PaginationCustom({
  );
 }
 
+const removeMenuHighlight = () => {
+ // Remove previous higlighted menu
+ const menuHiglighted = document.querySelector('#gn-topbar .highlight-menu');
+ menuHiglighted?.classList.remove('highlight-menu');
+};
+const getCatalogPage = (pathname) => {
+ const {params: {page} = {}} = matchPath(pathname, { path: "/:page", exact: true }) ?? {};
+ return page;
+};
+const withPageConfig = (Component) => {
+ return (props) => {
+ useEffect(() => {
+ // highlight topbar menu item based on catalog page
+ const page = getCatalogPage(props.location.pathname);
+
+ if (page) {
+ removeMenuHighlight();
+
+ const topbarMenu = document.querySelector(`#gn-topbar #${page}`);
+ topbarMenu?.classList.add('highlight-menu');
+ } else {
+ removeMenuHighlight();
+ }
+ }, [props.location.pathname]);
+
+ const mergePropsWithPageConfigs = () => {
+ const pageName = getCatalogPage(props.location.pathname, props);
+ return {...props, ...props?.[`${pageName}Page`]};
+ };
+
+ return <Component {...mergePropsWithPageConfigs()} />;
+ };
+};
+
 /**
 * @module ResourcesGrid
 */
@@ -227,7 +261,7 @@ function ResourcesGrid({
  menuItems = [
  {
  labelId: 'gnhome.addResource',
- disableIf: "{(state('settings') && state('settings').isMobile) || !(state('user') && state('user').perms && state('user').perms.includes('add_resource')) ? true : false}",
+ disableIf: "{(state('settings') && state('settings').isMobile) || !(state('user') && state('user').perms && state('user').perms.includes('add_resource'))}",
  type: 'dropdown',
  variant: 'primary',
  responsive: true,
@@ -432,7 +466,7 @@ function ResourcesGrid({
  pagination,
  disableDetailPanel,
  disableFilters,
- filterPagePath = getCataloguePath('/catalogue/#/search/filter'),
+ filterPagePath = '/catalogue/#/search/filter',
  resourceCardActionsOrder = [
  ProcessTypes.DELETE_RESOURCE,
  ProcessTypes.COPY_RESOURCE,
@@ -445,7 +479,8 @@ function ResourcesGrid({
  onGetFacets,
  facets,
  filters,
- setFilters
+ setFilters,
+ ...props
 }, context) {
 
  const [_cardLayoutStyleState, setCardLayoutStyle] = useLocalStorage('layoutCardsStyle', defaultCardLayoutStyle);
@@ -501,7 +536,7 @@ function ResourcesGrid({
 
  const handleShowFilterForm = (show) => {
  if (show && disableFilters) {
- simulateAClick(filterPagePath);
+ simulateAClick(getCataloguePath(filterPagePath));
  } else {
  if (!isEmpty(resource)) {
  const href = closeDetailPanelHref();
@@ -511,12 +546,38 @@ function ResourcesGrid({
  }
  };
 
+ const isCatalogPage = (pathname) => {
+ const isConfigPresent = !!props?.[`${pathname.replace('/', '')}Page`];
+
+ // to be a catalog page it should have configuration
+ return getCatalogPage(pathname) && isConfigPresent;
+ };
+
+ const getMatchPath = () => {
+ const pathname = location.pathname;
+ const matchedPath = [
+ '/search',
+ '/search/filter',
+ '/detail/:pk',
+ '/detail/:resourceType/:pk',
+ '/:page'
+ ].find((path) => matchPath(pathname, { path, exact: true }));
+ return matchedPath;
+ };
+
+ const getUpdatedPathName = (pathname) => {
+ if (isEmpty(pathname)) {
+ return isCatalogPage(location.pathname) ? location.pathname : '/';
+ }
+ return pathname;
+ };
+
  function handleUpdate(newParams, pathname) {
  const { query } = url.parse(location.search, true);
  onSearch({
  ...omit(query, ['page']),
  ...newParams
- }, pathname);
+ }, getUpdatedPathName(pathname));
  }
 
  function handleClear() {
@@ -539,7 +600,13 @@ function ResourcesGrid({
  }, [cardLayoutStyle]);
 
  useEffect(() => {
- if (init) {
+ let pathname = location.pathname;
+ const initialize = (pathname === '/'
+ || !isEmpty(getMatchPath())
+ || isCatalogPage(pathname)) && init;
+
+ if (initialize) {
+ pathname = getUpdatedPathName();
  onInit({
  defaultQuery,
  pageSize,
@@ -556,9 +623,9 @@ function ResourcesGrid({
  onSearch({
  ...query,
  ...(page && { page })
- }, undefined, true);
+ }, pathname, true);
  }
- }, [init, isPaginated]);
+ }, [init, isPaginated, location.pathname]);
 
  const [top, setTop] = useState(0);
  const [bottom, setBottom] = useState(0);
@@ -596,19 +663,13 @@ function ResourcesGrid({
  useEffect(() => {
  if (!panel) {
  const pathname = location.pathname;
- const matchedPath = [
- '/search',
- '/search/filter',
- '/detail/:pk',
- '/detail/:resourceType/:pk'
- ].find((path) => matchPath(pathname, { path, exact: true }));
+ const matchedPath = getMatchPath();
  if (matchedPath) {
  const options = matchPath(pathname, { path: matchedPath, exact: true });
- onReplaceLocation('' + (location.search || ''));
+ !isCatalogPage(location.pathname) && onReplaceLocation('' + (location.search || ''));
  switch (options.path) {
  case '/search':
  case '/detail/:pk': {
- //
  break;
  }
  case '/search/filter': {
@@ -824,7 +885,7 @@ const ResourcesGridPlugin = connect(
  onGetFacets: getFacetItems,
  setFilters: setFiltersAction
  }
-)(withResizeDetector(ResourcesGrid));
+)(withResizeDetector(withPageConfig(ResourcesGrid)));
 
 export default createPlugin('ResourcesGrid', {
  component: ResourcesGridPlugin,

diff --git a/geonode_mapstore_client/client/js/reducers/gnresource.js b/geonode_mapstore_client/client/js/reducers/gnresource.js
@@ -8,6 +8,7 @@
 
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
 
 import {
  RESOURCE_LOADING,
@@ -32,7 +33,8 @@ import {
  ENABLE_MAP_THUMBNAIL_VIEWER,
  SET_RESOURCE_EXTENT,
  SET_RESOURCE_PATH_PARAMETERS,
- SET_MAP_VIEWER_LINKED_RESOURCE
+ SET_MAP_VIEWER_LINKED_RESOURCE,
+ SET_SELECTED_LAYER_DATASET
 } from '@js/actions/gnresource';
 import {
  cleanCompactPermissions,
@@ -238,6 +240,11 @@ function gnresource(state = defaultState, action) {
  ...state,
  viewerLinkedResource: action.resource
  };
+ case SET_SELECTED_LAYER_DATASET:
+ return {
+ ...state,
+ selectedLayerIsDataset: !isNil(action.layer?.extendedParams?.pk)
+ };
  default:
  return state;
  }

diff --git a/geonode_mapstore_client/client/js/routes/Catalogue.jsx b/geonode_mapstore_client/client/js/routes/Catalogue.jsx
@@ -53,10 +53,15 @@ function getPluginsConfiguration(name, pluginsConfig) {
 
 const withRedirect = (Component) => {
  return (props) => {
+ const { pathname, search } = props.location ?? {};
  const catalogHomeRedirectsTo = getGeoNodeLocalConfig('geoNodeSettings.catalogHomeRedirectsTo');
+ const defaultCatalogPage = getGeoNodeLocalConfig('geoNodeSettings.defaultCatalogPage');
  if (!isEmpty(catalogHomeRedirectsTo)) {
- const search = props.location?.search ?? "";
- window.location.href = `${catalogHomeRedirectsTo}#/${search ? search : ""}`;
+ window.location.href = `${catalogHomeRedirectsTo}#/${!isEmpty(defaultCatalogPage) ? defaultCatalogPage : search ? search : ""}`;
+ return null;
+ }
+ if (!isEmpty(defaultCatalogPage) && pathname === '/' && isEmpty(search)) {
+ window.location.href = `#/${defaultCatalogPage ? defaultCatalogPage : ""}`;
  return null;
  }
  return <Component {...props}/>;

diff --git a/geonode_mapstore_client/client/js/utils/AppRoutesUtils.js b/geonode_mapstore_client/client/js/utils/AppRoutesUtils.js
@@ -178,7 +178,8 @@ export const CATALOGUE_ROUTES = [
  '/search/',
  '/search/filter',
  '/detail/:pk',
- '/detail/:ctype/:pk'
+ '/detail/:ctype/:pk',
+ '/:page'
  ],
  component: appRouteComponentTypes.CATALOGUE
  },

diff --git a/geonode_mapstore_client/client/js/utils/PluginsContextUtils.js b/geonode_mapstore_client/client/js/utils/PluginsContextUtils.js
@@ -12,8 +12,7 @@ import {
  resourceHasPermission,
  canCopyResource,
  isDocumentExternalSource,
- getCataloguePath,
- isDatasetLayer
+ getCataloguePath
 } from '@js/utils/ResourceUtils';
 import get from 'lodash/get';
 
@@ -47,6 +46,5 @@ export const getPluginsContext = () => ({
  getUserResourceName,
  getUserResourceNames,
  isDocumentExternalSource,
- getCataloguePath,
- isDatasetLayer
+ getCataloguePath
 });