From ea45091f93f59e94dd930a615088d413a66581ee Mon Sep 17 00:00:00 2001
From: Miu Razvan <miu.razvan28@gmail.com>
Date: Thu, 3 Sep 2020 16:38:11 +0300
Subject: [PATCH] Fixed View; Added Iframe; Update QueryParamButton;

---
 jsconfig.json                                 |  3 +
 mrs.developer.json                            |  5 +
 package.json                                  |  5 +-
 src/components/manage/Blocks/Iframe/Edit.jsx  | 94 +++++++++++++++++++
 src/components/manage/Blocks/Iframe/View.jsx  | 72 ++++++++++++++
 src/components/manage/Blocks/Iframe/style.css |  3 +
 .../manage/Blocks/QueryParamButton/Edit.jsx   | 22 ++++-
 .../manage/Blocks/QueryParamButton/View.jsx   | 27 ++++--
 .../manage/Blocks/QueryParamText/View.jsx     |  4 +-
 src/components/theme/View/DefaultView.jsx     |  8 +-
 src/components/theme/View/RedirectView.jsx    |  3 +-
 .../volto/components/theme/View/View.jsx      | 23 ++++-
 src/localconfig.js                            | 12 +++
 theme/site/globals/site.overrides             | 10 +-
 yarn.lock                                     | 14 +++
 15 files changed, 281 insertions(+), 24 deletions(-)
 create mode 100644 src/components/manage/Blocks/Iframe/Edit.jsx
 create mode 100644 src/components/manage/Blocks/Iframe/View.jsx
 create mode 100644 src/components/manage/Blocks/Iframe/style.css

diff --git a/jsconfig.json b/jsconfig.json
index 9847306b..6fc1de22 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,6 +1,9 @@
 {
     "compilerOptions": {
         "paths": {
+            "volto-slate": [
+                "develop/volto-slate/src"
+            ],
             "volto-tabsview": [
                 "develop/volto-tabsview/src"
             ],
diff --git a/mrs.developer.json b/mrs.developer.json
index 3b9a2a6f..193a3ac9 100644
--- a/mrs.developer.json
+++ b/mrs.developer.json
@@ -1,4 +1,9 @@
 {
+  "volto-slate": {
+    "url": "https://github.com/eea/volto-slate.git",
+    "path": "src",
+    "branch": "develop"
+  },
   "volto-tabsview": {
     "url": "https://github.com/eea/volto-tabsview.git",
     "branch": "master",
diff --git a/package.json b/package.json
index 270aa783..77e39944 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "version": "0.4.1",
   "private": true,
   "workspaces": [
+    "src/develop/volto-slate",
     "src/develop/volto-grid-block",
     "src/develop/volto-addons",
     "src/develop/volto-datablocks"
@@ -109,9 +110,10 @@
     "@eeacms/volto-image-zoom-and-flip": "github:eea/volto-image-zoom-and-flip#0.1.0",
     "@eeacms/volto-metadata-block": "github:eea/volto-metadata-block#0.2.0",
     "@eeacms/volto-slate-metadata-mentions": "github:eea/volto-slate-metadata-mentions#0.2.0",
-    "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#0.2.4",
     "@eeacms/volto-tabs-block": "github:eea/volto-tabs-block#0.2.2",
+    "@eeacms/volto-widgets-view": "github:eea/volto-widgets-view#0.2.4",
     "@plone/volto": "github:eea/volto#7.11.1-beta.1",
+    "@tinymce/tinymce-react": "^3.6.0",
     "axios": "^0.20.0",
     "jsonp": "^0.2.1",
     "ol": "^6.4.3",
@@ -120,6 +122,7 @@
     "react-component-queries": "^2.3.0",
     "react-dom": "^16.13.1",
     "react-highlight-words": "^0.16.0",
+    "react-iframe": "^1.8.0",
     "react-loadable": "^5.5.0",
     "react-sizeme": "^2.6.12",
     "react-visibility-sensor": "^5.1.1",
diff --git a/src/components/manage/Blocks/Iframe/Edit.jsx b/src/components/manage/Blocks/Iframe/Edit.jsx
new file mode 100644
index 00000000..9a8d92fa
--- /dev/null
+++ b/src/components/manage/Blocks/Iframe/Edit.jsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import _uniqueId from 'lodash/uniqueId';
+import RenderFields from 'volto-addons/Widgets/RenderFields';
+import View from './View';
+import { settings } from '~/config';
+import './style.css';
+
+const getSchema = (props) => {
+  return {
+    url: {
+      title: 'Url',
+      type: 'text',
+    },
+    title: {
+      title: 'Title',
+      type: 'text',
+    },
+    width: {
+      title: 'Width',
+      type: 'text',
+    },
+    height: {
+      title: 'Height',
+      type: 'text',
+    },
+    hideToolbar: {
+      title: 'Hide toolbar',
+      type: 'boolean',
+    },
+    overflow: {
+      title: 'Overflow',
+      type: 'boolean',
+    },
+    queryParameters: {
+      title: 'Query parameters',
+      type: 'schema',
+      fieldSetTitle: 'Query parameters',
+      fieldSetId: 'query_parameters',
+      fieldSetSchema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'title',
+            fields: ['title', 'id', 'queryParam'],
+          },
+        ],
+        properties: {
+          title: {
+            title: 'Title',
+            type: 'text',
+          },
+          id: {
+            title: 'Id',
+            type: 'text',
+            description: 'This will be used as query param key for tableau',
+          },
+          queryParam: {
+            title: 'Query to use',
+            type: 'text',
+          },
+        },
+        required: ['id', 'title', 'key'],
+      },
+      editFieldset: false,
+      deleteFieldset: false,
+    },
+  };
+};
+
+const Edit = (props) => {
+  const [state, setState] = useState({
+    schema: getSchema({ ...props, providerUrl: settings.providerUrl }),
+    id: _uniqueId('block_'),
+  });
+  return (
+    <div>
+      <RenderFields
+        schema={state.schema}
+        {...props}
+        title="Iframe"
+        noValueKey={true}
+      />
+      <View {...props} id={state.id} mode="edit" />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    pathname: state.router.location.pathname,
+  })),
+)(Edit);
diff --git a/src/components/manage/Blocks/Iframe/View.jsx b/src/components/manage/Blocks/Iframe/View.jsx
new file mode 100644
index 00000000..08e49b0f
--- /dev/null
+++ b/src/components/manage/Blocks/Iframe/View.jsx
@@ -0,0 +1,72 @@
+/* REACT */
+import React, { useState, useEffect } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import Iframe from 'react-iframe';
+import qs from 'query-string';
+import './style.css';
+
+const View = ({ content, ...props }) => {
+  const [discodataQuery, setDiscodataQuery] = useState({});
+  const { data } = props;
+  const { url = '', title = '', width = '100%', height = 'auto' } = data;
+  const { hideToolbar = false, overflow = false } = data;
+  useEffect(() => {
+    if (props.data.queryParameters?.value) {
+      try {
+        const newDiscodataQuery = {};
+        const properties = JSON.parse(props.data.queryParameters?.value)
+          .properties;
+        properties &&
+          Object.entries(properties).forEach(([key, value]) => {
+            if (props.searhc[value.queryParam]) {
+              newDiscodataQuery[key] = props.search[value.queryParam] || '';
+            }
+          });
+
+        if (
+          JSON.stringify(newDiscodataQuery) !== JSON.stringify(discodataQuery)
+        ) {
+          setDiscodataQuery(newDiscodataQuery);
+        }
+      } catch {
+        setDiscodataQuery({});
+      }
+    }
+    /* eslint-disable-next-line */
+  }, [props.data.queryParameters])
+
+  const getUrl = (url) => {
+    const newUrl = new URL(url);
+    return newUrl.protocol + '//' + newUrl.host + newUrl.pathname;
+  };
+  const applyQueryParameters = (url, query) => {
+    const queryParameters = {
+      ...query,
+      ':toolbar': hideToolbar ? 'n' : 'y',
+      ':embed': 'y',
+    };
+    return `${getUrl(url)}?${qs.stringify(queryParameters)}`;
+  };
+  return (
+    <div>
+      <Iframe
+        title={title}
+        url={applyQueryParameters(url, discodataQuery)}
+        width={width}
+        height={height}
+        className="embeded-iframe"
+        display="initial"
+        position="relative"
+        overflow={overflow ? 'visible' : 'hidden'}
+      />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    query: state.router.location.search,
+    search: state.discodata_query.search,
+  })),
+)(View);
diff --git a/src/components/manage/Blocks/Iframe/style.css b/src/components/manage/Blocks/Iframe/style.css
new file mode 100644
index 00000000..4f0fd308
--- /dev/null
+++ b/src/components/manage/Blocks/Iframe/style.css
@@ -0,0 +1,3 @@
+.embeded-iframe {
+    border: none;
+}
\ No newline at end of file
diff --git a/src/components/manage/Blocks/QueryParamButton/Edit.jsx b/src/components/manage/Blocks/QueryParamButton/Edit.jsx
index 36fce7da..2edcdf3c 100644
--- a/src/components/manage/Blocks/QueryParamButton/Edit.jsx
+++ b/src/components/manage/Blocks/QueryParamButton/Edit.jsx
@@ -13,9 +13,29 @@ const getSchema = (props) => {
       type: 'text',
     },
     page: {
-      title: 'Page',
+      title: 'Internal page',
       widget: 'object_by_path',
     },
+    link: {
+      title: 'Outside link',
+      type: 'text',
+    },
+    linkTarget: {
+      title: 'Link target',
+      type: 'array',
+      choices: [
+        ['_blank', 'New window'],
+        ['_self', 'Current window'],
+      ],
+    },
+    use: {
+      title: 'Use',
+      type: 'array',
+      choices: [
+        ['page', 'Internal page'],
+        ['link', 'Outside link'],
+      ],
+    },
     leftText: {
       title: 'Left text',
       widget: 'textarea',
diff --git a/src/components/manage/Blocks/QueryParamButton/View.jsx b/src/components/manage/Blocks/QueryParamButton/View.jsx
index d46cc65f..791512d4 100644
--- a/src/components/manage/Blocks/QueryParamButton/View.jsx
+++ b/src/components/manage/Blocks/QueryParamButton/View.jsx
@@ -14,11 +14,16 @@ const View = ({ content, ...props }) => {
     className = '',
     inlineStyle = '',
     page = '',
+    link = '',
+    linkTarget = '_self',
+    use = '',
   } = data;
-  const queryText = props.search[queryParam];
+  const queryText = props.search[queryParam] || '';
 
   const text = `${leftText} ${queryText} ${rightText}`;
 
+  const hasText = leftText || queryText || rightText;
+
   let parsedInlineStyle;
   try {
     parsedInlineStyle = JSON.parse(inlineStyle);
@@ -27,15 +32,25 @@ const View = ({ content, ...props }) => {
   }
 
   return (
-    <div>
-      {props.mode === 'edit' ? !queryText ? <p>Query param button</p> : '' : ''}
-      {queryText ? (
+    <>
+      {props.mode === 'edit' && !hasText ? <p>Query param button</p> : ''}
+      {hasText ? (
         <button
           className={className}
           style={parsedInlineStyle}
           onClick={() => {
-            if (page) {
+            if (use === 'page') {
               history.push(page);
+            } else if (use === 'link') {
+              try {
+                new URL(link);
+                const linkElement = document.createElement('a');
+                linkElement.href = link;
+                linkElement.target = linkTarget;
+                linkElement.click();
+              } catch {
+                console.log('NOT URL');
+              }
             }
           }}
         >
@@ -44,7 +59,7 @@ const View = ({ content, ...props }) => {
       ) : (
         ''
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/manage/Blocks/QueryParamText/View.jsx b/src/components/manage/Blocks/QueryParamText/View.jsx
index abb8631d..eb0b8a47 100644
--- a/src/components/manage/Blocks/QueryParamText/View.jsx
+++ b/src/components/manage/Blocks/QueryParamText/View.jsx
@@ -44,12 +44,12 @@ const View = ({ content, ...props }) => {
   const text = `${leftText} ${queryText} ${rightText}`;
 
   return (
-    <div>
+    <>
       {props.mode === 'edit' ? !queryText ? <p>Query param text</p> : '' : ''}
       {components[component]
         ? components[component](text, isColor(color) ? color : '#000')
         : ''}
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/theme/View/DefaultView.jsx b/src/components/theme/View/DefaultView.jsx
index ba56ad65..303f0ba1 100644
--- a/src/components/theme/View/DefaultView.jsx
+++ b/src/components/theme/View/DefaultView.jsx
@@ -35,13 +35,7 @@ const messages = defineMessages({
 const DefaultView = ({ content, intl, location }) => {
   const blocksFieldname = getBlocksFieldname(content);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
-  React.useEffect(() => {
-    console.log('MOUNTING DEFAULT VIEW');
-    return () => {
-      console.log('UNMOUNTING DEFAULT VIEW');
-    };
-    /* eslint-disable-next-line */
-  }, [])
+
   return hasBlocksData(content) ? (
     <div id="page-document" className="ui container">
       {map(content[blocksLayoutFieldname].items, (block) => {
diff --git a/src/components/theme/View/RedirectView.jsx b/src/components/theme/View/RedirectView.jsx
index 9d0fb398..b579490a 100644
--- a/src/components/theme/View/RedirectView.jsx
+++ b/src/components/theme/View/RedirectView.jsx
@@ -14,6 +14,7 @@ const RedirectView = (props) => {
     setMounted(true);
     /* eslint-disable-next-line */
   }, [])
+  console.log(mounted, redirect, props.navigation);
   if (mounted && !redirect && !props.navigation.loading) {
     if (redirectPage) {
       const currentPath = getBasePath(currentPage);
@@ -25,7 +26,7 @@ const RedirectView = (props) => {
     }
   }
   return (
-    <Dimmer active inverted>
+    <Dimmer active inverted className="redirect-loader">
       <Loader inverted>European Environment Agency</Loader>
     </Dimmer>
   );
diff --git a/src/customizations/volto/components/theme/View/View.jsx b/src/customizations/volto/components/theme/View/View.jsx
index aff662e5..7973c408 100644
--- a/src/customizations/volto/components/theme/View/View.jsx
+++ b/src/customizations/volto/components/theme/View/View.jsx
@@ -186,11 +186,24 @@ class View extends Component {
       this.props.content[getLayoutFieldname(this.props.content)]
     ] || null;
 
-  getRenderedView = () =>
-    this.props.content?.['@id'] &&
-    getBasePath(this.props.content?.['@id']) === this.props.pathname
-      ? this.getViewByType() || this.getViewByLayout() || this.getViewDefault()
-      : null;
+  getRenderedView = () => {
+    if (this.props.content?.['@id']) {
+      const contentPathname = getBasePath(this.props.content?.['@id']).replace(
+        /\/$/,
+        '',
+      );
+      const pathname = this.props.pathname.replace(/\/$/, '');
+      if (contentPathname === pathname) {
+        return (
+          this.getViewByType() ||
+          this.getViewByLayout() ||
+          this.getViewDefault()
+        );
+      }
+      return null;
+    }
+    return null;
+  };
 
   /**
    * Cleans the component displayName (specially for connected components)
diff --git a/src/localconfig.js b/src/localconfig.js
index b21f63d9..e3953a48 100644
--- a/src/localconfig.js
+++ b/src/localconfig.js
@@ -34,6 +34,9 @@ import QueryParamTextView from '~/components/manage/Blocks/QueryParamText/View';
 import QueryParamButtonEdit from '~/components/manage/Blocks/QueryParamButton/Edit';
 import QueryParamButtonView from '~/components/manage/Blocks/QueryParamButton/View';
 
+import IframeEdit from '~/components/manage/Blocks/Iframe/Edit';
+import IframeView from '~/components/manage/Blocks/Iframe/View';
+
 // import QueryParamButtonEdit from '~/components/manage/Blocks/LinkButton/Edit';
 // import QueryParamButtonView from '~/components/manage/Blocks/QueryParamButton/View';
 
@@ -152,6 +155,15 @@ export function applyConfig(voltoConfig) {
     icon: packSVG,
   };
 
+  config.blocks.blocksConfig.eprtr_iframe = {
+    id: 'eprtr_iframe',
+    title: 'Eprtr iframe',
+    group: 'eprtr_blocks',
+    view: IframeView,
+    edit: IframeEdit,
+    icon: packSVG,
+  };
+
   config.blocks.blocksConfig.eprtr_openlayers_map_block = {
     id: 'eprtr_openlayers_map_block',
     title: 'Eprtr openlayers map block',
diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
index 97266992..d7a2fa31 100644
--- a/theme/site/globals/site.overrides
+++ b/theme/site/globals/site.overrides
@@ -1368,4 +1368,12 @@ h3 {
 
 b {
   font-weight: bold;
-}
\ No newline at end of file
+}
+
+.tox tox-silver-sink tox-tinymce-aux {
+  display: none;
+}
+
+.ui.dimmer.redirect-loader {
+  z-index: -1
+}
diff --git a/yarn.lock b/yarn.lock
index 5c190f45..a8166d8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2146,6 +2146,13 @@
     "@testing-library/dom" "^6.3.0"
     "@types/testing-library__react" "^9.1.0"
 
+"@tinymce/tinymce-react@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.6.0.tgz#6e33e89b7bb0240c4ffa892a8e1924688f479b4b"
+  integrity sha512-XSyAx9Md9+Ghl3UK0YtBQxaS2dCepqtOKTjYmBS4xTAzSu1UABd44WT84B8CUCd/bdT0fv1Pd51dSbpgJ8713w==
+  dependencies:
+    prop-types "^15.6.2"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -14073,6 +14080,13 @@ react-highlight-words@^0.16.0:
     memoize-one "^4.0.0"
     prop-types "^15.5.8"
 
+react-iframe@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/react-iframe/-/react-iframe-1.8.0.tgz#8c78f2c59b894ca5605fa7e45e61e27e57e96091"
+  integrity sha512-NYi89+rEqREwQxW9sDf+akh6/dtwWd3bOjByoVEIQ7SicOxVawRMer3pLdWjFaHXpuxTB9NqobPf/Ohj2iAKkg==
+  dependencies:
+    object-assign "^4.1.1"
+
 react-image-gallery@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.0.7.tgz#75e0d3f995d1475762f80f5a6958b4a9bb88bf97"