The revision comparison component is now displayed in the page history component.

resource/locales/ja_JP/translation.json

@@ -324,8 +324,10 @@
     "outdated": "ページが他のユーザーによって更新されました。",
     "user_not_admin": "権限のあるユーザーのみが完全削除できます"
   },
-  "page_compare_revision": {
-    "comparing_changes": "リビジョン比較"
+  "page_history": {
+    "comparing_changes": "リビジョン比較",
+    "comparing_from": "このバージョンをソースとして選択",
+    "comparing_to": "このバージョンをターゲットとして選択"
   },
   "modal_rename": {
     "label": {

src/client/js/components/PageHistory.jsx

@@ -10,7 +10,8 @@ import PageRevisionList from './PageHistory/PageRevisionList';
 
 import PageHistroyContainer from '../services/PageHistoryContainer';
 import PaginationWrapper from './PaginationWrapper';
-
+import RevisionCompare from './RevisionCompare';
+import RevisionCompareContainer from './../services/RevisionCompareContainer';
 
 const logger = loggerFactory('growi:PageHistory');
 
@@ -75,15 +76,18 @@ function PageHistory(props) {
         onDiffOpenClicked={onDiffOpenClicked}
       />
       {pager()}
+
+      <RevisionCompare />
     </div>
   );
 
 }
 
-const RenderPageHistoryWrapper = withUnstatedContainers(withLoadingSppiner(PageHistory), [PageHistroyContainer]);
+const RenderPageHistoryWrapper = withUnstatedContainers(withLoadingSppiner(PageHistory), [PageHistroyContainer, RevisionCompareContainer]);
 
 PageHistory.propTypes = {
   pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
+  revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
 };
 
 export default RenderPageHistoryWrapper;

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

@@ -1,11 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { withUnstatedContainers } from '../UnstatedUtils';
+import { withLoadingSppiner } from '../SuspenseUtils';
+
 import UserDate from '../User/UserDate';
 import Username from '../User/Username';
 import UserPicture from '../User/UserPicture';
 
-export default class Revision extends React.Component {
+import RevisionCompareContainer from '../../services/RevisionCompareContainer';
+
+class Revision extends React.Component {
 
   constructor(props) {
     super(props);
@@ -48,7 +53,7 @@ export default class Revision extends React.Component {
   }
 
   renderFull(revision) {
-    const { t } = this.props;
+    const { t, revisionCompareContainer } = this.props;
 
     const author = revision.author;
 
@@ -85,9 +90,29 @@ export default class Revision extends React.Component {
                   )
                 }
               </span>
-              <a href={`?revision=${revision._id}`} className="ml-2">
+              <a href={`?revision=${revision._id}`} className="ml-2 d-inline-block">
                 <i className="icon-login"></i> { t('Go to this version') }
               </a>
+              <div class="ml-2 custom-control custom-radio custom-control-inline">
+                <input
+                  type="radio"
+                  id={`rbCompareFrom_${revision._id}`}
+                  className="custom-control-input"
+                  name="rbCompareFrom"
+                  onChange={() => revisionCompareContainer.handleFromRevisionChange(revision._id)}
+                />
+                <label class="custom-control-label" for={`rbCompareFrom_${revision._id}`}>{t('page_history.comparing_from')}</label>
+              </div>
+              <div class="ml-2 custom-control custom-radio custom-control-inline">
+                <input
+                  type="radio"
+                  id={`rbCompareTo_${revision._id}`}
+                  className="custom-control-input"
+                  name="rbCompareTo"
+                  onChange={() => revisionCompareContainer.handleToRevisionChange(revision._id)}
+                />
+                <label class="custom-control-label" for={`rbCompareTo_${revision._id}`}>{t('page_history.comparing_to')}</label>
+              </div>
             </p>
           </div>
         </div>
@@ -108,11 +133,17 @@ export default class Revision extends React.Component {
 
 }
 
+const RevisionWrapper = withUnstatedContainers(withLoadingSppiner(Revision), [RevisionCompareContainer]);
+
 Revision.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
+
   revision: PropTypes.object,
   revisionDiffOpened: PropTypes.bool.isRequired,
   hasDiff: PropTypes.bool.isRequired,
   isCompactNodiffRevisions: PropTypes.bool.isRequired,
   onDiffOpenClicked: PropTypes.func.isRequired,
 };
+
+export default RevisionWrapper;

src/client/js/components/RevisionCompare.jsx

@@ -69,8 +69,9 @@ class PageCompare extends React.Component {
     };
 
     return (
-      <div id="revision-compare-content">
-        <div className="float-right mb-3">
+      <React.Fragment>
+        <div className="float-left">{t('page_history.comparing_changes')}</div>
+        <div className="mb-3">
           <Dropdown
             className="grw-copy-dropdown"
             isOpen={this.state.dropdownOpen}
@@ -105,7 +106,7 @@ class PageCompare extends React.Component {
             currentRevision={toRev}
           />
         )}
-      </div>
+      </React.Fragment>
     );
   }