feat: sdoc diff (#5465)

* feat: sdoc diff

* feat: add changes

* feat: optimize code

frontend/src/components/common/go-back/index.css

@@ -0,0 +1,9 @@
+.go-back {
+  margin-right: 0.75rem;
+  color: #c0c0c0;
+}
+
+.go-back:hover {
+  color: #ff9933;
+  cursor: pointer;
+}

frontend/src/components/common/go-back/index.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import './index.css';
+
+class GoBack extends Component {
+
+  onBackClick = (event) => {
+    event.preventDefault();
+    window.history.back();
+  }
+
+  render() {
+    return (
+      <div className="go-back" onClick={this.onBackClick}>
+        <span className="fas fa-chevron-left"></span>
+      </div>
+    );
+  }
+}
+
+export default GoBack;

frontend/src/components/common/switch/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import '../../../css/switch.css';
+
+function Switch(props) {
+  const { onChange, checked, placeholder, disabled, className, size } = props;
+
+  return(
+    <div className={classnames('seahub-switch position-relative', className, size)}>
+      <label className="custom-switch">
+        <input
+          className="custom-switch-input"
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          name="custom-switch-checkbox"
+          disabled={disabled}
+        />
+        <span className="custom-switch-description text-truncate">{placeholder}</span>
+        <span className="custom-switch-indicator"></span>
+      </label>
+    </div>
+  );
+}
+
+Switch.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'small', undefined]),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Switch;

frontend/src/components/history-list-view/history-list-item.js

@@ -5,6 +5,8 @@ import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap'
 import { gettext, filePath } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
 
+import '../../css/history-record-item.css';
+
 moment.locale(window.app.config.lang);
 
 const propTypes = {

frontend/src/css/file-history.css

@@ -76,54 +76,6 @@
   background-color: #ffe7d5;
 }
 
-.item-active {
-  color: #fff;
-  background-color: #fdc297 !important;
-}
-
-.item-active i {
-  color: #fff;
-}
-
-.history-list-item .history-info {
-  flex: 1;
-  padding: 0 0.5rem;
-}
-
-.history-list-item .history-operation {
-  width: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.history-info .time {
-  color: #000;
-}
-
-.history-info .owner {
-  margin-top: 0.25rem;
-  color: #888;
-  display: flex;
-  align-items: center;
-}
-
-.owner .squire-icon {
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: #549b5a;
-  margin-right: 0.25rem;
-}
-
-.history-body .dropdown-menu {
-  min-width: 8rem;
-}
-
-.history-body .dropdown-menu a {
-  text-decoration: none;
-  color: #6e7687;
-}
-
 .history-content .main-panel {
   flex: 1 1 auto;
 }

frontend/src/css/history-record-item.css

@@ -0,0 +1,47 @@
+.item-active {
+  color: #fff;
+  background-color: #fdc297 !important;
+}
+
+.item-active i {
+  color: #fff;
+}
+
+.history-list-item .history-info {
+  flex: 1;
+  padding: 0 0.5rem;
+}
+
+.history-list-item .history-operation {
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.history-info .time {
+  color: #000;
+}
+
+.history-info .owner {
+  margin-top: 0.25rem;
+  color: #888;
+  display: flex;
+  align-items: center;
+}
+
+.owner .squire-icon {
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: #549b5a;
+  margin-right: 0.25rem;
+}
+
+.history-body .dropdown-menu {
+  min-width: 8rem;
+}
+
+.history-body .dropdown-menu a {
+  text-decoration: none;
+  color: #6e7687;
+}

frontend/src/css/sdoc-file-history.css

@@ -0,0 +1,206 @@
+.sdoc-file-history .sdoc-file-history-container {
+  flex: 1;
+  overflow-x: hidden;
+}
+
+.sdoc-file-history .sdoc-file-history-header {
+  height: 50px;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #f4f4f7;
+}
+
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-history-header-left {
+  font-size: 1.25rem;
+  flex: 1;
+}
+
+.sdoc-file-history .sdoc-file-history-header .file-name {
+  flex: 1;
+}
+
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-history-header-right {
+  height: 100%;
+  min-width: 100px;
+}
+
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-container {
+  height: 32px;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+}
+
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-divider {
+  border-right: 1px solid #e5e5e5;
+  height: 100%;
+  width: 1px;
+}
+
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-last,
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-next {
+  padding:  0 8px;
+  color: #000;
+  opacity: .5;
+  height: 100%;
+}
+
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-last:hover,
+.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-next:hover {
+  cursor: pointer;
+  opacity: .75;
+}
+
+.sdoc-file-history .sdoc-file-history-content {
+  flex: 1;
+  min-height: 0;
+  padding: 20px 40px;
+  background-color: #fafaf9;
+  overflow-y: scroll;
+}
+
+.sdoc-file-history .sdoc-file-history-content .sdoc-file-history-viewer {
+  width: 100%;
+  min-height: 120px;
+  flex: 1;
+  background-color: #fff;
+  word-break: break-word;
+  border: 1px solid #e6e6dd;
+}
+
+.sdoc-file-history .sdoc-file-history-content .sdoc-editor-content {
+  background-color: #fff;
+}
+
+.sdoc-file-history .sdoc-file-history-content .article {
+  width: 100%;
+  margin: 0;
+}
+
+/* panel */
+.sdoc-file-history .sdoc-file-history-panel {
+  width: 260px;
+  border-left: 1px solid #e5e5e5;
+}
+
+.sdoc-file-history .sdoc-file-history-panel .sdoc-file-history-select-range {
+  padding: 10px 18px;
+  height: 50px;;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: rgb(250, 250, 249);
+}
+
+.sdoc-file-history .sdoc-file-history-panel .sdoc-file-history-select-range-title {
+  height: 100%;
+  width: 100%;
+  font-size: 1rem;
+  font-weight: bolder;
+  line-height: 29px;
+}
+
+.sdoc-file-history .sdoc-file-history-panel .sdoc-file-history-diff-switch {
+  padding: 0 18px;
+  height: 50px;;
+  border-top: 1px solid #e5e5e5;
+}
+
+.sdoc-file-history .sdoc-file-history-diff-switch .custom-switch {
+  width: 100%;
+  padding-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.sdoc-file-history .sdoc-file-history-diff-switch .custom-switch-description {
+  margin-left: 0;
+  flex: 1;
+  padding-right: 8px;
+}
+
+/* history versions */
+.sdoc-file-history-versions {
+  flex: 1; 
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+}
+
+.sdoc-file-history-versions .history-list-item {
+  padding: 5px 10px;
+  display: flex;
+  flex: 1;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.sdoc-file-history-versions .history-list-item:last-child {
+  border-bottom: none;
+}
+
+.sdoc-file-history-versions .history-list-item:hover {
+  background-color: #ffe7d5;
+  cursor: pointer;
+}
+
+.history-info .owner {
+  min-height: 22.5px;
+}
+
+.sdoc-file-history-versions .dropdown-menu {
+  min-width: 8rem;
+}
+
+.sdoc-file-history-versions .dropdown-menu a {
+  text-decoration: none;
+  color: #6e7687;
+}
+
+.history-content .main-panel {
+  flex: 1 1 auto;
+}
+
+.history-content .history-side-panel {
+  flex: 0 0 auto;
+  user-select: none;
+  border-left: 1px solid #e5e5e5;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-content .history-side-panel .history-side-panel-title {
+  height: 50px;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 50px;
+  font-size: 1rem;
+  padding: 0 10px;
+  background-color: rgb(250,250,249);
+  font-weight: bolder;
+}
+
+@media (min-width:992px) {
+
+  .history-side-panel {
+    width: 260px;
+  }
+
+}
+
+@media (max-width:768px) {
+
+  .sdoc-file-history .sdoc-file-history-content {
+    padding: 0;
+  }
+
+  .sdoc-file-history .sdoc-file-history-content .sdoc-file-history-viewer {
+    border: none;
+  }
+
+  .markdown-viewer-render-content {
+    margin: 20px;
+  }
+
+  .markdown-viewer-render-content .diff-view {
+    padding: 20px;
+  }
+
+}

frontend/src/css/switch.css

@@ -0,0 +1,14 @@
+.seahub-switch.small .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.seahub-switch.small .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.seahub-switch.small .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}

frontend/src/models/file-history.js

@@ -0,0 +1,17 @@
+import moment from 'moment';
+moment.locale(window.app.config.lang);
+
+export default class FileHistory {
+
+  constructor(object) {
+    this.commitId = object.commit_id || undefined;
+    this.ctime = object.ctime ? moment(object.ctime).format('YYYY-MM-DD HH:mm') : '';
+    this.creatorName = object.creator_name || '';
+    this.size = object.size || 0;
+    this.revRenamedOldPath = object.rev_renamed_old_path || '';
+    this.revFileId = object.rev_file_id || '';
+    this.path = object.path || '';
+    this.description = object.description || '';
+  }
+
+}

frontend/src/pages/sdoc-file-history/history-version.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
+import { gettext, filePath } from '../../utils/constants';
+import URLDecorator from '../../utils/url-decorator';
+
+import '../../css/history-record-item.css';
+
+class HistoryVersion extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowOperationIcon: false,
+      isMenuShow: false,
+    };
+  }
+
+  onMouseEnter = () => {
+    const { currentVersion, historyVersion } = this.props;
+    if (currentVersion.commitId === historyVersion.commitId) return;
+    this.setState({ isShowOperationIcon: true });
+  }
+
+  onMouseLeave = () => {
+    const { currentVersion, historyVersion } = this.props;
+    if (currentVersion.commitId === historyVersion.commitId) return;
+    this.setState({ isShowOperationIcon: false });
+  }
+
+  onToggleClick = (e) => {
+    this.setState({ isMenuShow: !this.state.isMenuShow });
+  }
+
+  onClick = () => {
+    this.setState({ isShowOperationIcon: false });
+    const { currentVersion, historyVersion } = this.props;
+    if (currentVersion.commitId === historyVersion.commitId) return;
+    this.props.onSelectHistoryVersion(historyVersion);
+  }
+
+  onRestore = () => {
+    const { historyVersion } = this.props;
+    this.props.onRestore(historyVersion);
+  }
+
+  onItemDownload = () => {
+    // nothing todo
+  }
+
+  render() {
+    const { currentVersion, historyVersion } = this.props;
+    if (!currentVersion || !historyVersion) return null;
+    const { ctime, commitId, creatorName, revFileId } = historyVersion;
+    const isHighlightItem = commitId === currentVersion.commitId;
+    const url = URLDecorator.getUrl({ type: 'download_historic_file', filePath: filePath, objID: revFileId });
+    return (
+      <li
+        className={`history-list-item ${isHighlightItem ? 'item-active' : ''}`}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+        onClick={this.onClick}
+      >
+        <div className="history-info">
+          <div className="time">{ctime}</div>
+          <div className="owner">
+            <span className="squire-icon"></span>
+            <span>{creatorName}</span>
+          </div>
+        </div>
+        <div className="history-operation">
+          <Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
+            <DropdownToggle
+              tag='a'
+              className={`fas fa-ellipsis-v ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
+              data-toggle="dropdown"
+              aria-expanded={this.state.isMenuShow}
+              alt={gettext('More Operations')}
+            />
+            <DropdownMenu>
+              {(this.props.index !== 0) && <DropdownItem onClick={this.onItemRestore}>{gettext('Restore')}</DropdownItem>}
+              <DropdownItem tag='a' href={url} onClick={this.onItemDownLoad}>{gettext('Download')}</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </li>
+    );
+  }
+}
+
+HistoryVersion.propTypes = {
+  index: PropTypes.number,
+  currentVersion: PropTypes.object.isRequired,
+  historyVersion: PropTypes.object,
+  onSelectHistoryVersion: PropTypes.func.isRequired,
+  onRestore: PropTypes.func.isRequired,
+};
+
+export default HistoryVersion;

frontend/src/pages/sdoc-file-history/index.js

@@ -1,259 +1,173 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import ReactDom from 'react-dom';
-import { Button } from 'reactstrap';
-import { Utils } from '../../utils/utils';
+import { UncontrolledTooltip } from 'reactstrap';
+import classnames from 'classnames';
+import DiffViewer from '@seafile/sdoc-editor/dist/pages/diff-viewer';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, PER_PAGE, filePath, fileName, historyRepoID, canDownload, canCompare } from '../../utils/constants';
-import editUtilities from '../../utils/editor-utilities';
+import { gettext, fileName, historyRepoID } from '../../utils/constants';
 import Loading from '../../components/loading';
-import Logo from '../../components/logo';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
-import HistoryItem from '../file-history-old/history-item';
+import GoBack from '../../components/common/go-back';
+import SidePanel from './side-panel';
+import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
 
 import '../../css/layout.css';
-import '../../css/toolbar.css';
-import '../../css/search.css';
-import '../../css/file-history-old.css';
+import '../../css/sdoc-file-history.css';
 
 class SdocFileHistory extends React.Component {
 
   constructor(props) {
     super(props);
+    const isShowChanges = localStorage.getItem('seahub-sdoc-history-show-changes') === 'false' ? false : true;
     this.state = {
-      historyList: [],
-      currentPage: 1,
-      hasMore: false,
-      nextCommit: undefined,
-      filePath: '',
-      oldFilePath: '',
       isLoading: true,
-      isReloadingData: false,
+      isShowChanges,
+      currentVersion: {},
+      currentVersionContent: '',
+      lastVersionContent: '',
+      changes: [],
+      currentDiffIndex: 0,
     };
   }
 
-  componentDidMount() {
-    this.listOldHistoryRecords(historyRepoID, filePath);
-  }
-
-  listNewHistoryRecords = (filePath, PER_PAGE) => {
-    editUtilities.listFileHistoryRecords(filePath, 1, PER_PAGE).then(res => {
-      let historyData = res.data;
-      if (!historyData) {
-        this.setState({isLoading: false});
-        throw Error('There is an error in server.');
-      }
-      this.initNewRecords(res.data);
-    });
-  }
-
-  listOldHistoryRecords = (repoID, filePath) => {
-    seafileAPI.listOldFileHistoryRecords(repoID, filePath).then((res) => {
-      let historyData = res.data;
-      if (!historyData) {
-        this.setState({isLoading: false});
-        throw Error('There is an error in server.');
-      }
-      this.initOldRecords(res.data);
-    });
-  }
-
-  initNewRecords(result) {
-    if (result.total_count < 5) {
-      if (result.data.length) {
-        let commitID = result.data[result.data.length-1].commit_id;
-        let path = result.data[result.data.length-1].path;
-        let oldPath = result.data[result.data.length-1].old_path;
-        path = oldPath ? oldPath : path;
-        seafileAPI.listOldFileHistoryRecords(historyRepoID, path, commitID).then((res) => {
-          if (!res.data) {
-            this.setState({isLoading: false});
-            throw Error('There is an error in server.');
-          }
-          this.setState({
-            historyList: result.data.concat(res.data.data.slice(1, res.data.data.length)),
-            isLoading: false,
-          });
+  onSelectHistoryVersion = (currentVersion, lastVersion) => {
+    this.setState({ isLoading: true, currentVersion });
+    seafileAPI.getFileRevision(historyRepoID, currentVersion.commitId, currentVersion.path).then(res => {
+      return seafileAPI.getFileContent(res.data);
+    }).then(res => {
+      const currentVersionContent = res.data;
+      if (lastVersion) {
+        seafileAPI.getFileRevision(historyRepoID, lastVersion.commitId, lastVersion.path).then(res => {
+          return seafileAPI.getFileContent(res.data);
+        }).then(res => {
+          const lastVersionContent = res.data;
+          this.setContent(currentVersionContent, lastVersionContent);
+        }).catch(error => {
+          const errorMessage = Utils.getErrorMsg(error, true);
+          toaster.danger(gettext(errorMessage));
+          this.setContent(currentVersionContent, '');
         });
       } else {
-        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
-          if (!res.data) {
-            this.setState({isLoading: false});
-            throw Error('There is an error in server.');
-          }
-          this.setState({
-            historyList: res.data.data,
-            isLoading: false,
-          });
-        });
+        this.setContent(currentVersionContent, '');
       }
-    } else {
-      this.setState({
-        historyList: result.data,
-        currentPage: result.page,
-        hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
-        isLoading: false,
-      });
-    }
-  }
-
-  initOldRecords(result) {
-    if (result.data.length) {
-      this.setState({
-        historyList: result.data,
-        nextCommit: result.next_start_commit,
-        filePath: result.data[result.data.length-1].path,
-        oldFilePath: result.data[result.data.length-1].rev_renamed_old_path,
-        isLoading: false,
-      });
-    } else {
-      this.setState({nextCommit: result.next_start_commit,});
-      if (this.state.nextCommit) {
-        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
-          this.initOldRecords(res.data);
-        });
-      } else {
-        this.setState({isLoading: false});
-      }
-    }
-  }
-
-  onScrollHandler = (event) => {
-    const clientHeight = event.target.clientHeight;
-    const scrollHeight = event.target.scrollHeight;
-    const scrollTop = event.target.scrollTop;
-    const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
-    let hasMore = this.state.hasMore;
-    if (isBottom && hasMore) {
-      this.reloadMore();
-    }
-  }
-
-  reloadMore = () => {
-    if (!this.state.isReloadingData) {
-      const commitID = this.state.nextCommit;
-      const filePath = this.state.filePath;
-      const oldFilePath = this.state.oldFilePath;
-      this.setState({ isReloadingData: true });
-      if (oldFilePath) {
-        seafileAPI.listOldFileHistoryRecords(historyRepoID, oldFilePath, commitID).then((res) => {
-          this.updateOldRecords(res.data, oldFilePath);
-        });
-      } else {
-        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, commitID).then((res) => {
-          this.updateOldRecords(res.data, filePath);
-        });
-      }
-    }
-  }
-
-  updateNewRecords(result) {
-    this.setState({
-      historyList: [...this.state.historyList, ...result.data],
-      currentPage: result.page,
-      hasMore: result.total_count > (PER_PAGE * this.state.currentPage),
-      isReloadingData: false,
+    }).catch(error => {
+      const errorMessage = Utils.getErrorMsg(error, true);
+      toaster.danger(gettext(errorMessage));
+      this.setContent('', '');
     });
   }
 
-  updateOldRecords(result, filePath) {
-    if (result.data.length) {
-      this.setState({
-        historyList: [...this.state.historyList, ...result.data],
-        nextCommit: result.next_start_commit,
-        filePath: result.data[result.data.length-1].path,
-        oldFilePath: result.data[result.data.length-1].rev_renamed_old_path,
-        isReloadingData: false,
-      });
-    } else {
-      this.setState({nextCommit: result.next_start_commit,});
-      if (this.state.nextCommit) {
-        seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath, this.state.nextCommit).then((res) => {
-          this.updateOldRecords(res.data, filePath);
-        });
-      }
-    }
+  setContent = (currentVersionContent = '', lastVersionContent = '') => {
+    this.setState({ currentVersionContent, lastVersionContent, isLoading: false, changes: [], currentDiffIndex: 0 });
   }
 
-  onItemRestore = (item) => {
-    let commitId = item.commit_id;
-    let filePath = item.path;
-    editUtilities.revertFile(filePath, commitId).then(res => {
-      if (res.data.success) {
-        this.setState({ isLoading: true });
-        this.refreshFileList();
+  onShowChanges = (isShowChanges) => {
+    this.setState({ isShowChanges }, () => {
+      localStorage.setItem('seahub-sdoc-history-show-changes', isShowChanges + '');
+    });
+  }
+
+  setDiffCount = (diff = { value: [], changes: [] }) => {
+    const { changes } = diff;
+    this.setState({ changes, currentDiffIndex: 0 });
+  }
+
+  jumpToElement = (currentDiffIndex) => {
+    this.setState({ currentDiffIndex }, () => {
+      const { currentDiffIndex, changes } = this.state;
+      const change = changes[currentDiffIndex];
+      const changeElement = document.querySelectorAll(`[data-id=${change}]`)[0];
+      if (changeElement) {
+        this.historyContentRef.scrollTop = changeElement.offsetTop - 10;
       }
     });
   }
 
-  refreshFileList() {
-    seafileAPI.listOldFileHistoryRecords(historyRepoID, filePath).then((res) => {
-      this.initOldRecords(res.data);
-    });
+  lastChange = () => {
+    const { currentDiffIndex, changes } = this.state;
+    if (currentDiffIndex === 0) {
+      this.jumpToElement(changes.length - 1);
+      return;
+    }
+    this.jumpToElement(currentDiffIndex - 1);
   }
 
-  onSearchedClick = (searchedItem) => {
-    Utils.handleSearchedItemClick(searchedItem);
-  }
-
-  onBackClick = (event) => {
-    event.preventDefault();
-    window.history.back();
+  nextChange = () => {
+    const { currentDiffIndex, changes } = this.state;
+    if (currentDiffIndex === changes.length - 1) {
+      this.jumpToElement(0);
+      return;
+    }
+    this.jumpToElement(currentDiffIndex + 1);
   }
 
   render() {
+    const { currentVersion, isShowChanges, currentVersionContent, lastVersionContent, isLoading, changes, currentDiffIndex } = this.state;
+    const changesCount = changes ? changes.length : 0;
+    const isShowChangesTips = isShowChanges && changesCount > 0;
+
     return (
-      <Fragment>
-        <div id="header" className="old-history-header">
-          <div className="logo">
-            <Logo showCloseSidePanelIcon={false}/>
+      <div className="sdoc-file-history d-flex h-100 w-100 o-hidden">
+        <div className="sdoc-file-history-container d-flex flex-column">
+          <div className="sdoc-file-history-header pt-2 pb-2 pl-4 pr-4 d-flex justify-content-between w-100 o-hidden">
+            <div className={classnames('sdoc-file-history-header-left d-flex align-items-center o-hidden', { 'pr-4': isShowChangesTips })}>
+              <GoBack />
+              <div className="file-name text-truncate">{fileName}</div>
+            </div>
+            {isShowChangesTips && (
+              <div className="sdoc-file-history-header-right d-flex align-items-center">
+                <div className="sdoc-file-changes-container d-flex align-items-center ">
+                  <div className="sdoc-file-changes-tip d-flex align-items-center justify-content-center pl-2 pr-2">
+                    {`${gettext('Changes')} ${currentDiffIndex + 1}/${changesCount}`}
+                  </div>
+                  <div className="sdoc-file-changes-divider"></div>
+                  <div
+                    className="sdoc-file-changes-last d-flex align-items-center justify-content-center"
+                    id="sdoc-file-changes-last"
+                    onClick={this.lastChange}
+                  >
+                    <span className="fas fa-chevron-up"></span>
+                  </div>
+                  <div className="sdoc-file-changes-divider"></div>
+                  <div
+                    className="sdoc-file-changes-next d-flex align-items-center justify-content-center"
+                    id="sdoc-file-changes-next"
+                    onClick={this.nextChange}
+                  >
+                    <span className="fas fa-chevron-down"></span>
+                  </div>
+                  <UncontrolledTooltip placement="bottom" target="sdoc-file-changes-last">
+                    {gettext('Last modification')}
+                  </UncontrolledTooltip>
+                  <UncontrolledTooltip placement="bottom" target="sdoc-file-changes-next">
+                    {gettext('Next modification')}
+                  </UncontrolledTooltip>
+                </div>
+              </div>
+            )}
           </div>
-          <div className='toolbar'>
-            <CommonToolbar onSearchedClick={this.onSearchedClick} />
+          <div className="sdoc-file-history-content f-flex flex-column" ref={ref => this.historyContentRef = ref}>
+            {isLoading ? (
+              <div className="sdoc-file-history-viewer d-flex align-items-center justify-content-center">
+                <Loading />
+              </div>
+            ) : (
+              <DiffViewer
+                ref={ref => this.diffViewerRef = ref}
+                currentContent={currentVersionContent}
+                lastContent={isShowChanges ? lastVersionContent : ''}
+                didMountCallback={this.setDiffCount}
+              />
+            )}
           </div>
         </div>
-        <div id="main" onScroll={this.onScrollHandler}>
-          <div className="old-history-main">
-            <Fragment>
-              <a href="#" className="go-back" title="Back" onClick={this.onBackClick}>
-                <span className="fas fa-chevron-left"></span>
-              </a>
-              <h2><span className="file-name">{fileName}</span>{' '}{gettext('History Versions')}</h2>
-            </Fragment>
-            <Fragment>
-              <table className="commit-list">
-                <thead>
-                  <tr>
-                    <th width="40%" >{gettext('Time')}</th>
-                    <th width="30%" >{gettext('Modifier')}</th>
-                    <th width="25%" >{gettext('Size')}</th>
-                    <th width="5%" ></th>
-                  </tr>
-                </thead>
-                {!this.state.isLoading &&
-                  <tbody>
-                    {this.state.historyList.map((item, index) => {
-                      return (
-                        <HistoryItem
-                          key={index}
-                          item={item}
-                          index={index}
-                          canDownload={canDownload}
-                          canCompare={canCompare}
-                          onItemRestore={this.onItemRestore}
-                        />
-                      );
-                    })}
-                  </tbody>
-                }
-              </table>
-              {(this.state.isReloadingData || this.state.isLoading) && <Loading />}
-              {this.state.nextCommit && !this.state.isLoading && !this.state.isReloadingData &&
-                <Button className="get-more-btn" onClick={this.reloadMore}>{gettext('More')}</Button>
-              }
-            </Fragment>
-          </div>
-        </div>
-      </Fragment>
+        <SidePanel
+          isShowChanges={isShowChanges}
+          currentVersion={currentVersion}
+          onSelectHistoryVersion={this.onSelectHistoryVersion}
+          onShowChanges={this.onShowChanges}
+        />
+      </div>
     );
   }
 }

frontend/src/pages/sdoc-file-history/side-panel.js

@@ -0,0 +1,207 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Loading from '../../components/loading';
+import { gettext, filePath, historyRepoID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import FileHistory from '../../models/file-history';
+import { Utils } from '../../utils/utils';
+import editUtilities from '../../utils/editor-utilities';
+import toaster from '../../components/toast';
+import HistoryVersion from './history-version';
+import Switch from '../../components/common/switch';
+
+class SidePanel extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      historyVersions: [],
+      errorMessage: '',
+    };
+    this.init();
+  }
+
+  componentDidMount() {
+    this.listHistoryVersions(historyRepoID, filePath, this.nextCommit, (historyVersion, lastHistoryVersion) => {
+      this.props.onSelectHistoryVersion(historyVersion, lastHistoryVersion);
+    });
+  }
+
+  init = () => {
+    this.hasMore = true;
+    this.nextCommit = '';
+    this.filePath = '';
+    this.oldFilePath = '';
+  }
+
+  listHistoryVersions = (repoID, filePath, commit, callback) => {
+    seafileAPI.listOldFileHistoryRecords(repoID, filePath, commit).then((res) => {
+      let historyData = res.data;
+      if (!historyData) {
+        this.setState({ isLoading: false, errorMessage: 'There is an error in server.' });
+        return;
+      }
+      this.updateHistoryVersions(historyData, callback);
+    }).catch(error => {
+      const errorMessage = Utils.getErrorMsg(error, true);
+      this.setState({ isLoading: false, errorMessage: errorMessage });
+    });
+  }
+
+  updateHistoryVersions(result, callback) {
+    const dataCount = result.data ? result.data.length : 0;
+    this.nextCommit = result.next_start_commit || '';
+    if (dataCount) {
+      const addedHistoryVersions = result.data.map(item => new FileHistory(item));
+      this.filePath = addedHistoryVersions[dataCount - 1].path;
+      this.oldFilePath = addedHistoryVersions[dataCount - 1].revRenamedOldPath;
+      const historyVersions = [ ...this.state.historyVersions, ...addedHistoryVersions ];
+      this.setState({ historyVersions: historyVersions, isLoading: false, errorMessage: '' }, () => {
+        callback && callback(historyVersions[0], historyVersions[1]);
+      });
+      return;
+    }
+    if (this.nextCommit) {
+      this.listHistoryVersions(historyRepoID, filePath, this.nextCommit);
+      return;
+    }
+    this.hasMore = false;
+    this.setState({ isLoading: false, errorMessage: '' });
+  }
+
+  onScrollHandler = (event) => {
+    const clientHeight = event.target.clientHeight;
+    const scrollHeight = event.target.scrollHeight;
+    const scrollTop = event.target.scrollTop;
+    const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
+    if (isBottom && this.hasMore && this.nextCommit) {
+      this.loadMore();
+    }
+  }
+
+  loadMore = () => {
+    if (this.state.isLoading) return;
+    this.setState({ isLoading: true }, () => {
+      const currentFilePath = this.oldFilePath || this.filePath;
+      this.listHistoryVersions(historyRepoID, currentFilePath, this.nextCommit);
+    });
+  }
+
+  restoreVersion = (historyVersion) => {
+    const { commitId, path } = historyVersion;
+    editUtilities.revertFile(path, commitId).then(res => {
+      if (res.data.success) {
+        this.init();
+        this.setState({ isLoading: true, historyVersions: [], errorMessage: '' } , () => {
+          this.listHistoryVersions(historyRepoID, filePath);
+        });
+      }
+    }).catch(error => {
+      const errorMessage = Utils.getErrorMsg(error, true);
+      toaster.danger(gettext(errorMessage));
+    });
+  }
+
+  onSelectHistoryVersion = (historyVersion) => {
+    const { isShowChanges } = this.props;
+    if (!isShowChanges) {
+      this.props.onSelectHistoryVersion(historyVersion);
+      return;
+    }
+    const { historyVersions } = this.state;
+    const historyVersionIndex = historyVersions.findIndex(item => item.commitId === historyVersion.commitId);
+    this.props.onSelectHistoryVersion(historyVersion, historyVersions[historyVersionIndex + 1]);
+  }
+
+  renderHistoryVersions = () => {
+    const { isLoading, historyVersions, errorMessage } = this.state;
+    if (historyVersions.length === 0) {
+      if (isLoading) {
+        return (
+          <div className="h-100 w-100 d-flex align-items-center justify-content-center">
+            <Loading />
+          </div>
+        );
+      }
+      if (errorMessage) {
+        return (
+          <div className="h-100 w-100 d-flex align-items-center justify-content-center error-message">
+            {gettext(errorMessage)}
+          </div>
+        );
+      }
+      return (
+        <div className="h-100 w-100 d-flex align-items-center justify-content-center empty-tip-color">
+          {gettext('No_historical_versions')}
+        </div>
+      );
+    }
+
+    return (
+      <>
+        {historyVersions.map((historyVersion, index) => {
+          return (
+            <HistoryVersion
+              key={historyVersion.commitId}
+              index={index}
+              currentVersion={this.props.currentVersion}
+              historyVersion={historyVersion}
+              onSelectHistoryVersion={this.onSelectHistoryVersion}
+              onRestore={this.restoreVersion}
+            />
+          );
+        })}
+        {isLoading && (
+          <div className="loading-more d-flex align-items-center justify-content-center w-100">
+            <Loading />
+          </div>
+        )}
+      </>
+    );
+  }
+
+  onShowChanges = () => {
+    const { isShowChanges } = this.props;
+    this.props.onShowChanges(!isShowChanges);
+  }
+
+  render() {
+    const { historyVersions } = this.state;
+
+    return (
+      <div className="sdoc-file-history-panel h-100 o-hidden d-flex flex-column">
+        <div className="sdoc-file-history-select-range">
+          <div className="sdoc-file-history-select-range-title">
+            {gettext('History Versions')}
+          </div>
+        </div>
+        <div
+          className={classnames('sdoc-file-history-versions', { 'o-hidden': historyVersions.length === 0 } )}
+          onScroll={this.onScrollHandler}
+        >
+          {this.renderHistoryVersions()}
+        </div>
+        <div className="sdoc-file-history-diff-switch d-flex align-items-center">
+          <Switch
+            checked={this.props.isShowChanges}
+            placeholder={gettext('Show changes')}
+            className="sdoc-history-show-changes w-100"
+            size="small"
+            onChange={this.onShowChanges}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+SidePanel.propTypes = {
+  isShowChanges: PropTypes.bool,
+  currentVersion: PropTypes.object,
+  onSelectHistoryVersion: PropTypes.func,
+  onShowChanges: PropTypes.func,
+};
+
+export default SidePanel;