@eeacms/volto-tableau 5.0.0 → 5.0.2

package/RELEASE.md

@@ -0,0 +1,74 @@
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
+
+```
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+

package/cypress.config.js

@@ -7,7 +7,7 @@ module.exports = defineConfig({
   reporter: 'junit',
   video: true,
   retries: {
-    runMode: 8,
+    runMode: 1,
     openMode: 0,
   },
   reporterOptions: {

package/docker-compose.yml

@@ -0,0 +1,32 @@
+version: "3"
+services:
+  backend:
+    image: eeacms/plone-backend
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -30,21 +30,49 @@
     "@cypress/code-coverage": "^3.9.5",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
     "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
-    "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
-    "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
-    "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
-    "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'",
-    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
-    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
+    "test": "make test",
+    "test:fix": "make test-update",
+    "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
 }

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -10,9 +10,17 @@ import { compose } from 'redux';
 
 const View = (props) => {
   const data = props.data;
-  const { with_sources = true, with_download = true, with_share = true } = data;
-  const { data_provenance, tableau_visualization } =
+  const {
+    with_note = true,
+    with_sources = true,
+    with_more_info = true,
+    with_download = true,
+    with_share = true,
+    tableau_height = '700',
+  } = data;
+  const { figure_note = [], data_provenance = {}, tableau_visualization } =
     props.tableau_visualization_data || {};
+
   const tableau_vis_url = flattenToAppURL(data.tableau_vis_url || '');
 
   React.useEffect(() => {
@@ -40,10 +48,15 @@ const View = (props) => {
               <Tableau
                 data={{
                   ...tableau_visualization,
+                  with_note,
                   with_sources,
+                  with_more_info,
                   with_download,
                   with_share,
+                  tableau_height,
+                  tableau_vis_url,
                 }}
+                figure_note={figure_note}
                 sources={data_provenance.data || []}
               />
             )}

package/src/Blocks/EmbedTableauVisualization/View.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import View from './View';
+
+const mockStore = configureStore([]);
+const store = mockStore({ content: { subrequests: [] } });
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@eeacms/volto-embed', () => ({
+  PrivacyProtection: ({ children }) => <div>{children}</div>,
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('View', () => {
+  const data = {
+    '@type': 'embed_tableau_visualization',
+    dataprotection: {},
+    tableau_vis_url: 'http://localhost:3000/tableau-ct',
+    with_download: true,
+    with_more_info: true,
+    with_note: true,
+    with_share: true,
+  };
+
+  it('should render the component', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <View data={data} />
+      </Provider>,
+    );
+    expect(container.querySelector('.embed-container')).toBeInTheDocument();
+  });
+});

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -49,9 +49,12 @@ export default () => {
         title: 'Default',
         fields: [
           'tableau_vis_url',
+          'with_note',
           'with_sources',
+          'with_more_info',
           'with_download',
           'with_share',
+          'tableau_height',
         ],
       },
       {
@@ -65,6 +68,21 @@ export default () => {
         title: 'Tableau visualization',
         widget: 'url',
       },
+      with_note: {
+        title: 'Show note',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_more_info: {
+        title: 'Show more info',
+        type: 'boolean',
+        defaultValue: true,
+      },
       with_download: {
         title: 'Show download button',
         type: 'boolean',
@@ -75,10 +93,10 @@ export default () => {
         type: 'boolean',
         defaultValue: true,
       },
-      with_sources: {
-        title: 'Show sources',
-        type: 'boolean',
-        defaultValue: true,
+      tableau_height: {
+        title: 'Height',
+        type: 'text',
+        defaultValue: '700',
       },
       dataprotection: {
         widget: 'object',

package/src/Tableau/Tableau.jsx

@@ -16,7 +16,9 @@ import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
 import { useTableau } from '@eeacms/volto-tableau/hooks';
 import JsonCodeSnippet from '@eeacms/volto-tableau/Utils/JsonCodeSnippet/JsonCodeSnippet';
+import FigureNote from '@eeacms/volto-tableau/Utils/FigureNote/FigureNote';
 import Sources from '@eeacms/volto-tableau/Utils/Sources/Sources';
+import MoreInfoLink from '@eeacms/volto-tableau/Utils/MoreInfoLink/MoreInfoLink';
 import Download from '@eeacms/volto-tableau/Utils/Download/Download';
 import Share from '@eeacms/volto-tableau/Utils/Share/Share';
 import { getSheetnames, getActiveSheetname, getDevice } from './helpers';
@@ -80,8 +82,9 @@ const Tableau = forwardRef((props, ref) => {
     extraOptions = {},
     mode = 'view',
     screen = {},
-    version = '2.8.0',
+    figure_note = [],
     sources,
+    version = '2.8.0',
     setVizState,
     onChangeBlock,
   } = props;
@@ -92,11 +95,14 @@ const Tableau = forwardRef((props, ref) => {
     sheetname = '',
     toolbarPosition = 'Top',
     breakpointUrls = [],
+    tableau_vis_url,
+    with_note,
     with_sources,
+    with_more_info,
     with_download,
     with_share,
+    tableau_height = '700',
   } = data;
-
   const device = useMemo(
     () => getDevice(breakpoints, screen.page?.width || Infinity),
     [breakpoints, screen],
@@ -406,15 +412,24 @@ const Tableau = forwardRef((props, ref) => {
         clearData={clearData}
       />
       <div
+        style={{ height: tableau_height + 'px' }}
         className={cx('tableau', `tableau-${version}`, {
           'tableau-autoscale': autoScale,
         })}
         ref={vizEl}
       />
-      <div className="tableau-info">
-        {with_sources && loaded && <Sources sources={sources} />}
-        {with_download && loaded && <Download viz={viz.current} />}
-        {with_share && loaded && <Share viz={viz.current} />}
+      <div className="visualization-info-container">
+        <div className="visualization-info">
+          {with_note && loaded && <FigureNote note={figure_note || []} />}
+          {with_sources && loaded && <Sources sources={sources} />}
+          {with_more_info && loaded && (
+            <MoreInfoLink contentTypeLink={tableau_vis_url} />
+          )}
+        </div>
+        <div className="visualization-info">
+          {with_download && loaded && <Download viz={viz.current} />}
+          {with_share && loaded && <Share contentTypeLink={tableau_vis_url} />}
+        </div>
       </div>
     </div>
   );

package/src/Tableau/Tableau.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import Tableau from './Tableau';
+
+const mockStore = configureStore([]);
+const store = mockStore({});
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('Tableau', () => {
+  it('should render the component', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Tableau />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Utils/Download/Download.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { Button, Popup } from 'semantic-ui-react';
+import { Popup } from 'semantic-ui-react';
 import cx from 'classnames';
-import { Icon } from '@plone/volto/components';
-import downloadSVG from '@eeacms/volto-tableau/icons/download.svg';
 
 const Download = ({ viz }) => {
   const [expanded, setExpanded] = React.useState(false);
@@ -14,8 +12,7 @@ const Download = ({ viz }) => {
       trigger={
         <div className="tableau-download-container">
           <button className={cx('tableau-download-button', { expanded })}>
-            <span>Download data</span>
-            <Icon name={downloadSVG} size="24px" />
+            Download <i class="ri-download-fill"></i>
           </button>
         </div>
       }
@@ -29,42 +26,73 @@ const Download = ({ viz }) => {
       }}
       ref={popupRef}
     >
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportImageDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        Image
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportPDFDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        PDF
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.showExportCrossTabDialog();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        CSV
-      </Button>
-      <Button
-        className="primary"
-        onClick={() => {
-          viz.exportCrossTabToExcel();
-          popupRef.current.triggerRef.current.click();
-        }}
-      >
-        Excel
-      </Button>
+      <ul className="no-bullets">
+        <li>
+          Data formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportCrossTabDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>CSV</span>
+                </button>
+              </div>
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.exportCrossTabToExcel();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>Excel</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          Image formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportImageDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>PNG</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          Other formats
+          <div className="visualization-wrapper">
+            <div className="visualization-info">
+              <div>
+                <button
+                  className="tableau-download-button tableau-format-download"
+                  onClick={() => {
+                    viz.showExportPDFDialog();
+                    popupRef.current.triggerRef.current.click();
+                  }}
+                >
+                  <span>PDF</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
     </Popup>
   );
 };

package/src/Utils/Download/Download.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Download from './Download';
+
+window.URL.createObjectURL = jest.fn(() => 'test');
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+}));
+
+describe('Download', () => {
+  const viz = {};
+
+  it('should render the component', () => {
+    const { container } = render(<Download viz={viz} />);
+    expect(
+      container.querySelector('.tableau-download-container'),
+    ).toBeInTheDocument();
+  });
+});