[share admin] upload links: added support for mobile; improvement (#4011)

* and improved 'share links'

frontend/src/components/dialog/generate-upload-link.js

@@ -6,7 +6,7 @@ import { Button, Form, FormGroup, Label, Input, InputGroup, InputGroupAddon, Ale
 import { gettext, shareLinkPasswordMinLength, canSendShareLinkEmail } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import SharedUploadInfo from '../../models/shared-upload-info';
+import UploadLink from '../../models/upload-link';
 import toaster from '../toast';
 import SendLink from '../send-link';
 import SessionExpiredTip from '../session-expired-tip';
@@ -41,7 +41,7 @@ class GenerateUploadLink extends React.Component {
     let repoID = this.props.repoID; 
     seafileAPI.getUploadLinks(repoID, path).then((res) => {
       if (res.data.length !== 0) {
-        let sharedUploadInfo = new SharedUploadInfo(res.data[0]);
+        let sharedUploadInfo = new UploadLink(res.data[0]);
         this.setState({sharedUploadInfo: sharedUploadInfo});
       }
     }).catch((err) => {
@@ -98,7 +98,7 @@ class GenerateUploadLink extends React.Component {
     let isValid = this.validateParamsInput();
     if (isValid) {
       seafileAPI.createUploadLink(repoID, path, password, expireDays).then((res) => {
-        let sharedUploadInfo = new SharedUploadInfo(res.data);
+        let sharedUploadInfo = new UploadLink(res.data);
         this.setState({sharedUploadInfo: sharedUploadInfo}); 
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);

frontend/src/components/dialog/share-admin-link.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
+import { gettext } from '../../utils/constants';
+import toaster from '../../components/toast';
+
+const propTypes = {
+  link: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class ShareAdminLink extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+ copyToClipboard = () => {
+   copy(this.props.link);
+   this.props.toggleDialog();
+   toaster.success(gettext('The link is copied to the clipboard.')), {duration: 2};
+ }
+
+ render() {
+   const { link, toggleDialog } = this.props;
+   return (
+     <Modal isOpen={true} toggle={toggleDialog}>
+       <ModalHeader toggle={toggleDialog}>{gettext('Link')}</ModalHeader>
+       <ModalBody>
+         <a href={link}>{link}</a>
+       </ModalBody>
+       <ModalFooter>
+         <Button color="primary" onClick={this.copyToClipboard}>{gettext('Copy')}</Button>
+         <Button color="secondary" onClick={toggleDialog}>{gettext('Close')}</Button>
+       </ModalFooter>
+     </Modal>
+   );
+ }
+}
+
+ShareAdminLink.propTypes = propTypes;
+
+export default ShareAdminLink;

frontend/src/models/upload-link.js

@@ -1,4 +1,4 @@
-class SharedUploadInfo {
+class UploadLink {
    
   constructor(object) {
     this.repo_id = object.repo_id;
@@ -17,4 +17,4 @@ class SharedUploadInfo {
 }
 
 
-export default SharedUploadInfo;
+export default UploadLink;

frontend/src/pages/share-admin/share-links.js

@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
 import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { isPro, gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
@@ -13,6 +11,7 @@ import Loading from '../../components/loading';
 import toaster from '../../components/toast';
 import EmptyTip from '../../components/empty-tip';
 import ShareLinkPermissionSelect from '../../components/dialog/share-link-permission-select';
+import ShareAdminLink from '../../components/dialog/share-admin-link';
 
 class Content extends Component {
 
@@ -30,37 +29,6 @@ class Content extends Component {
     this.props.sortItems(sortBy, sortOrder);
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalOpen: false,
-      modalContent: ''
-    };
-  }
-
-  // required by `Modal`, and can only set the 'open' state
-  toggleModal = () => {
-    this.setState({
-      modalOpen: !this.state.modalOpen
-    });
-  }
-
-  showModal = (options) => {
-    this.toggleModal();
-    this.setState({modalContent: options.content});
-  }
-
-  copyToClipboard = () => {
-    copy(this.state.modalContent);
-    this.setState({
-      modalOpen: false
-    });
-    let message = gettext('Share link is copied to the clipboard.');
-    toaster.success(message), {
-      duration: 2
-    };
-  }
-
   render() {
     const { loading, errorMsg, items, sortBy, sortOrder } = this.props;
 
@@ -85,7 +53,6 @@ class Content extends Component {
       // only for some columns
       const columnWidths = isPro ? ['14%', '7%', '14%'] : ['21%', '14%', '20%'];
       const table = (
-        <React.Fragment>
         <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
           <thead>
             {isDesktop ? (
@@ -108,21 +75,10 @@ class Content extends Component {
           </thead>
           <tbody>
             {items.map((item, index) => {
-                return (<Item key={index} isDesktop={isDesktop} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
+              return (<Item key={index} isDesktop={isDesktop} item={item} onRemoveLink={this.props.onRemoveLink} />);
             })}
           </tbody>
         </table>
-          <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal} centered={true}>
-            <ModalHeader toggle={this.toggleModal}>{gettext('Link')}</ModalHeader>
-            <ModalBody>
-              <a href={this.state.modalContent}>{this.state.modalContent}</a>
-            </ModalBody>
-            <ModalFooter>
-              <Button color="primary" onClick={this.copyToClipboard}>{gettext('Copy')}</Button>{' '}
-              <Button color="secondary" onClick={this.toggleModal}>{gettext('Close')}</Button>
-            </ModalFooter>
-          </Modal>
-        </React.Fragment>
       );
 
       return items.length ? table : emptyTip; 
@@ -147,7 +103,8 @@ class Item extends Component {
       currentPermission: isPro ? this.getCurrentPermission() : '',
       isOpIconShown: false,
       isOpMenuOpen: false, // for mobile
-      isPermSelectDialogOpen: false // for mobile
+      isPermSelectDialogOpen: false, // for mobile
+      isLinkDialogOpen: false
     };
   }
 
@@ -199,6 +156,12 @@ class Item extends Component {
     }); 
   }
 
+  toggleLinkDialog = () => {
+    this.setState({
+      isLinkDialogOpen: !this.state.isLinkDialogOpen
+    }); 
+  }
+
   handleMouseOver = () => {
     this.setState({isOpIconShown: true});
   }
@@ -209,7 +172,7 @@ class Item extends Component {
 
   viewLink = (e) => {
     e.preventDefault();
-    this.props.showModal({content: this.props.item.link});
+    this.toggleLinkDialog();
   }
   
   removeLink = (e) => {
@@ -217,7 +180,7 @@ class Item extends Component {
     this.props.onRemoveLink(this.props.item);
   }
 
-  renderExpriedData = () => {
+  renderExpiration = () => {
     let item = this.props.item;
     if (!item.expire_date) {
       return (
@@ -228,8 +191,7 @@ class Item extends Component {
     return (
       <Fragment>
         {item.is_expired ? 
-          <span className="error">{expire_date}</span> :
-          expire_date
+          <span className="error">{expire_date}</span> : expire_date
         }
       </Fragment>
     );
@@ -252,16 +214,16 @@ class Item extends Component {
 
   render() {
     const item = this.props.item;
-    const { currentPermission, isOpIconShown, isPermSelectDialogOpen } = this.state;
+    const { currentPermission, isOpIconShown, isPermSelectDialogOpen, isLinkDialogOpen } = this.state;
 
-    let iconUrl, linkUrl;
+    let iconUrl, objUrl;
     if (item.is_dir) {
       let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
       iconUrl = Utils.getFolderIconUrl(false);
-      linkUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(path)}`;
+      objUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(path)}`;
     } else {
       iconUrl = Utils.getFileIconUrl(item.obj_name); 
-      linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
+      objUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
     }
 
     const desktopItem = (
@@ -269,8 +231,8 @@ class Item extends Component {
         <td><img src={iconUrl} width="24" alt="" /></td>
         <td>
           {item.is_dir ?
-            <Link to={linkUrl}>{item.obj_name}</Link> :
-            <a href={linkUrl} target="_blank">{item.obj_name}</a>
+            <Link to={objUrl}>{item.obj_name}</Link> :
+            <a href={objUrl} target="_blank">{item.obj_name}</a>
           }
         </td>
         <td><Link to={`${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}/`}>{item.repo_name}</Link></td>
@@ -286,9 +248,9 @@ class Item extends Component {
         </td>
         }
         <td>{item.view_cnt}</td>
-        <td>{this.renderExpriedData()}</td> 
+        <td>{this.renderExpiration()}</td> 
         <td>
-          <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>
+          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>}
           <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '': 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
         </td>
       </tr>
@@ -300,14 +262,14 @@ class Item extends Component {
           <td><img src={iconUrl} alt="" width="24" /></td>
           <td>
             {item.is_dir ?
-              <Link to={linkUrl}>{item.obj_name}</Link> :
-              <a href={linkUrl} target="_blank">{item.obj_name}</a>
+              <Link to={objUrl}>{item.obj_name}</Link> :
+              <a href={objUrl} target="_blank">{item.obj_name}</a>
             }
             {isPro && <span className="item-meta-info-highlighted">{Utils.getShareLinkPermissionObject(currentPermission).text}</span>}
             <br />
             <span>{item.repo_name}</span><br />
             <span className="item-meta-info">{item.view_cnt}<span className="small text-secondary">({gettext('Visits')})</span></span>
-            <span className="item-meta-info">{this.renderExpriedData()}<span className="small text-secondary">({gettext('Expiration')})</span></span>
+            <span className="item-meta-info">{this.renderExpiration()}<span className="small text-secondary">({gettext('Expiration')})</span></span>
           </td>
           <td>
             <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
@@ -322,7 +284,7 @@ class Item extends Component {
                 <div className="mobile-operation-menu-bg-layer"></div>
                 <div className="mobile-operation-menu">
                   {(isPro && !item.is_expired) && <DropdownItem className="mobile-menu-item" onClick={this.togglePermSelectDialog}>{gettext('Permission')}</DropdownItem>}
-                  <DropdownItem className="mobile-menu-item" onClick={this.viewLink}>{gettext('View')}</DropdownItem>
+                  {!item.is_expired && <DropdownItem className="mobile-menu-item" onClick={this.viewLink}>{gettext('View')}</DropdownItem>}
                   <DropdownItem className="mobile-menu-item" onClick={this.removeLink}>{gettext('Remove')}</DropdownItem>
                 </div>
               </div>
@@ -340,7 +302,17 @@ class Item extends Component {
       </Fragment>
     );
 
-    return this.props.isDesktop ? desktopItem : mobileItem;
+    return (
+      <Fragment>
+        {this.props.isDesktop ? desktopItem : mobileItem}
+        {isLinkDialogOpen &&
+        <ShareAdminLink
+          link={item.link}
+          toggleDialog={this.toggleLinkDialog}
+        />
+        }
+      </Fragment>
+    );
   }
 }
 

frontend/src/pages/share-admin/upload-links.js

@@ -1,46 +1,28 @@
 import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
-import SharedUploadInfo from '../../models/shared-upload-info';
+import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
+import UploadLink from '../../models/upload-link';
+import ShareAdminLink from '../../components/dialog/share-admin-link';
 
 class Content extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      modalOpen: false,
-      modalContent: ''
-    };
-  }
-
-  // required by `Modal`, and can only set the 'open' state
-  toggleModal = () => {
-    this.setState({
-      modalOpen: !this.state.modalOpen
-    });
-  }
-
-  showModal = (options) => {
-    this.toggleModal();
-    this.setState({
-      modalContent: options.content
-    });
-  }
-
   render() {
     const { loading, errorMsg, items } = this.props;
 
     if (loading) {
-      return <span className="loading-icon loading-tip"></span>;
-    } else if (errorMsg) {
+      return <Loading />;
+    }
+    if (errorMsg) {
       return <p className="error text-center">{errorMsg}</p>;
-    } else {
+    } 
+
     const emptyTip = (
       <EmptyTip>
         <h2>{gettext('You don\'t have any upload links')}</h2>
@@ -48,10 +30,11 @@ class Content extends Component {
       </EmptyTip>
     );
 
+    const isDesktop = Utils.isDesktop();
     const table = (
-        <React.Fragment>
-          <table className="table-hover">
+      <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
         <thead>
+          {isDesktop ? (
             <tr>
               <th width="4%">{/*icon*/}</th>
               <th width="30%">{gettext('Name')}</th>
@@ -60,48 +43,60 @@ class Content extends Component {
               <th width="16%">{gettext('Expiration')}</th>
               <th width="10%">{/*Operations*/}</th>
             </tr>
+          ) : ( 
+            <tr>
+              <th width="12%"></th>
+              <th width="80%"></th>
+              <th width="8%"></th>
+            </tr> 
+          )}    
         </thead>
         <tbody>
           {items.map((item, index) => {
-                return (<Item key={index} item={item} showModal={this.showModal} onRemoveLink={this.props.onRemoveLink}/>);
+            return (<Item key={index} isDesktop={isDesktop} item={item} onRemoveLink={this.props.onRemoveLink}/>);
           })}
         </tbody>
       </table>
-
-          <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal} centered={true}>
-            <ModalHeader toggle={this.toggleModal}>{gettext('Link')}</ModalHeader>
-            <ModalBody>
-              {this.state.modalContent}
-            </ModalBody>
-          </Modal>
-        </React.Fragment>
     );
 
     return items.length ? table : emptyTip; 
   }
 }
-}
 
 class Item extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      showOpIcon: false,
+      isOpIconShown: false,
+      isOpMenuOpen: false, // for mobile
+      isLinkDialogOpen: false
     };
   }
 
+ toggleOpMenu = () => {
+   this.setState({
+     isOpMenuOpen: !this.state.isOpMenuOpen
+   });
+ }
+
+  toggleLinkDialog = () => {
+    this.setState({
+      isLinkDialogOpen: !this.state.isLinkDialogOpen
+    });   
+  }
+
   handleMouseOver = () => {
-    this.setState({showOpIcon: true});
+    this.setState({isOpIconShown: true});
   }
 
   handleMouseOut = () => {
-    this.setState({showOpIcon: false});
+    this.setState({isOpIconShown: false});
   }
 
   viewLink = (e) => {
     e.preventDefault();
-    this.props.showModal({content: this.props.item.link});
+    this.toggleLinkDialog();
   }
   
   removeLink = (e) => {
@@ -109,15 +104,7 @@ class Item extends Component {
     this.props.onRemoveLink(this.props.item);
   }
 
-  getUploadParams = () => {
-    let item = this.props.item;
-    let iconUrl = Utils.getFolderIconUrl(false);
-    let uploadUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
-
-    return { iconUrl, uploadUrl };
-  }
-
-  renderExpriedData = () => {
+  renderExpiration = () => {
     let item = this.props.item;
     if (!item.expire_date) {
       return (
@@ -128,8 +115,7 @@ class Item extends Component {
     return (
       <Fragment>
         {item.is_expired ?
-          <span className="error">{expire_date}</span> :
-          expire_date
+          <span className="error">{expire_date}</span> : expire_date
         }
       </Fragment>
     );
@@ -137,25 +123,67 @@ class Item extends Component {
 
   render() {
     let item = this.props.item;
-    let { iconUrl, uploadUrl } = this.getUploadParams();
+    const { isOpIconShown, isLinkDialogOpen } = this.state;
 
-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
-    let linkIconClassName = 'sf2-icon-link action-icon' + iconVisibility; 
-    let deleteIconClassName = 'sf2-icon-delete action-icon' + iconVisibility;
+    const iconUrl = Utils.getFolderIconUrl(false);
+    const repoUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}`;
+    const objUrl = `${repoUrl}${Utils.encodePath(item.path)}`;
 
-    return (
+    const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td><img src={iconUrl} width="24" /></td>
-        <td><Link to={uploadUrl}>{item.obj_name}</Link></td>
-        <td><Link to={`${siteRoot}library/${item.repo_id}/${item.repo_name}`}>{item.repo_name}</Link></td>
+        <td><img src={iconUrl} alt="" width="24" /></td>
+        <td><Link to={objUrl}>{item.obj_name}</Link></td>
+        <td><Link to={repoUrl}>{item.repo_name}</Link></td>
         <td>{item.view_cnt}</td>
-        <td>{this.renderExpriedData()}</td>
+        <td>{this.renderExpiration()}</td>
         <td>
-          <a href="#" className={linkIconClassName} title={gettext('View')} onClick={this.viewLink}></a>
-          <a href="#" className={deleteIconClassName} title={gettext('Remove')} onClick={this.removeLink}></a>
+          {!item.is_expired && <a href="#" className={`sf2-icon-link action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('View')} onClick={this.viewLink}></a>}
+          <a href="#" className={`sf2-icon-delete action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Remove')} onClick={this.removeLink}></a>
         </td>
       </tr>
     );
+
+    const mobileItem = (
+      <tr>
+        <td><img src={iconUrl} alt="" width="24" /></td>
+        <td>
+          <Link to={objUrl}>{item.obj_name}</Link> 
+          <br />
+          <span>{item.repo_name}</span><br />
+          <span className="item-meta-info">{item.view_cnt}<span className="small text-secondary">({gettext('Visits')})</span></span>
+          <span className="item-meta-info">{this.renderExpiration()}<span className="small text-secondary">({gettext('Expiration')})</span></span>
+        </td>
+        <td>
+          <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+            <DropdownToggle
+              tag="i"
+              className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
+              title={gettext('More Operations')}
+              data-toggle="dropdown"
+              aria-expanded={this.state.isOpMenuOpen}
+            />
+            <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+              <div className="mobile-operation-menu-bg-layer"></div>
+              <div className="mobile-operation-menu">
+                {!item.is_expired && <DropdownItem className="mobile-menu-item" onClick={this.viewLink}>{gettext('View')}</DropdownItem>}
+                <DropdownItem className="mobile-menu-item" onClick={this.removeLink}>{gettext('Remove')}</DropdownItem>
+              </div>
+            </div>
+          </Dropdown>
+        </td>
+      </tr>
+    );
+    return (
+      <Fragment>
+        {this.props.isDesktop ? desktopItem : mobileItem}
+        {isLinkDialogOpen &&
+        <ShareAdminLink
+          link={item.link}
+          toggleDialog={this.toggleLinkDialog}
+        />
+        }
+      </Fragment>
+    );
   }
 }
 
@@ -172,9 +200,8 @@ class ShareAdminUploadLinks extends Component {
 
   componentDidMount() {
     seafileAPI.listUploadLinks().then((res) => {
-      // res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
       let items = res.data.map(item => {
-        return new SharedUploadInfo(item);
+        return new UploadLink(item);
       });
       this.setState({
         loading: false,
@@ -209,13 +236,10 @@ class ShareAdminUploadLinks extends Component {
         return uploadItem.token !== item.token;
       });
       this.setState({items: items});
-      let message = gettext("Successfully deleted upload link.");
+      const message = gettext('Successfully deleted 1 item.');
       toaster.success(message);
     }).catch((error) => {
-      let errMessage = Utils.getErrorMsg(error);
-      if (errMessage === gettext('Error')) {
-        errMessage = gettext("Failed to delete upload link.");
-      }
+      const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
   }
@@ -234,9 +258,9 @@ class ShareAdminUploadLinks extends Component {
           </div>
           <div className="cur-view-content">
             <Content
+              loading={this.state.loading}
               errorMsg={this.state.errorMsg}
               items={this.state.items}
-              loading={this.state.loading}
               onRemoveLink={this.onRemoveLink}
             />
           </div>