Overwrite scroll on route update

package.json

@@ -59,7 +59,7 @@
     "@eeacms/volto-widget-toggle": "2.2.3",
     "@eeacms/volto-widgets-view": "2.1.2",
     "@material/react-linear-progress": "^0.15.0",
-    "@plone/volto": "12.10.1",
+    "@plone/volto": "13.8.2",
     "axios": "^0.21.1",
     "jsonp": "^0.2.1",
     "ol": "^6.4.3",
@@ -69,7 +69,7 @@
     "react-tooltip": "^4.2.9",
     "react-visibility-sensor": "^5.1.1",
     "tableau-api-js": "github:eea/tableau-api-js#1.1.0",
-    "volto-slate": "2.8.1"
+    "volto-slate": "2.8.3"
   },
   "devDependencies": {
     "eslint-plugin-prettier": "3.1.3",

src/components/manage/Blocks/IndustryDataTable/View.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { Table, Menu, Loader } from 'semantic-ui-react';
+import RenderComponent from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/components';
+
+import leftSVG from '@plone/volto/icons/left-key.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+
+const IndustryTableView = (props) => {
+  const {
+    data = {},
+    getAlignmentOfColumn,
+    getNameOfColumn,
+    getTitleOfColumn,
+    has_pagination,
+    pagination = {},
+    placeholder,
+    row_size,
+    selectedColumns,
+    show_header,
+    tableData,
+    updatePagination = () => {},
+  } = props;
+
+  return (
+    <div className="default-table">
+      {row_size ? (
+        <Table
+          textAlign="left"
+          striped={data.striped}
+          className={`unstackable ${data.bordered ? 'no-borders' : ''}
+          ${data.compact_table ? 'compact-table' : ''}`}
+        >
+          {show_header ? (
+            <Table.Header>
+              <Table.Row>
+                {selectedColumns.map((colDef, j) => (
+                  <Table.HeaderCell
+                    key={getNameOfColumn(colDef)}
+                    className={getAlignmentOfColumn(colDef, j)}
+                  >
+                    {getTitleOfColumn(colDef)}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : null}
+          <Table.Body>
+            {Array(Math.max(0, row_size))
+              .fill()
+              .map((_, i) => (
+                <Table.Row key={i}>
+                  {selectedColumns.map((colDef, j) => (
+                    <Table.Cell
+                      key={`${i}-${getNameOfColumn(colDef)}`}
+                      textAlign={getAlignmentOfColumn(colDef, j)}
+                    >
+                      <RenderComponent
+                        tableData={tableData}
+                        colDef={colDef}
+                        row={i}
+                        {...props}
+                      />
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+          </Table.Body>
+          {has_pagination ? (
+            <Table.Footer>
+              <Table.Row>
+                <Table.HeaderCell
+                  colSpan={selectedColumns.length}
+                  style={{ textAlign: 'center' }}
+                >
+                  <Menu pagination>
+                    <Menu.Item
+                      as="a"
+                      icon
+                      disabled={props.isPending || pagination.activePage === 1}
+                      onClick={() => {
+                        if (pagination.activePage > 1) {
+                          updatePagination({
+                            activePage: pagination.activePage - 1,
+                          });
+                        }
+                      }}
+                    >
+                      <Icon name={leftSVG} size="24px" />
+                    </Menu.Item>
+                    <Menu.Item fitted>
+                      <Loader
+                        disabled={!props.isPending}
+                        active
+                        inline
+                        size="tiny"
+                      />
+                    </Menu.Item>
+                    <Menu.Item
+                      as="a"
+                      icon
+                      disabled={
+                        props.isPending ||
+                        row_size < pagination.itemsPerPage ||
+                        pagination.activePage * pagination.itemsPerPage >=
+                          pagination.maxItems
+                      }
+                      onClick={() => {
+                        if (row_size === pagination.itemsPerPage) {
+                          updatePagination({
+                            activePage: pagination.activePage + 1,
+                          });
+                        }
+                      }}
+                    >
+                      <Icon name={rightSVG} size="24px" />
+                    </Menu.Item>
+                  </Menu>
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Footer>
+          ) : null}
+        </Table>
+      ) : (
+        <p>{placeholder}</p>
+      )}
+    </div>
+  );
+};
+
+export default IndustryTableView;

src/components/manage/Blocks/IndustryDataTable/index.js

@@ -0,0 +1,17 @@
+import IndustryTableView from './View';
+import schema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.simpleDataConnectedTable = {
+    ...config.blocks.blocksConfig.simpleDataConnectedTable,
+    templates: {
+      ...config.blocks.blocksConfig.simpleDataConnectedTable.templates,
+      industry_data_table: {
+        title: 'Industry data table',
+        view: IndustryTableView,
+        schema: schema,
+      },
+    },
+  };
+  return config;
+};

src/components/manage/Blocks/IndustryDataTable/schema.js

@@ -0,0 +1,12 @@
+export default () => ({
+  title: 'Industry datatable',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+  properties: {},
+  required: [],
+});

src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -0,0 +1,131 @@
+/*
+ * UniversalLink
+ * @module components/UniversalLink
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
+import { matchPath } from 'react-router';
+
+import config from '@plone/volto/registry';
+
+const UniversalLink = ({
+  href,
+  item = null,
+  openLinkInNewTab,
+  download = false,
+  children,
+  className = null,
+  title = null,
+  stripHash = true,
+  delay = 0,
+  offset = null,
+  onClick = () => {},
+  ...props
+}) => {
+  const history = useHistory();
+  const token = useSelector((state) => state.userSession?.token);
+
+  let url = href;
+  if (!href && item) {
+    if (!item['@id']) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Invalid item passed to UniversalLink',
+        item,
+        props,
+        children,
+      );
+      url = '#';
+    } else {
+      url = flattenToAppURL(item['@id']);
+      if (!token && item.remoteUrl) {
+        url = item.remoteUrl;
+      }
+    }
+  }
+
+  const isBlacklisted =
+    (config.settings.externalRoutes ?? []).find((route) =>
+      matchPath(flattenToAppURL(url), route.match),
+    )?.length > 0;
+  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isDownload = (!isExternal && url.includes('@@download')) || download;
+  const appUrl = flattenToAppURL(url);
+
+  const path = !isDownload && stripHash ? appUrl.split('#')[0] : appUrl;
+  const hash = appUrl.split('#')[1];
+
+  return isExternal ? (
+    <a
+      href={url}
+      title={title}
+      target={
+        !URLUtils.isMail(url) && !(openLinkInNewTab === false) ? '_blank' : null
+      }
+      rel="noopener noreferrer"
+      className={className}
+      {...props}
+    >
+      {children}
+    </a>
+  ) : isDownload ? (
+    <a href={path} download title={title} className={className} {...props}>
+      {children}
+    </a>
+  ) : (
+    <Link
+      to={path}
+      target={openLinkInNewTab ?? false ? '_blank' : null}
+      title={title}
+      className={className}
+      onClick={(e) => {
+        if (typeof onClick === 'function') {
+          onClick();
+          if (!hash) return;
+        }
+        e.preventDefault();
+        if (delay) {
+          setTimeout(() => {
+            history.push(stripHash ? path : appUrl, {
+              volto_scroll_hash: hash,
+              volto_scroll_offset:
+                typeof offset === 'function' ? offset() : offset,
+            });
+          }, delay);
+        } else {
+          history.push(stripHash ? path : appUrl, {
+            volto_scroll_hash: hash,
+            volto_scroll_offset:
+              typeof offset === 'function' ? offset() : offset,
+          });
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+UniversalLink.propTypes = {
+  href: PropTypes.string,
+  openLinkInNewTab: PropTypes.bool,
+  download: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  item: PropTypes.shape({
+    '@id': PropTypes.string.isRequired,
+    remoteUrl: PropTypes.string, //of plone @type 'Link'
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};
+
+export default UniversalLink;

src/customizations/volto/components/theme/View/View.jsx

@@ -253,7 +253,9 @@ class View extends Component {
     if (!this.props.content) {
       return <span />;
     }
-    const RenderedView = this.state.RenderedView;
+    // const RenderedView = this.state.RenderedView;
+    const RenderedView =
+      this.getViewByType() || this.getViewByLayout() || this.getViewDefault();
 
     return (
       <div id="view">