receive share from other service

frontend/src/app.js

@@ -20,6 +20,7 @@ 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 ShareWithOCM from './pages/share-with-ocm/shared-with-ocm';
+import OCMViaWebdav from './pages/ocm-via-webdav/ocm-via-webdav';
 import OCMRepoDir from './pages/share-with-ocm/remote-dir-view';
 import MyLibraries from './pages/my-libs/my-libs';
 import MyLibDeleted from './pages/my-libs/my-libs-deleted';
@@ -41,6 +42,7 @@ const StarredWrapper = MainContentWrapper(Starred);
 const LinkedDevicesWrapper = MainContentWrapper(LinkedDevices);
 const SharedLibrariesWrapper = MainContentWrapper(SharedLibraries);
 const SharedWithOCMWrapper = MainContentWrapper(ShareWithOCM);
+const OCMViaWebdavWrapper = MainContentWrapper(OCMViaWebdav);
 const ShareAdminLibrariesWrapper = MainContentWrapper(ShareAdminLibraries);
 const ShareAdminFoldersWrapper = MainContentWrapper(ShareAdminFolders);
 const ShareAdminShareLinksWrapper = MainContentWrapper(ShareAdminShareLinks);
@@ -261,6 +263,7 @@ class App extends Component {
               <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <SharedWithOCMWrapper path={siteRoot + 'shared-with-ocm'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <OCMViaWebdavWrapper path={siteRoot + 'ocm-via-webdav'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
               <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
               <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
 import { Badge } from 'reactstrap';
-import { gettext, siteRoot, canPublishRepo, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, dtableWebServer, enableOCM } from '../utils/constants';
+import { gettext, siteRoot, canPublishRepo, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, dtableWebServer, enableOCM, enableOCMViaWebdav } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
 import { Utils } from '../utils/utils';
 import toaster from './toast';
@@ -224,6 +224,14 @@ class MainSideNav extends React.Component {
                 </Link>
               </li>
             }
+            {enableOCMViaWebdav &&
+              <li className="nav-item">
+                <Link to={siteRoot + 'ocm-via-webdav/'} className={`nav-link ellipsis ${this.getActiveClass('ocm-via-webdav')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'ocm-via-webdav')}>
+                  <span className="sf3-font-share-from-other-servers sf3-font" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Shared from other servers')}</span>
+                </Link>
+              </li>
+            }
           </ul>
 
 

frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js

@@ -0,0 +1,184 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Link } from '@reach/router';
+import { gettext, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
+import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
+
+class Content extends Component {
+
+  render() {
+    const { loading, errorMsg, items } = this.props;
+
+    const emptyTip = (
+      <EmptyTip>
+        <h2>{gettext('No libraries have been shared with you')}</h2>
+        <p>{gettext('No libraries have been shared with you from other servers.')}</p>
+      </EmptyTip>
+    );
+
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const table = (
+        <table>
+          <thead>
+            <tr>
+              <th width="5%"></th>
+              <th width="30%">{gettext('Name')}</th>
+              <th width="35%">{gettext('Shared by')}</th>
+              <th width="20%">{gettext('Time')}</th>
+              <th width="5%">{/* operations */}</th>
+              <th width="5%">{/* operations */}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => {
+              return <Item
+                key={index}
+                item={item}
+                leaveShare={this.props.leaveShare}
+              />;
+            })}
+          </tbody>
+        </table>
+      );
+
+      return items.length ? table : emptyTip;
+    }
+  }
+}
+
+Content.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  errorMsg: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+};
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    });
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  downloadFile = () => {
+    let downloadUrl = siteRoot + 'ocm-via-webdav/download-received-file/?share_id=' + this.props.item.id;
+    window.location.href = downloadUrl;
+  }
+
+  leaveShare = (e) => {
+    e.preventDefault();
+    this.props.leaveShare(this.props.item);
+  }
+
+  render() {
+    const item = this.props.item;
+    const { isOpIconShown } = this.state;
+
+    item.icon_url = Utils.getFileIconUrl(item.name);
+    return (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><img src={item.icon_url} width="24" /></td>
+        <td>
+          {item.name}
+	</td>
+        <td>{item.shared_by}</td>
+        <td title={moment(item.last_modified).format('llll')}>{moment(item.ctime).fromNow()}</td>
+        <td>
+          <a href="#" className={`action-icon sf2-icon-download ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Download')} onClick={this.downloadFile}></a>
+        </td>
+        <td>
+          <a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Leave Share')} onClick={this.leaveShare}></a>
+        </td>
+      </tr>
+    );
+  }
+}
+
+Item.propTypes = {
+  item: PropTypes.object.isRequired
+};
+
+class OCMViaWebdav extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    const url = seafileAPI.server + '/ocm-via-webdav/received-shares/';
+    seafileAPI.req.get(url).then((res) => {
+      this.setState({
+        loading: false,
+        items: res.data.received_share_list
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  leaveShare = (item) => {
+    const { id, name } = item;
+    const url = seafileAPI.server + '/ocm-via-webdav/received-shares/' + id + '/';
+    seafileAPI.req.delete(url).then((res) => {
+      let items = this.state.items.filter(item => {
+        return item.id != id;
+      });
+      this.setState({items: items});
+      toaster.success(gettext('Successfully unshared {name}').replace('{name}', name));
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading m-0">{gettext('Shared from other servers')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content
+                loading={this.state.loading}
+                errorMsg={this.state.errorMsg}
+                items={this.state.items}
+                leaveShare={this.leaveShare}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default OCMViaWebdav;

frontend/src/utils/constants.js

@@ -74,6 +74,7 @@ export const maxUploadFileSize = window.app.pageOptions.maxUploadFileSize;
 export const maxNumberOfFilesForFileupload = window.app.pageOptions.maxNumberOfFilesForFileupload;
 export const enableOCM = window.app.pageOptions.enableOCM;
 export const ocmRemoteServers = window.app.pageOptions.ocmRemoteServers;
+export const enableOCMViaWebdav = window.app.pageOptions.enableOCMViaWebdav;
 
 export const curNoteMsg = window.app.pageOptions.curNoteMsg;
 export const curNoteID = window.app.pageOptions.curNoteID;