[repo snapshot] rewrote it with react

frontend/config/webpack.config.dev.js

@@ -204,6 +204,11 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/repo-history.js",
     ],
+    repoSnapshot: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/repo-snapshot.js",
+    ],
     repoFolderTrash: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),

frontend/config/webpack.config.prod.js

@@ -89,6 +89,7 @@ module.exports = {
     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"],
+    repoSnapshot: [require.resolve('./polyfills'), paths.appSrc + "/repo-snapshot.js"],
     repoFolderTrash: [require.resolve('./polyfills'), paths.appSrc + "/repo-folder-trash.js"],
     orgAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/org-admin"],
     sysAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/sys-admin"],

frontend/src/components/dialog/confirm-restore-repo.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  restoreRepo: PropTypes.func.isRequired,
+  toggle: PropTypes.func.isRequired
+};
+
+class ConfirmRestoreRepo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      btnDisabled: false
+    };
+  }
+
+  action = () => {
+    this.setState({
+      btnDisabled: true 
+    });
+    this.props.restoreRepo();
+  }
+
+  render() {
+    const {formActionURL, csrfToken, toggle} = this.props;
+    return (
+      <Modal centered={true} isOpen={true} toggle={toggle}>
+        <ModalHeader toggle={toggle}>{gettext('Restore Library')}</ModalHeader>
+        <ModalBody>
+          <p>{gettext('Are you sure you want to restore this library?')}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.action} disabled={this.state.btnDisabled}>{gettext('Restore')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+ConfirmRestoreRepo.propTypes = propTypes;
+
+export default ConfirmRestoreRepo;

frontend/src/css/repo-snapshot.css

@@ -0,0 +1,37 @@
+body {
+  overflow: hidden;
+}
+#wrapper {
+  height: 100%;
+}
+.top-header {
+  background: #f4f4f7;
+  border-bottom: 1px solid #e8e8e8;
+  padding: .5rem 1rem;
+  flex-shrink: 0;
+}
+.go-back {
+  color: #c0c0c0;
+  font-size: 1.75rem;
+  position: absolute;
+  left: -40px;
+  top: -5px;
+}
+.op-bar {
+  padding: 9px 10px;
+  background: #f2f2f2;
+  border-radius: 2px;
+}
+.op-bar-btn {
+  border-color: #ccc;
+  border-radius: 2px;
+  height: 30px;
+  line-height: 28px;
+  font-weight: normal;
+  padding: 0 0.5rem;
+  min-width: 55px;
+}
+.heading-commit-time {
+  font-weight: normal;
+  font-size: 60%;
+}

frontend/src/repo-history.js

@@ -294,7 +294,7 @@ class Item extends React.Component {
             {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>
+                <a href={`${siteRoot}repo/${repoID}/snapshot/?commit_id=${item.commit_id}`} className={isIconShown ? '': 'invisible'}>{gettext('View Snapshot')}</a>
             )}
           </td>
         </tr>

frontend/src/repo-snapshot.js

@@ -0,0 +1,337 @@
+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 toaster from './components/toast';
+import CommonToolbar from './components/toolbar/common-toolbar';
+import ConfirmRestoreRepo from './components/dialog/confirm-restore-repo';
+
+import './css/toolbar.css';
+import './css/search.css';
+
+import './css/repo-snapshot.css';
+
+const { 
+  repoID, repoName, isRepoOwner,
+  commitID, commitTime, commitDesc, commitRelativeTime,
+  showAuthor, authorAvatarURL, authorName, authorNickName
+} = window.app.pageOptions;
+
+class RepoSnapshot extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errorMsg: '',
+      folderPath: '/',
+      folderItems: [],
+      isConfirmDialogOpen: false
+    };
+  }
+
+  componentDidMount() {
+    this.renderFolder(this.state.folderPath);
+  }
+
+  toggleDialog = () => {
+    this.setState({
+      isConfirmDialogOpen: !this.state.isConfirmDialogOpen
+    });
+  }
+
+  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;
+    }
+  }
+
+  goBack = (e) => {
+    e.preventDefault();
+    window.history.back();
+  }
+
+  renderFolder = (folderPath) => {
+    this.setState({
+      folderPath: folderPath,
+      folderItems: [],
+      isLoading: true
+    });
+
+    seafileAPI.listCommitDir(repoID, commitID, folderPath).then((res) => {
+      this.setState({
+        isLoading: false,
+        folderItems: res.data.dirent_list
+      });
+    }).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.')
+        }); 
+      }   
+    });
+  }
+
+  clickFolderPath = (folderPath, e) => {
+    e.preventDefault();
+    this.renderFolder(folderPath);
+  }
+
+  renderPath = () => {
+    const path = this.state.folderPath;
+    const pathList = path.split('/');
+
+    if (path == '/') {
+      return repoName;
+    }
+
+    return (
+      <React.Fragment>
+        <a href="#" onClick={this.clickFolderPath.bind(this, '/')}>{repoName}</a>
+        <span> / </span>
+        {pathList.map((item, index) => {
+          if (index > 0 && index != pathList.length - 1) {
+            return (
+              <React.Fragment key={index}>
+                <a href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index+1).join('/'))}>{pathList[index]}</a>
+                <span> / </span>
+              </React.Fragment>
+            );  
+          }
+        }
+        )}  
+        {pathList[pathList.length - 1]} 
+      </React.Fragment>
+    );
+  }
+
+  restoreRepo = () => {
+    seafileAPI.revertRepo(repoID, commitID).then((res) => {
+      this.toggleDialog();
+      toaster.success(gettext('Successfully restored the library.'));
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        if (error.response.data && error.response.data['error_msg']) {
+          errorMsg = error.response.data['error_msg'];
+        } else {
+          errorMsg = gettext('Error');
+        }   
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.toggleDialog();
+      toaster.danger(errorMsg);
+    }); 
+  }
+
+  render() {
+    const { isConfirmDialogOpen, folderPath } = this.state;
+
+    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 pb-6 o-auto">
+            <div className="row">
+              <div className="col-md-10 offset-md-1">
+                <h2 dangerouslySetInnerHTML={{__html: Utils.generateDialogTitle(gettext('{placeholder} Snapshot'), repoName) + ` <span class="heading-commit-time">(${commitTime})</span>`}}></h2>
+                <a href="#" className="go-back" title={gettext('Back')} onClick={this.goBack}>
+                  <span className="fas fa-chevron-left"></span>
+                </a>
+                {folderPath == '/' && (
+                  <div className="d-flex mb-2 align-items-center">
+                    <p className="m-0">{commitDesc}</p>
+                    <div className="ml-4 border-left pl-4 d-flex align-items-center">
+                      {showAuthor ? (
+                        <React.Fragment>
+                          <img src={authorAvatarURL} width="20" height="20" alt="" className="rounded mr-1" />
+                          <a href={`${siteRoot}profile/${encodeURIComponent(authorName)}/`}>{authorNickName}</a>
+                        </React.Fragment>
+                      ) : <span>{gettext('Unknown')}</span>}
+                      <p className="m-0 ml-2" dangerouslySetInnerHTML={{__html: commitRelativeTime}}></p>
+                    </div>
+                  </div>
+                )}
+                <div className="d-flex justify-content-between align-items-center op-bar">
+                  <p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p>
+                  {(folderPath == '/' && isRepoOwner) &&
+                  <button className="btn btn-secondary op-bar-btn" onClick={this.toggleDialog}>{gettext('Restore')}</button>
+                  }
+                </div>
+                <Content 
+                  data={this.state}
+                  renderFolder={this.renderFolder}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        {isConfirmDialogOpen &&
+        <ModalPortal>
+          <ConfirmRestoreRepo
+            restoreRepo={this.restoreRepo}
+            toggle={this.toggleDialog}
+          />
+        </ModalPortal>
+        }
+      </React.Fragment>
+    );
+  }
+}
+
+class Content extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.theadData = [
+      {width: '5%', text: ''},
+      {width: '55%', text: gettext('Name')},
+      {width: '20%', text: gettext('Size')},
+      {width: '20%', text: ''}
+    ];
+  } 
+
+  render() {
+    const { isLoading, errorMsg, folderPath, folderItems } = this.props.data;
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error mt-6 text-center">{errorMsg}</p>;
+    }
+
+    return (
+        <table className="table-hover">
+          <thead>
+            <tr>
+              {this.theadData.map((item, index) => {
+                return <th key={index} width={item.width}>{item.text}</th>;
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {folderItems.map((item, index) => {
+              return <FolderItem 
+                key={index}
+                item={item} 
+                folderPath={folderPath}
+                renderFolder={this.props.renderFolder}
+              />;
+            })
+            }
+          </tbody>
+        </table>
+    );
+  }
+}
+
+class FolderItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isIconShown: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({isIconShown: true});
+  }
+
+  handleMouseOut = () => {
+    this.setState({isIconShown: false});
+  }
+
+  restoreItem = (e) => {
+    e.preventDefault();
+
+    const item = this.props.item;
+    const path = Utils.joinPath(this.props.folderPath, item.name);
+    const request = item.type == 'dir' ?
+      seafileAPI.revertFolder(repoID, path, commitID): 
+      seafileAPI.revertFile(repoID, path, commitID);
+    request.then((res) => {
+      toaster.success(gettext('Successfully restored 1 item.'));
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        errorMsg = error.response.data.error_msg || gettext('Error');
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      toaster.danger(errorMsg);
+    }); 
+  }
+
+  renderFolder = (e) => {
+    e.preventDefault();
+
+    const item = this.props.item;
+    const { folderPath } = this.props;
+    this.props.renderFolder(Utils.joinPath(folderPath, item.name));
+  }
+
+  render() {
+    const item = this.props.item;
+    const { isIconShown } = this.state;
+    const { folderPath } = this.props;
+
+    return item.type == 'dir' ? (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td className="text-center"><img src={Utils.getFolderIconUrl()} alt={gettext('Directory')} width="24" /></td>
+        <td><a href="#" onClick={this.renderFolder}>{item.name}</a></td>
+        <td></td>
+        <td>
+          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '': 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')}></a>
+        </td>
+      </tr>
+    ) : (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td className="text-center"><img src={Utils.getFileIconUrl(item.name)} alt={gettext('File')} width="24" /></td>
+        <td><a href={`${siteRoot}repo/${repoID}/snapshot/files/?obj_id=${item.obj_id}&commit_id=${commitID}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} target="_blank">{item.name}</a></td>
+        <td>{Utils.bytesToSize(item.size)}</td>
+        <td>
+          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '': 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')}></a>
+          <a href={`${siteRoot}repo/${repoID}/${item.obj_id}/download/?file_name=${encodeURIComponent(item.name)}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} className={`action-icon sf2-icon-download ${isIconShown ? '': 'invisible'}`} title={gettext('Download')}></a>
+        </td>
+      </tr>
+    );
+  }
+}
+
+ReactDOM.render(
+  <RepoSnapshot />,
+  document.getElementById('wrapper')
+);

seahub/templates/repo_snapshot_react.html

@@ -0,0 +1,34 @@
+{% extends 'base_for_react.html' %}
+{% load seahub_tags i18n avatar_tags %}
+{% load render_bundle from webpack_loader %}
+
+{% block sub_title %}{% trans "Snapshot" %} - {% endblock %}
+
+{% block extra_style %}
+{% render_bundle 'repoSnapshot' '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}}',
+
+  commitID: '{{current_commit.id}}',
+  commitTime: '{{current_commit.props.ctime|tsstr_sec}}',
+  commitDesc: '{{ current_commit.props.desc|translate_commit_desc|escapejs }}',
+  commitRelativeTime: '{{ current_commit.props.ctime|translate_seahub_time }}',
+
+  {% if current_commit.props.creator_name %}
+  showAuthor: true,
+  authorAvatarURL: "{% avatar_url current_commit.props.creator_name 40 %}",
+  authorName: '{{ current_commit.props.creator_name|escapejs }}',
+  authorNickName: '{{ current_commit.props.creator_name|email2nickname|escapejs }}',
+  {% endif %}
+
+  isRepoOwner: {% if is_repo_owner %} true {% else %} false {% endif %}
+};
+</script>
+{% render_bundle 'repoSnapshot' 'js' %}
+{% endblock %}

seahub/urls.py

@@ -14,7 +14,7 @@ from seahub.views.file import view_history_file, view_trash_file,\
     text_diff, view_raw_file, download_file, view_lib_file, \
     file_access, view_lib_file_via_smart_link, view_media_file_via_share_link, \
     view_media_file_via_public_wiki
-from seahub.views.repo import repo_history_view, view_shared_dir, \
+from seahub.views.repo import repo_history_view, repo_snapshot, view_shared_dir, \
     view_shared_upload_link, view_lib_as_wiki
 from notifications.views import notification_list
 from seahub.views.wiki import personal_wiki, personal_wiki_pages, \
@@ -171,6 +171,7 @@ urlpatterns = [
     url(r'^repo/text_diff/(?P<repo_id>[-0-9a-f]{36})/$', text_diff, name='text_diff'),
     url(r'^repo/history/(?P<repo_id>[-0-9a-f]{36})/$', repo_history, name='repo_history'),
     url(r'^repo/history/view/(?P<repo_id>[-0-9a-f]{36})/$', repo_history_view, name='repo_history_view'),
+    url(r'^repo/(?P<repo_id>[-0-9a-f]{36})/snapshot/$', repo_snapshot, name="repo_snapshot"),
     url(r'^repo/recycle/(?P<repo_id>[-0-9a-f]{36})/$', repo_recycle_view, name='repo_recycle_view'),
     url(r'^dir/recycle/(?P<repo_id>[-0-9a-f]{36})/$', dir_recycle_view, name='dir_recycle_view'),
     url(r'^repo/(?P<repo_id>[-0-9a-f]{36})/trash/$', repo_folder_trash, name="repo_folder_trash"),

seahub/views/repo.py

@@ -153,6 +153,50 @@ def repo_history_view(request, repo_id):
             'referer': referer,
             })
 
+@login_required
+def repo_snapshot(request, repo_id):
+    """View repo in history.
+    """
+    repo = get_repo(repo_id)
+    if not repo:
+        raise Http404
+
+    username = request.user.username
+    user_perm = check_folder_permission(request, repo.id, '/')
+    if user_perm is None:
+        return render_error(request, _(u'Permission denied'))
+
+    try:
+        server_crypto = UserOptions.objects.is_server_crypto(username)
+    except CryptoOptionNotSetError:
+        # Assume server_crypto is ``False`` if this option is not set.
+        server_crypto = False
+
+    reverse_url = reverse('lib_view', args=[repo_id, repo.name, ''])
+    if repo.encrypted and \
+        (repo.enc_version == 1 or (repo.enc_version == 2 and server_crypto)) \
+        and not is_password_set(repo.id, username):
+        return render(request, 'decrypt_repo_form.html', {
+                'repo': repo,
+                'next': get_next_url_from_request(request) or reverse_url,
+                })
+
+    commit_id = request.GET.get('commit_id', None)
+    if commit_id is None:
+        return HttpResponseRedirect(reverse_url)
+    current_commit = get_commit(repo.id, repo.version, commit_id)
+    if not current_commit:
+        current_commit = get_commit(repo.id, repo.version, repo.head_cmmt_id)
+
+    repo_owner = seafile_api.get_repo_owner(repo.id)
+    is_repo_owner = True if username == repo_owner else False
+
+    return render(request, 'repo_snapshot_react.html', {
+            'repo': repo,
+            "is_repo_owner": is_repo_owner,
+            'current_commit': current_commit,
+            })
+
 @login_required
 def view_lib_as_wiki(request, repo_id, path):