add sub-folder permission (#3354)

* add sub-folder permission

* [folder permission] fixup

frontend/src/components/dialog/lib-sub-folder-permission-dialog.js

@@ -0,0 +1,86 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import LibSubFolderSetUserPermissionDialog from './lib-sub-folder-set-user-permission-dialog';
+import LibSubFolderSetGroupPermissionDialog from './lib-sub-folder-set-group-permission-dialog';
+import '../../css/share-link-dialog.css';
+import '../../css/sub-folder-permission.css';
+
+const propTypes = { 
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string,
+  folderPath: PropTypes.string,
+  folderName: PropTypes.string,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class LibSubFolderPermissionDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 'userPermission'
+    };
+  }
+
+  toggle = (tab) => {
+    if (this.state.activeTab !== tab) {
+      this.setState({activeTab: tab});
+    }
+  }
+
+  renderContent = () => {
+    let activeTab = this.state.activeTab;
+    
+    return (
+      <Fragment>
+        <div className="share-dialog-side">
+          <Nav pills vertical>
+            <NavItem>
+              <NavLink className={activeTab === 'userPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'userPermission')}>
+                {gettext('User Permission')}
+              </NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink className={activeTab === 'groupPermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'groupPermission')}>
+                {gettext('Group Permission')}
+              </NavLink>
+            </NavItem>
+          </Nav>
+        </div>
+        <div className="share-dialog-main">
+          <TabContent activeTab={this.state.activeTab}>
+            <TabPane tabId="userPermission">
+              <LibSubFolderSetUserPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath}  />
+            </TabPane>
+            <TabPane tabId="groupPermission">
+              <LibSubFolderSetGroupPermissionDialog repoID={this.props.repoID} repoName={this.props.repoName} folderPath={this.props.folderPath} />
+            </TabPane>
+          </TabContent>
+        </div>
+      </Fragment>
+    );
+  }
+
+  render() {
+    const { repoName, folderName } = this.props;
+  
+    return (
+      <div>
+        <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
+          <ModalHeader toggle={this.props.toggleDialog}>
+            <span dangerouslySetInnerHTML={{__html: repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}}></span>
+          </ModalHeader>
+          <ModalBody className="dialog-list-container share-dialog-content">
+            {this.renderContent()}
+          </ModalBody>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+LibSubFolderPermissionDialog.propTypes = propTypes;
+
+export default LibSubFolderPermissionDialog;

frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js

@@ -0,0 +1,351 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import Select from 'react-select';
+import makeAnimated from 'react-select/lib/animated';
+import { gettext, isPro, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils.js';
+import SharePermissionEditor from '../select-editor/share-permission-editor';
+import FileChooser from '../file-chooser/file-chooser';
+
+class GroupItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteGroupPermissionItem = () => {
+    let item = this.props.item;
+    this.props.deleteGroupPermissionItem(item);
+  }
+
+  onChangeGroupPermission = (permission) => {
+    let item = this.props.item;
+    this.props.onChangeGroupPermission(item, permission);
+  }
+
+  render() {
+    let item = this.props.item;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>
+          <a href={`${siteRoot}group/${item.group_id}/`} target="_blank">{item.group_name}</a>
+        </td>
+        {this.props.showPath &&
+          <td>
+            <a href={`${siteRoot}library/${item.repo_id}/${Utils.encodePath(this.props.repoName + item.folder_path)}`}>{item.folder_name}</a>
+          </td>
+        }
+        <td>
+          <SharePermissionEditor 
+            isTextMode={true}
+            isEditIconShow={this.state.isOperationShow}
+            currentPermission={item.permission}
+            permissions={this.props.permissions}
+            onPermissionChanged={this.onChangeGroupPermission}
+          />
+        </td>
+        <td>
+          <span
+            className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteGroupPermissionItem} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired
+};
+
+const NoOptionsMessage = (props) => {
+  return (
+    <div {...props.innerProps} style={{margin: '6px 10px', textAlign: 'center', color: 'hsl(0,0%,50%)'}}>{gettext('Group not found')}</div>
+  );
+};
+
+class LibSubFolderSerGroupPermissionDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOption: null,
+      errorMsg: [],
+      permission: 'rw',
+      groupPermissionItems: [],
+      folderPath: '',
+      showFileChooser: false
+    };
+    this.options = [];
+    if (!isPro) {
+      this.permissions = ['r', 'rw'];
+    } else {
+      this.permissions = ['r', 'rw', 'cloud-edit', 'preview'];
+    }
+  }
+
+  handleSelectChange = (option) => {
+    this.setState({selectedOption: option});
+  }
+
+  componentDidMount() {
+    this.loadOptions();
+    this.listGroupPermissionItems();
+  }
+
+  loadOptions = () => {
+    seafileAPI.shareableGroups().then((res) => {
+      this.options = res.data.map((item, index) => {
+        return {
+          id: item.id,
+          label: item.name,
+          value: item.name
+        };
+      });
+    });
+  }
+
+  listGroupPermissionItems = () => {
+    let repoID = this.props.repoID; 
+    let folderPath = this.props.folderPath;
+    seafileAPI.listGroupFolderPerm(repoID, folderPath).then((res) => {
+      if (res.data.length !== 0) {
+        this.setState({
+          groupPermissionItems: res.data
+        });
+      }
+    });
+  }
+
+  setPermission = (permission) => {
+    this.setState({permission: permission});
+  }
+
+  addGroupFolderPerm = () => {
+    const { selectedOption } = this.state;
+    const folderPath = this.props.folderPath || this.state.folderPath;
+    if (!selectedOption || !folderPath) {
+      return false;
+    }
+
+    seafileAPI.addGroupFolderPerm(this.props.repoID, this.state.permission, folderPath, selectedOption.id).then(res => {
+      let errorMsg = [];
+      if (res.data.failed.length > 0) {
+        for (let i = 0; i < res.data.failed.length; i++) {
+          errorMsg[i] = res.data.failed[i];
+        }
+      }
+
+      this.setState({
+        errorMsg: errorMsg,
+        groupPermissionItems: this.state.groupPermissionItems.concat(res.data.success),
+        selectedOption: null,
+        permission: 'rw',
+        folderPath: ''
+      });
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        if (error.response.data && error.response.data['error_msg']) {
+          errorMsg = error.response.data['error_msg'];
+        } else {
+          errorMsg = gettext('Error');
+        }   
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        errorMsg: [errorMsg]
+      }); 
+    }); 
+  }
+
+  deleteGroupPermissionItem = (item) => {
+    seafileAPI.deleteGroupFolderPerm(item.repo_id, item.permission, item.folder_path, item.group_id).then(() => {
+      this.setState({
+        groupPermissionItems: this.state.groupPermissionItems.filter(deletedItem => { return deletedItem != item; }) 
+      });
+    });
+  }
+
+  onChangeGroupPermission = (item, permission) => {
+    seafileAPI.updateGroupFolderPerm(item.repoID, item.permission, item.folder_path, item.group_id).then(() => {
+      this.updateGroupPermission(item, permission);
+    });
+  }
+  
+  updateGroupPermission = (item, permission) => {
+    let groupID = item.group_id;
+    let groupPermissionItems = this.state.groupPermissionItems.map(sharedItem => {
+      let sharedItemGroupID = sharedItem.group_id;
+      if (groupID === sharedItemGroupID && item.folder_path === sharedItem.folder_path) {
+        sharedItem.permission = permission;
+      }
+      return sharedItem;
+    });
+    this.setState({groupPermissionItems: groupPermissionItems});
+  }
+
+  onSetSubFolder = (e) => {
+    this.setState({
+      folderPath: e.target.value 
+    });
+  }
+
+  toggleFileChooser = () => {
+    this.setState({
+      showFileChooser: !this.state.showFileChooser,
+      folderPath: ''
+    });
+  }
+
+  toggleSubFolder = (repo, path, item) => {
+    this.setState({
+      folderPath: path,
+    }); 
+  }
+
+  handleSubmit = () => {
+    this.setState({
+      showFileChooser: !this.state.showFileChooser
+    });
+  }
+
+  onRepoItemClick = () => {
+    this.setState({
+      folderPath: '/' 
+    });
+  }
+
+  render() {
+    let showPath = this.props.folderPath ? false : true;
+
+    if (this.state.showFileChooser) {
+      return (
+        <div>
+          <FileChooser repoID={this.props.repoID} 
+            mode={'only_current_library'}
+            onDirentItemClick={this.toggleSubFolder}
+            onRepoItemClick={this.onRepoItemClick}
+          />
+          <div className="modal-footer">
+            <Button color="secondary" onClick={this.toggleFileChooser}>{gettext('Cancel')}</Button>
+            <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width={showPath ? '32%': '55%'}>{gettext('Group')}</th>
+              {showPath &&
+                <th width="32%">{gettext('Folder')}</th>
+              }
+              <th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
+              <th width={showPath ? '10%' : '15%'}></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <Select
+                  onChange={this.handleSelectChange}
+                  options={this.options}
+                  placeholder={gettext('Select a group')}
+                  components={makeAnimated()}
+                  maxMenuHeight={200}
+                  inputId={'react-select-2-input'}
+                  value={this.state.selectedOption}
+                  components={{ NoOptionsMessage }}
+                />
+              </td>
+              {showPath &&
+                <td>
+                  <InputGroup>
+                    <Input value={this.state.folderPath} onChange={this.onSetSubFolder} />
+                    <InputGroupAddon addonType="append"><Button className="sf2-icon-plus" onClick={this.toggleFileChooser}></Button></InputGroupAddon>
+                  </InputGroup>
+                </td>
+              }
+              <td>
+                <SharePermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChanged={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.addGroupFolderPerm}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&                  
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = item.group_id + ': ' + item.error_msg;
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })                                                
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width={showPath ? '32%': '55%'}>{gettext('Group')}</th>
+                {showPath &&
+                  <th width="32%">{gettext('Folder')}</th>
+                }
+                <th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
+                <th width={showPath ? '10%' : '15%'}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.groupPermissionItems.map((item, index) => {
+                return (
+                  <GroupItem 
+                    key={index} 
+                    item={item} 
+                    permissions={this.permissions}
+                    deleteGroupPermissionItem={this.deleteGroupPermissionItem}
+                    onChangeGroupPermission={this.onChangeGroupPermission}
+                    showPath={showPath}
+                    repoName={this.props.repoName}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+LibSubFolderSerGroupPermissionDialog.propTypes = propTypes;
+
+export default LibSubFolderSerGroupPermissionDialog;

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -0,0 +1,328 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext, isPro, siteRoot } from '../../utils/constants';
+import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils.js';
+import UserSelect from '../user-select';
+import SharePermissionEditor from '../select-editor/share-permission-editor';
+import FileChooser from '../file-chooser/file-chooser';
+
+class UserItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false
+    };
+  }
+  
+  onMouseEnter = () => {
+    this.setState({isOperationShow: true});
+  }
+
+  onMouseLeave = () => {
+    this.setState({isOperationShow: false});
+  }
+
+  deleteUserFolderPermission = () => {
+    let item = this.props.item;
+    this.props.deleteUserFolderPermission(item);
+  }
+  
+  onChangeUserFolderPerm = (permission) => {
+    let item = this.props.item;
+    this.props.onChangeUserFolderPerm(item.repo_id, permission, item.folder_path, item.user_email);
+  }
+
+  render() {
+    let item = this.props.item;
+    let currentPermission = item.permission;
+    return (
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td>
+          <a href={`${siteRoot}profile/${encodeURIComponent(item.user_email)}/`} target="_blank">{item.user_name}</a>
+        </td>
+        {this.props.showPath &&
+          <td>
+            <a href={`${siteRoot}library/${item.repo_id}/${Utils.encodePath(this.props.repoName + item.folder_path)}`}>{item.folder_name}</a>
+          </td>
+        }
+        <td>
+          <SharePermissionEditor 
+            isTextMode={true}
+            isEditIconShow={this.state.isOperationShow}
+            currentPermission={currentPermission}
+            permissions={this.props.permissions}
+            onPermissionChanged={this.onChangeUserFolderPerm}
+          />
+        </td>
+        <td>
+          <span
+            className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
+            onClick={this.deleteUserFolderPermission} 
+            title={gettext('Delete')}
+          >
+          </span>
+        </td>
+      </tr>
+    );
+  }
+}
+
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired
+};
+
+
+class LibSubFolderSetUserPermissionDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedUsers: null,
+      errorMsg: [],
+      permission: 'rw',
+      userFolderPermItems: [],
+      folderPath: '',
+      showFileChooser: false
+    };
+    if (!isPro) {
+      this.permissions = ['r', 'rw'];
+    } else {
+      this.permissions = ['r', 'rw', 'cloud-edit', 'preview'];
+    }
+  }
+
+  handleUserSelectChange = (option) => {
+    this.setState({selectedUsers: option});
+  }
+
+  componentDidMount() {
+    let repoID = this.props.repoID;
+    let folderPath = this.props.folderPath;
+    seafileAPI.listUserFolderPerm(repoID, folderPath).then((res) => {
+      if (res.data.length !== 0) {
+        this.setState({userFolderPermItems: res.data});
+      }
+    });
+  }
+
+  setPermission = (permission) => {
+    this.setState({permission: permission});
+  }
+
+  addUserFolderPerm = () => {
+    const { selectedUsers } = this.state;
+    const folderPath = this.props.folderPath || this.state.folderPath;
+    if (!selectedUsers || !selectedUsers.length || !folderPath) { // selectedUsers: null or []
+      return false;
+    }
+
+    const users = selectedUsers.map((item, index) => item.email); 
+    seafileAPI.addUserFolderPerm(this.props.repoID, this.state.permission, folderPath, users).then(res => {
+      let errorMsg = [];
+      if (res.data.failed.length > 0) {
+        for (let i = 0; i < res.data.failed.length; i++) {
+          errorMsg[i] = res.data.failed[i];
+        }
+      }
+      this.setState({
+        errorMsg: errorMsg,
+        userFolderPermItems: this.state.userFolderPermItems.concat(res.data.success),
+        selectedUsers: null,
+        permission: 'rw',
+        folderPath: '',
+      });
+      this.refs.userSelect.clearSelect();
+    }).catch((error) => {
+      let errorMsg = ''; 
+      if (error.response) {
+        if (error.response.data && error.response.data['error_msg']) {
+          errorMsg = error.response.data['error_msg'];
+        } else {
+          errorMsg = gettext('Error');
+        }   
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }   
+      this.setState({
+        errorMsg: [errorMsg]
+      });
+    }); 
+  } 
+
+  deleteUserFolderPermItem = (item) => {
+    seafileAPI.deleteUserFolderPerm(item.repo_id, item.permission, item.folder_path, item.user_email).then(res => {
+      this.setState({
+        userFolderPermItems: this.state.userFolderPermItems.filter(deletedItem => {
+          return deletedItem != item;
+        }) 
+      });
+    });
+  }
+
+  onChangeUserFolderPerm = (repoID, permission, folderPath, userEmail) => {
+    seafileAPI.updateUserFolderPerm(repoID, permission, folderPath, userEmail).then(res => {
+      let userFolderPermItems = this.state.userFolderPermItems.map(item => {
+        if (item.user_email === userEmail && item.folder_path === folderPath) {
+          item.permission = permission;
+        }
+        return item;
+      });
+      this.setState({userFolderPermItems: userFolderPermItems});
+    });
+  }
+
+  onSetSubFolder = (e) => {
+    this.setState({
+      folderPath: e.target.value 
+    });
+  }
+
+  toggleFileChooser = () => {
+    this.setState({
+      showFileChooser: !this.state.showFileChooser,
+      folderPath: ''
+    });
+  }
+
+  toggleSubFolder = (repo, path, item) => {
+    this.setState({
+      folderPath: path,
+    }); 
+  }
+
+  handleFileChooserSubmit = () => {
+    this.setState({
+      showFileChooser: !this.state.showFileChooser
+    });
+  }
+
+  onRepoItemClick = () => {
+    this.setState({
+      folderPath: '/' 
+    });
+  }
+
+  render() {
+    let showPath = this.props.folderPath ? false : true;
+    let { userFolderPermItems } = this.state;
+
+    if (this.state.showFileChooser) {
+      return (
+        <div>
+          <FileChooser repoID={this.props.repoID} 
+            mode={'only_current_library'}
+            onDirentItemClick={this.toggleSubFolder}
+            onRepoItemClick={this.onRepoItemClick}
+          />
+          <div className="modal-footer">
+            <Button color="secondary" onClick={this.toggleFileChooser}>{gettext('Cancel')}</Button>
+            <Button color="primary" onClick={this.handleFileChooserSubmit}>{gettext('Submit')}</Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <Fragment>
+        <table>
+          <thead>
+            <tr>
+              <th width={showPath ? '32%': '55%'}>{gettext('User')}</th>
+              {showPath &&
+                <th width="32%">{gettext('Folder')}</th>
+              }
+              <th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
+              <th width={showPath ? '10%' : '15%'}></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <UserSelect
+                  ref="userSelect"
+                  isMulti={true}
+                  className="reviewer-select"
+                  placeholder={gettext('Select users...')}
+                  onSelectChange={this.handleUserSelectChange}
+                  value={this.state.selectedUsers}
+                />
+              </td>
+              {showPath &&
+                <td>
+                  <InputGroup>
+                    <Input value={this.state.folderPath} onChange={this.onSetSubFolder} />
+                    <InputGroupAddon addonType="append"><Button className="sf2-icon-plus" onClick={this.toggleFileChooser}></Button></InputGroupAddon>
+                  </InputGroup>
+                </td>
+              }
+              <td>
+                <SharePermissionEditor 
+                  isTextMode={false}
+                  isEditIconShow={false}
+                  currentPermission={this.state.permission}
+                  permissions={this.permissions}
+                  onPermissionChanged={this.setPermission}
+                />
+              </td>
+              <td>
+                <Button onClick={this.addUserFolderPerm}>{gettext('Submit')}</Button>
+              </td>
+            </tr>
+            {this.state.errorMsg.length > 0 &&
+              this.state.errorMsg.map((item, index) => {
+                let errMessage = '';
+                if (item.user_email) {
+                  errMessage = item.user_email + ': ' + item.error_msg;
+                } else {
+                  errMessage = item;
+                }
+                return (
+                  <tr key={index}>
+                    <td colSpan={3}><p className="error">{errMessage}</p></td>
+                  </tr>
+                );
+              })
+            }
+          </tbody>
+        </table>
+        <div className="share-list-container">
+          <table className="table-thead-hidden">
+            <thead>
+              <tr>
+                <th width={showPath ? '32%': '55%'}>{gettext('User')}</th>
+                {showPath &&
+                  <th width="32%">{gettext('Folder')}</th>
+                }
+                <th width={showPath ? '26%': '30%'}>{gettext('Permission')}</th>
+                <th width={showPath ? '10%' : '15%'}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {userFolderPermItems.map((item, index) => {
+                return (
+                  <UserItem 
+                    key={index} 
+                    item={item} 
+                    permissions={this.permissions}
+                    deleteUserFolderPermission={this.deleteUserFolderPermItem}
+                    onChangeUserFolderPerm={this.onChangeUserFolderPerm}
+                    showPath={showPath}
+                    repoName={this.props.repoName}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+LibSubFolderSetUserPermissionDialog.propTypes = propTypes;
+
+export default LibSubFolderSetUserPermissionDialog;

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -14,6 +14,7 @@ import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import ShareDialog from '../dialog/share-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
+import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
 
 import '../../css/dirent-list-item.css';
 
@@ -65,6 +66,7 @@ class DirentListItem extends React.Component {
       isDragTipShow: false,
       isDropTipshow: false,
       isEditFileTagShow: false,
+      isPermissionDialogOpen: false,
     };
   }
 
@@ -262,7 +264,7 @@ class DirentListItem extends React.Component {
   }
 
   onPermissionItem = () => {
-
+    this.setState({isPermissionDialogOpen: !this.state.isPermissionDialogOpen});
   }
 
   onLockItem = () => {
@@ -631,6 +633,16 @@ class DirentListItem extends React.Component {
             />
           </ModalPortal>
         }
+        {this.state.isPermissionDialogOpen &&
+          <ModalPortal>
+            <LibSubFolderPermissionDialog 
+              toggleDialog={this.onPermissionItem}
+              repoID={this.props.repoID}
+              folderPath={direntPath}
+              folderName={dirent.name}
+            />
+          </ModalPortal>
+        }
       </Fragment>
     );
   }

frontend/src/components/select-editor/select-editor.js

@@ -21,6 +21,7 @@ class SelectEditor extends React.Component {
     super(props);
     this.state = {
       isEditing: false,
+      options: []
     };
     this.options = [];
   }
@@ -39,6 +40,10 @@ class SelectEditor extends React.Component {
       option.label = <div>{this.props.translateOption(options[i])}{ this.props.translateExplanation && <div className="permission-editor-explanation">{this.props.translateExplanation(options[i])}</div>}</div>;
       this.options.push(option);
     }
+
+    this.setState({
+      options: this.options
+    })
   }
 
   componentWillUnmount() {
@@ -78,7 +83,7 @@ class SelectEditor extends React.Component {
       <div className="permission-editor" onClick={this.onSelectHandler}>
         {(!isTextMode || this.state.isEditing) &&
           <Select
-            options={this.options}
+            options={this.state.options}
             className="permission-editor-select"
             classNamePrefix="permission-editor"
             placeholder={this.props.translateOption(currentOption)}

frontend/src/components/user-select.js

@@ -66,6 +66,7 @@ class UserSelect extends React.Component {
         onChange={this.handleSelectChange}
         placeholder={this.props.placeholder}
         className={`user-select ${this.props.className}`}
+        value={this.props.value}
         ref="userSelect"
       />
     );
@@ -74,4 +75,4 @@ class UserSelect extends React.Component {
 
 UserSelect.propTypes = propTypes;
 
-export default UserSelect;
+export default UserSelect;

frontend/src/css/sub-folder-permission.css

@@ -0,0 +1,3 @@
+.share-dialog .share-dialog-content {
+  min-height: 28rem;
+}

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -15,6 +15,7 @@ import LibHistorySettingDialog from '../../components/dialog/lib-history-setting
 import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
 import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
 import LabelRepoStateDialog from '../../components/dialog/label-repo-state-dialog';
+import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
 import Rename from '../../components/rename';
 import MylibRepoMenu from './mylib-repo-menu';
 
@@ -43,7 +44,8 @@ class MylibRepoListItem extends React.Component {
       isHistorySettingDialogShow: false,
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
-      isLabelRepoStateDialogOpen: false
+      isLabelRepoStateDialogOpen: false,
+      isFolderPermissionDialogShow: false,
     };
   }
 
@@ -89,7 +91,7 @@ class MylibRepoListItem extends React.Component {
         this.onResetPasswordToggle();
         break;
       case 'Folder Permission':
-        // todo
+        this.onFolderPermissionToggle();
         break;
       case 'Label current state':
         this.onLabelToggle();
@@ -148,6 +150,10 @@ class MylibRepoListItem extends React.Component {
     this.setState({isLabelRepoStateDialogOpen: !this.state.isLabelRepoStateDialogOpen});
   }
 
+  onFolderPermissionToggle = () => {
+    this.setState({isFolderPermissionDialogShow: !this.state.isFolderPermissionDialogShow});
+  }
+
   onUnfreezedItem = () => {
     this.setState({
       highlight: false,
@@ -354,6 +360,7 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
+
         {this.state.isLabelRepoStateDialogOpen && (
           <ModalPortal>
             <LabelRepoStateDialog
@@ -363,6 +370,16 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
+
+        {this.state.isFolderPermissionDialogShow && (
+          <ModalPortal>
+            <LibSubFolderPermissionDialog
+              toggleDialog={this.onFolderPermissionToggle}
+              repoID={repo.repo_id}
+              repoName={repo.repo_name}
+            />
+          </ModalPortal>
+        )}
       </Fragment>
     );
   }

frontend/src/utils/constants.js

@@ -28,7 +28,7 @@ export const canGenerateUploadLink = window.app.pageOptions.canGenerateUploadLin
 export const canViewOrg = window.app.pageOptions.canViewOrg === 'True';
 export const fileAuditEnabled = window.app.pageOptions.fileAuditEnabled ? true : false;
 export const enableFileComment = window.app.pageOptions.enableFileComment ? true : false;
-export const folderPermEnabled = window.app.pageOptions.folderPermEnabled === 'True';
+export const folderPermEnabled = window.app.pageOptions.folderPermEnabled;
 export const enableResetEncryptedRepoPassword = window.app.pageOptions.enableResetEncryptedRepoPassword === 'True';
 export const isEmailConfigured = window.app.pageOptions.isEmailConfigured === 'True';
 export const enableUploadFolder = window.app.pageOptions.enableUploadFolder === 'True';

seahub/templates/base_for_react.html

@@ -55,7 +55,7 @@
             canViewOrg:'{{ user.permissions.can_view_org }}',
             fileAuditEnabled: '{{ file_audit_enabled }}',
             enableFileComment: '{{ enable_file_comment }}',
-            folderPermEnabled: '{{ folder_perm_enabled }}',
+            folderPermEnabled: {% if folder_perm_enabled %} true {% else %} false {% endif %},
             enableResetEncryptedRepoPassword: '{{ enable_reset_encrypted_repo_password }}',
             isEmailConfigured: '{{ is_email_configured }}',
             enableUploadFolder: '{{ enable_upload_folder }}',

seahub/views/__init__.py

@@ -1222,6 +1222,7 @@ def choose_register(request):
 
 @login_required
 def react_fake_view(request, **kwargs):
+    folder_perm_enabled = True if is_pro_version() and ENABLE_FOLDER_PERM else False
 
     return render(request, "react_app.html", {
         'seafile_collab_server': SEAFILE_COLLAB_SERVER,
@@ -1234,6 +1235,7 @@ def react_fake_view(request, **kwargs):
         'enable_reset_encrypted_repo_password': ENABLE_RESET_ENCRYPTED_REPO_PASSWORD,
         'is_email_configured': IS_EMAIL_CONFIGURED,
         'can_add_public_repo': request.user.permissions.can_add_public_repo(),
+        'folder_perm_enabled': folder_perm_enabled,
     })
 
 @login_required