custom share permission (#4967)

* custom share permission * remove path field * add permission manager ui * optimize custom permission manager style * add permission setting * add normalize_custom_permission_name * optimize repo custom permission * delete useless code * optimize code * optimize code * optimize markdown file page * fix a few bugs * add permission control * repair modify permission * optimize style * optimize copyright * add try-except * optimize code * move file&folder * batch operation item * repair batch move item * update copyright * optimize move permission control * optimize code * optimize code * optimize code & fix code wranning * optimize code * delete unsupport permission * optimize code * repair code bug * add pro limit * optimize code * add permission handle for permission editor * repair new file&folder bug * optimize file uploader code * custom permission user can not visit custom permission module * optimize code * forbid comment&detail module * optimize code * optimize modify/preview permission * optimize custom permission share perm * optimize view file module: file-toolbar * optimize custom drag move operation * repair column view bug * optimize drag operation code * repair code bug * optimize code Co-authored-by: shanshuirenjia <978987373@qq.com>
2025-09-10 19:29:56 +00:00 · 2021-09-13 10:37:07 +08:00
parent 1f68680257
commit 07df610e43
60 changed files with 1965 additions and 287 deletions
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import { permission } from '../../utils/constants';
 import TextTranslation from '../../utils/text-translation';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
+import { Utils } from '../../utils/utils';

 const propTypes = {
-  repoPermission: PropTypes.bool,
+  userPerm: PropTypes.string,
  node: PropTypes.object.isRequired,
  currentPath: PropTypes.string.isRequired,
  paddingLeft: PropTypes.number.isRequired,
@@ -34,6 +35,13 @@ class TreeNodeView extends React.Component {
      isShowOperationMenu: false,
      isNodeDropShow: false,
    };
+    const { userPerm } = props;
+    this.canDrag = userPerm === 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (isCustomPermission) {
+      const { modify } = customPermission.permission;
+      this.canDrag = modify;
+    }
  }

  componentWillReceiveProps(nextProps) {
@@ -73,6 +81,17 @@ class TreeNodeView extends React.Component {
  }

  onNodeClick = () => {
+    const { node } = this.props;
+    const { object } = node;
+    if (object.isDir()) {
+      this.props.onNodeClick(this.props.node);
+      return;
+    }
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(object.permission);
+    if (isCustomPermission) {
+      const { preview: canPreview, modify: canModify } = customPermission.permission;
+      if (!canPreview && !canModify) return;
+    } 
    this.props.onNodeClick(this.props.node);
  }

@@ -87,10 +106,16 @@ class TreeNodeView extends React.Component {
  }

  onNodeDragStart = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
    this.props.onNodeDragStart(e, this.props.node);
  }

  onNodeDragEnter = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
    if (this.props.node.object.type === 'dir') {
      this.setState({isNodeDropShow: true});
    }
@@ -98,15 +123,24 @@ class TreeNodeView extends React.Component {
  }

  onNodeDragMove = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
    this.props.onNodeDragMove(e);
  }

  onNodeDragLeave = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
    this.setState({isNodeDropShow: false});
    this.props.onNodeDragLeave(e, this.props.node);
  }

  onNodeDrop = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
    e.stopPropagation();
    this.setState({isNodeDropShow: false});
    this.props.onNodeDrop(e, this.props.node);
@@ -168,14 +202,35 @@ class TreeNodeView extends React.Component {
    return {icon, type};
  }

-  caculateMenuList(node) {
+  calculateMenuList = (node) => {
    let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} =  TextTranslation;

+    let menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
    if (node.object.type === 'dir') {
-      return [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
+       menuList = [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
    }

-    return [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
+    const { userPerm } = this.props;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (!isCustomPermission) {
+      return menuList;
+    }
+
+    menuList = [];
+    const { modify: canModify, delete: canDelete, copy: canCopy } = customPermission.permission;
+    if (node.object.type === 'dir') { 
+      canModify && menuList.push(NEW_FOLDER, NEW_FILE);
+    }
+    
+    canCopy && menuList.push(COPY);
+    canModify && menuList.push(MOVE, RENAME);
+    canDelete && menuList.push(DELETE);
+
+    if (node.object.type !== 'dir') { 
+      menuList.push(OPEN_VIA_CLIENT);
+    }
+
+    return menuList;
  }

  renderChildren = () => {
@@ -191,7 +246,7 @@ class TreeNodeView extends React.Component {
              key={item.path}
              node={item}
              paddingLeft={paddingLeft}
-              repoPermission={this.props.repoPermission}
+              userPerm={this.props.userPerm}
              currentPath={this.props.currentPath}
              isNodeMenuShow={this.props.isNodeMenuShow}
              isItemFreezed={this.props.isItemFreezed}
@@ -215,12 +270,14 @@ class TreeNodeView extends React.Component {
  }

  render() {
-    let { currentPath, node, isNodeMenuShow } = this.props;
+    let { currentPath, node, isNodeMenuShow, userPerm } = this.props;
    let { type, icon } = this.getNodeTypeAndIcon();
    let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
    if (node.path === currentPath) {
      hlClass = 'tree-node-hight-light';
    }
+
+    const { isCustomPermission } = Utils.getUserPermission(userPerm)
    return (
      <div className="tree-node">
        <div
@@ -234,7 +291,7 @@ class TreeNodeView extends React.Component {
          onContextMenu={this.onItemContextMenu}
          onClick={this.onNodeClick}
        >
-          <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
+          <div className="tree-node-text" draggable={this.canDrag} onDragStart={this.onNodeDragStart} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
          <div className="left-icon">
            {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
              <i
@@ -247,11 +304,11 @@ class TreeNodeView extends React.Component {
          </div>
          {isNodeMenuShow && (
            <div className="right-icon">
-              {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (
+              {((userPerm === 'rw' || permission || isCustomPermission) && this.state.isShowOperationMenu) && (
                <ItemDropdownMenu
                  item={this.props.node}
                  toggleClass={'fas fa-ellipsis-v'}
-                  getMenuList={this.caculateMenuList}
+                  getMenuList={this.calculateMenuList}
                  onMenuItemClick={this.onMenuItemClick}
                  freezeItem={this.props.freezeItem}
                  unfreezeItem={this.unfreezeItem}
--- a/frontend/src/components/tree-view/tree-view.js
+++ b/frontend/src/components/tree-view/tree-view.js
@@ -7,7 +7,7 @@ import { hideMenu, showMenu } from '../context-menu/actions';
 import { Utils } from '../../utils/utils';

 const propTypes = {
-  repoPermission: PropTypes.bool,
+  userPerm: PropTypes.string,
  isNodeMenuShow: PropTypes.bool.isRequired,
  treeData: PropTypes.object.isRequired,
  currentPath: PropTypes.string.isRequired,
@@ -31,6 +31,13 @@ class TreeView extends React.Component {
      isItemFreezed: false,
      isTreeViewDropTipShow: false,
    };
+    const { userPerm } = props;
+    this.canDrop = userPerm === 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (isCustomPermission) {
+      const { modify } = customPermission.permission;
+      this.canDrop = modify;
+    }
  }

  onItemMove = (repo, dirent, selectedPath, currentPath) => {
@@ -49,7 +56,7 @@ class TreeView extends React.Component {
  }

  onNodeDragEnter = (e, node) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
      return false;
    }
    e.persist();
@@ -61,7 +68,7 @@ class TreeView extends React.Component {
  }

  onNodeDragMove = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
      return false;
    }
    e.preventDefault();
@@ -69,7 +76,7 @@ class TreeView extends React.Component {
  }

  onNodeDragLeave = (e, node) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
      return false;
    }
    if (e.target.className === 'tree-view tree tree-view-drop') {
@@ -80,7 +87,7 @@ class TreeView extends React.Component {
  }

  onNodeDrop = (e, node) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
      return false;
    }
    if (e.dataTransfer.files.length) { // uploaded files
@@ -255,6 +262,32 @@ class TreeView extends React.Component {
      menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
    }

+    const { userPerm } = this.props;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (!isCustomPermission) {
+      return menuList;
+    }
+
+    menuList = [];
+
+    const { modify: canModify, delete: canDelete, copy: canCopy } = customPermission.permission;
+    if (!node) {
+      canModify && menuList.push(NEW_FOLDER, NEW_FILE);
+      return menuList;
+    }
+
+    if (node.object.type === 'dir') { 
+      canModify && menuList.push(NEW_FOLDER, NEW_FILE);
+    }
+    
+    canCopy && menuList.push(COPY);
+    canModify && menuList.push(MOVE, RENAME);
+    canDelete && menuList.push(DELETE);
+
+    if (node.object.type !== 'dir') { 
+      menuList.push(OPEN_VIA_CLIENT);
+    }
+
    return menuList;
  }

@@ -269,7 +302,7 @@ class TreeView extends React.Component {
  render() {
    return (
      <div
-        className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`}
+        className={`tree-view tree ${(this.state.isTreeViewDropTipShow && this.canDrop) ? 'tree-view-drop' : ''}`}
        onDrop={this.onNodeDrop}
        onDragEnter={this.onNodeDragEnter}
        onDragLeave={this.onNodeDragLeave}
@@ -277,7 +310,7 @@ class TreeView extends React.Component {
        onContextMenu={this.onContextMenu}
      >
        <TreeNodeView
-          repoPermission={this.props.repoPermission}
+          userPerm={this.props.userPerm}
          node={this.props.treeData.root}
          currentPath={this.props.currentPath}
          paddingLeft={PADDING_LEFT}