[shared with me] rewrote it with react (#2552)

frontend/src/app.js

@@ -15,6 +15,7 @@ import ShareAdminLibraries from './pages/share-admin/libraries';
 import ShareAdminFolders from './pages/share-admin/folders';
 import ShareAdminShareLinks from './pages/share-admin/share-links';
 import ShareAdminUploadLinks from './pages/share-admin/upload-links';
+import SharedLibraries from './pages/shared-libs/shared-libs';
 
 import 'seafile-ui';
 import './assets/css/fa-solid.css';
@@ -96,6 +97,7 @@ class App extends Component {
             <ShareAdminFolders path={siteRoot + 'share-admin-folders'} />
             <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} />
             <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} />
+            <SharedLibraries path={siteRoot + 'shared-libs'} />
           </Router>
         </MainPanel>
       </div>

frontend/src/components/main-side-nav.js

@@ -131,10 +131,10 @@ class MainSideNav extends React.Component {
               </a>
             </li>
             <li className={`tab ${this.state.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
-              <a href={ siteRoot + '#shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
+              <Link to={siteRoot + 'shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
                 <span className="sf2-icon-share" aria-hidden="true"></span>
                 {gettext('Shared with me')}
-              </a>
+              </Link>
             </li>
             { canViewOrg &&
               <li className={`tab ${this.state.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>

frontend/src/pages/shared-libs/shared-libs.js

@@ -0,0 +1,266 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
+import Loading from '../../components/loading';
+
+class Content extends Component {
+
+  render() {
+    const {loading, errorMsg, items} = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <div className="empty-tip">
+          <h2>{gettext('No libraries have been shared with you')}</h2>
+          <p>{gettext('No libraries have been shared directly with you. You can find more shared libraries at "Shared with groups".')}</p>
+        </div>
+      );
+
+      const desktopThead = (
+        <thead>
+          <tr>
+            <th width="8%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="34%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
+            <th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="14%">{gettext("Size")}</th>
+            <th width="18%">{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
+            <th width="16%">{gettext("Owner")}</th>
+          </tr>
+        </thead>
+      );
+
+      const mobileThead = (
+        <thead>
+          <tr>
+            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="76%">
+              {gettext("Sort:")} {/* TODO: sort */}
+              {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+              {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+            </th>
+            <th width="6%"><span className="sr-only">{gettext("Actions")}</span></th>
+          </tr>
+        </thead>
+      );
+
+      const table = (
+        <table className="table table-hover table-vcenter">
+          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          <TableBody items={items} />
+        </table>
+      );
+
+      return items.length ? table : emptyTip; 
+    }
+  }
+}
+
+class TableBody extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: this.props.items
+    };
+  }
+
+  render() {
+
+    let listItems = this.state.items.map(function(item, index) {
+      return <Item key={index} data={item} />;
+    }, this);
+
+    return (
+      <tbody>{listItems}</tbody>
+    );
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOpIcon: false,
+      unshared: false
+    };
+
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+
+    this.share = this.share.bind(this);
+    this.leaveShare = this.leaveShare.bind(this);
+  }
+
+  handleMouseOver() {
+    this.setState({
+      showOpIcon: true
+    });
+  }
+
+  handleMouseOut() {
+    this.setState({
+      showOpIcon: false
+    });
+  }
+
+  share(e) {
+    e.preventDefault();
+    // TODO
+  }
+
+  leaveShare(e) {
+    e.preventDefault();
+
+    const data = this.props.data;
+
+    let request;
+    if (data.owner_email.indexOf('@seafile_group') == -1) {
+      let options = {
+        'share_type': 'personal',
+        'from': data.owner_email
+      };
+      request = seafileAPI.leaveShareRepo(data.repo_id, options);
+    } else {
+      request = seafileAPI.leaveShareGroupOwnedRepo(data.repo_id);
+    }
+
+    request.then((res) => {
+      this.setState({
+        unshared: true
+      });
+      // TODO: show feedback msg
+    }).catch((error) => {
+        // TODO: show feedback msg
+    });
+  }
+
+  render() {
+
+    if (this.state.unshared) {
+      return null;
+    }
+
+    const data = this.props.data;
+    const permission = data.permission;
+
+    let is_readonly = false;
+    if (permission == 'r' || permission == 'preview') {
+      is_readonly = true;
+    }
+    data.icon_url = Utils.getLibIconUrl({
+      is_encrypted: data.encrypted,
+      is_readonly: is_readonly, 
+      size: Utils.isHiDPI() ? 48 : 24
+    }); 
+    data.icon_title = Utils.getLibIconTitle({
+      'encrypted': data.encrypted,
+      'is_admin': data.is_admin,
+      'permission': permission
+    });
+    data.url = `${siteRoot}#shared-libs/lib/${data.repo_id}/`;
+
+    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
+    let shareIconClassName = 'sf2-icon-share sf2-x repo-share-btn op-icon' + iconVisibility; 
+    let leaveShareIconClassName = 'sf2-icon-delete sf2-x op-icon' + iconVisibility;
+
+    const desktopItem = (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+        <td><a href={data.url}>{data.repo_name}</a></td>
+        <td>
+          { isPro && data.is_admin ?
+            <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+            : ''}
+          <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
+        </td>
+        <td>{Utils.formatSize({bytes: data.size})}</td>
+        <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
+        <td title={data.owner_contact_email}>{data.owner_name}</td>
+      </tr>
+    );
+
+    const mobileItem = (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+        <td>
+          <a href={data.url}>{data.repo_name}</a><br />
+          <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
+          <span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
+          <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
+        </td>
+        <td>
+          { isPro && data.is_admin ?
+            <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+            : ''}
+          <a href="#" className={leaveShareIconClassName} title={gettext("Leave Share")} onClick={this.leaveShare}></a>
+        </td>
+      </tr>
+    );
+
+    return window.innerWidth >= 768 ? desktopItem : mobileItem;
+  }
+}
+
+class SharedLibraries extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.listRepos({type:'shared'}).then((res) => {
+      // res: {data: {...}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      this.setState({
+        loading: false,
+        items: res.data.repos
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext("Permission denied")
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext("Error")
+          });
+        }
+
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext("Please check the network.")
+        });
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div className="cur-view-container">
+        <div className="cur-view-path">
+          <h3 className="sf-heading">{gettext("Shared with me")}</h3>
+        </div>
+        <div className="cur-view-content">
+          <Content data={this.state} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SharedLibraries;

frontend/src/utils/utils.js

@@ -288,6 +288,38 @@ export const Utils = {
     'admin': gettext("Admin"),
     'cloud-edit': gettext("Preview-Edit-on-Cloud"),
     'preview': gettext("Preview-on-Cloud")
+  },
+
+  formatSize: function(options) {
+    /*
+     * param: {bytes, precision}
+     */
+    var bytes = options.bytes;
+    var precision = options.precision || 0;
+
+    var kilobyte = 1024;
+    var megabyte = kilobyte * 1024;
+    var gigabyte = megabyte * 1024;
+    var terabyte = gigabyte * 1024;
+
+    if ((bytes >= 0) && (bytes < kilobyte)) {
+      return bytes + ' B';
+
+    } else if ((bytes >= kilobyte) && (bytes < megabyte)) {
+      return (bytes / kilobyte).toFixed(precision) + ' KB';
+
+    } else if ((bytes >= megabyte) && (bytes < gigabyte)) {
+      return (bytes / megabyte).toFixed(precision) + ' MB';
+
+    } else if ((bytes >= gigabyte) && (bytes < terabyte)) {
+      return (bytes / gigabyte).toFixed(precision) + ' GB';
+
+    } else if (bytes >= terabyte) {
+      return (bytes / terabyte).toFixed(precision) + ' TB';
+
+    } else {
+      return bytes + ' B';
+    }
   }
 
 };

media/css/seahub_react.css

@@ -242,6 +242,14 @@ ul,ol,li {
     margin-right:3px;
     vertical-align:middle;
 }
+.op-icon.sf2-x,
+.op-icon.sf2-x:hover {
+    color:#f89a68;
+}
+.op-icon.sf2-x:hover,
+.op-icon.sf2-x:focus {
+    text-decoration: underline;
+}
 
 /** Account info **/
 #account {
@@ -1028,3 +1036,9 @@ table .menu-toggle {
   color: #eb8205;
   border-bottom: 2px solid #eb8205;
 }
+.item-meta-info {
+  display: inline-block;
+  margin-right: 8px;
+  font-size: 12px;
+  color: #666;
+}

seahub/templates/home_base.html

@@ -13,7 +13,7 @@
             {% if user.permissions.can_add_repo %}
             <li class="tab"><a href="{{ SITE_ROOT }}#my-libs/" class="ellipsis" title="{% trans "My Libraries" %}"><span class="sf2-icon-user" aria-hidden="true"></span>{% trans "My Libraries" %}</a></li>
             {% endif %}
-            <li class="tab"><a href="{{ SITE_ROOT }}#shared-libs/" class="ellipsis" title="{% trans "Shared with me" %}"><span class="sf2-icon-share" aria-hidden="true"></span>{% trans "Shared with me" %}</a></li>
+            <li class="tab"><a href="{{ SITE_ROOT }}shared-libs/" class="ellipsis" title="{% trans "Shared with me" %}"><span class="sf2-icon-share" aria-hidden="true"></span>{% trans "Shared with me" %}</a></li>
             {% if user.permissions.can_view_org %}
             <li class="tab"><a href="{{ SITE_ROOT }}#org/" class="ellipsis" title="{% trans "Shared with all" %}"><span class="sf2-icon-organization" aria-hidden="true"></span>{% trans "Shared with all" %}</a></li>
             {% endif %}

seahub/templates/js/templates.html

@@ -1499,7 +1499,7 @@
         {% endif %}
 
         <li class="tab<% if (cur_tab == 'shared') { %> tab-cur<% } %>">
-            <a href="{{ SITE_ROOT }}#shared-libs/" class="ellipsis" title="{% trans "Shared with me" %}"><span aria-hidden="true" class="sf2-icon-share"></span>{% trans "Shared with me" %}</a>
+            <a href="{{ SITE_ROOT }}shared-libs/" class="ellipsis" title="{% trans "Shared with me" %}"><span aria-hidden="true" class="sf2-icon-share"></span>{% trans "Shared with me" %}</a>
         </li>
 
         {% if user.permissions.can_view_org %}

seahub/urls.py

@@ -198,6 +198,7 @@ urlpatterns = [
     url(r'^share-admin-folders/$', react_fake_view, name="share_admin_folders"),
     url(r'^share-admin-share-links/$', react_fake_view, name="share_admin_share_links"),
     url(r'^share-admin-upload-links/$', react_fake_view, name="share_admin_upload_links"),
+    url(r'^shared-libs/$', react_fake_view, name="shared_libs"),
 
     ### Ajax ###
     url(r'^ajax/repo/(?P<repo_id>[-0-9a-f]{36})/dirents/$', get_dirents, name="get_dirents"),