Wiki mode improve (#3100)

* repair internal link bug

* add tags for path

* add share&editTag feature

* add related-file for column-mode

* repair edit tag bug

* update implement logic

frontend/src/components/cur-dir-path/dir-path.js

@@ -1,7 +1,10 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
+import { UncontrolledTooltip } from 'reactstrap';
 import { siteRoot, gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import FileTag from '../../models/file-tag';
 import InternalLinkDialog from '../dialog/internal-link-dialog';
 
 const propTypes = {
@@ -12,6 +15,7 @@ const propTypes = {
   pathPrefix: PropTypes.array,
   repoID: PropTypes.string.isRequired,
   isViewFile: PropTypes.bool,
+  fileTags: PropTypes.array.isRequired,
 };
 
 class DirPath extends React.Component {
@@ -51,8 +55,16 @@ class DirPath extends React.Component {
   }
 
   render() {
-    let { currentPath, repoName } = this.props;
+    let { currentPath, repoName, fileTags } = this.props;
     let pathElem = this.turnPathToLink(currentPath);
+
+    let tagTitle = '';
+    if (fileTags.length > 0) {
+      fileTags.forEach(item => {
+        tagTitle += item.name + ' ';
+      });
+    }
+
     return (
       <div className="path-container">
         {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
@@ -68,8 +80,7 @@ class DirPath extends React.Component {
             <Link to={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick.bind(this, 'my-libs')}>{gettext('Libraries')}</Link>
             <span className="path-split">/</span>
           </Fragment>
-        )
-        }
+        )}
         {!this.props.pathPrefix && (
           <Fragment>
             <a href={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick.bind(this, 'my-libs')}>{gettext('Libraries')}</a>
@@ -81,12 +92,22 @@ class DirPath extends React.Component {
           <a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
         }
         {pathElem}
-        { this.props.isViewFile && 
+        {this.props.isViewFile && 
           <InternalLinkDialog 
             repoID={this.props.repoID}
             path={this.props.currentPath}
           />
         }
+        {(this.props.isViewFile && fileTags.length !== 0) && 
+          <span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1">
+            {fileTags.map((fileTag, index) => {
+              return (<span className="file-tag" key={fileTag.id} style={{zIndex: index, backgroundColor: fileTag.color}}></span>)
+            })}
+            <UncontrolledTooltip target="column-mode-file-tags" placement="bottom">
+              {tagTitle}
+            </UncontrolledTooltip>
+          </span>
+        }
       </div>
     );
   }

frontend/src/components/cur-dir-path/index.js

@@ -13,6 +13,7 @@ const propTypes = {
   pathPrefix: PropTypes.array,
   isViewFile: PropTypes.bool,
   updateUsedRepoTags: PropTypes.func.isRequired,
+  fileTags: PropTypes.array.isRequired,
 };
 
 class CurDirPath extends React.Component {
@@ -28,6 +29,7 @@ class CurDirPath extends React.Component {
           onTabNavClick={this.props.onTabNavClick}
           repoID={this.props.repoID}
           isViewFile={this.props.isViewFile}
+          fileTags={this.props.fileTags}
         />
         <DirTool 
           repoID={this.props.repoID}

frontend/src/components/dirent-detail/dirent-details.js

@@ -86,6 +86,11 @@ class DirentDetail extends React.Component {
     }
   }
 
+  onFileTagChanged = (dirent, direntPath) => {
+    this.updateDetailView(dirent, direntPath);
+    this.props.onFileTagChanged(dirent, direntPath);
+  }
+
   onRelatedFileChange = () => {
     let { dirent, path } = this.props;
     let direntPath = Utils.joinPath(path, dirent.name);
@@ -121,7 +126,7 @@ class DirentDetail extends React.Component {
                 direntDetail={this.state.direntDetail} 
                 fileTagList={this.state.fileTagList}
                 relatedFiles={this.state.relatedFiles}
-                onFileTagChanged={this.props.onFileTagChanged}
+                onFileTagChanged={this.onFileTagChanged}
                 onRelatedFileChange={this.onRelatedFileChange}
               />
             </div>

frontend/src/components/toolbar/view-file-toolbar.js

@@ -0,0 +1,174 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import ModalPotal from '../modal-portal';
+import ShareDialog from '../dialog/share-dialog';
+import EditFileTagDialog from '../dialog/edit-filetag-dialog';
+import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
+import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
+
+const propTypes = {
+  path: PropTypes.string.isRequired,
+  repoID: PropTypes.string.isRequired,
+  userPerm: PropTypes.string.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  filePermission: PropTypes.bool.isRequired,
+  isDraft: PropTypes.bool.isRequired,
+  hasDraft: PropTypes.bool.isRequired,
+  fileTags: PropTypes.array.isRequired,
+  relatedFiles: PropTypes.array.isRequired,
+  onFileTagChanged: PropTypes.func.isRequired,
+  onRelatedFileChange: PropTypes.func.isRequired,
+};
+
+class ViewFileToolbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDraftMessageShow: false,
+      isMoreMenuShow: false,
+      isShareDialogShow: false,
+      isEditTagDialogShow: false,
+      isListRelatedFileDialogShow: false,
+      isAddRelatedFileDialogShow: false,
+    };
+  }
+
+  onEditClick = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    let url = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path) + '?mode=edit';
+    window.open(url);
+  }
+
+  onNewDraft = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    seafileAPI.createDraft(repoID, path).then(res => {
+      window.location.href = siteRoot + 'lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
+    });
+  }
+
+  onDraftHover = () => {
+    this.setState({isDraftMessageShow: !this.state.isDraftMessageShow});
+  }
+
+  toggleMore = () => {
+    this.setState({isMoreMenuShow: !this.state.isMoreMenuShow});
+  }
+
+  onShareToggle = () => {
+    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+  }
+
+  onEditFileTagToggle = () => {
+    this.setState({isEditTagDialogShow: !this.state.isEditTagDialogShow});
+  }
+
+  onListRelatedFileToggle = () => {
+    this.setState({isListRelatedFileDialogShow: !this.state.isListRelatedFileDialogShow})
+  }
+
+  onAddRelatedFileToggle = () => {
+    this.setState({
+      isListRelatedFileDialogShow: !this.state.isListRelatedFileDialogShow,
+      isAddRelatedFileDialogShow: !this.state.isAddRelatedFileDialogShow,
+    });
+  }
+
+  render() {
+
+    let name = Utils.getFileName(this.props.path);
+    let dirent = { name: name };
+
+    return (
+      <Fragment>
+        <div className="dir-operation">
+          {(this.props.filePermission && !this.props.hasDraft) && (
+            <Fragment>
+              <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
+            </Fragment>
+          )}
+          {/* default have read priv */}
+          {(!this.props.isDraft && !this.props.hasDraft) && (
+            <Fragment>
+              <button id="new-draft" className="btn btn-secondary operation-item" onClick={this.onNewDraft}>{gettext('New Draft')}</button>
+              <Tooltip target="new-draft" placement="bottom" isOpen={this.state.isDraftMessageShow} toggle={this.onDraftHover}>{gettext('Create a draft from this file, instead of editing it directly.')}</Tooltip>
+            </Fragment>
+          )}
+          {this.props.filePermission && (
+            <Dropdown isOpen={this.state.isMoreMenuShow} toggle={this.toggleMore}>
+              <DropdownToggle className='btn btn-secondary operation-item'>
+                {gettext('More')}
+              </DropdownToggle>
+              <DropdownMenu>
+                <DropdownItem onClick={this.onShareToggle}>{gettext('Share')}</DropdownItem>
+                <DropdownItem onClick={this.onEditFileTagToggle}>{gettext('Edit File Tag')}</DropdownItem>
+                <DropdownItem onClick={this.onListRelatedFileToggle}>{gettext('Add Relative File')}</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          )}
+        </div>
+        {this.state.isShareDialogShow && (
+          <ModalPotal>
+            <ShareDialog 
+              itemType={'file'}
+              itemName={Utils.getFileName(this.props.path)}
+              itemPath={this.props.path}
+              repoID={this.props.repoID}
+              repoEncrypted={this.props.repoEncrypted}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              userPerm={this.props.userPerm}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              toggleDialog={this.onShareToggle}
+            />
+          </ModalPotal>
+        )}
+        {this.state.isEditTagDialogShow && (
+          <ModalPotal>
+            <EditFileTagDialog
+              filePath={this.props.path}
+              repoID={this.props.repoID}
+              fileTagList={this.props.fileTags}
+              toggleCancel={this.onEditFileTagToggle}
+              onFileTagChanged={this.props.onFileTagChanged}
+            />
+          </ModalPotal>
+        )}
+        {this.state.isListRelatedFileDialogShow &&
+          <ModalPotal>
+            <ListRelatedFileDialog
+              repoID={this.props.repoID}
+              filePath={this.props.path}
+              relatedFiles={this.props.relatedFiles}
+              toggleCancel={this.onListRelatedFileToggle}
+              addRelatedFileToggle={this.onAddRelatedFileToggle}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+            />
+          </ModalPotal>
+        }
+        {this.state.isAddRelatedFileDialogShow && (
+          <ModalPotal>
+            <AddRelatedFileDialog
+              dirent={dirent}
+              repoID={this.props.repoID}
+              filePath={this.props.path}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+              toggleCancel={this.onAddRelatedFileToggle}
+            />
+          </ModalPotal>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+ViewFileToolbar.propTypes = propTypes;
+
+export default ViewFileToolbar;