[repo history] rewrote it with react (#3541)

* [repo history] rewrote it with react

* [repo history] update

frontend/config/webpack.config.dev.js

@@ -199,6 +199,11 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/settings.js",
     ],
+    repoHistory: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/repo-history.js",
+    ],
     orgAdmin: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),

frontend/config/webpack.config.prod.js

@@ -88,6 +88,7 @@ module.exports = {
     viewFileAudio: [require.resolve('./polyfills'), paths.appSrc + "/view-file-audio.js"],
     viewFileUnknown: [require.resolve('./polyfills'), paths.appSrc + "/view-file-unknown.js"],
     settings: [require.resolve('./polyfills'), paths.appSrc + "/settings.js"],
+    repoHistory: [require.resolve('./polyfills'), paths.appSrc + "/repo-history.js"],
     orgAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/org-admin"],
     sysAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/sys-admin"],
     viewDataGrid: [require.resolve('./polyfills'), paths.appSrc + "/view-file-ctable.js"],

frontend/src/components/cur-dir-path/dir-tool.js

@@ -85,7 +85,7 @@ class DirTool extends React.Component {
     let isFile = this.isMarkdownFile(currentPath);
     let name = Utils.getFileName(currentPath);
     let trashUrl = siteRoot + 'repo/recycle/' + repoID + '/?referer=' + encodeURIComponent(location.href);
-    let historyUrl = siteRoot + 'repo/history/' + repoID + '/?referer=' + encodeURIComponent(location.href);
+    let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
     if ( (name === repoName  || name === '') && !isFile && permission) {
       return (
         <Fragment>

frontend/src/components/dialog/commit-details.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap'; 
+import moment from 'moment';
+import { gettext, fileServerRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../loading';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  commitID: PropTypes.string.isRequired,
+  commitTime: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class CommitDetails extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errorMsg: '',
+    };
+  }
+
+  componentDidMount() {
+    const {repoID, commitID} = this.props;
+    seafileAPI.getCommitDetails(repoID, commitID).then((res) => {
+      this.setState({
+        isLoading: false,
+        errorMsg: '',
+        commitDetails: res.data
+      }); 
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = error.response.data.error || gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        isLoading: false,
+        errorMsg: errorMsg
+      }); 
+    });
+  }
+
+  render() {
+    const { toggleDialog, commitTime} = this.props;
+    return (
+      <Modal isOpen={true} centered={true} toggle={toggleDialog}>
+        <ModalHeader toggle={toggleDialog}>{gettext('Modification Details')}</ModalHeader>
+        <ModalBody>
+          <p className="small">{moment(this.props.commitTime).format('YYYY-MM-DD HH:mm:ss')}</p>
+          <Content data={this.state} />
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+class Content extends React.Component {
+
+  renderDetails = (data) => {
+    const detailsData = [
+      {type: 'new', title: gettext('New files')},
+      {type: 'removed', title: gettext('Deleted files')},
+      {type: 'renamed', title: gettext('Renamed or Moved files')},
+      {type: 'modified', title: gettext('Modified files')},
+      {type: 'newdir', title: gettext('New directories')},
+      {type: 'deldir', title: gettext('Deleted directories')}
+    ];
+
+    let showDesc = true;
+    for (let i = 0, len = detailsData.length; i < len; i++) {
+      if (data[detailsData[i].type].length) {
+        showDesc = false;
+        break;
+      }
+    }
+    if (showDesc) {
+      return <p>{data.cmt_desc}</p>;
+    }
+
+    return (
+      <React.Fragment>
+        {detailsData.map((item, index) => {
+          if (!data[item.type].length) {
+            return;
+          }
+          return (
+            <React.Fragment key={index}>
+              <h6>{item.title}</h6>
+              <ul>
+                {
+                  data[item.type].map((item, index) => {
+                    return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item"></li>;
+                  })
+                }
+              </ul>
+            </React.Fragment>
+          );
+        })}
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    const {isLoading, errorMsg, commitDetails} = this.props.data;
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error mt-4 text-center">{errorMsg}</p>;
+    }
+
+    return this.renderDetails(commitDetails);
+  }
+}
+
+CommitDetails.propTypes = propTypes;
+
+export default CommitDetails;

frontend/src/components/dialog/edit-repo-commit-labels.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import CreatableSelect from 'react-select/lib/Creatable';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../toast';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  commitID: PropTypes.string.isRequired,
+  commitLabels: PropTypes.array.isRequired,
+  updateCommitLabels: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class UpdateRepoCommitLabels extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.commitLabels.map((item, index) => {
+        return {label: item, value: item}; 
+      }),
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (value) => {
+    this.setState({
+      inputValue: value
+    });
+  }
+
+  formSubmit = () => {
+    const inputValue = this.state.inputValue;
+    const labels = inputValue.map((item, index) => item.value).join(',');
+    const {repoID, commitID} = this.props;
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    seafileAPI.updateRepoCommitLabels(repoID, commitID, labels).then((res) => {
+      this.props.updateCommitLabels(res.data.revisionTags.map((item, index) => item.tag));
+      this.props.toggleDialog();
+      toaster.success(gettext('Successfully edited labels.'));
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = error.response.data.error_msg || gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { formErrorMsg } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Edit labels')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <CreatableSelect
+              defaultValue={this.props.commitLabels.map((item, index) => { return {label: item, value: item}; })}
+              isMulti={true}
+              onChange={this.handleInputChange}
+              placeholder=''
+            />
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-primary" disabled={this.state.submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+UpdateRepoCommitLabels.propTypes = propTypes;
+
+export default UpdateRepoCommitLabels;

frontend/src/css/repo-history.css

@@ -0,0 +1,28 @@
+body {
+  overflow: hidden;
+}
+#wrapper {
+  height: 100%;
+}
+.top-header {
+  background: #f4f4f7;
+  border-bottom: 1px solid #e8e8e8;
+  padding: .5rem 1rem;
+  flex-shrink: 0;
+}
+.details {
+  font-size: 12px;
+  color: #666;
+  text-decoration: underline;
+  margin-left: .25rem;
+}
+.commit-label {
+  padding: 1px 5px;
+  margin: 0 2px;
+  background: #eee;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.commit-detail-item {
+  list-style-type: none;
+}

frontend/src/css/user-settings.css

@@ -7,8 +7,7 @@ body {
 .top-header {
   background: #f4f4f7;
   border-bottom: 1px solid #e8e8e8;
-  padding: 8px 16px 4px;
-  height: 53px;
+  padding: .5rem 1rem;
   flex-shrink: 0;
 }
 

frontend/src/repo-history.js

@@ -0,0 +1,322 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { navigate } from '@reach/router';
+import moment from 'moment';
+import { Utils } from './utils/utils';
+import { gettext, loginUrl, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
+import { seafileAPI } from './utils/seafile-api';
+import Loading from './components/loading';
+import ModalPortal from './components/modal-portal';
+import CommonToolbar from './components/toolbar/common-toolbar';
+import CommitDetails from './components/dialog/commit-details';
+import UpdateRepoCommitLabels from './components/dialog/edit-repo-commit-labels';
+
+import './css/toolbar.css';
+import './css/search.css';
+
+import './css/repo-history.css';
+
+const { 
+  repoID,
+  repoName,
+  userPerm,
+  showLabel
+} = window.app.pageOptions;
+
+class RepoHistory extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errorMsg: '',
+      page: 1,
+      perPage: 100,
+      items: [],
+      more: false
+    };
+  }
+
+  componentDidMount() {
+    this.getItems(this.state.page);
+  }
+
+  getItems = (page) => {
+    seafileAPI.getRepoHistory(repoID, page, this.state.perPage).then((res) => {
+      this.setState({
+        isLoading: false,
+        page: page,
+        items: res.data.data,
+        more: res.data.more
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          isLoading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    });
+  }
+
+  getPrevious = () => {
+    this.getItems(this.state.page - 1);
+  }
+
+  getNext = () => {
+    this.getItems(this.state.page + 1);
+  }
+
+  onSearchedClick = (selectedItem) => {
+    if (selectedItem.is_dir === true) {
+      let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
+      navigate(url, {repalce: true});
+    } else {
+      let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
+    }
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div className="h-100 d-flex flex-column">
+          <div className="top-header d-flex justify-content-between">
+            <a href={siteRoot}>
+              <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
+            </a>
+            <CommonToolbar onSearchedClick={this.onSearchedClick} />
+          </div>
+          <div className="flex-auto container-fluid pt-4">
+            <div className="row">
+              <div className="col-md-10 offset-md-1">
+                <h2 dangerouslySetInnerHTML={{__html: Utils.generateDialogTitle(gettext('{placeholder} Modification History'), repoName)}}></h2>
+                {userPerm == 'rw' && <p className="tip">{gettext('Tip: a snapshot will be generated after modification, which records the library state after the modification.')}</p>}
+                <Content 
+                  data={this.state}
+                  getPrevious={this.getPrevious}
+                  getNext={this.getNext}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+class Content extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.theadData = showLabel ? [
+      {width: '43%', text: gettext('Description')},
+      {width: '12%', text: gettext('Time')},
+      {width: '9%', text: gettext('Modifier')},
+      {width: '12%', text: `${gettext('Device')} / ${gettext('Version')}`},
+      {width: '12%', text: gettext('Labels')},
+      {width: '12%', text: ''}
+    ] : [
+      {width: '43%', text: gettext('Description')},
+      {width: '15%', text: gettext('Time')},
+      {width: '15%', text: gettext('Modifier')},
+      {width: '15%', text: `${gettext('Device')} / ${gettext('Version')}`},
+      {width: '12%', text: ''}
+    ];
+  } 
+
+  getPrevious = (e) => {
+    e.preventDefault();
+    this.props.getPrevious();
+  }
+
+  getNext = (e) => {
+    e.preventDefault();
+    this.props.getNext();
+  }
+
+  render() {
+    const { isLoading, errorMsg, page, items, more } = this.props.data;
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error mt-6 text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <React.Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              {this.theadData.map((item, index) => {
+                return <th key={index} width={item.width}>{item.text}</th>;
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => {
+              item.isFirstCommit = (page == 1) && (index == 0);
+              item.showDetails = more || (index != items.length - 1);
+              return <Item key={index} item={item} />;
+            })}
+          </tbody>
+        </table>
+        <div className="text-center mt-6">
+          {page != 1 &&
+          <a href="#" onClick={this.getPrevious} className="m-2">{gettext('Previous')}</a>
+          }
+          {more && 
+          <a href="#" onClick={this.getNext} className="m-2">{gettext('Next')}</a>
+          }
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+class Item extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      labels: this.props.item.tags, 
+      isIconShown: false,
+      isCommitLabelUpdateDialogOpen: false,
+      isCommitDetailsDialogOpen: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({isIconShown: true});
+  }
+
+  handleMouseOut = () => {
+    this.setState({isIconShown: false});
+  }
+
+  showCommitDetails = (e) => {
+    e.preventDefault();
+    this.setState({
+      isCommitDetailsDialogOpen: !this.state.isCommitDetailsDialogOpen
+    });
+  }
+
+  toggleCommitDetailsDialog = () => {
+    this.setState({
+      isCommitDetailsDialogOpen: !this.state.isCommitDetailsDialogOpen
+    });
+  }
+
+  editLabel = () => {
+    this.setState({
+      isCommitLabelUpdateDialogOpen: !this.state.isCommitLabelUpdateDialogOpen
+    });
+  }
+
+  toggleLabelEditDialog = () => {
+    this.setState({
+      isCommitLabelUpdateDialogOpen: !this.state.isCommitLabelUpdateDialogOpen
+    });
+  }
+
+  updateLabels = (labels) => {
+    this.setState({
+      labels: labels
+    });
+  }
+
+  render() {
+    const item = this.props.item;
+    const { isIconShown, isCommitLabelUpdateDialogOpen, isCommitDetailsDialogOpen, labels } = this.state;
+
+    let name = '';
+    if (item.email) {
+      if (!item.second_parent_id) {
+        name = <a href={`${siteRoot}profile/${encodeURIComponent(item.email)}/`}>{item.name}</a>;
+      } else {
+        name = gettext('None');
+      }
+    } else {
+      name = gettext('Unknown');
+    }
+
+    return (
+      <React.Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td>
+            {item.description}
+            {item.showDetails &&
+            <a href="#" className="details" onClick={this.showCommitDetails}>{gettext('Details')}</a>
+            }
+          </td>
+          <td title={moment(item.time).format('LLLL')}>{moment(item.time).format('YYYY-MM-DD')}</td>
+          <td>{name}</td>
+          <td>
+            {item.client_version ? `${item.device_name} / ${item.client_version}` : 'API / --'}
+          </td>
+          {showLabel && 
+          <td>
+            {labels.map((item, index) => {
+              return <span key={index} className="commit-label">{item}</span>;
+            })}
+            {userPerm == 'rw' &&
+            <span className={`attr-action-icon fa fa-pencil-alt ${isIconShown ? '': 'invisible'}`} title={gettext('Edit')} onClick={this.editLabel}></span>
+            }
+          </td>
+          }
+          <td>
+            {userPerm == 'rw' && (
+              item.isFirstCommit ?
+                <span className={isIconShown ? '': 'invisible'}>{gettext('Current Version')}</span> :
+                <a href={`${siteRoot}repo/history/view/${repoID}/?commit_id=${item.commit_id}`} className={isIconShown ? '': 'invisible'}>{gettext('View Snapshot')}</a>
+            )}
+          </td>
+        </tr>
+        {isCommitDetailsDialogOpen &&
+          <ModalPortal>
+            <CommitDetails
+              repoID={repoID}
+              commitID={item.commit_id}
+              commitTime={item.time}
+              toggleDialog={this.toggleCommitDetailsDialog}
+            />
+          </ModalPortal>
+        }
+        {isCommitLabelUpdateDialogOpen &&
+          <ModalPortal>
+            <UpdateRepoCommitLabels
+              repoID={repoID}
+              commitID={item.commit_id}
+              commitLabels={labels}
+              updateCommitLabels={this.updateLabels}
+              toggleDialog={this.toggleLabelEditDialog}
+            />
+          </ModalPortal>
+        }
+      </React.Fragment>
+    );
+  }
+}
+
+ReactDOM.render(
+  <RepoHistory />,
+  document.getElementById('wrapper')
+);

seahub/templates/repo_history_react.html

@@ -0,0 +1,22 @@
+{% extends 'base_for_react.html' %}
+{% load seahub_tags i18n %}
+{% load render_bundle from webpack_loader %}
+
+{% block sub_title %}{% trans "History" %} - {% endblock %}
+
+{% block extra_style %}
+{% render_bundle 'repoHistory' 'css' %}
+{% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+// overwrite the one in base_for_react.html
+window.app.pageOptions = {
+  repoID: '{{repo.id}}',
+  repoName: '{{repo.props.name|escapejs}}',
+  userPerm: '{{user_perm}}',
+  showLabel: {% if show_label %} true {% else %} false {% endif %}
+};
+</script>
+{% render_bundle 'repoHistory' 'js' %}
+{% endblock %}

seahub/views/__init__.py

@@ -504,7 +504,10 @@ def repo_history(request, repo_id):
     # for 'go back'
     referer = request.GET.get('referer', '')
 
-    return render(request, 'repo_history.html', {
+    #template = 'repo_history.html'
+    template = 'repo_history_react.html'
+
+    return render(request, template, {
             "repo": repo,
             "commits": commits,
             'current_page': current_page,