@eeacms/volto-cca-policy 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -4,6 +4,40 @@ 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).
 
+### [0.2.2](https://github.com/eea/volto-cca-policy/compare/0.2.1...0.2.2) - 10 April 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`bef8d95`](https://github.com/eea/volto-cca-policy/commit/bef8d955f006a5216d2950c3b926e1ee152acd7f)]
+- style: Automated code fix [eea-jenkins - [`eaaecb2`](https://github.com/eea/volto-cca-policy/commit/eaaecb2612d36b0385a7ddd77aaac15f20b3a6f4)]
+
+#### :hammer_and_wrench: Others
+
+- Remove unneeded var [Tiberiu Ichim - [`f2b3d08`](https://github.com/eea/volto-cca-policy/commit/f2b3d08ffdeedbeddb012e12e35439b357518d8e)]
+- Just retry. [Ghiță Bizău - [`0358369`](https://github.com/eea/volto-cca-policy/commit/035836983f9ef42a53204c2e87892d27bd420944)]
+- Refs #267791 - Fix eslint error. [GhitaB - [`69a5bf8`](https://github.com/eea/volto-cca-policy/commit/69a5bf8f5902577e4e25de6e0be2bc4515569768)]
+- Refs #267791 - Get rid of some duplicate lines. [GhitaB - [`a45a540`](https://github.com/eea/volto-cca-policy/commit/a45a540e10a888300dbd7f99bf7f740e704e96e3)]
+- Try to avoid code duplicates [Tiberiu Ichim - [`67bc6f9`](https://github.com/eea/volto-cca-policy/commit/67bc6f9ad01290c21a0008f439e777ad072ebf8c)]
+- Refs #267791 - Why was Sonarqube feeling down? It wanted to clean up duplicate code and comments, but it couldn't stop crying when it realized they were its only friends in the code!. [GhitaB - [`3ecebff`](https://github.com/eea/volto-cca-policy/commit/3ecebff4124470f27d7487ec1674d72284b1f11b)]
+- Add test [Tiberiu Ichim - [`056f5b2`](https://github.com/eea/volto-cca-policy/commit/056f5b24a6ca611e08a53acd5c69e48a9705830a)]
+- Add dependency for volto-tabs-block [Tiberiu Ichim - [`f8298e2`](https://github.com/eea/volto-cca-policy/commit/f8298e2a024399f9926007a6439badbfd210b311)]
+- Add Tabs spotlight [Tiberiu Ichim - [`959e34d`](https://github.com/eea/volto-cca-policy/commit/959e34db80983edc0052e7d307103681a30008db)]
+- Refs #267791 - Fix test. [GhitaB - [`5536f63`](https://github.com/eea/volto-cca-policy/commit/5536f63efd43f3144cfed53f063e56d57ee1d8f5)]
+- Refs #267791 - Fix test. [GhitaB - [`4d27c61`](https://github.com/eea/volto-cca-policy/commit/4d27c61f18d486bab47ef77e80dd152db223eda5)]
+- Refs #267791 - Solve disclaimer position, add styles. [GhitaB - [`62afa43`](https://github.com/eea/volto-cca-policy/commit/62afa4305837bb02af62c15551f524a76eb19a58)]
+- Add button for content tree migration [Tiberiu Ichim - [`48d08b1`](https://github.com/eea/volto-cca-policy/commit/48d08b18f1e97e95ce66558a998b62a2ec745672)]
+- Refs #267791 - Add test for MissionFundingCCAView. [GhitaB - [`2ef7e62`](https://github.com/eea/volto-cca-policy/commit/2ef7e62ef716f568641e280dcf56c91789d374f8)]
+- Refs #267791 - Improve conditions for visible fields. [GhitaB - [`6fac780`](https://github.com/eea/volto-cca-policy/commit/6fac7800680df3858e7d5df7e3d3ec268c757470)]
+- Refs #267791 - Add MissionFundingCCAView for mission_funding_cca. [GhitaB - [`8e6943f`](https://github.com/eea/volto-cca-policy/commit/8e6943f81cbfc4fc211762c0e556ef9d3ab99eb5)]
+### [0.2.1](https://github.com/eea/volto-cca-policy/compare/0.2.0...0.2.1) - 5 April 2024
+
+#### :bug: Bug Fixes
+
+- fix: default position for disclaimer [kreafox - [`1a8ab49`](https://github.com/eea/volto-cca-policy/commit/1a8ab496d091ef9894ca31bc2f1d6d226863e720)]
+
+#### :hammer_and_wrench: Others
+
+- Style improvements [kreafox - [`91d4e68`](https://github.com/eea/volto-cca-policy/commit/91d4e68512fdbaef0b9f1e9db8a227f629c9d17b)]
 ### [0.2.0](https://github.com/eea/volto-cca-policy/compare/0.1.102...0.2.0) - 5 April 2024
 
 #### :rocket: New Features

package/README.md

@@ -96,3 +96,4 @@ don-template/blob/master/LICENSE.md) for details.
 ## Funding
 
 [European Environment Agency (EU)](http://eea.europa.eu)
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,6 +26,7 @@
     "@eeacms/volto-datablocks",
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme",
+    "@eeacms/volto-tabs-block",
     "@eeacms/volto-globalsearch"
   ],
   "dependencies": {
@@ -38,6 +39,7 @@
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-searchlib": "*",
     "@eeacms/volto-slate-label": "*",
+    "@eeacms/volto-tabs-block": "*",
     "@eeacms/volto-widget-dataprovenance": "*",
     "@eeacms/volto-widget-geolocation": "*",
     "@eeacms/volto-widget-temporal-coverage": "*",

package/src/components/MigrationButtons.jsx

@@ -34,6 +34,12 @@ function MigrationButtons(props) {
         'M',
         `http://localhost:8080/cca/${base}/@@volto_migrate`,
       ),
+      button(
+        'migrationtree',
+        'Migrate Tree',
+        'MT',
+        `http://localhost:8080/cca/${base}/@@volto_contenttree`,
+      ),
       button(
         'view',
         'View original',

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.js

@@ -86,30 +86,3 @@ export default function CaseStudyExplorerView(props) {
     </div>
   );
 }
-
-// import { useDispatch } from 'react-redux'; // , useSelector
-// import { getVocabulary } from '@plone/volto/actions'; // , searchContent
-// const IPCC = 'eea.climateadapt.aceitems_ipcc_category';
-// const dispatch = useDispatch();
-// React.useEffect(() => {
-//   const action = getVocabulary({
-//     vocabNameOrURL: IPCC,
-//   });
-//   dispatch(action);
-// }, [dispatch]);
-// setMapKey(
-//   activeItems.length +
-//     '-' +
-//     activeFilters.sectors +
-//     '-' +
-//     activeFilters.impacts,
-// );
-//console.log('activeFilters filter cases', data);
-// setMapKey(
-//   activeItems.length +
-//     '-' +
-//     activeFilters.sectors +
-//     '-' +
-//     activeFilters.impacts,
-// );
-// const [mapKey, setMapKey] = React.useState('-');

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx

@@ -61,6 +61,7 @@ export default function CaseStudyMap(props) {
           selectedFeature={selectedCase}
           onFeatureSelect={onSelectedCase}
           layerId={tileWMSSources[0]}
+          hasCusters={true}
         />
         <FeatureInteraction onFeatureSelect={onSelectedCase} />
         <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx

@@ -12,6 +12,7 @@ export default function InfoOverlay({
   selectedFeature,
   onFeatureSelect,
   layerId,
+  hasCusters = false,
 }) {
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
@@ -41,7 +42,7 @@ export default function InfoOverlay({
       const { pixel, target } = evt;
       const features = target.getFeaturesAtPixel(pixel);
 
-      if (features.length && !isCluster(features)) {
+      if (features.length && (hasCusters ? !isCluster(features) : true)) {
         overlay.setPosition(coordinate);
         setShowTooltip(true);
       } else {
@@ -58,7 +59,7 @@ export default function InfoOverlay({
       map.un('click', handler);
       map.removeOverlay(overlay);
     };
-  }, [map, tooltip, onFeatureSelect]); //
+  }, [map, tooltip, onFeatureSelect, hasCusters]);
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.test.jsx

@@ -58,7 +58,6 @@ describe('CollectionStatsView', () => {
       userSession: { token: '1234' },
       intl: {
         locale: 'en',
-        messages: {},
       },
       querystats: {
         'id-1': {

package/src/components/manage/Blocks/MKHMap/View.jsx

@@ -11,7 +11,7 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
 import * as layers from './layers';
 import FeatureInteraction from './FeatureInteraction';
-import InfoOverlay from './InfoOverlay';
+import InfoOverlay from '@eeacms/volto-cca-policy/components/manage/Blocks/CaseStudyExplorer/InfoOverlay';
 
 import './styles.less';
 
@@ -87,6 +87,7 @@ export default function View(props) {
             <InfoOverlay
               selectedFeature={selectedFeature}
               layerId={sources?.[0]}
+              hasClusters={false}
             />
             <Controls attribution={false} zoom={false} />
             <Interactions

package/src/components/manage/Blocks/TabsBlock/Spotlight.jsx

@@ -0,0 +1,260 @@
+import React, { useState, useEffect } from 'react';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import cx from 'classnames';
+import { Menu, Tab, Container, Icon, Image } from 'semantic-ui-react';
+import { RenderBlocks } from '@plone/volto/components';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+import {
+  SimpleMarkdown,
+  getMenuPosition,
+} from '@eeacms/volto-tabs-block/utils';
+
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
+import '@eeacms/volto-tabs-block/less/menu.less';
+import './spotlight.less';
+
+export const AssetTab = ({ props, tabIndex, tabTitle }) => {
+  const {
+    icon,
+    image,
+    assetType,
+    assetPosition,
+    iconSize,
+    imageSize,
+    hideTitle,
+  } = props;
+  const imageObject = image?.[0];
+  return (
+    <div
+      className={cx('asset-position', {
+        'asset-top': assetPosition === 'top',
+        'asset-left': assetPosition === 'left',
+        'asset-right': assetPosition === 'right',
+      })}
+    >
+      {assetType === 'icon' && icon && (
+        <Icon
+          className={cx('tab-icon', icon, iconSize, 'aligned')}
+          {...{
+            ...(hideTitle && {
+              role: 'img',
+              'aria-hidden': 'false',
+              'aria-label': tabTitle,
+            }),
+          }}
+        />
+      )}
+
+      {assetType === 'image' && imageObject && (
+        <Image
+          src={
+            isInternalURL(imageObject['@id'])
+              ? `${flattenToAppURL(imageObject['@id'])}/${
+                  imageObject?.image_scales?.image?.[0].scales?.[imageSize]
+                    ?.download || imageObject?.image_scales?.image?.[0].download
+                }`
+              : imageObject['@id']
+          }
+          className={cx('ui', imageSize, 'aligned')}
+          alt={hideTitle ? tabTitle : ''}
+        />
+      )}
+
+      {!hideTitle && (
+        <div>
+          <span className="menu-item-count">{tabIndex}</span>
+          <span className="menu-item-text">{tabTitle}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const MenuItem = (props) => {
+  const {
+    activeTab = null,
+    tabs = {},
+    setActiveTab = () => {},
+    tabsTitle,
+    tabsDescription,
+    blockId,
+  } = props;
+
+  const { tab, index } = props;
+  const tabIndex = index + 1;
+  const [tabChanged, setTabChanged] = useState(false);
+  const defaultTitle = `Tab ${tabIndex}`;
+  const tabSettings = tabs[tab];
+  const { title, assetType } = tabSettings;
+  const tabTitle = title || defaultTitle;
+
+  useEffect(() => {
+    if (
+      tabChanged === true &&
+      document?.getElementById(blockId)?.querySelector('#tab-pane-' + tab)
+    ) {
+      document
+        .getElementById(blockId)
+        .querySelector('#tab-pane-' + tab)
+        .focus();
+      setTabChanged(false);
+    }
+  }, [tabChanged, tab, blockId]);
+
+  const focusTab = () => {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      {index === 0 && (tabsTitle || tabsDescription) && (
+        <Menu.Item className="menu-title">
+          <SimpleMarkdown md={tabsTitle} defaultTag="##" className="title" />
+          <SimpleMarkdown md={tabsDescription} className="description" />
+        </Menu.Item>
+      )}
+      <Menu.Item
+        name={defaultTitle}
+        active={tab === activeTab}
+        aria-selected={tab === activeTab}
+        tabIndex={0}
+        role={'tab'}
+        onMouseOver={focusTab}
+        onFocus={focusTab}
+        onClick={focusTab}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            if (activeTab !== tab) {
+              setActiveTab(tab);
+            }
+            setTabChanged(true);
+          }
+        }}
+      >
+        <>
+          {assetType ? (
+            <AssetTab
+              props={tabSettings}
+              tabTitle={tabTitle}
+              tabIndex={tabIndex}
+            />
+          ) : (
+            <>
+              <span className="menu-item-count">{tabIndex}</span>
+              <span className="menu-item-text">{tabTitle}</span>
+            </>
+          )}
+        </>
+      </Menu.Item>
+    </React.Fragment>
+  );
+};
+
+const View = (props) => {
+  const {
+    metadata = {},
+    data = {},
+    tabsList = [],
+    tabs = {},
+    activeTabIndex = 0,
+  } = props;
+  const [menuPosition, setMenuPosition] = React.useState({});
+  React.useEffect(() => {
+    if (Object.keys(menuPosition).length === 0) {
+      setMenuPosition(getMenuPosition(data));
+    }
+  }, [data, menuPosition]);
+
+  const {
+    title,
+    description,
+    align,
+    menuBorderless,
+    menuColor,
+    menuCompact,
+    menuFluid,
+    menuInverted,
+    menuPointing,
+    // menuSecondary,
+    menuSize,
+    menuStackable,
+    menuTabular,
+    menuText,
+    menuAlign,
+  } = data;
+  const isContainer = align === 'full';
+
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      menuItem: (
+        <MenuItem
+          {...props}
+          key={tab}
+          tab={tab}
+          index={index}
+          tabsTitle={title}
+          tabsDescription={description}
+          blockId={props?.id || ''}
+        />
+      ),
+      pane: (
+        <Tab.Pane key={tab} as={isContainer ? Container : undefined}>
+          <div
+            id={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
+            className="tab-name"
+          >
+            <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
+              <RenderBlocks
+                {...props}
+                metadata={metadata}
+                content={tabs[tab]}
+              />
+            </div>
+          </div>
+        </Tab.Pane>
+      ),
+    };
+  });
+
+  return (
+    <Tab
+      activeIndex={activeTabIndex}
+      className="tabs spotlight-tabs tabs-accessibility"
+      renderActiveOnly={false}
+      menu={{
+        role: 'tablist',
+        attached: menuPosition.attached,
+        borderless: menuBorderless,
+        color: menuColor,
+        compact: menuCompact,
+        fluid: menuFluid,
+        inverted: menuInverted,
+        pointing: menuPointing,
+        size: menuSize,
+        stackable: menuStackable,
+        tabular: menuTabular,
+        text: menuText,
+        vertical: menuPosition.vertical,
+        className: cx(
+          'menu-tabs-spotlight-variant',
+          menuAlign,
+          menuPosition.direction === 'left' ? 'border-right' : '',
+          menuPosition.direction === 'right' ? 'border-left' : '',
+          menuPosition.direction === 'top' ? 'border-bottom' : '',
+          menuPosition.direction === 'bottom' ? 'border-top' : '',
+          { container: isContainer },
+        ),
+      }}
+      menuPosition={menuPosition.direction}
+      panes={panes}
+    />
+  );
+};
+
+export default compose(withScrollToTarget)(withRouter(View));