Rename collection from collection list view

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -11,11 +11,6 @@ import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 
 const downFilledTriangle = require('../../../../images/down-filled-triangle.svg');
-const check = require('../../../../images/check.svg');
-
-const checkIcon = (
-  <InlineSVG className="sketch-list__check-icon" src={check} alt="In collection" />
-);
 
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
@@ -26,7 +21,9 @@ class CollectionListRowBase extends React.Component {
     super(props);
     this.state = {
       optionsOpen: false,
-      isFocused: false
+      isFocused: false,
+      renameOpen: false,
+      renameValue: props.collection.name,
     };
   }
 
@@ -65,7 +62,8 @@ class CollectionListRowBase extends React.Component {
 
   closeAll = () => {
     this.setState({
-      optionsOpen: false
+      optionsOpen: false,
+      renameOpen: false,
     });
   }
 
@@ -81,6 +79,33 @@ class CollectionListRowBase extends React.Component {
     }
   }
 
+  handleRenameOpen = () => {
+    this.closeAll();
+    this.setState({
+      renameOpen: true,
+    });
+  }
+
+  handleRenameChange = (e) => {
+    this.setState({
+      renameValue: e.target.value
+    });
+  }
+
+  handleRenameEnter = (e) => {
+    if (e.key === 'Enter') {
+      this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
+      this.closeAll();
+    }
+  }
+
+  resetSketchName = () => {
+    this.setState({
+      renameValue: this.props.collection.name
+    });
+  }
+
+
   renderActions = () => {
     const { optionsOpen } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
@@ -110,6 +135,17 @@ class CollectionListRowBase extends React.Component {
                   Delete
                 </button>
               </li>}
+            {userIsOwner &&
+              <li>
+                <button
+                  className="sketch-list__action-option"
+                  onClick={this.handleRenameOpen}
+                  onBlur={this.onBlurComponent}
+                  onFocus={this.onFocusComponent}
+                >
+                  Rename
+                </button>
+              </li>}
           </ul>
         }
       </React.Fragment>
@@ -179,7 +215,8 @@ CollectionListRowBase.propTypes = {
     username: PropTypes.string,
     authenticated: PropTypes.bool.isRequired
   }).isRequired,
-  deleteCollection: PropTypes.func.isRequired
+  deleteCollection: PropTypes.func.isRequired,
+  editCollection: PropTypes.func.isRequired,
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {