Brushed up the translation and UI

resource/locales/en_US/translation.json

@@ -324,8 +324,10 @@
   },
   "page_history": {
     "comparing_versions": "Comparing versions",
-    "comparing_from": "Select this version as a comparing source",
-    "comparing_to": "Select this version as a comparing target"
+    "select_as_a_comparing_source": "Comparing source",
+    "select_as_a_comparing_target": "Comparing target",
+    "comparing_source": "Comparing source",
+    "comparing_target": "Comparing target"
   },
   "modal_rename": {
     "label": {

resource/locales/ja_JP/translation.json

@@ -326,8 +326,10 @@
   },
   "page_history": {
     "comparing_versions": "バージョン比較",
-    "comparing_from": "このバージョンをソースとして選択",
-    "comparing_to": "このバージョンをターゲットとして選択"
+    "select_as_a_comparing_source": "バージョン比較のソース",
+    "select_as_a_comparing_target": "バージョン比較のターゲット",
+    "comparing_source": "比較ソース",
+    "comparing_target": "比較ターゲット"
   },
   "modal_rename": {
     "label": {

resource/locales/zh_CN/translation.json

@@ -305,8 +305,10 @@
   },
   "page_history": {
     "comparing_versions": "比较版本",
-    "comparing_from": "选择此版本作为比较源",
-    "comparing_to": "选择此版本作为比较目标"
+    "select_as_a_comparing_source": "比较源",
+    "select_as_a_comparing_target": "比较目标",
+    "comparing_source": "比较源",
+    "comparing_target": "比较目标"
   },
 	"modal_rename": {
 		"label": {

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

@@ -102,7 +102,7 @@ class Revision extends React.Component {
                   onChange={() => revisionCompareContainer.handleFromRevisionChange(revision)}
                   checked={revision._id === revisionCompareContainer.state.fromRevision?._id}
                 />
-                <label className="custom-control-label" htmlFor={`rbCompareFrom_${revision._id}`}>{t('page_history.comparing_from')}</label>
+                <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
@@ -113,7 +113,7 @@ class Revision extends React.Component {
                   onChange={() => revisionCompareContainer.handleToRevisionChange(revision)}
                   checked={revision._id === revisionCompareContainer.state.toRevision?._id}
                 />
-                <label className="custom-control-label" htmlFor={`rbCompareTo_${revision._id}`}>{t('page_history.comparing_to')}</label>
+                <label className="custom-control-label" htmlFor={`rbCompareTo_${revision._id}`}>{t('page_history.select_as_a_comparing_target')}</label>
               </span>
             </p>
           </div>

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 import RevisionCompareContainer from '../../services/RevisionCompareContainer';
@@ -15,12 +16,12 @@ const RevisionIdForm = (props) => {
    * @param {label} label text of inputbox
    */
   const renderRevisionSelector = (label) => {
-    if (['FromRev', 'ToRev'].indexOf(label) === -1) {
+    if (['page_history.comparing_source', 'page_history.comparing_target'].indexOf(label) === -1) {
       return <></>;
     }
-    const forFromRev = (label === 'FromRev');
+    const forFromRev = (label === 'page_history.comparing_source');
 
-    const { revisionCompareContainer } = props;
+    const { t, revisionCompareContainer } = props;
     const selectedRevision = (forFromRev ? revisionCompareContainer.state.fromRevision : revisionCompareContainer.state.toRevision);
 
     const author = selectedRevision?.author;
@@ -28,7 +29,7 @@ const RevisionIdForm = (props) => {
 
     return (
       <div className="card">
-        <div className="card-header">{label}</div>
+        <div className="card-header">{t(label)}</div>
         <div className="card-body">
           { selectedRevision && (
           <div className="revision-history-main d-flex mt-3">
@@ -48,12 +49,15 @@ const RevisionIdForm = (props) => {
           </div>
           )}
         </div>
+        <div class="card-footer text-muted">
+          {selectedRevision && selectedRevision._id}
+        </div>
       </div>
     );
   }
 
-  const fromRevSelector = renderRevisionSelector('FromRev');
-  const toRevSelector = renderRevisionSelector('ToRev');
+  const fromRevSelector = renderRevisionSelector('page_history.comparing_source');
+  const toRevSelector = renderRevisionSelector('page_history.comparing_target');
 
   return (
     <div className="container-fluid px-0">
@@ -79,6 +83,7 @@ const RevisionIdFormWrapper = withUnstatedContainers(RevisionIdForm, [RevisionCo
  * Properties
  */
 RevisionIdForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
 };
 
@@ -88,4 +93,4 @@ RevisionIdForm.propTypes = {
 RevisionIdForm.defaultProps = {
 };
 
-export default RevisionIdFormWrapper;
+export default withTranslation()(RevisionIdFormWrapper);