Componentized comparison source and target selection functions.

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

@@ -6,6 +6,7 @@ import PageHistroyContainer from '../../services/PageHistoryContainer';
 
 import Revision from './Revision';
 import RevisionDiff from './RevisionDiff';
+import RevisionCompareTargetSelector from './RevisionCompareTargetSelector';
 
 class PageRevisionList extends React.Component {
 
@@ -41,15 +42,22 @@ class PageRevisionList extends React.Component {
 
     return (
       <div className={classNames.join(' ')} key={`revision-history-${revisionId}`}>
-        <Revision
-          t={this.props.t}
-          revision={revision}
-          revisionDiffOpened={revisionDiffOpened}
-          hasDiff={hasDiff}
-          isCompactNodiffRevisions={this.state.isCompactNodiffRevisions}
-          onDiffOpenClicked={this.props.onDiffOpenClicked}
-          key={`revision-history-rev-${revisionId}`}
-        />
+        <div className="revision-history-main d-flex justify-content-between mt-3">
+          <Revision
+            t={this.props.t}
+            revision={revision}
+            revisionDiffOpened={revisionDiffOpened}
+            hasDiff={hasDiff}
+            isCompactNodiffRevisions={this.state.isCompactNodiffRevisions}
+            onDiffOpenClicked={this.props.onDiffOpenClicked}
+            key={`revision-history-rev-${revisionId}`}
+          />
+          <div className="d-flex form-group align-items-center ml-auto">
+            <RevisionCompareTargetSelector
+              revision={revision}
+            />
+          </div>
+        </div>
         { hasDiff
           && (
           <RevisionDiff
@@ -91,7 +99,13 @@ class PageRevisionList extends React.Component {
 
       hasDiffPrev = hasDiff;
 
-      return this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
+      const row = this.renderRow(revision, previousRevision, hasDiff, isContiguousNodiff);
+      return (
+        <React.Fragment>
+          {row}
+          <hr />
+        </React.Fragment>
+      );
     });
 
     const classNames = ['revision-history-list'];

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

@@ -94,42 +94,6 @@ 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 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>
         </div>

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+import { withLoadingSppiner } from '../SuspenseUtils';
+
+import RevisionCompareContainer from '../../services/RevisionCompareContainer';
+
+const RevisionCompareTargetSelector = (props) => {
+
+  const { t, revision, revisionCompareContainer } = props;
+  const { fromRevision, toRevision } = revisionCompareContainer.state;
+
+  return (
+    <React.Fragment>
+      <div className="custom-control custom-radio custom-control-inline">
+        <input
+          type="radio"
+          className="custom-control-input"
+          id={`compareSource-${revision._id}`}
+          name="compareSource"
+          value={revision._id}
+          checked={revision._id === fromRevision?._id}
+          onChange={() => revisionCompareContainer.setState({fromRevision: revision})}
+        />
+        <label className="custom-control-label" htmlFor={`compareSource-${revision._id}`} />
+      </div>
+      <div className="custom-control custom-radio custom-control-inline">
+        <input
+          type="radio"
+          className="custom-control-input"
+          id={`compareTarget-${revision._id}`}
+          name="compareTarget"
+          value={revision._id}
+          checked={revision._id === toRevision?._id}
+          onChange={() => revisionCompareContainer.setState({toRevision: revision})}
+        />
+        <label className="custom-control-label" htmlFor={`compareTarget-${revision._id}`} />
+      </div>
+    </React.Fragment>
+  );
+
+}
+
+const RevisionCompareTargetSelectorWrapper = withUnstatedContainers(withLoadingSppiner(RevisionCompareTargetSelector), [RevisionCompareContainer]);
+
+RevisionCompareTargetSelector.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
+
+  revision: PropTypes.object,
+};
+
+export default RevisionCompareTargetSelectorWrapper;