Group repo rename (#2926)

* add rename for group repo

* freezed item when renaming

* add mobile rename handler

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -7,6 +7,7 @@ import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff } from '../../utils/constants';
 import ModalPotal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
+import Rename from '../rename';
 
 const propTypes = {
   currentGroup: PropTypes.object,
@@ -14,8 +15,10 @@ const propTypes = {
   repo: PropTypes.object.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
   onItemUnshare: PropTypes.func.isRequired,
   onItmeDetails: PropTypes.func,
+  onItemRename: PropTypes.func,
 };
 
 class SharedRepoListItem extends React.Component {
@@ -27,6 +30,7 @@ class SharedRepoListItem extends React.Component {
       isOperationShow: false,
       isItemMenuShow: false,
       isShowSharedDialog: false,
+      isRenaming: false,
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -59,23 +63,30 @@ class SharedRepoListItem extends React.Component {
   }
 
   clickOperationMenuToggle = (e) => {
-    e.preventDefault();
-    this.toggleOperationMenu();
+    this.toggleOperationMenu(e);
   }
 
-  toggleOperationMenu = () => {
-    if (this.props.isItemFreezed) {
-      this.setState({
-        highlight: false,
-        isOperationShow: false,
-        isItemMenuShow: !this.state.isItemMenuShow
-      });
-    } else {
-      this.setState({
-        isItemMenuShow: !this.state.isItemMenuShow
-      });
+  toggleOperationMenu = (e) => {
+    let dataset = e.target ? e.target.dataset : null;
+    if (dataset && dataset.toggle && dataset.toggle === 'Rename') {
+      this.setState({isItemMenuShow: !this.state.isItemMenuShow});
+      return;
     }
-    this.props.onFreezedItem();
+    
+    this.setState(
+      {isItemMenuShow: !this.state.isItemMenuShow},
+      () => {
+        if (this.state.isItemMenuShow) {
+          this.props.onFreezedItem();
+        } else {
+          this.props.onUnfreezedItem();
+          this.setState({
+            highlight: false,
+            isOperationShow: false,
+          });
+        }
+      }
+    );
   }
 
   getRepoComputeParams = () => {
@@ -92,7 +103,7 @@ class SharedRepoListItem extends React.Component {
     let operation = e.target.dataset.toggle;
     switch(operation) {
       case 'Rename':
-        this.onItemRename();
+        this.onItemRenameToggle();
         break;
       case 'Folder Permission':
         this.onItemPermisionChanged();
@@ -111,8 +122,22 @@ class SharedRepoListItem extends React.Component {
     }
   }
 
-  onItemRename = () => {
-    // todo
+  onItemRenameToggle = () => {
+    this.props.onFreezedItem();
+    this.setState({
+      isRenaming: !this.state.isRenaming,
+      isOperationShow: !this.state.isOperationShow
+    });
+  }
+
+  onRenameConfirm = (name) => {
+    this.props.onItemRename(this.props.repo, name);
+    this.onRenameCancel();
+  }
+  
+  onRenameCancel = () => {
+    this.props.onUnfreezedItem();
+    this.setState({isRenaming: !this.state.isRenaming});
   }
 
   onItemPermisionChanged = () => {
@@ -308,7 +333,12 @@ class SharedRepoListItem extends React.Component {
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
           <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
-          <td><Link to={libPath}>{repo.repo_name}</Link></td>
+          <td>
+            {this.state.isRenaming ? 
+              <Rename  name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> : 
+              <Link to={libPath}>{repo.repo_name}</Link>
+            }
+          </td>
           <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
           <td>{repo.size}</td>
           <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
@@ -343,7 +373,11 @@ class SharedRepoListItem extends React.Component {
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
           <td><img src={iconUrl} title={iconTitle} width="24" alt={iconTitle}/></td>
           <td>
-            <Link to={libPath}>{repo.repo_name}</Link><br />
+            {this.state.isRenaming ? 
+              <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
+              <Link to={libPath}>{repo.repo_name}</Link>  
+            }
+            <br />
             <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
             <span className="item-meta-info">{repo.size}</span>
             <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -1,7 +1,9 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import SharedRepoListItem from './shared-repo-list-item';
+import toaster from '../toast';
 
 const propTypes = {
   libraryType: PropTypes.string,
@@ -14,6 +16,7 @@ const propTypes = {
   onItemUnshare: PropTypes.func.isRequired,
   onItemDelete: PropTypes.func.isRequired,
   onItemDetails: PropTypes.func,
+  onItemRename: PropTypes.func,
 };
 
 class SharedRepoListView extends React.Component {
@@ -48,9 +51,24 @@ class SharedRepoListView extends React.Component {
   }
 
   onFreezedItem = () => {
-    this.setState({
-      isItemFreezed: !this.state.isItemFreezed,
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  onItemRename = (repo, newName) => {
+    let isDuplicated = this.props.repoList.some(item => {
+      return item.name === newName;
     });
+    if (isDuplicated) {
+      let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
+      errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
+      toaster.danger(errMessage);
+      return false;
+    }
+    this.props.onItemRename(repo, newName);
   }
 
   renderRepoListView = () => {
@@ -65,9 +83,11 @@ class SharedRepoListView extends React.Component {
               currentGroup={this.props.currentGroup}
               isItemFreezed={this.state.isItemFreezed}
               onFreezedItem={this.onFreezedItem}
+              onUnfreezedItem={this.onUnfreezedItem}
               onItemUnshare={this.props.onItemUnshare}
               onItemDelete={this.props.onItemDelete}
               onItemDetails={this.props.onItemDetails}
+              onItemRename={this.props.onItemRename}
             />
           );
         })}