Comparison source and target selection functions to match UI/UX design specs

resource/locales/ja_JP/translation.json

@@ -325,8 +325,8 @@
     "user_not_admin": "権限のあるユーザーのみが完全削除できます"
   },
   "page_history": {
-    "comparing_versions": "バージョン比較",
-    "comparing_with_latest": "このバージョンを最新と比較する",
+    "comparing_versions": "比較",
+    "comparing_with_latest": "常に最新バージョンと比較する",
     "select_as_a_comparing_source": "このバージョンを比較ソースにする",
     "select_as_a_comparing_target": "このバージョンを比較ターゲットにする",
     "comparing_source": "比較ソース",

src/client/js/components/PageHistory/PageRevisionList.jsx

@@ -42,7 +42,7 @@ class PageRevisionList extends React.Component {
 
     return (
       <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
-        <div className="revision-history-main d-flex justify-content-between mt-3">
+        <div className="d-flex justify-content-between" key={`revision-history-top-${revisionId}`}>
           <Revision
             t={this.props.t}
             revision={revision}
@@ -55,6 +55,7 @@ class PageRevisionList extends React.Component {
           <div className="d-flex form-group align-items-center ml-auto">
             <RevisionCompareTargetSelector
               revision={revision}
+              key={`revision-compare-target-selector-${revisionId}`}
             />
           </div>
         </div>

src/client/js/components/PageHistory/RevisionCompareTargetSelector.jsx

@@ -34,6 +34,7 @@ const RevisionCompareTargetSelector = (props) => {
           value={revision._id}
           checked={revision._id === toRevision?._id}
           onChange={() => revisionCompareContainer.setState({toRevision: revision})}
+          disabled={revisionCompareContainer.state.compareWithLatest}
         />
         <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
       </div>

src/client/js/components/RevisionCompare.jsx

@@ -11,7 +11,6 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import RevisionCompareContainer from '../services/RevisionCompareContainer';
 
 import RevisionDiff from './PageHistory/RevisionDiff';
-import RevisionIdForm from './RevisionCompare/RevisionIdForm';
 
 /* eslint-disable react/prop-types */
 const DropdownItemContents = ({ title, contents }) => (
@@ -56,10 +55,24 @@ const RevisionCompare = (props) => {
 
   return (
     <React.Fragment>
-      <div className="float-left">{t('page_history.comparing_versions')}</div>
-      <div className="mb-3">
+      <div className="d-flex">
+        <h3 className="align-self-center mb-0">{t('page_history.comparing_versions')}</h3>
+        <div className="align-self-center ml-3">
+          <div className="custom-control custom-switch">
+            <input
+              type="checkbox"
+              className="custom-control-input"
+              id="comparingWithLatest"
+              checked={revisionCompareContainer.state.compareWithLatest}
+              onChange={() => revisionCompareContainer.toggleCompareWithLatest()}
+            />
+            <label className="custom-control-label" htmlFor="comparingWithLatest">
+              {t('page_history.comparing_with_latest')}
+            </label>
+          </div>
+        </div>
         <Dropdown
-          className="grw-copy-dropdown"
+          className="grw-copy-dropdown align-self-center ml-auto"
           isOpen={dropdownOpen}
           toggle={() => toggleDropdown()}
         >
@@ -83,8 +96,6 @@ const RevisionCompare = (props) => {
 
       <div className="clearfix"></div>
 
-      <RevisionIdForm />
-
       { showDiff && (
         <RevisionDiff
           revisionDiffOpened

src/client/js/services/RevisionCompareContainer.js

@@ -24,9 +24,11 @@ export default class RevisionCompareContainer extends Container {
       fromRevision: null,
       toRevision: null,
       latestRevision: null,
+      compareWithLatest: true,
     };
 
     this.initRevisions = this.initRevisions.bind(this);
+    this.toggleCompareWithLatest = this.toggleCompareWithLatest.bind(this);
   }
 
   /**
@@ -105,4 +107,18 @@ export default class RevisionCompareContainer extends Container {
     return null;
   }
 
+  /**
+   * toggle state "compareWithLatest", and if true, set "fromRevision" to the latest revision
+   */
+  toggleCompareWithLatest() {
+    const { compareWithLatest } = this.state;
+    const newCompareWithLatest = !compareWithLatest;
+
+    this.setState(
+      Object.assign(
+        { compareWithLatest: newCompareWithLatest },
+        (newCompareWithLatest === true ? { toRevision: this.state.latestRevision } : {})
+      )
+    );
+  }
 }