DEP Upgrade frontend build stack

.nvmrc

@@ -1 +1 @@
-10
+18

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/src/components/CKANExampleApp.js

@@ -1,6 +1,6 @@
 /* global document, window */
 import React, { Component } from 'react';
-import { BrowserRouter, Route, Redirect } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import fetch from 'isomorphic-fetch';
 import CKANRegistryDisplay from 'components/CKANRegistryDisplay';
 import CKANRegistryDetailView from 'components/CKANRegistryDetailView';
@@ -64,22 +64,11 @@ class CKANExampleApp extends Component {
 
     return (
       <div className="ckan-registry__content">
-        <Route
-          path={basePath}
-          exact
-          render={props => <CKANRegistryDisplay {...props} {...passProps} />}
-        />
-
-        <Route
-          path={`${basePath}/view/:item`}
-          render={props => <CKANRegistryDetailView {...props} {...passProps} />}
-        />
-
-        <Route
-          path={`${basePath}/view`}
-          exact
-          render={() => <Redirect to={basePath} />}
-        />
+        <Routes>
+          <Route path={basePath} element={<CKANRegistryDisplay {...passProps} />} />
+          <Route path={`${basePath}/view/:item`} element={<CKANRegistryDetailView {...passProps} />} />
+          <Route path={`${basePath}/view`} element={<Navigate to={basePath} replace />} />
+        </Routes>
       </div>
     );
   }

client/src/components/CKANRegistryDisplay.js

@@ -5,11 +5,11 @@ import Griddle, { ColumnDefinition, RowDefinition, selectors, connect } from 'gr
 import { withHandlers } from 'recompose';
 import { compose } from 'redux';
 import classnames from 'classnames';
-import CKANApi from 'lib/CKANApi';
-import { Row, Col } from 'reactstrap';
 import CKANRegistryFilterContainer from 'components/CKANRegistryFilterContainer';
+import CKANApi from 'lib/CKANApi';
 import Query from 'lib/CKANApi/DataStore/Query';
-import { Redirect } from 'react-router-dom';
+import withGriddleLayout from 'lib/withGriddleLayout';
+import { Navigate } from 'react-router-dom';
 import 'url-search-params-polyfill';
 
 class CKANRegistryDisplay extends Component {
@@ -28,6 +28,8 @@ class CKANRegistryDisplay extends Component {
     this.handleGetPage = this.handleGetPage.bind(this);
     this.handleFilter = this.handleFilter.bind(this);
     this.handleSort = this.handleSort.bind(this);
+
+    this.griddleLayoutHOC = withGriddleLayout(this.props, this.handleFilter, this.state.filterValues);
   }
 
   componentDidMount() {
@@ -50,14 +52,30 @@ class CKANRegistryDisplay extends Component {
    */
   componentDidUpdate(prevProps, prevState) {
     const pageChanged = prevState.currentPage !== this.state.currentPage;
+    const filterValuesChanged = JSON.stringify(prevState.filterValues) !== JSON.stringify(this.state.filterValues);
 
     if (
       pageChanged
+      || filterValuesChanged
       || JSON.stringify(prevState.sort) !== JSON.stringify(this.state.sort)
-      || JSON.stringify(prevState.filterValues) !== JSON.stringify(this.state.filterValues)
     ) {
       this.loadData();
     }
+
+    let needsNewHoc = filterValuesChanged;
+    if (!needsNewHoc) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key of Object.keys(CKANRegistryFilterContainer.propTypes)) {
+        if (prevProps[key] !== this.props[key]) {
+          needsNewHoc = true;
+          break;
+        }
+      }
+    }
+
+    if (needsNewHoc) {
+      this.griddleLayoutHOC = withGriddleLayout(this.props, this.handleFilter, this.state.filterValues);
+    }
   }
 
   /**
@@ -96,7 +114,7 @@ class CKANRegistryDisplay extends Component {
         onSort: newSort => { this.handleSort(newSort); },
       },
       components: {
-        Layout: this.getGriddleLayoutHOC(),
+        Layout: this.griddleLayoutHOC,
         RowEnhancer: compose(
           EnhanceWithRowData,
           withHandlers({
@@ -113,36 +131,6 @@ class CKANRegistryDisplay extends Component {
     };
   }
 
-  /**
-   * Get an HOC that is used to render the layout of the Griddle components
-   *
-   * @return {function({Table: *, Pagination: *, Filter: *}): *}
-   */
-  getGriddleLayoutHOC() {
-    const { filterValues } = this.state;
-    return ({ Table, Pagination }) => (
-      <Row>
-        <Col md={3} lg={2} className="ckan-registry__filters">
-          <CKANRegistryFilterContainer
-            {...this.props}
-            onFilter={this.handleFilter}
-            allColumns={this.getVisibleFields()}
-            defaultValues={filterValues}
-          />
-        </Col>
-        <Col md={9} lg={10} className="ckan-registry__loading-container">
-          <div className="ckan-registry__loading">
-            { window.i18n._t('CKANRegistryDisplay.LOADING', 'Loading...') }
-          </div>
-        </Col>
-        <Col md={9} lg={10} className="ckan-registry__table">
-          { <Table /> }
-          { <Pagination /> }
-        </Col>
-      </Row>
-    );
-  }
-
   /**
    * Get some default state values that require a bit of pre-processing
    *
@@ -615,7 +603,7 @@ class CKANRegistryDisplay extends Component {
 
     // Send the user off to the right detail view if they've clicked on a row
     if (selectedRow !== null) {
-      return <Redirect to={`${basePath}/view/${selectedRow}`} />;
+      return <Navigate to={`${basePath}/view/${selectedRow}`} replace />;
     }
 
     const invalidConfig = !this.hasValidConfig();

client/src/components/CKANRegistryFilterContainer.js

@@ -103,6 +103,9 @@ class CKANRegistryFilterContainer extends Component {
 
 CKANRegistryFilterContainer.propTypes = {
   onFilter: PropTypes.func.isRequired,
+  defaultValues: PropTypes.oneOf([PropTypes.array, PropTypes.object]),
+  spec: PropTypes.object,
+  filters: PropTypes.array,
 };
 
 export default CKANRegistryFilterContainer;

client/src/components/tests/CKANPresentedOptionsField-test.js

@@ -1,6 +1,7 @@
 /* global jest */
 jest.mock('lib/CKANApi');
 
+import { setImmediate } from 'core-js';
 import React from 'react';
 import {
   Component as CKANPresentedOptions,

client/src/components/tests/CKANRegistryDisplay-test.js

@@ -9,7 +9,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import CKANRegistryDisplay from '../CKANRegistryDisplay';
 import i18n from 'i18n';
 import Query from 'lib/CKANApi/DataStore/Query';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -677,7 +677,6 @@ describe('CKANRegistryDisplay', () => {
       const historyMock = { push: jest.fn() };
       const wrapper = shallow(
         <CKANRegistryDisplay
-
           fields={testFields}
           filters={[
             { id: 1, allColumns: false, columns: [{ target: 'foo' }] },
@@ -713,14 +712,14 @@ describe('CKANRegistryDisplay', () => {
       expect(wrapper.html()).toContain('There are no columns');
     });
 
-    it('returns a Redirect when switching pages', () => {
+    it('returns a Navigate when switching pages', () => {
       const wrapper = shallow(
         <CKANRegistryDisplay spec={{ identifier: 'something' }} />,
         { disableLifecycleMethods: true }
       );
 
       wrapper.setState({ selectedRow: 123 });
-      expect(wrapper.find(Redirect).length).toBe(1);
+      expect(wrapper.find(Navigate).length).toBe(1);
     });
   });
 

client/src/legacy/CKANExampleApp-loader.js

@@ -1,6 +1,6 @@
 /* global window */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import CKANExampleApp from 'components/CKANExampleApp';
 
 window.document.addEventListener('DOMContentLoaded', () => {
@@ -13,6 +13,6 @@ window.document.addEventListener('DOMContentLoaded', () => {
     }
     element.classList.add('loaded');
 
-    ReactDOM.render(<CKANExampleApp />, element);
+    createRoot(element).render(<CKANExampleApp />);
   });
 });

client/src/legacy/CKANPresentedOptionsField-entwine.js

@@ -1,12 +1,13 @@
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 jQuery.entwine('ss', ($) => {
   $('.ckan-presented-options__container').entwine({
     FieldIDs: [],
     Mounted: false,
+    ReactRoot: null,
 
     renderComponent(value = null) {
       const context = {};
@@ -22,10 +23,12 @@ jQuery.entwine('ss', ($) => {
         ...forwardedProps,
       };
 
-      ReactDOM.render(
-        <PresentedOptionsComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<PresentedOptionsComponent {...props} />);
 
       this.setMounted(true);
     },
@@ -54,7 +57,11 @@ jQuery.entwine('ss', ($) => {
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
       this.setMounted(false);
     }
   });

client/src/legacy/CKANResourceLocatorField-entwine.js

@@ -1,10 +1,12 @@
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .ckan-resource-locator__container').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const context = {};
       const CKANResourceLocatorField = loadComponent('CKANResourceLocatorField', context);
@@ -19,14 +21,20 @@ jQuery.entwine('ss', ($) => {
         value: value ? JSON.parse(value) : undefined,
       };
 
-      ReactDOM.render(
-        <CKANResourceLocatorField {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<CKANResourceLocatorField {...props} />);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     },
   });
 });