rename-dismiss-group (#2660)

frontend/src/app.js

@@ -113,6 +113,19 @@ class App extends Component {
     }
   }
 
+  onGroupChanged = (groupID) => {
+    setTimeout(function(){
+      let url = new URL(window.location.origin);
+      if (groupID) {
+        url = url + 'group/' + groupID + '/';
+      }
+      else {
+        url = url + 'groups/';
+      }
+      window.location = url.toString();
+    }, 1);
+  }
+
   tabItemClick = (tabName, groupID) => {
     let pathPrefix = [];
     if (groupID || this.dirViewPanels.indexOf(tabName) > -1) {
@@ -200,7 +213,13 @@ class App extends Component {
             <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
             <DirView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
             <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <Group path={siteRoot + 'group/:groupID'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
+            <Group
+              path={siteRoot + 'group/:groupID'}
+              onShowSidePanel={this.onShowSidePanel}
+              onSearchedClick={this.onSearchedClick}
+              onTabNavClick={this.tabItemClick}
+              onGroupChanged={this.onGroupChanged}
+              />
             <WikisWrapper path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
           </Router>
         </MainPanel>

frontend/src/components/dialog/dismiss-group-dialog.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+
+class DismissGroupDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  dismissGroup = () => {
+    let that = this;
+    seafileAPI.deleteGroup(this.props.groupID).then((res)=> {
+      that.props.onGroupChanged();
+    });
+  }
+
+  render() {
+    return(
+      <Modal isOpen={this.props.showDismissGroupDialog} toggle={this.props.toggleDismissGroupDialog}>
+        <ModalHeader>{gettext('Dismiss Group')}</ModalHeader>
+        <ModalBody>
+          <span>{gettext('Really want to dismiss this group?')}</span>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleDismissGroupDialog}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.dismissGroup}>{gettext('Dismiss')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+const DismissGroupDialogPropTypes = {
+  showDismissGroupDialog: PropTypes.bool.isRequired,
+  toggleDismissGroupDialog: PropTypes.func.isRequired,
+  loadGroup: PropTypes.func.isRequired,
+  groupID: PropTypes.string.isRequired,
+  onGroupChanged: PropTypes.func.isRequired,
+};
+
+DismissGroupDialog.propTypes = DismissGroupDialogPropTypes;
+
+export default DismissGroupDialog;

frontend/src/components/dialog/rename-group-dialog.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+
+class RenameGroupDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      newGroupName: '',
+    };
+  }
+
+  handleGroupNameChange = (event) => {
+    let name = event.target.value;
+    this.setState({
+      newGroupName: name
+    });
+  }
+
+  renameGroup = () => {
+    let name = this.state.newGroupName.trim();
+    if (name) {
+      let that = this;
+      seafileAPI.renameGroup(this.props.groupID, name).then((res)=> {
+        that.props.loadGroup(this.props.groupID);
+        that.props.onGroupChanged(res.data.id);
+      });
+    }
+    this.setState({
+      newGroupName: '',
+    });
+    this.props.toggleRenameGroupDialog();
+  }
+
+  handleKeyDown = (event) => {
+    if (event.keyCode === 13) {
+      this.renameGroup();
+    }
+  }
+
+  render() {
+    return(
+      <Modal isOpen={this.props.showRenameGroupDialog} toggle={this.props.toggleRenameGroupDialog}>
+        <ModalHeader>{gettext('Rename Group')}</ModalHeader>
+        <ModalBody>
+          <label htmlFor="newGroupName">{gettext('Rename group to')}</label>
+          <Input type="text" id="newGroupName" value={this.state.newGroupName}
+            onChange={this.handleGroupNameChange} onKeyDown={this.handleKeyDown}/>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.props.toggleRenameGroupDialog}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.renameGroup}>{gettext('Submit')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+const RenameGroupDialogPropTypes = {
+  showRenameGroupDialog: PropTypes.bool.isRequired,
+  toggleRenameGroupDialog: PropTypes.func.isRequired,
+  loadGroup: PropTypes.func.isRequired,
+  groupID: PropTypes.string.isRequired,
+  onGroupChanged: PropTypes.func.isRequired,
+};
+
+RenameGroupDialog.propTypes = RenameGroupDialogPropTypes;
+
+export default RenameGroupDialog;

frontend/src/pages/groups/group-view.js

@@ -1,4 +1,5 @@
 import React,{ Fragment } from 'react';
+import { Popover } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { gettext, siteRoot, username, loginUrl } from '../../utils/constants';
 import { Link } from '@reach/router';
@@ -10,11 +11,15 @@ import Repo from '../../models/repo';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 import CreateDepartmentRepoDialog from '../../components/dialog/create-department-repo-dialog';
+import DismissGroupDialog from '../../components/dialog/dismiss-group-dialog';
+import RenameGroupDialog from '../../components/dialog/rename-group-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
+  onGroupChanged: PropTypes.func.isRequired,
+  groupID: PropTypes.string,
 };
 
 const DEPARETMENT_GROUP_ONWER_NAME = 'system admin';
@@ -33,7 +38,10 @@ class GroupView extends React.Component {
       libraryType: 'group',
       isCreateRepoDialogShow: false,
       isDepartmentGroup: false,
-    }
+      showGroupDropdown: false,
+      showRenameGroupDialog: false,
+      showDismissGroupDialog: false,
+    };
   }
 
   componentDidMount() {
@@ -217,6 +225,24 @@ class GroupView extends React.Component {
     this.props.onTabNavClick(tabName);
   }
   
+  toggleGroupDropdown = () => {
+    this.setState({
+      showGroupDropdown: !this.state.showGroupDropdown
+    });
+  }
+
+  toggleDismissGroupDialog = () => {
+    this.setState({
+      showDismissGroupDialog: !this.state.showDismissGroupDialog
+    });
+  }
+
+  toggleRenameGroupDialog = () => {
+    this.setState({
+      showRenameGroupDialog: !this.state.showRenameGroupDialog
+    });
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -248,9 +274,28 @@ class GroupView extends React.Component {
                     )}
                   </div>
                   <div className="path-tool">
-                    {isShowSettingIcon && (
+                    { isShowSettingIcon &&
-                      <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title={gettext("Settings")} aria-label={gettext("Settings")}></a>
+                    <React.Fragment>
-                    )}
+                      <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title="Settings" id="settings"
+                        onClick={this.toggleGroupDropdown}></a>
+                      <Popover placement="bottom" isOpen={this.state.showGroupDropdown} target="settings"
+                        toggle={this.toggleGroupDropdown} hideArrow={true} className="sf-popover">
+                        <div className="sf-popover-hd sf-popover-title">
+                          <span>{gettext("Settings")}</span>
+                          <a href="#" className="sf-popover-close js-close sf2-icon-x1 op-icon"
+                            onClick={this.toggleGroupDropdown}></a>
+                        </div>
+                        <div className="sf-popover-con">
+                          <ul className="sf-popover-list">
+                            <li><a href="#" className="sf-popover-item" onClick={this.toggleRenameGroupDialog} >{gettext("Rename")}</a></li>
+                          </ul>
+                          <ul className="sf-popover-list">
+                            <li><a href="#" className="sf-popover-item" onClick={this.toggleDismissGroupDialog}>{gettext("Dismiss")}</a></li>
+                          </ul>
+                        </div>
+                      </Popover>
+                    </React.Fragment>
+                    }
                     <a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} aria-label={gettext("Members")}></a>
                   </div>
                 </Fragment>
@@ -288,6 +333,24 @@ class GroupView extends React.Component {
             onCreateRepo={this.onCreateRepo}
           />
         }
+        { this.state.showRenameGroupDialog &&
+          <RenameGroupDialog
+            showRenameGroupDialog={this.state.showRenameGroupDialog}
+            toggleRenameGroupDialog={this.toggleRenameGroupDialog}
+            loadGroup={this.loadGroup}
+            groupID={this.props.groupID}
+            onGroupChanged={this.props.onGroupChanged}
+          />
+        }
+        { this.state.showDismissGroupDialog &&
+          <DismissGroupDialog
+            showDismissGroupDialog={this.state.showDismissGroupDialog}
+            toggleDismissGroupDialog={this.toggleDismissGroupDialog}
+            loadGroup={this.loadGroup}
+            groupID={this.props.groupID}
+            onGroupChanged={this.props.onGroupChanged}
+          />
+        }
       </Fragment>
     );
   }

media/css/seahub_react.css

@@ -700,8 +700,7 @@ a.op-icon:focus {
 }
 .sf-popover-hd {
     padding:5px 0 3px;
-    border-bottom:1px solid #dfdfe1;
+    margin: 10px;
-    margin:0 10px;
 }
 .sf-popover-title {
     text-align:center;
@@ -710,11 +709,28 @@ a.op-icon:focus {
     font-size:16px;
     color:#b9b9b9;
     margin:4px 0 0;
+    float:right;
 }
 .sf-popover-con {
     padding:0 10px;
     overflow:auto;
 }
+.sf-popover-list {
+  border-top: 1px solid #e3e3e5;
+  list-style: none;
+}
+a.sf-popover-item {
+    display:block;
+    color:#444;
+    font-weight:normal;
+    line-height:31px;
+    text-decoration:none;
+    padding:0 10px;
+    margin:5px -10px;
+}
+a.sf-popover-item:hover {
+    background-color: #f8f8f8;
+}
 
 /* for go-back */
 .go-back {