Merge pull request #102 from silverstripe/feature/cms-5-upgrade

NEW: CMS 5 upgrade.

.eslintrc.js

@@ -1 +1,7 @@
-module.exports = require('@silverstripe/eslint-config/.eslintrc');
+module.exports = {
+  extends: '@silverstripe/eslint-config',
+  // Allows null coalescing and optional chaining operators.
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+};

.nvmrc

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

client/src/boot/index.js

@@ -4,6 +4,5 @@ import registerReducers from 'boot/registerReducers';
 
 window.document.addEventListener('DOMContentLoaded', () => {
   registerComponents();
-
   registerReducers();
 });

client/src/boot/registerComponents.js

@@ -38,4 +38,3 @@ export default () => {
     SnapshotHistoryViewerCompareWarning: HistoryViewerCompareWarning,
   }, { force: true });
 };
-

client/src/bundles/bundle.js

@@ -5,19 +5,18 @@
  */
 
 // Expose fields (see webpack config for matching "externals" config)
-require('expose-loader?SnapshotsViewer!components/HistoryViewer/HistoryViewer');
-
-require('expose-loader?versionType!types/versionType');
+import 'expose-loader?exposes=SnapshotsViewer!components/HistoryViewer/HistoryViewer';
+import 'expose-loader?exposes=versionType!types/versionType';
 
 // Legacy CMS
-require('../legacy/ArchiveAdmin/ArchiveAdmin');
+import '../legacy/ArchiveAdmin/ArchiveAdmin';
 
 // Legacy form fields
 // Fields used by core legacy UIs, or available to users
 // To do: determine better way of using webpack to pull in optional javascript
-require('../legacy/HistoryViewer/HistoryViewerEntwine');
+import '../legacy/HistoryViewer/HistoryViewerEntwine';
 
 // Legacy publish/unpublish popup confirmation - copy from versioned-admin
-require('../legacy/VersionedEditForm/VersionedEditForm');
+import '../legacy/VersionedEditForm/VersionedEditForm';
 
-require('boot');
+import 'boot';

client/src/components/HistoryViewer/HistoryViewer.js

@@ -16,7 +16,7 @@ import {
 import { versionType } from 'types/versionType';
 import { compareType } from 'types/compareType';
 import classNames from 'classnames';
-import ResizeAware from 'react-resize-aware';
+import ResizeAware from 'components/ResizeAware/ResizeAwareHoc';
 import * as viewModeActions from 'state/viewMode/ViewModeActions';
 import PropTypes from 'prop-types';
 
@@ -458,7 +458,6 @@ HistoryViewer.defaultProps = {
   },
 };
 
-
 function mapStateToProps(state) {
   const {
     currentPage,

client/src/components/HistoryViewer/HistoryViewerSnapshot.js

@@ -128,8 +128,8 @@ export default compose(
   inject(
     ['FormAction', 'SnapshotHistoryViewerSnapshotState'],
     (FormAction, HistoryViewerSnapshotState) => ({
-        FormActionComponent: FormAction,
-        StateComponent: HistoryViewerSnapshotState,
-      })
+      FormActionComponent: FormAction,
+      StateComponent: HistoryViewerSnapshotState,
+    })
   )
 )(HistoryViewerSnapshot);

client/src/components/HistoryViewer/HistoryViewerSnapshotState.js

@@ -1,6 +1,6 @@
-import { Component as VersionedState } from './HistoryViewerVersionState';
 import { inject } from 'lib/Injector';
 import React from 'react';
+import { Component as VersionedState } from './HistoryViewerVersionState';
 
 class HistoryViewerSnapshotState extends VersionedState {
   translateType(type) {

client/src/components/HistoryViewer/HistoryViewerToolbar.js

@@ -1,22 +1,22 @@
+/* eslint-disable import/no-unresolved, react/no-unused-state */
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import i18n from 'i18n';
 import { inject } from 'lib/Injector';
 import { addMessage, showList } from 'state/historyviewer/HistoryViewerActions';
-import { Tooltip } from 'reactstrap';
+import { UncontrolledTooltip as Tooltip } from 'reactstrap';
 
 class HistoryViewerToolbar extends Component {
   constructor(props) {
     super(props);
 
     this.handleRevert = this.handleRevert.bind(this);
-    this.handleToggleRevertTooltip = this.handleToggleRevertTooltip.bind(this);
 
     this.state = {
       isReverting: false,
-      revertTooltipOpen: false,
       tooltipTimer: null,
     };
   }
@@ -38,12 +38,6 @@ class HistoryViewerToolbar extends Component {
     } }).then(() => handler(versionId));
   }
 
-  handleToggleRevertTooltip() {
-    this.setState(state => ({
-      revertTooltipOpen: !state.revertTooltipOpen,
-    }));
-  }
-
   render() {
     const {
       FormActionComponent,
@@ -55,11 +49,14 @@ class HistoryViewerToolbar extends Component {
       rollbackMessage,
       typeName,
     } = this.props;
-    const { isReverting, revertTooltipOpen } = this.state;
+    const { isReverting } = this.state;
 
-    const revertButtonTitle = isReverting
-      ? i18n._t('HistoryViewerToolbar.REVERT_IN_PROGRESS', 'Revert in progress...')
-      : i18n._t('HistoryViewerToolbar.REVERT_UNAVAILABLE', 'Unavailable for the current version');
+    let revertButtonTitle = '';
+    if (isReverting) {
+      revertButtonTitle = i18n._t('HistoryViewerToolbar.REVERT_IN_PROGRESS', 'Revert in progress...');
+    } else if (isLatestVersion) {
+      revertButtonTitle = i18n._t('HistoryViewerToolbar.REVERT_UNAVAILABLE', 'Unavailable for the current version');
+    }
 
     return (
       <RollbackMutation typeName={typeName}>
@@ -72,11 +69,11 @@ class HistoryViewerToolbar extends Component {
                 icon="back-in-time"
                 name="revert"
                 attributes={{
-                    title: revertButtonTitle,
-                  }}
+                  title: revertButtonTitle,
+                }}
                 data={{
-                    buttonStyle: 'warning'
-                  }}
+                  buttonStyle: 'warning'
+                }}
                 disabled={isLatestVersion || isReverting || !canRollback}
                 loading={isReverting}
                 title={i18n._t('HistoryViewerToolbar.REVERT_TO_VERSION', 'Revert to this version')}
@@ -85,17 +82,15 @@ class HistoryViewerToolbar extends Component {
               <Tooltip
                 trigger="click hover focus"
                 placement="top"
-                isOpen={revertTooltipOpen}
-                toggle={this.handleToggleRevertTooltip}
                 target="HistoryRevertButton"
               >
                 {rollbackMessage}
               </Tooltip>
-                )}
+              )}
               { isPreviewable && <ViewModeComponent id="history-viewer-edit-mode" area="edit" /> }
             </div>
           </div>
-          )}
+        )}
       </RollbackMutation>
     );
   }
@@ -123,14 +118,13 @@ HistoryViewerToolbar.defaultProps = {
   canRollback: true,
 };
 
-
 function mapDispatchToProps(dispatch) {
   return {
     onAfterRevert(versionId) {
       dispatch(addMessage(i18n.sprintf(
-          i18n._t('HistoryViewerToolbar.REVERTED_MESSAGE', 'Successfully reverted to version %s'),
-          versionId
-        )));
+        i18n._t('HistoryViewerToolbar.REVERTED_MESSAGE', 'Successfully reverted to version %s'),
+        versionId
+      )));
       dispatch(showList());
     },
   };

client/src/components/HistoryViewer/HistoryViewerVersion.js

@@ -195,6 +195,7 @@ class HistoryViewerVersion extends Component {
       </span>
     );
   }
+
   render() {
     const { version, isActive, StateComponent } = this.props;
     const rowTitle = i18n._t('HistoryViewerVersion.GO_TO_VERSION', 'Go to version {version}');

client/src/components/HistoryViewer/HistoryViewerVersion.scss

@@ -1,3 +1,5 @@
+$snapshot-top-padding: $table-cell-padding * 2 + $line-height-base;
+
 .history-viewer__row--current {
   .history-viewer__version-link {
     cursor: default;
@@ -80,7 +82,7 @@
 
   &--initial {
     &:before {
-      top: ($table-cell-padding * 2 + $line-height-base) / 2;
+      top: calc($snapshot-top-padding / 2);
     }
   }
   &--muted {
@@ -94,4 +96,4 @@
       display:none;
     }
   }
-}
+}

client/src/components/HistoryViewer/HistoryViewerVersionDetail.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved, react/no-deprecated */
 /* global document */
 
 import React, { PureComponent } from 'react';

client/src/components/HistoryViewer/HistoryViewerVersionList.js

@@ -43,12 +43,12 @@ class HistoryViewerVersionList extends PureComponent {
    * @returns {boolean}
    */
   isVersionActive(version) {
-      const { currentVersion, compare, compare: { versionFrom, versionTo } } = this.props;
-      const isCurrent = currentVersion && currentVersion.id === version.id;
-      const isCompareFrom = versionFrom && versionFrom.id === version.id;
-      const isCompareTo = versionTo && versionTo.id === version.id;
+    const { currentVersion, compare, compare: { versionFrom, versionTo } } = this.props;
+    const isCurrent = currentVersion && currentVersion.id === version.id;
+    const isCompareFrom = versionFrom && versionFrom.id === version.id;
+    const isCompareTo = versionTo && versionTo.id === version.id;
 
-      return (!compare && isCurrent) || isCompareFrom || isCompareTo;
+    return (!compare && isCurrent) || isCompareFrom || isCompareTo;
   }
 
   /**

client/src/components/HistoryViewer/HistoryViewerVersionList.scss

@@ -101,7 +101,7 @@
 
 // In detail views, pulls the content (and content tabs) closer to the selected version table
 .history-viewer__table--current {
-  margin-bottom: $panel-padding-y / 2;
+  margin-bottom: calc($panel-padding-y / 2);
 }
 
 .history-viewer {

client/src/components/HistoryViewer/HistoryViewerVersionState.js

@@ -32,7 +32,6 @@ class HistoryViewerVersionState extends Component {
     return i18n._t('HistoryViewer.Saved', 'Saved');
   }
 
-
   /**
    * Return any status badges for the record
    *

client/src/components/HistoryViewer/RollbackMutation.js

@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
-import { Mutation } from 'react-apollo';
+import { Mutation } from '@apollo/client/react/components';
 import createRollbackMutation from '../../graphql/createRollbackMutation';
 
 const RollbackMutation = ({ typeName, children }) => {
-    const ROLLBACK = useMemo(() => createRollbackMutation(typeName), [typeName]);
-    return (
-      <Mutation mutation={ROLLBACK} refetchQueries={[`ReadSnapshots${typeName}`]}>
-        {children}
-      </Mutation>
-    );
+  const ROLLBACK = useMemo(() => createRollbackMutation(typeName), [typeName]);
+  return (
+    <Mutation mutation={ROLLBACK} refetchQueries={[`ReadSnapshots${typeName}`]}>
+      {children}
+    </Mutation>
+  );
 };
 
 export default RollbackMutation;