@eeacms/volto-clms-theme 1.0.68 → 1.0.69

package/CHANGELOG.md

@@ -4,8 +4,27 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.69](https://github.com/eea/volto-clms-theme/compare/1.0.68...1.0.69)
+
+- new set of action and reducers to import WMS layers from a new endpoint [`#204`](https://github.com/eea/volto-clms-theme/pull/204)
+- Bugs n improvements [`#205`](https://github.com/eea/volto-clms-theme/pull/205)
+- add react-input-range to transformIgnorePatterns [`e3c704d`](https://github.com/eea/volto-clms-theme/commit/e3c704d4e0569d55b1c5cf50a3bf3191452aea38)
+- global search variation [`3599a89`](https://github.com/eea/volto-clms-theme/commit/3599a897c1cdbdb39041144d0b6610bb1debbe5a)
+- prettier [`bc6f853`](https://github.com/eea/volto-clms-theme/commit/bc6f85356460b5e03f3bbda134318adc5950d30f)
+- fix tests [`09cd0b9`](https://github.com/eea/volto-clms-theme/commit/09cd0b99706492f2a24e79ed6f280fe6e023e084)
+- Map styles [`ed902d4`](https://github.com/eea/volto-clms-theme/commit/ed902d49b46341ebdc1d12ceb6a1ca49129a4cd7)
+- elvis [`09886c4`](https://github.com/eea/volto-clms-theme/commit/09886c40b1cab893cc94aaed3ded237aadf1171b)
+- fix test [`50c0e5a`](https://github.com/eea/volto-clms-theme/commit/50c0e5a4231833596ae738ef6a4d76f63eaf5c22)
+- fix test [`1d2669f`](https://github.com/eea/volto-clms-theme/commit/1d2669ffb71c33ae692b4023a85ce4c6a76c0cec)
+- double range facet for temporal extent filter [`118e622`](https://github.com/eea/volto-clms-theme/commit/118e622eca2486893e5993bfd89f1024a922a184)
+- Header responsive [`872534f`](https://github.com/eea/volto-clms-theme/commit/872534fd9bf616447b60c4a87fe62e544cafdc1b)
+- News/Event line color [`e144da8`](https://github.com/eea/volto-clms-theme/commit/e144da8845dece2098312af1fdcfa4901bbaeabe)
+
 #### [1.0.68](https://github.com/eea/volto-clms-theme/compare/1.0.67...1.0.68)
 
+> 14 February 2022
+
+- Develop [`#203`](https://github.com/eea/volto-clms-theme/pull/203)
 - fix underpanel [`d665279`](https://github.com/eea/volto-clms-theme/commit/d665279a8b2fefc450353af0121325c375d32cb5)
 - Selected files information, option to clear selection and indeterminate checkbox at header [`b72f476`](https://github.com/eea/volto-clms-theme/commit/b72f476a2bd382fd2cce4ed8abc9134fb05ceb32)
 

package/jest-addon.config.js

@@ -28,7 +28,7 @@ module.exports = {
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(@eeacms/volto-clms-utils/|@plone/volto/|slick-carousel))',
+    'node_modules/(?!(@eeacms/volto-clms-utils/|@plone/volto/|slick-carousel|react-input-range))',
   ],
   coverageThreshold: {
     global: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -49,7 +49,8 @@
     "react-svg": "14.0.4",
     "slick-carousel": "1.8.1",
     "volto-dropdownmenu": "2.2.7",
-    "volto-form-block": "2.2.2"
+    "volto-form-block": "2.2.2",
+    "react-input-range": "^1.3.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/actions/import_wms_layers/import_wms_layers.js

@@ -0,0 +1,20 @@
+/**
+ * Post meeting register actions.
+ * @module actions/postImportGeonetwork
+ */
+export const POST_IMPORT_WMS_LAYERS = 'POST_IMPORT_WMS_LAYERS';
+
+/**
+ * Post import geonetwork.
+ * @function postImportGeonetwork
+ * @returns {Object} Get extra items action.
+ */
+export function postImportWMSLayers(url, id, type) {
+  return {
+    type: POST_IMPORT_WMS_LAYERS,
+    request: {
+      op: 'post',
+      path: `${url}/@import-wms-layers`,
+    },
+  };
+}

package/src/actions/import_wms_layers/import_wms_layers.test.js

@@ -0,0 +1,15 @@
+import { postImportWMSLayers } from './import_wms_layers';
+import { POST_IMPORT_WMS_LAYERS } from './import_wms_layers';
+
+describe('Import geonetwork action', () => {
+  describe('postImportWMSLayers', () => {
+    it('should create an action to post geonetwork', () => {
+      const url = 'http://localhost';
+      const action = postImportWMSLayers(url);
+
+      expect(action.type).toEqual(POST_IMPORT_WMS_LAYERS);
+      expect(action.request.op).toEqual('post');
+      expect(action.request.path).toEqual(`${url}/@import-wms-layers`);
+    });
+  });
+});

package/src/actions/index.js

@@ -82,3 +82,8 @@ export {
   unsubscribeTo,
   confirmUnsubscribeTo,
 } from './subscription/post_subscription';
+
+export {
+  POST_IMPORT_WMS_LAYERS,
+  postImportWMSLayers,
+} from './import_wms_layers/import_wms_layers';

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards.jsx

@@ -25,7 +25,7 @@ const CclListingCards = (props) => {
   let containerClass = '';
   if (['news', 'event'].includes(variation)) {
     containerClass = 'ccl-container';
-  } else if (!['line', 'doc'].includes(variation)) {
+  } else if (!['line', 'doc', 'globalSearch'].includes(variation)) {
     containerClass = 'card-container';
   }
   return (

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -0,0 +1,74 @@
+import { Segment } from 'semantic-ui-react';
+import React, { useState } from 'react';
+import InputRange from 'react-input-range';
+import 'react-input-range/lib/css/index.css';
+import './range.css';
+
+const DoubleRangeFacet = (props) => {
+  const { facet, choices, onChange, value } = props;
+  const facetValue = value;
+  var [open, setOpen] = React.useState(false);
+
+  const convertToRange = (values) => {
+    return {
+      min: Math.min.apply(
+        Math,
+        values.map(function (o) {
+          return o.value;
+        }),
+      ),
+      max: Math.max.apply(
+        Math,
+        values.map(function (o) {
+          return o.value;
+        }),
+      ),
+    };
+  };
+
+  const startingValues = convertToRange(choices);
+
+  const [rangeValues, setRangeValues] = useState(startingValues);
+
+  const onChangeRange = (rValue, onChange) => {
+    setRangeValues(rValue);
+    onChange(
+      facet.field.value,
+      [...Array(rValue.max - rValue.min + 1).keys()].map((i) =>
+        (i + rValue.min).toString(),
+      ),
+    );
+  };
+
+  return (
+    <fieldset className="ccl-fieldset">
+      <div
+        className="ccl-expandable__button"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+        onKeyDown={() => setOpen(!open)}
+        tabIndex={0}
+        role={'button'}
+      >
+        <legend className="ccl-form-legend">
+          {facet.title} {startingValues.min} - {startingValues.max}
+        </legend>
+      </div>
+      <div>
+        <Segment basic padded>
+          <InputRange
+            minValue={startingValues.min}
+            maxValue={startingValues.max}
+            value={
+              facetValue.length > 0 ? convertToRange(facetValue) : rangeValues
+            }
+            onChange={(value) => onChangeRange(value, onChange)}
+          />
+        </Segment>
+        <br />
+      </div>
+    </fieldset>
+  );
+};
+
+export default DoubleRangeFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/FilterList.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Icon } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  currentFilters: {
+    id: 'Current filters applied',
+    defaultMessage: 'Current filters applied',
+  },
+  clearFilters: {
+    id: 'Clear filters',
+    defaultMessage: 'Clear filters',
+  },
+});
+
+const FilterList = (props) => {
+  const { facets, setFacets, isEditMode } = props;
+  const showFilterList = !Object.values(facets).every((facet) => !facet.length);
+
+  const currentFilters = Object.fromEntries(
+    Object.entries(facets).filter((v) => v[1] && v[0] !== 'SearchableText'),
+  );
+
+  const totalFilters = [].concat.apply([], Object.values(currentFilters))
+    .length;
+
+  const intl = useIntl();
+
+  return showFilterList && Object.keys(currentFilters).length ? (
+    <div className="accordion ui filter-listing">
+      <div
+        className="filter-list-header"
+        style={{ cursor: 'auto' }}
+        active={false}
+      >
+        <div className="filter-list-title">
+          {intl.formatMessage(messages.currentFilters)}: {totalFilters}
+        </div>
+        <Button
+          icon
+          basic
+          compact
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            !isEditMode && setFacets({});
+          }}
+        >
+          <Icon name="trash" />
+          {intl.formatMessage(messages.clearFilters)}
+        </Button>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default FilterList;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/RightModalFacets.jsx

@@ -1,13 +1,13 @@
 import { Button, Grid, Segment } from 'semantic-ui-react';
 import {
   Facets,
-  FilterList,
   SearchDetails,
   SearchInput,
   SortOn,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import { defineMessages, useIntl } from 'react-intl';
 
+import FilterList from './FilterList';
 import CclFiltersModal from '@eeacms/volto-clms-theme/components/CclFiltersModal/CclFiltersModal';
 import { Icon } from '@plone/volto/components';
 import React from 'react';
@@ -59,7 +59,6 @@ const RightModalFacets = (props) => {
   const { showSearchButton } = data;
   const isLive = !showSearchButton;
   const intl = useIntl();
-
   return (
     <Grid className="searchBlock-facets right-column-facets" stackable>
       {data?.headline && (

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/index.js

@@ -1,5 +1,14 @@
+import DoubleRangeFacet from './DoubleRangeFacet';
 import AccordionFacet from './AccordionFacet';
 import RightModalFacets from './RightModalFacets';
 import WithType from './WithType';
+import rewriteOptions, { portal_types_labels } from './rewriteOptions';
 
-export { RightModalFacets, AccordionFacet, WithType };
+export {
+  RightModalFacets,
+  AccordionFacet,
+  WithType,
+  DoubleRangeFacet,
+  rewriteOptions,
+  portal_types_labels,
+};

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/range.css

@@ -0,0 +1,5 @@
+.input-range__track--active,
+.input-range__slider {
+  border: #a0b128;
+  background: #a0b128;
+}

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/rewriteOptions.js

@@ -0,0 +1,49 @@
+export const portal_types_labels = {
+  DataSet: 'Dataset',
+  Product: 'Product',
+  'News Item': 'News',
+  'eea.meeting': 'Event',
+  UseCase: 'Use case',
+  WorkOpportunity: 'Work opportunity',
+  Tender: 'Tender',
+  TechnicalLibrary: 'Product documentation',
+};
+
+const rewriteOptions = (name, choices) => {
+  var result = choices;
+  if (name === 'review_state') {
+    result = choices.map((opt) => ({
+      ...opt,
+      label: opt.label.replace(/\[.+\]/, '').trim(),
+    }));
+  }
+  const portal_types = [
+    'DataSet',
+    'Product',
+    'News Item',
+    'eea.meeting',
+    'UseCase',
+    'WorkOpportunity',
+    'Tender',
+    'TechnicalLibrary',
+  ];
+
+  if (name === 'portal_type') {
+    result = choices
+      .filter((opt) => portal_types.includes(opt.value))
+      .map((opt) => {
+        return { ...opt, label: portal_types_labels[opt.value] };
+      })
+      .sort((a, b) => {
+        if (a.label < b.label) {
+          return -1;
+        } else if (a.label > b.label) {
+          return 1;
+        }
+        return 0;
+      });
+  }
+  return result;
+};
+
+export default rewriteOptions;

package/src/components/Blocks/customBlocks.js

@@ -2,6 +2,8 @@ import {
   AccordionFacet,
   RightModalFacets,
   WithType,
+  DoubleRangeFacet,
+  rewriteOptions,
 } from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoSearchBlock';
 import {
   CclCarouselView,
@@ -118,6 +120,7 @@ const availableVariations = [
     'CloseTenders',
     true,
   ),
+  listingVariation('CclGlobalSearch', false, 'Global search', 'globalSearch'),
 ];
 
 const customBlocks = (config) => ({
@@ -310,6 +313,9 @@ const customBlocks = (config) => ({
       ...config.blocks.blocksConfig.search.extensions,
       facetWidgets: {
         ...config.blocks.blocksConfig.search.extensions.facetWidgets,
+        rewriteOptions: (name, choices) => {
+          return rewriteOptions(name, choices);
+        },
         types: [
           {
             id: 'accordionCheckboxFacet',
@@ -323,6 +329,12 @@ const customBlocks = (config) => ({
             view: WithType(AccordionFacet, 'label'),
             isDefault: false,
           },
+          {
+            id: 'doubleRangeFacet',
+            title: 'Double Range',
+            view: DoubleRangeFacet,
+            isDefault: false,
+          },
           ...config.blocks.blocksConfig.search.extensions.facetWidgets.types,
         ],
       },

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -20,6 +20,7 @@ import { connect } from 'react-redux';
 import { getUser } from '@plone/volto/actions';
 import jwtDecode from 'jwt-decode';
 import { postImportGeonetwork } from '../../actions';
+import { postImportWMSLayers } from '../../actions';
 import { useLocation } from 'react-router-dom';
 
 /**
@@ -35,6 +36,7 @@ const CLMSDatasetDetailView = ({ content, token }) => {
   const geonetwork_importation = useSelector(
     (state) => state.geonetwork_importation,
   );
+  const wms_layers_importation = useSelector((state) => state.importWMSLayers);
   const user = useSelector((state) => state.users?.user);
   React.useEffect(() => {
     dispatch(getUser(token));
@@ -43,6 +45,11 @@ const CLMSDatasetDetailView = ({ content, token }) => {
   function handleImport(id, type) {
     dispatch(postImportGeonetwork(location.pathname, id, type));
   }
+
+  function handleWMSImport() {
+    dispatch(postImportWMSLayers(location.pathname));
+  }
+
   const [open, setOpen] = React.useState({});
   const locale = useSelector((state) => state.intl.locale);
 
@@ -50,7 +57,7 @@ const CLMSDatasetDetailView = ({ content, token }) => {
     <div className="ccl-container ">
       <h1 className="page-title">{content.title}</h1>
       {content.geonetwork_identifiers?.items?.length > 0 &&
-        user.roles &&
+        user?.roles &&
         user.roles.includes('Manager') && (
           <Segment.Group compact horizontal>
             {content.geonetwork_identifiers?.items.map((item) => {
@@ -178,6 +185,103 @@ const CLMSDatasetDetailView = ({ content, token }) => {
             })}
           </Segment.Group>
         )}
+
+      {user?.roles && user.roles.includes('Manager') && (
+        <Segment.Group compact horizontal>
+          <Segment
+            padded={'very'}
+            color={'olive'}
+            key={'wms-layers-import'}
+            loading={wms_layers_importation?.loading}
+            circular
+          >
+            <Modal
+              onClose={() => {
+                setOpen({ ...open, 'wms-layers-import': false });
+              }}
+              onOpen={() => {
+                setOpen({ ...open, 'wms-layers-import': true });
+              }}
+              open={open['wms-layers-import']}
+              trigger={
+                <CclButton>
+                  <FormattedMessage
+                    id="Import WMS Layers"
+                    defaultMessage="Import WMS Layers"
+                  />
+                </CclButton>
+              }
+              className={'modal-clms'}
+            >
+              <div className={'modal-clms-background'}>
+                <div className={'modal-clms-container'}>
+                  <div className={'modal-close modal-clms-close'}>
+                    <span
+                      className="ccl-icon-close"
+                      aria-label="Close"
+                      onClick={() => {
+                        setOpen({ ...open, 'wms-layers-import': false });
+                      }}
+                      onKeyDown={() => {
+                        setOpen({ ...open, 'wms-layers-import': false });
+                      }}
+                      tabIndex="0"
+                      role="button"
+                    ></span>
+                  </div>
+                  <div className="modal-login-text">
+                    <h1>
+                      <FormattedMessage
+                        id="Import WMS Layers"
+                        defaultMessage="Import WMS Layers"
+                      />
+                    </h1>
+                    This action will import the WMS Layers from the view service
+                    defined in the dataset or from GeoNetwork if the view
+                    service is not defined and a linked geonetwork record has a
+                    valid WMS service link
+                    <br />
+                    <br />
+                  </div>
+                  <CclButton
+                    onClick={() => {
+                      handleWMSImport();
+                      setOpen({ ...open, 'wms-layers-import': false });
+                    }}
+                    mode="filled"
+                  >
+                    <FormattedMessage
+                      id="Import data"
+                      defaultMessage="Import data"
+                    />
+                  </CclButton>
+                </div>
+              </div>
+            </Modal>
+            {wms_layers_importation?.imported_wms_layers?.status && (
+              <p>
+                {wms_layers_importation?.loaded &&
+                  wms_layers_importation?.error === null && (
+                    <strong>
+                      {' '}
+                      {wms_layers_importation?.imported_wms_layers?.message}
+                    </strong>
+                  )}
+              </p>
+            )}
+            {wms_layers_importation?.imported_wms_layers?.status ===
+              'error' && (
+              <p>
+                <strong>
+                  {' '}
+                  {wms_layers_importation?.imported_wms_layers?.message}
+                </strong>
+              </p>
+            )}
+          </Segment>
+        </Segment.Group>
+      )}
+
       <CclTabs routing={true}>
         <div tabTitle="General Info">{DataSetInfoContent(content)}</div>
         {content?.downloadable_dataset &&

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.test.jsx

@@ -7,6 +7,33 @@ import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 
 const mockStore = configureStore();
+let store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  search: {
+    subrequest: {
+      '123': { items: [] },
+    },
+  },
+  users: {
+    user: { roles: ['Manager'] },
+  },
+  importWMSLayers: {
+    imported_wms_layers: {
+      status: 'success',
+      message: 'message',
+    },
+    error: false,
+    loaded: true,
+    loading: false,
+  },
+  userSession: {
+    token:
+      'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
+  },
+});
 
 describe('CLMSDatasetDetailView', () => {
   it('Check metadata view', () => {
@@ -47,27 +74,7 @@ describe('CLMSDatasetDetailView', () => {
         },
       ],
     };
-    const store = mockStore({
-      content: {
-        ...content,
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-      search: {
-        subrequest: {
-          '123': { items: [] },
-        },
-      },
-      users: {
-        user: { roles: ['Manager'] },
-      },
-      userSession: {
-        token:
-          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
-      },
-    });
+    store.content = content;
 
     const DatasetDetailView = renderer
       .create(
@@ -107,27 +114,7 @@ describe('CLMSDatasetDetailView', () => {
       downloadable_dataset: true,
       downloadable_files: [],
     };
-    const store = mockStore({
-      content: {
-        ...content,
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-      search: {
-        subrequest: {
-          '123': { items: [] },
-        },
-      },
-      users: {
-        user: { roles: ['Manager'] },
-      },
-      userSession: {
-        token:
-          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
-      },
-    });
+    store.content = content;
 
     const DatasetDetailView = renderer
       .create(
@@ -159,25 +146,7 @@ describe('CLMSDatasetDetailView', () => {
         },
       ],
     };
-    const store = mockStore({
-      content: {
-        ...content,
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-      search: {
-        subrequest: {
-          '123': { items: [] },
-        },
-      },
-      user: { roles: ['Manager'] },
-      userSession: {
-        token:
-          'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTY0NDM4MzA0NCwiZnVsbG5hbWUiOm51bGx9.cB_q3Q0Jhu8h2m_SDmmknodpDxDLfb4o-qY6Y2plE04',
-      },
-    });
+    store.content = content;
     const DatasetDetailView = renderer
       .create(
         <Provider store={store}>

package/src/components/CclCard/CclCard.jsx

@@ -7,6 +7,8 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+import { Label } from 'semantic-ui-react';
+import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock';
 
 function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
@@ -16,17 +18,33 @@ function bytesToSize(bytes) {
 }
 function CclCard(props) {
   const { type, children, card } = props;
-  let url = card ? card['@id'] || card.hrerf || '/' : '/';
+  let url = '/';
+  let content_type = '';
+  if (card) {
+    url = card['@id'] || card.hrerf || '/';
+    content_type = portal_types_labels[card['@type']] || card['@type'];
+  }
+  const conditional_types = [
+    'doc',
+    'news',
+    'event',
+    'block',
+    'threeColumns',
+    'globalSearch',
+  ];
   return (
-    <div className={'card-' + (type || 'line')}>
-      {type === 'doc' ||
-      type === 'news' ||
-      type === 'event' ||
-      type === 'block' ||
-      type === 'threeColumns' ? (
+    <div
+      className={'card-' + (type === 'globalSearch' ? 'doc' : type || 'line')}
+    >
+      {conditional_types.includes(type) ? (
         <>
-          {type === 'doc' && (
+          {(type === 'doc' || type === 'globalSearch') && (
             <>
+              {type === 'globalSearch' && (
+                <Label ribbon="right" color="olive">
+                  {content_type}
+                </Label>
+              )}
               <div className="card-doc-title">
                 <Link to={url}>{card?.title || 'Card default title'}</Link>
               </div>

package/src/components/CclCard/CclCard.test.jsx

@@ -11,6 +11,7 @@ describe('CclCard', () => {
   const card = {
     title: 'title example',
     description: 'description example',
+    '@type': 'News Item',
     start:
       'Wed May 19 2021 12:49:04 GMT+0200 (hora de verano de Europa central)',
     end: 'Wed May 26 2024 12:49:04 GMT+0200 (hora de verano de Europa central)',

package/src/components/CclCard/cards.less

@@ -181,7 +181,7 @@
 
 .card-news:not(:last-of-type) {
   padding-bottom: 1rem;
-  border-bottom: solid 1px #ebebeb;
+  border-bottom: solid 1px #a0b12833;
   margin-bottom: 1rem;
 }
 
@@ -244,7 +244,7 @@
 
 .card-event:not(:last-of-type) {
   padding-bottom: 1rem;
-  border-bottom: solid 1px #ebebeb;
+  border-bottom: solid 1px #a0b12833;
   margin-bottom: 1rem;
 }
 

package/src/reducers/import_wms_layers/import_wms_layers.test.js

@@ -0,0 +1,60 @@
+import { importWMSLayersReducer } from './import_wms_layers_reducer';
+import { POST_IMPORT_WMS_LAYERS } from '../../actions';
+
+//jest test for importWMSLayersReducer
+describe('importWMSLayersReducer', () => {
+  it('should return the initial state', () => {
+    expect(importWMSLayersReducer(undefined)).toEqual({
+      error: null,
+      loaded: false,
+      loading: false,
+      imported_wms_layers: {},
+    });
+  });
+  //jest test for importWMSLayersReducer -success
+  it('should handle POST_IMPORT_WMS_LAYERS_SUCCESS', () => {
+    const action = {
+      type: `${POST_IMPORT_WMS_LAYERS}_SUCCESS`,
+      result: { imported_wms_layers: { id: '1' } },
+    };
+    expect(importWMSLayersReducer({}, action)).toEqual({
+      error: null,
+      loaded: true,
+      loading: false,
+      imported_wms_layers: action.result,
+    });
+  });
+  //jest test for importWMSLayersReducer -fail
+  it('should handle POST_IMPORT_WMS_LAYERS_FAIL', () => {
+    expect(
+      importWMSLayersReducer(
+        {},
+        {
+          type: `${POST_IMPORT_WMS_LAYERS}_FAIL`,
+          error: 'error',
+        },
+      ),
+    ).toEqual({
+      error: 'error',
+      loaded: false,
+      loading: false,
+      imported_wms_layers: {},
+    });
+  });
+  //jest test for importWMSLayersReducer -pending
+  it('should handle POST_IMPORT_WMS_LAYERS_PENDING', () => {
+    expect(
+      importWMSLayersReducer(
+        {},
+        {
+          type: `${POST_IMPORT_WMS_LAYERS}_PENDING`,
+        },
+      ),
+    ).toEqual({
+      error: null,
+      loaded: false,
+      loading: true,
+      imported_wms_layers: {},
+    });
+  });
+});

package/src/reducers/import_wms_layers/import_wms_layers_reducer.js

@@ -0,0 +1,44 @@
+/**
+ * @module reducers/import_wms_layers
+ */
+
+import { POST_IMPORT_WMS_LAYERS } from '../../actions';
+
+const initialState = {
+  error: null,
+  loaded: false,
+  loading: false,
+  imported_wms_layers: {},
+};
+
+export const importWMSLayersReducer = (state = initialState, action = {}) => {
+  switch (action?.type) {
+    case `${POST_IMPORT_WMS_LAYERS}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+        imported_wms_layers: {},
+      };
+    case `${POST_IMPORT_WMS_LAYERS}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        loaded: false,
+        loading: false,
+        imported_wms_layers: {},
+      };
+
+    case `${POST_IMPORT_WMS_LAYERS}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        loaded: true,
+        loading: false,
+        imported_wms_layers: action.result,
+      };
+    default:
+      return state;
+  }
+};

package/src/reducers/index.js

@@ -15,6 +15,7 @@ import { registryReducer } from './registry/registry';
 import { subscribeToReducer } from './subscription/subscription_reducer';
 import tokens from './tokens/tokens';
 import { userschemaReducer } from './userschema/userschema';
+import { importWMSLayersReducer } from './import_wms_layers/import_wms_layers_reducer';
 
 /**
  * Root reducer.
@@ -39,6 +40,7 @@ const reducers = {
   // subscribe_to_newsletter: newsletterReducer,
   newsletter_subscribers: newsletterSubscribersReducer,
   subscription: subscribeToReducer,
+  importWMSLayers: importWMSLayersReducer,
 };
 
 export default reducers;

package/theme/clms/css/header.css

@@ -634,12 +634,19 @@
   margin: 0;
   font-size: 1rem;
   line-height: 2.2rem;
+  white-space: nowrap;
 }
 
 .ccl-header .ccl-header-tools .ccl-header-menu-tools li > span {
   color: white;
   cursor: pointer;
 }
+@media (min-width: 820px) and (max-width: 992px) {
+  .ccl-header .ccl-header-tools .ccl-header-menu-tools li {
+    font-size: 0.875rem;
+  }
+}
+
 @media (max-width: 820px) {
   .ccl-header .ccl-header-nav .ccl-collapsible-toolmenu > li > span {
     display: block;

package/theme/clms/css/maps.css

@@ -389,7 +389,7 @@
 .land .map-menu-dataset>div:first-of-type {
 	display: flex;
 	width: 100%;
-	justify-content: space-between;
+	justify-content: flex-start;
 }
 
 .land .map-menu-layers-container {
@@ -531,6 +531,14 @@
 	box-shadow: none !important;
 }
 
+.info-table tr:nth-child(even) {
+	background-color: #a0b1280f;
+}
+
+.info-table tr:nth-child(odd) {
+	background-color: #a0b12833;
+}
+
 .land .map-login-block {
 	display: none;
 	margin: 1rem;

package/theme/clms/css/maps.less

@@ -404,7 +404,7 @@
   .map-menu-dataset > div:first-of-type {
     display: flex;
     width: 100%;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
 
   .map-menu-layers-container {
@@ -548,6 +548,15 @@
     box-shadow: none !important;
   }
 
+  /* Info widget */
+  .info-table tr:nth-child(even) {
+    background-color: #a0b1280f;
+  }
+  
+  .info-table tr:nth-child(odd) {
+    background-color: #a0b12833;
+  }
+
   /* Login */
   .map-login-block {
     display: none;
@@ -562,6 +571,7 @@
     margin: 1rem;
   }
 
+  /* Time slider */
   .esri-time-slider__time-extent-group > * {
     color: #273b4b;
   }

package/theme/clms/css/ownstyles.less

@@ -1000,7 +1000,7 @@ main .search-form button {
 .home-news-container:not(:last-of-type),
 .home-events-container:not(:last-of-type) {
   padding-bottom: 1rem;
-  border-bottom: solid 1px #ebebeb;
+  border-bottom: solid 1px #a0b12833;
   margin-bottom: 1rem;
 }