Added drop-down to select revision.

resource/locales/en_US/translation.json

@@ -324,10 +324,12 @@
   },
   "page_history": {
     "comparing_versions": "Comparing versions",
+    "comparing_with_latest": "Comparing with latest",
     "select_as_a_comparing_source": "Comparing source",
     "select_as_a_comparing_target": "Comparing target",
     "comparing_source": "Comparing source",
-    "comparing_target": "Comparing target"
+    "comparing_target": "Comparing target",
+    "latest_revision": "Latest revision"
   },
   "modal_rename": {
     "label": {

resource/locales/ja_JP/translation.json

@@ -326,10 +326,12 @@
   },
   "page_history": {
     "comparing_versions": "バージョン比較",
-    "select_as_a_comparing_source": "バージョン比較のソース",
-    "select_as_a_comparing_target": "バージョン比較のターゲット",
+    "comparing_with_latest": "このバージョンを最新と比較する",
+    "select_as_a_comparing_source": "このバージョンを比較ソースにする",
+    "select_as_a_comparing_target": "このバージョンを比較ターゲットにする",
     "comparing_source": "比較ソース",
-    "comparing_target": "比較ターゲット"
+    "comparing_target": "比較ターゲット",
+    "latest_revision": "最新バージョン"
   },
   "modal_rename": {
     "label": {

resource/locales/zh_CN/translation.json

@@ -305,10 +305,12 @@
   },
   "page_history": {
     "comparing_versions": "比较版本",
+    "comparing_with_latest": "与最新版本相比",
     "select_as_a_comparing_source": "比较源",
     "select_as_a_comparing_target": "比较目标",
     "comparing_source": "比较源",
-    "comparing_target": "比较目标"
+    "comparing_target": "比较目标",
+    "latest_revision": "最新修订"
   },
 	"modal_rename": {
 		"label": {

src/client/js/components/PageHistory.jsx

@@ -45,7 +45,7 @@ function PageHistory(props) {
     throw new Promise(async() => {
       try {
         await props.pageHistoryContainer.retrieveRevisions(1);
-        props.revisionCompareContainer.initRevisions(props.pageHistoryContainer.state.revisions);
+        await props.revisionCompareContainer.initRevisions(props.pageHistoryContainer.state.revisions);
       }
       catch (err) {
         toastError(err);

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

@@ -63,6 +63,7 @@ class Revision extends React.Component {
     }
 
     const iconClass = this.props.revisionDiffOpened ? 'fa fa-caret-down caret caret-opened' : 'fa fa-caret-down caret';
+    const latestRevision = revisionCompareContainer.state.latestRevision;
     return (
       <div className="revision-history-main d-flex mt-3">
         <div className="mt-2">
@@ -93,27 +94,33 @@ class Revision extends React.Component {
               <a href={`?revision=${revision._id}`} className="ml-2 d-inline-block">
                 <i className="icon-login"></i> { t('Go to this version') }
               </a>
-              <span className="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)}
-                  checked={revision._id === revisionCompareContainer.state.fromRevision?._id}
-                />
-                <label className="custom-control-label" htmlFor={`rbCompareFrom_${revision._id}`}>{t('page_history.select_as_a_comparing_source')}</label>
-              </span>
-              <span className="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)}
-                  checked={revision._id === revisionCompareContainer.state.toRevision?._id}
-                />
-                <label className="custom-control-label" htmlFor={`rbCompareTo_${revision._id}`}>{t('page_history.select_as_a_comparing_target')}</label>
+              <span className="ml-2 btn-group d-inline-block">
+                <button
+                  type="button"
+                  className="btn btn-light"
+                  onClick={() => revisionCompareContainer.setState({ fromRevision: revision, toRevision: latestRevision }) }
+                >
+                  {t('page_history.comparing_with_latest')}
+                </button>
+                <button type="button" className="btn btn-light dropdown-toggle dropdown-toggle-split" id="bgCompareRevision" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
+                  <span className="sr-only">{t('page_history.comparing_versions')}</span>
+                </button>
+                <span className="dropdown-menu" aria-labelledby="bgCompareRevision">
+                  <a
+                    className="dropdown-item"
+                    href="#"
+                    onClick={() => revisionCompareContainer.setState({ fromRevision: revision })}
+                  >
+                    {t('page_history.select_as_a_comparing_source')}
+                  </a>
+                  <a
+                    className="dropdown-item"
+                    href="#"
+                    onClick={() => revisionCompareContainer.setState({ toRevision: revision })}
+                  >
+                    {t('page_history.select_as_a_comparing_target')}
+                  </a>
+                </span>
               </span>
             </p>
           </div>

src/client/js/components/RevisionCompare/RevisionIdForm.jsx

@@ -26,6 +26,7 @@ const RevisionIdForm = (props) => {
 
     const author = selectedRevision?.author;
     const pic = (typeof author === 'object') ? <UserPicture user={author} size="lg" /> : '';
+    const islatestRevisionLabel = (selectedRevision?._id === revisionCompareContainer.state.latestRevision?._id) ? <span>({t('page_history.latest_revision')})</span> : "";
 
     return (
       <div className="card">
@@ -50,7 +51,11 @@ const RevisionIdForm = (props) => {
           )}
         </div>
         <div className="card-footer text-muted">
-          {selectedRevision && selectedRevision._id}
+          {selectedRevision && (
+            <React.Fragment>
+              {selectedRevision._id}{islatestRevisionLabel}
+            </React.Fragment>
+          )}
         </div>
       </div>
     );

src/client/js/services/RevisionCompareContainer.js

@@ -1,5 +1,11 @@
 import { Container } from 'unstated';
 
+import loggerFactory from '@alias/logger';
+
+import { toastError } from '../util/apiNotification';
+
+const logger = loggerFactory('growi:PageHistoryContainer');
+
 /**
  * Service container for personal settings page (RevisionCompare.jsx)
  * @extends {Container} unstated Container
@@ -17,11 +23,13 @@ export default class RevisionCompareContainer extends Container {
 
       fromRevision: null,
       toRevision: null,
+      latestRevision: null,
     };
 
     this.initRevisions = this.initRevisions.bind(this);
     this.handleFromRevisionChange = this.handleFromRevisionChange.bind(this);
     this.handleToRevisionChange = this.handleToRevisionChange.bind(this);
+    this.fetchLatestRevision = this.fetchLatestRevision.bind(this);
   }
 
   /**
@@ -31,17 +39,19 @@ export default class RevisionCompareContainer extends Container {
     return 'RevisionCompareContainer';
   }
 
-  initRevisions(revisions) {
+  async initRevisions(revisions) {
     const fromRevision = revisions.find(it => it._id === this.compareRevisionIds[0]) || revisions[0];
     const toRevision = revisions.find(it => it._id === this.compareRevisionIds[1]) || revisions[0];
-    this.setState({ fromRevision, toRevision });
+    const latestRevision = await this.fetchLatestRevision();
+
+    this.setState({ fromRevision, toRevision, latestRevision });
   }
 
-  async handleFromRevisionChange(revision) {
+  handleFromRevisionChange(revision) {
     this.setState({ fromRevision: revision });
   }
 
-  async handleToRevisionChange(revision) {
+  handleToRevisionChange(revision) {
     this.setState({ toRevision: revision });
   }
 
@@ -58,4 +68,19 @@ export default class RevisionCompareContainer extends Container {
     return searchParams['compare'].split('...') || [];
   }
 
+  async fetchLatestRevision() {
+    const { pageId, shareLinkId } = this.pageContainer.state;
+
+    try {
+      const res = await this.appContainer.apiv3Get('/revisions/list', {
+        pageId, shareLinkId, page: 1, limit: 1,
+      });
+      return res.data.docs[0];
+    }
+    catch (err) {
+      toastError(err);
+      this.setState({ errorMessage: err.message });
+      logger.error(err);
+    }
+  }
 }