@eeacms/volto-flourish 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -4,6 +4,47 @@ 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.1.3](https://github.com/eea/volto-flourish/compare/0.1.2...0.1.3) - 13 February 2025
+
+#### :bug: Bug Fixes
+
+- fix: remove unused field from schema  - refs #273385 [kreafox - [`8f475ef`](https://github.com/eea/volto-flourish/commit/8f475ef512089960e4207d277393803458bed5a4)]
+
+#### :hammer_and_wrench: Others
+
+- test: increase coverage [kreafox - [`830d81a`](https://github.com/eea/volto-flourish/commit/830d81ae67286d65b1ba80d3c190b21af18340e9)]
+- test: increase coverage [kreafox - [`4b72dd7`](https://github.com/eea/volto-flourish/commit/4b72dd75e4d4cdf8270f76fa15357800fbdee36e)]
+- test: increase coverage [kreafox - [`bf01b2c`](https://github.com/eea/volto-flourish/commit/bf01b2c280f699f620f1c8ee71b11921c9da7e55)]
+- test: increase coverage [kreafox - [`18b4b24`](https://github.com/eea/volto-flourish/commit/18b4b24fa5758f797ef16dbf8f801dbdf7e941da)]
+- Embed [Tiberiu Ichim - [`65a99d6`](https://github.com/eea/volto-flourish/commit/65a99d6a3cbf69a33e0b3a485a92afc53a2835b8)]
+- Embed [Tiberiu Ichim - [`0bd365b`](https://github.com/eea/volto-flourish/commit/0bd365b91802227f921b3d7127a2722f56d33e97)]
+- Embed [Tiberiu Ichim - [`1bc7ee6`](https://github.com/eea/volto-flourish/commit/1bc7ee667a6168a15f50a51b2263e216ffbecc52)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`9c0d692`](https://github.com/eea/volto-flourish/commit/9c0d692ee158e264bc33fe7d05eafcee1ccb6066)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`aae3813`](https://github.com/eea/volto-flourish/commit/aae3813cf0f792b7cdaedb9f7b4ebc9d4bb6cd53)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`5ca27c2`](https://github.com/eea/volto-flourish/commit/5ca27c29e49291471d6cd2585922c39e87d46a84)]
+### [0.1.2](https://github.com/eea/volto-flourish/compare/0.1.1...0.1.2) - 16 September 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`71fbb9b`](https://github.com/eea/volto-flourish/commit/71fbb9b4e6521de530d7abdd1c4fe20ba6afd092)]
+- style: Automated code fix [eea-jenkins - [`d90efae`](https://github.com/eea/volto-flourish/commit/d90efaeddab695ebdb356032eadeeb535650ad97)]
+
+#### :hammer_and_wrench: Others
+
+- set default value [Tripon Eugen - [`fceac76`](https://github.com/eea/volto-flourish/commit/fceac761126034e78494a0876ca751532a449767)]
+- add test params [Tripon Eugen - [`72e582e`](https://github.com/eea/volto-flourish/commit/72e582ecc219836f6615249d5716b9438e7692e2)]
+- add toolbar [Tripon Eugen - [`e786558`](https://github.com/eea/volto-flourish/commit/e786558bea8a8951b663f1b924b7c8198741163d)]
+- wip [Tripon Eugen - [`162ae1f`](https://github.com/eea/volto-flourish/commit/162ae1fecb3cc68ffc3cf0890e4b86099a395146)]
+- update test and default values [Tripon Eugen - [`4ae23a8`](https://github.com/eea/volto-flourish/commit/4ae23a8e62fa135d228ed9ed552b55273ad31fdf)]
+- add test data [Tripon Eugen - [`2089c05`](https://github.com/eea/volto-flourish/commit/2089c054e21dd1eacd4870109add6ba4c1ed72f3)]
+- add test data [Tripon Eugen - [`9ba6954`](https://github.com/eea/volto-flourish/commit/9ba6954de4dacdf3da9aa9a7a7b46bb326aec2d4)]
+- add test [Tripon Eugen - [`5cd1f8d`](https://github.com/eea/volto-flourish/commit/5cd1f8d472bd3f78a887b88a784e2859c7e752fd)]
+- Update Jenkinsfile: don't run volto 16 tests [Krisztina Elekes - [`4fe41ed`](https://github.com/eea/volto-flourish/commit/4fe41ed2364fb7c138b521651c2281c97f93d156)]
+- eslint [Tripon Eugen - [`04eda9a`](https://github.com/eea/volto-flourish/commit/04eda9a5097471e0222a36a97aee6821673b30f3)]
+- add volto-embed dependencies [Tripon Eugen - [`6147417`](https://github.com/eea/volto-flourish/commit/614741750ebf1403b0b33aea10957b60fa511b72)]
+- add dependecies volto-embed [Tripon Eugen - [`76f1651`](https://github.com/eea/volto-flourish/commit/76f165140cc79d8ef0ab944f36f12e4a88be9c50)]
+- show sources [Tripon Eugen - [`2410686`](https://github.com/eea/volto-flourish/commit/241068652f53ba9ec70454fd4d1428f04bd40076)]
+- show sources [Tripon Eugen - [`246d415`](https://github.com/eea/volto-flourish/commit/246d415376f2c71987fb45a9be56cd57939c9b9d)]
 ### [0.1.1](https://github.com/eea/volto-flourish/compare/0.1.0...0.1.1) - 20 August 2024
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-flourish",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "@eeacms/volto-flourish: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,6 +16,9 @@
     "type": "git",
     "url": "git@github.com:eea/volto-flourish.git"
   },
+  "addons": [
+    "@eeacms/volto-embed"
+  ],
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
@@ -66,5 +69,8 @@
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
     "cypress:open": "make cypress-open"
+  },
+  "dependencies": {
+    "@eeacms/volto-embed": "*"
   }
 }

package/src/blocks/EmbedFlourish/Edit.test.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import Edit from './Edit';
+
+const mockStore = configureStore();
+
+describe('Edit', () => {
+  it('should render the component with correct mode and child components', () => {
+    const data = {
+      with_sources: false,
+      with_notes: false,
+      with_share: false,
+      with_enlarge: false,
+      with_more_info: false,
+      flourish_item_url: undefined,
+    };
+
+    const block = { blockId: '1' };
+    const selected = false;
+    const onChangeBlock = jest.fn();
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Edit
+            block={block}
+            data={data}
+            selected={selected}
+            onChangeBlock={onChangeBlock}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container.querySelector('.embed-flourish')).toBeInTheDocument();
+  });
+});

package/src/blocks/EmbedFlourish/View.js

@@ -1,24 +1,91 @@
-const View = (props) => {
-  const flourish_url = props.data.flourish_item_url + '/@@flourish/index.html';
-  const { flourish_iframe_height = '600px' } = props.data;
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { default as Flourish } from '@eeacms/volto-flourish/components/Flourish';
+// import { Sources } from '@eeacms/volto-embed/Toolbar';
+
+import {
+  FigureNote,
+  Sources,
+  MoreInfo,
+  Share,
+  Enlarge,
+} from '@eeacms/volto-embed/Toolbar';
+
+export default function View(props) {
+  const { id, data } = props;
+
+  const {
+    with_sources,
+    // with_download,
+    with_notes,
+    with_share,
+    with_enlarge,
+    with_more_info,
+    flourish_item_url,
+    // flourish_iframe_height = '600px',
+  } = data;
+
+  const vis_url = flattenToAppURL(flourish_item_url || '');
+  const dispatch = useDispatch();
+
+  const flourishItemContent = useSelector(
+    (state) => state.content?.subrequests?.[id]?.data,
+  );
+
+  useEffect(() => {
+    if (vis_url) {
+      const action = getContent(vis_url, null, id);
+      dispatch(action);
+    }
+  }, [dispatch, vis_url, id]);
+
   return (
     <div className="embed-flourish">
-      {props.data.flourish_item_url ? (
-        <iframe
-          src={flourish_url}
-          width="100%"
-          // height={props.data.flourish_iframe_height}
-          title="FlourishEmbed"
-          style={{
-            border: '0px',
-            height: flourish_iframe_height,
-          }}
-        ></iframe>
+      {flourish_item_url ? (
+        <div>
+          <Flourish baseUrl={flourish_item_url} />
+          {flourishItemContent && (
+            <div className="visualization-toolbar">
+              <div className="left-col">
+                {with_notes && (
+                  <FigureNote notes={flourishItemContent?.figure_note || []} />
+                )}
+                {flourishItemContent && with_sources && (
+                  <Sources
+                    sources={flourishItemContent?.data_provenance?.data || []}
+                  />
+                )}
+                {with_more_info && (
+                  <MoreInfo href={flourishItemContent['@id']} />
+                )}
+              </div>
+              <div className="right-col">
+                {with_share && <Share href={flourishItemContent['@id']} />}
+                {with_enlarge && (
+                  <Enlarge>
+                    <View
+                      {...props}
+                      data={{
+                        ...props.data,
+                        with_notes: false,
+                        with_sources: false,
+                        with_more_info: false,
+                        with_enlarge: false,
+                        with_share: false,
+                        with_download: false,
+                      }}
+                    />
+                  </Enlarge>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
       ) : props.mode ? (
         <div>Embed flourish</div>
       ) : null}
     </div>
   );
-};
-
-export default View;
+}

package/src/blocks/EmbedFlourish/View.test.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import View from './View';
+
+const mockStore = configureStore();
+
+describe('View', () => {
+  it('should render the component', () => {
+    const data = {
+      with_sources: false,
+      with_notes: false,
+      with_share: false,
+      with_enlarge: false,
+      with_more_info: false,
+      flourish_item_url: undefined,
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <View data={data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container.querySelector('.embed-flourish')).toBeInTheDocument();
+  });
+});

package/src/blocks/EmbedFlourish/schema.js

@@ -1,15 +1,14 @@
-import { defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  CSSHeight: {
-    id: 'CSS height',
-    defaultMessage: 'CSS height',
-  },
-  CSSFlourishHeightDescription: {
-    id: 'Iframe height',
-    defaultMessage: 'Flourish iframe height',
-  },
-});
+// import { defineMessages } from 'react-intl';
+// const messages = defineMessages({
+//   CSSHeight: {
+//     id: 'CSS height',
+//     defaultMessage: 'CSS height',
+//   },
+//   CSSFlourishHeightDescription: {
+//     id: 'Iframe height',
+//     defaultMessage: 'Flourish iframe height',
+//   },
+// });
 
 const schema = (props) => {
   return {
@@ -18,7 +17,22 @@ const schema = (props) => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['flourish_item_url', 'flourish_iframe_height'],
+        fields: [
+          'flourish_item_url',
+          // 'flourish_iframe_height',
+        ],
+      },
+      {
+        id: 'toolbar',
+        title: 'Toolbar',
+        fields: [
+          'with_sources',
+          'with_notes',
+          'with_more_info',
+          // 'with_download',
+          'with_share',
+          'with_enlarge',
+        ],
       },
     ],
     properties: {
@@ -31,20 +45,51 @@ const schema = (props) => {
           </div>
         ),
       },
-      flourish_iframe_height: {
-        title: (
-          <a
-            rel="noopener noreferrer"
-            target="_blank"
-            href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
-          >
-            {props.intl.formatMessage(messages.CSSHeight)}
-          </a>
-        ),
-        default: '600px',
-        description: props.intl.formatMessage(
-          messages.CSSFlourishHeightDescription,
-        ),
+      // flourish_iframe_height: {
+      //   title: (
+      //     <a
+      //       rel="noopener noreferrer"
+      //       target="_blank"
+      //       href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+      //     >
+      //       {props.intl.formatMessage(messages.CSSHeight)}
+      //     </a>
+      //   ),
+      //   default: '600px',
+      //   description: props.intl.formatMessage(
+      //     messages.CSSFlourishHeightDescription,
+      //   ),
+      // },
+      with_notes: {
+        title: 'Show note',
+        type: 'boolean',
+        default: true,
+      },
+      with_sources: {
+        title: 'Show sources',
+        description: 'Will show sources set in this page Data provenance',
+        type: 'boolean',
+        default: true,
+      },
+      with_more_info: {
+        title: 'Show more info',
+        type: 'boolean',
+        default: true,
+      },
+      with_enlarge: {
+        title: 'Show enlarge button',
+        type: 'boolean',
+        default: true,
+      },
+      // with_download: {
+      //   title: 'Show download button',
+      //   type: 'boolean',
+      //   default: true,
+      // },
+      with_share: {
+        title: 'Show share button',
+        type: 'boolean',
+        default: true,
       },
     },
 

package/src/components/Flourish.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export default function Flourish({ baseUrl }) {
+  const containerRef = useRef(null);
+  const flourishUrl = `${baseUrl}/@@flourish/index.html`;
+  const scriptUrl = `${baseUrl}/@@flourish/flourish.embed.js`;
+
+  useEffect(() => {
+    if (!baseUrl || !containerRef.current) return;
+
+    const script = document.createElement('script');
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => {};
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [baseUrl, scriptUrl]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="flourish-embed"
+      data-src={flourishUrl}
+    ></div>
+  );
+}

package/src/components/Flourish.test.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import Flourish from './Flourish';
+
+const mockStore = configureStore();
+
+test('Flourish component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const baseUrl = 'http://example.com';
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Flourish baseUrl={baseUrl} />
+    </Provider>,
+  );
+
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/widgets/FlourishViewWidget.jsx

@@ -1,16 +1,13 @@
+import { default as Flourish } from '@eeacms/volto-flourish/components/Flourish';
+
 const FlourishViewWidget = (props) => {
   const flourish_url = props.value?.download?.replace(
     '/@@download/flourish_zip',
-    '/@@flourish/index.html',
+    '/',
   );
   return props.value ? (
     <div className="flourish-view-widget">
-      <iframe
-        src={flourish_url}
-        height="100%"
-        width="100%"
-        title="Flourish Widget"
-      ></iframe>
+      <Flourish baseUrl={flourish_url} />
     </div>
   ) : null;
 };

package/src/widgets/FlourishViewWidget.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import FlourishViewWidget from './FlourishViewWidget';
+
+const mockStore = configureStore();
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+jest.mock('@eeacms/volto-flourish/components/Flourish', () => () => (
+  <div data-testid="flourish-component" />
+));
+
+test('renders FlourishViewWidget component', () => {
+  const mockValue = {
+    download: 'http://example.com/flourish/@@download/flourish_zip',
+  };
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <FlourishViewWidget value={mockValue} />
+    </Provider>,
+  );
+
+  const json = component.toJSON();
+
+  expect(json).toMatchSnapshot();
+});