[shared dir view] file tags: fixup & improvement

frontend/src/components/dialog/list-taggedfiles-dialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import moment from 'moment';
@@ -12,8 +12,9 @@ const propTypes = {
   currentTag: PropTypes.object.isRequired,
   toggleCancel: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
-  updateUsedRepoTags: PropTypes.func.isRequired,
+  updateUsedRepoTags: PropTypes.func,
   onFileTagChanged: PropTypes.func,
+  shareLinkToken: PropTypes.string
 };
 
 class ListTaggedFilesDialog extends React.Component {
@@ -50,8 +51,11 @@ class ListTaggedFilesDialog extends React.Component {
   }
 
   getTaggedFiles = () => {
-    let { repoID, currentTag } = this.props;
-    seafileAPI.listTaggedFiles(repoID, currentTag.id).then(res => {
+    let { repoID, currentTag, shareLinkToken } = this.props;
+    let request = shareLinkToken ?
+      seafileAPI.getShareLinkTaggedFiles(shareLinkToken, currentTag.id) :
+      seafileAPI.listTaggedFiles(repoID, currentTag.id);
+    request.then(res => {
       let taggedFileList = [];
       res.data.tagged_files !== undefined &&
       res.data.tagged_files.forEach(file => {
@@ -90,6 +94,7 @@ class ListTaggedFilesDialog extends React.Component {
                     repoID={this.props.repoID}
                     taggedFile={taggedFile}
                     onDeleteTaggedFile={this.onDeleteTaggedFile}
+                    shareLinkToken={this.props.shareLinkToken}
                   />
                 );
               })}
@@ -112,6 +117,7 @@ const TaggedFilePropTypes = {
   repoID: PropTypes.string.isRequired,
   taggedFile: PropTypes.object,
   onDeleteTaggedFile: PropTypes.func.isRequired,
+  shareLinkToken: PropTypes.string
 };
 
 class TaggedFile extends React.Component {
@@ -141,23 +147,32 @@ class TaggedFile extends React.Component {
   }
 
   render() {
-    const taggedFile = this.props.taggedFile;
+    const { taggedFile, shareLinkToken } = this.props;
     let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3';
     let path = taggedFile.parent_path ? Utils.joinPath(taggedFile.parent_path, taggedFile.filename) : '';
-    let href = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(path);
-    return ( taggedFile.file_deleted ?
+    let href = shareLinkToken ?
+      siteRoot + 'd/' + shareLinkToken + '/files/?p=' + Utils.encodePath(path) :
+      siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(path);
+    return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
-        <td colSpan='3' className="name">{taggedFile.filename}{' '}
-          <span style={{color:'red'}}>{gettext('deleted')}</span>
+        {taggedFile.file_deleted ?
+          <Fragment>
+            <td colSpan='3' className="name">{taggedFile.filename}{' '}
+              <span style={{color:'red'}}>{gettext('deleted')}</span>
+            </td>
+          </Fragment>
+          :
+          <Fragment>
+            <td><a href={href} target='_blank' className="d-inline-block w-100 ellipsis" title={taggedFile.filename} rel="noreferrer">{taggedFile.filename}</a></td>
+            <td>{Utils.bytesToSize(taggedFile.size)}</td>
+            <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
+          </Fragment>
+        }
+        <td>
+          {!shareLinkToken &&
+          <a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a>
+          }
         </td>
-        <td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>
-      </tr>
-      :
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
-        <td><a href={href} target='_blank' className="d-inline-block w-100 ellipsis" title={taggedFile.filename}>{taggedFile.filename}</a></td>
-        <td>{Utils.bytesToSize(taggedFile.size)}</td>
-        <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
-        <td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>
       </tr>
     );
   }

frontend/src/components/repo-info-bar.js

@@ -15,8 +15,10 @@ const propTypes = {
   usedRepoTags: PropTypes.array.isRequired,
   readmeMarkdown: PropTypes.object,
   draftCounts: PropTypes.number,
-  updateUsedRepoTags: PropTypes.func.isRequired,
-  onFileTagChanged: PropTypes.func.isRequired,
+  updateUsedRepoTags: PropTypes.func,
+  onFileTagChanged: PropTypes.func,
+  className: PropTypes.string,
+  shareLinkToken: PropTypes.string
 };
 
 class RepoInfoBar extends React.Component {
@@ -57,11 +59,20 @@ class RepoInfoBar extends React.Component {
   }
 
   render() {
-    let {repoID, currentPath, usedRepoTags, readmeMarkdown} = this.props;
+    let { repoID, currentPath, usedRepoTags, readmeMarkdown, draftCounts, className } = this.props;
+
+    // to be compatible with the existing code
+    if (readmeMarkdown === undefined) {
+      readmeMarkdown = null;
+    }
+    if (draftCounts === undefined) {
+      draftCounts = 0;
+    }
+
     let href = readmeMarkdown !== null ? siteRoot + 'lib/' + repoID + '/file' + Utils.joinPath(currentPath, readmeMarkdown.name) +  '?mode=edit' : '';
     let filePath = readmeMarkdown !== null ? currentPath + readmeMarkdown.name : '';
     return (
-      <div className="repo-info-bar">
+      <div className={`repo-info-bar ${className ? className : ''}`}>
         {usedRepoTags.length > 0 && (
           <ul className="used-tag-list">
             {usedRepoTags.map((usedRepoTag) => {
@@ -87,15 +98,15 @@ class RepoInfoBar extends React.Component {
           {(readmeMarkdown !== null && parseInt(readmeMarkdown.size) < 2) &&
             <span className="file-info">
               <span className="info-icon sf2-icon-readme"></span>
-              <a className="used-tag-name" href={href} target='_blank'>{readmeMarkdown.name}</a>
+              <a className="used-tag-name" href={href} target='_blank' rel="noreferrer">{readmeMarkdown.name}</a>
             </span>
           }
-          {this.props.draftCounts > 0 &&
+          {draftCounts > 0 &&
             <span className="file-info">
               <span className="info-icon sf2-icon-drafts"></span>
               <span className="used-tag-name">{gettext('draft')}</span>
               <button type="button" className="used-tag-files border-0 bg-transparent" onClick={this.toggleDrafts}>
-                {this.props.draftCounts > 1 ? this.props.draftCounts + ' files' : this.props.draftCounts + ' file'}
+                {draftCounts > 1 ? draftCounts + ' files' : draftCounts + ' file'}
               </button>
             </span>
           }
@@ -109,6 +120,7 @@ class RepoInfoBar extends React.Component {
               toggleCancel={this.onListTaggedFiles}
               updateUsedRepoTags={this.props.updateUsedRepoTags}
               onFileTagChanged={this.props.onFileTagChanged}
+              shareLinkToken={this.props.shareLinkToken}
             />
           </ModalPortal>
         )}

frontend/src/shared-dir-view.js

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import MD5 from 'MD5';
 import ReactDOM from 'react-dom';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip} from 'reactstrap';
+import { Button, Dropdown, DropdownToggle, DropdownItem, UncontrolledTooltip } from 'reactstrap';
 import moment from 'moment';
 import Account from './components/common/account';
-import { isPro, useGoFileserver, fileServerRoot, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, thumbnailSizeForOriginal } from './utils/constants';
+import { useGoFileserver, fileServerRoot, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle, thumbnailSizeForOriginal } from './utils/constants';
 import { Utils } from './utils/utils';
 import { seafileAPI } from './utils/seafile-api';
 import Loading from './components/loading';
@@ -15,14 +15,11 @@ import ImageDialog from './components/dialog/image-dialog';
 import FileUploader from './components/shared-link-file-uploader/file-uploader';
 import SaveSharedDirDialog from './components/dialog/save-shared-dir-dialog';
 import CopyMoveDirentProgressDialog from './components/dialog/copy-move-dirent-progress-dialog';
-
+import RepoInfoBar from './components/repo-info-bar';
 import RepoTag from './models/repo-tag';
-import FileTag from './models/file-tag';
-
 
 import './css/shared-dir-view.css';
 import './css/grid-view.css';
-import './css/repo-info-bar.css';
 
 moment.locale(window.app.config.lang);
 
@@ -98,7 +95,7 @@ class SharedDirView extends React.Component {
       });
     });
 
-    this.getShareLinkRepoTags()
+    this.getShareLinkRepoTags();
   }
 
   sortItems = (sortBy, sortOrder) => {
@@ -274,7 +271,7 @@ class SharedDirView extends React.Component {
       this.setState({
         isSaveSharedDirDialogShow: false,
         itemsForSave: [],
-	isCopyMoveProgressDialogShow: true,
+        isCopyMoveProgressDialogShow: true,
         asyncCopyMoveTaskId: res.data.task_id,
         asyncOperatedFilesLength: itemsForSave.length,
       }, () => {
@@ -493,12 +490,13 @@ class SharedDirView extends React.Component {
                 />
               )}
 
-	      {this.state.isRepoInfoBarShow && (
+              {this.state.isRepoInfoBarShow && (
                 <RepoInfoBar
                   repoID={repoID}
                   currentPath={'/'}
                   usedRepoTags={this.state.usedRepoTags}
-                  updateUsedRepoTags={this.getShareLinkRepoTags}
+                  shareLinkToken={token}
+                  className="mx-0"
                 />
               )}
 
@@ -646,11 +644,11 @@ class Content extends React.Component {
             </th>
             }
             <th width="5%"></th>
-            <th width={showDownloadIcon ? '52%' : '55%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortBy == 'name' && sortIcon}</a></th>
-            <th width="10%"></th>
+            <th width={showDownloadIcon ? '50%' : '53%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortBy == 'name' && sortIcon}</a></th>
+            <th width="8%"></th>
             <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBy == 'size' && sortIcon}</a></th>
-            <th width="16%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortBy == 'time' && sortIcon}</a></th>
-            <th width="10%"></th>
+            <th width="13%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortBy == 'time' && sortIcon}</a></th>
+            <th width="7%"></th>
           </tr>
         </thead>
         {tbody}
@@ -928,176 +926,6 @@ class GridItem extends React.Component {
   }
 }
 
-
-class RepoInfoBar extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentTag: null,
-      isListTaggedFileShow: false,
-    };
-  }
-
-  onListTaggedFiles = (currentTag) => {
-    this.setState({
-      currentTag: currentTag,
-      isListTaggedFileShow: !this.state.isListTaggedFileShow,
-    });
-  }
-
-  onCloseDialog = () => {
-    this.setState({
-      isListTaggedFileShow: false
-    });
-  }
-
-  render() {
-    let {repoID, currentPath, usedRepoTags} = this.props;
-    // let href = readmeMarkdown !== null ? siteRoot + 'lib/' + repoID + '/file' + Utils.joinPath(currentPath, readmeMarkdown.name) +  '?mode=edit' : '';
-    // let filePath = readmeMarkdown !== null ? currentPath + readmeMarkdown.name : '';
-    return (
-      <div className="repo-info-bar">
-        {usedRepoTags.length > 0 && (
-          <ul className="used-tag-list">
-            {usedRepoTags.map((usedRepoTag) => {
-              return (
-                <li key={usedRepoTag.id} className="used-tag-item">
-                  <span className="used-tag" style={{backgroundColor:usedRepoTag.color}}></span>
-                  <span className="used-tag-name" title={usedRepoTag.name}>{usedRepoTag.name}</span>
-                  <button type="button" className="used-tag-files border-0 bg-transparent" onClick={this.onListTaggedFiles.bind(this, usedRepoTag)}>
-                    {usedRepoTag.fileCount > 1 ? usedRepoTag.fileCount + ' files' : usedRepoTag.fileCount + ' file'}
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-        {this.state.isListTaggedFileShow && (
-          <ModalPortal>
-            <ListTaggedFilesDialog
-              repoID={repoID}
-              currentTag={this.state.currentTag}
-              onClose={this.onCloseDialog}
-              toggleCancel={this.onListTaggedFiles}
-              updateUsedRepoTags={this.props.updateUsedRepoTags}
-            />
-          </ModalPortal>
-        )}
-      </div>
-    );
-  }
-}
-
-
-class ListTaggedFilesDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      taggedFileList: [],
-    };
-  }
-
-  componentDidMount() {
-    this.getTaggedFiles();
-  }
-
-  getTaggedFiles = () => {
-    let { repoID, currentTag } = this.props;
-    seafileAPI.getShareLinkTaggedFiles(token, currentTag.id).then(res => {
-      let taggedFileList = [];
-      res.data.tagged_files !== undefined &&
-      res.data.tagged_files.forEach(file => {
-        let taggedFile = file;
-        taggedFileList.push(taggedFile);
-      });
-      this.setState({
-        taggedFileList: taggedFileList,
-      });
-    }).catch(error => {
-      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }
-
-  render() {
-    let taggedFileList = this.state.taggedFileList;
-    return (
-      <Modal isOpen={true}>
-        <ModalHeader toggle={this.props.onClose}>{gettext('Tagged Files')}</ModalHeader>
-        <ModalBody className="dialog-list-container">
-          <table>
-            <thead>
-              <tr>
-                <th width='45%' className="ellipsis">{gettext('Name')}</th>
-                <th width='27%'>{gettext('Size')}</th>
-                <th width='28%'>{gettext('Last Update')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {taggedFileList.map((taggedFile, index) => {
-                return (
-                  <TaggedFile
-                    key={index}
-                    repoID={this.props.repoID}
-                    taggedFile={taggedFile}
-                  />
-                );
-              })}
-            </tbody>
-          </table>
-        </ModalBody>
-        <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleCancel}>{gettext('Close')}</Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-class TaggedFile extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = ({
-      active: false,
-    });
-  }
-
-  onMouseEnter = () => {
-    this.setState({
-      active: true
-    });
-  }
-
-  onMouseLeave = () => {
-    this.setState({
-      active: false
-    });
-  }
-
-  render() {
-    const taggedFile = this.props.taggedFile;
-    let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3';
-    let path = taggedFile.parent_path ? Utils.joinPath(taggedFile.parent_path, taggedFile.filename) : '';
-    let href = siteRoot + 'd/' + token + '/files/?p=' + Utils.encodePath(path);
-    return ( taggedFile.file_deleted ?
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
-        <td colSpan='3' className="name">{taggedFile.filename}{' '}
-          <span style={{color:'red'}}>{gettext('deleted')}</span>
-        </td>
-      </tr>
-      :
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
-        <td className="name"><a href={href} target='_blank'>{taggedFile.filename}</a></td>
-        <td>{Utils.bytesToSize(taggedFile.size)}</td>
-        <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
-      </tr>
-    );
-  }
-}
-
 ReactDOM.render(
   <SharedDirView />,
   document.getElementById('wrapper')