@eeacms/volto-flourish 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,61 @@
-# Changelog
+### Changelog
 
-## 0.1.0
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-- Initial release
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+### [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
+
+- fix: cypress on Volto 16 [alin - [`4d75c3f`](https://github.com/eea/volto-flourish/commit/4d75c3f72fb06897c0424d1422f0ff97a9aad1e4)]
+
+#### :hammer_and_wrench: Others
+
+- screenshot update [Tripon Eugen - [`8706a47`](https://github.com/eea/volto-flourish/commit/8706a4749867ae024d449cd245ff7922a101d000)]
+- screenshot update [Tripon Eugen - [`5162fdf`](https://github.com/eea/volto-flourish/commit/5162fdf2a310516d27f4eebc4d55abd21397ea82)]
+- screenshot and message [Tripon Eugen - [`7341b36`](https://github.com/eea/volto-flourish/commit/7341b36d3e3ffb905c25ddec08066220ef030ec4)]
+- cleanup [Tripon Eugen - [`2996b94`](https://github.com/eea/volto-flourish/commit/2996b94d648ef913394aeadf7c7a264497c90639)]
+- iframe height default value [Tripon Eugen - [`6064b38`](https://github.com/eea/volto-flourish/commit/6064b385f951c8cf5b449abc421508e595947e76)]
+- iframe height [Tripon Eugen - [`b7778e1`](https://github.com/eea/volto-flourish/commit/b7778e109775fb13eb9a94b6a7ce064c194f2ab7)]
+- iframe use height defined [Tripon Eugen - [`0894e6f`](https://github.com/eea/volto-flourish/commit/0894e6fed948ba2e9f8cade45baea61c017a5b14)]
+- iframe set height and border [Tripon Eugen - [`8270d81`](https://github.com/eea/volto-flourish/commit/8270d81cba8f83e2e7adec4a81b524c2f9d034f9)]
+- Widget View check flourish download check empty [Tripon Eugen - [`d3ae5ab`](https://github.com/eea/volto-flourish/commit/d3ae5ab5e3031ef1d8bfd6809fbddcb256dcf0c9)]
+- Widget View check flourish download [Tripon Eugen - [`9f967b3`](https://github.com/eea/volto-flourish/commit/9f967b365e81ca1d5613148e10813011144fafed)]
+- iframe title [Tripon Eugen - [`be9fde6`](https://github.com/eea/volto-flourish/commit/be9fde6bf2a8bcb9ab450d364c6f43b2ca2ad13f)]
+- embed flourish edit mode (empty item) [Tripon Eugen - [`37864ed`](https://github.com/eea/volto-flourish/commit/37864ed905556b53827f9b7385495744094863dd)]
+- display iframe only when url is set [Tripon Eugen - [`89caf41`](https://github.com/eea/volto-flourish/commit/89caf4112ac53dd1a0ba904e32536d96fafc723c)]
+- eslint [Tripon Eugen - [`56d2b21`](https://github.com/eea/volto-flourish/commit/56d2b214a2f574bbf8b00cc41871f33a25713a5c)]
+- Flourish widget and embeded block [Tripon Eugen - [`c6b6fed`](https://github.com/eea/volto-flourish/commit/c6b6fed75367fb2f5de13aea71c543b9018f40af)]
+- WIP [Tiberiu Ichim - [`b4d4484`](https://github.com/eea/volto-flourish/commit/b4d448427c8dfc71327b8ba1b471dd6d4d30883f)]
+- test middleware [Tripon Eugen - [`2f64fb4`](https://github.com/eea/volto-flourish/commit/2f64fb4900b8f69019b659b6560fe55f4e46c023)]
+- Readme [Tiberiu Ichim - [`8ea6019`](https://github.com/eea/volto-flourish/commit/8ea6019dd75ac679db3f9a557e5e3be1da5b5bf8)]
+### 0.1.0 - 2 August 2024
+
+#### :hammer_and_wrench: Others
+
+- Bootstrap [Tiberiu Ichim - [`154115b`](https://github.com/eea/volto-flourish/commit/154115b9197720809e8dfe66315c48ce363c4478)]
+- Initial commit [Tiberiu Ichim - [`9549a6a`](https://github.com/eea/volto-flourish/commit/9549a6a2d506f03a7901bd5b8667a63a135bb750)]

package/README.md

@@ -14,12 +14,14 @@
 [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-flourish-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-flourish-develop)
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-flourish-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-flourish-develop)
 
-
 [Volto](https://github.com/plone/volto) add-on
 
 ## Features
 
-Demo GIF
+Flourish integration
+
+#### IMPORTANT! In order to load a Flourish visualization, the eea.api.dataconnector addon needs to be active on the Plone side.
+![Flourish Block](./docs/preview.png "Flourish Block")
 
 ## Getting started
 
@@ -42,25 +44,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-flourish"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-flourish"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-flourish": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-flourish": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-flourish
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-flourish
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 
@@ -91,7 +93,7 @@ See [LICENSE.md](https://github.com/eea/volto-flourish/blob/master/LICENSE.md) f
 ## Funding
 
 [European Environment Agency (EU)](http://eea.europa.eu)
- (EEA).
+(EEA).
 All Rights Reserved.
 
 See [LICENSE.md](https://github.com/eea/volto-addon-template/blob/master/LICENSE.md) for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-flourish",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "@eeacms/volto-flourish: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,12 +16,15 @@
     "type": "git",
     "url": "git@github.com:eea/volto-flourish.git"
   },
-  "dependencies": {},
+  "addons": [
+    "@eeacms/volto-embed"
+  ],
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
-    "cypress-fail-fast": "^5.0.1",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "13.1.0",
+    "cypress-fail-fast": "^5.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
@@ -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.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { SidebarPortal } from '@plone/volto/components';
+import getSchema from './schema';
+
+import View from './View';
+
+const Edit = (props) => {
+  const { block, data, selected, onChangeBlock } = props;
+  const schema = React.useMemo(() => getSchema(props), [props]);
+
+  return (
+    <React.Fragment>
+      <View mode="edit" {...props} />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          schema={schema}
+          title={schema.title}
+          onChangeBlock={onChangeBlock}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </React.Fragment>
+  );
+};
+
+export default compose(injectIntl)(Edit);

package/src/blocks/EmbedFlourish/View.js

@@ -0,0 +1,99 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers';
+// 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 flourish_url = flourish_item_url + '/@@flourish/index.html';
+  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">
+      {flourish_item_url ? (
+        <div>
+          <iframe
+            src={flourish_url}
+            width="100%"
+            title={flourishItemContent?.title}
+            style={{
+              border: '0px',
+              height: flourish_iframe_height,
+            }}
+          ></iframe>
+          {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>
+  );
+}

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/index.js

@@ -0,0 +1,27 @@
+import EmbedFlourishVisualizatonEdit from './Edit';
+import EmbedFlourishVisualizatonView from './View';
+
+import sliderSVG from '@plone/volto/icons/slider.svg';
+
+const config = (config) => {
+  config.blocks.blocksConfig.embed_flourish_visualization = {
+    id: 'embed_flourish_visualization',
+    title: 'Embed Flourish',
+    icon: sliderSVG,
+    group: 'data_visualizations',
+    edit: EmbedFlourishVisualizatonEdit,
+    view: EmbedFlourishVisualizatonView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};
+
+export default config;

package/src/blocks/EmbedFlourish/schema.js

@@ -0,0 +1,102 @@
+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 {
+    title: 'Embed Flourish',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'flourish_test_url',
+          '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: {
+      flourish_item_url: {
+        title: 'Fourish item',
+        widget: 'internal_url',
+        description: (
+          <div>
+            <p>An item that has loaded a Flourish visualization.</p>
+          </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,
+        ),
+      },
+      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,
+      },
+    },
+
+    required: ['flourish_item_url'],
+  };
+};
+
+export default schema;

package/src/blocks/index.js

@@ -0,0 +1,19 @@
+import { uniqBy } from 'lodash';
+import installEmbedFlourishVisualization from './EmbedFlourish';
+
+const config = (config) => {
+  config.blocks.groupBlocksOrder = uniqBy(
+    [
+      ...config.blocks.groupBlocksOrder,
+      { id: 'flourish_visualizations', title: 'Flourish Visualizations' },
+    ],
+    'id',
+  );
+
+  return [installEmbedFlourishVisualization].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+};
+
+export default config;

package/src/index.js

@@ -1,5 +1,22 @@
+import installBlocks from './blocks';
+import { FlourishViewWidget } from './widgets';
+
 const applyConfig = (config) => {
-  return config;
+  if (__SERVER__) {
+    const express = require('express');
+    const flourishApiHandler = require('./middleware').default;
+
+    const middleware = express.Router();
+    middleware.all('**/@@flourish/**', flourishApiHandler);
+    middleware.id = 'flourish';
+
+    config.settings.expressMiddleware = [
+      ...config.settings.expressMiddleware,
+      middleware,
+    ];
+  }
+  config.widgets.views.id.flourish_zip = FlourishViewWidget;
+  return [installBlocks].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;

package/src/middleware.js

@@ -0,0 +1,27 @@
+import { getAPIResourceWithAuth } from '@plone/volto/helpers';
+
+const HEADERS = [
+  'accept-ranges',
+  'cache-control',
+  'content-disposition',
+  'content-range',
+  'content-type',
+  'x-sendfile',
+  'x-accel-redirect',
+  'x-robots-tag',
+];
+
+export default function flourishMiddleware(req, res, next) {
+  getAPIResourceWithAuth(req)
+    .then((resource) => {
+      // Just forward the headers that we need
+      HEADERS.forEach((header) => {
+        if (resource.headers[header]) {
+          res.set(header, resource.get(header));
+        }
+      });
+      res.status(resource.statusCode);
+      res.send(resource.body);
+    })
+    .catch(next);
+}

package/src/widgets/FlourishViewWidget.jsx

@@ -0,0 +1,18 @@
+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>
+    </div>
+  ) : null;
+};
+
+export default FlourishViewWidget;

package/src/widgets/index.js

@@ -0,0 +1,3 @@
+import FlourishViewWidget from './FlourishViewWidget';
+
+export { FlourishViewWidget };