Bug 1154708 - Drop renaming conversations from the Loop panel. r=dmose

browser/components/loop/content/css/panel.css

@@ -252,7 +252,8 @@ body[dir=rtl] .new-room-view > .context > .context-preview {
 
 .room-list > .room-entry {
   padding: .5rem 1rem;
-  cursor: pointer;
+  /* Always show the default pointer, even over the text part of the entry. */
+  cursor: default;
 }
 
 .room-list > .room-entry > h2 {
@@ -324,7 +325,6 @@ body[dir=rtl] .new-room-view > .context > .context-preview {
 .room-list > .room-entry:hover > h2 > button {
   animation: drop-and-fade-in 0.250s;
   animation-fill-mode: forwards;
-  cursor: pointer;
 }
 
 .room-list > .room-entry:hover > h2 > .copy-link {
@@ -354,27 +354,6 @@ body[dir=rtl] .new-room-view > .context > .context-preview {
   vertical-align: middle;
 }
 
-/* Edit in place */
-
-.room-list > .room-entry > h2 > .edit-in-place {
-  cursor: text;
-}
-
-.room-list > .room-entry > h2 > .edit-in-place:hover {
-  background: #fefbc4;
-}
-
-.room-list > .room-entry > h2 > form {
-  display: inline-block;
-}
-
-.room-list > .room-entry > h2 > form > input {
-  border: none;
-  background: #fefbc4;
-  font-size: 13.6px;
-  padding: 0;
-}
-
 /* Buttons */
 
 .button-group {

browser/components/loop/content/js/panel.js

@@ -411,78 +411,6 @@ loop.panel = (function(_, mozL10n) {
     }
   });
 
-  var EditInPlace = React.createClass({displayName: "EditInPlace",
-    mixins: [React.addons.LinkedStateMixin],
-
-    propTypes: {
-      onChange: React.PropTypes.func.isRequired,
-      text: React.PropTypes.string,
-    },
-
-    getDefaultProps: function() {
-      return {text: ""};
-    },
-
-    getInitialState: function() {
-      return {edit: false, text: this.props.text};
-    },
-
-    componentWillReceiveProps: function(nextProps) {
-      if (nextProps.text !== this.props.text) {
-        this.setState({text: nextProps.text});
-      }
-    },
-
-    handleTextClick: function(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.setState({edit: true}, function() {
-        this.getDOMNode().querySelector("input").select();
-      }.bind(this));
-    },
-
-    handleInputClick: function(event) {
-      event.stopPropagation();
-    },
-
-    handleFormSubmit: function(event) {
-      event.preventDefault();
-      // While we already validate for a non-empty string in the store, we need
-      // to check it at the component level to avoid desynchronized rendering
-      // issues.
-      if (this.state.text.trim()) {
-        this.props.onChange(this.state.text);
-      } else {
-        this.setState({text: this.props.text});
-      }
-      this.setState({edit: false});
-    },
-
-    cancelEdit: function(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.setState({edit: false, text: this.props.text});
-    },
-
-    render: function() {
-      if (!this.state.edit) {
-        return (
-          React.createElement("span", {className: "edit-in-place", onClick: this.handleTextClick, 
-                title: mozL10n.get("rooms_name_this_room_tooltip2")}, 
-            this.state.text
-          )
-        );
-      }
-      return (
-        React.createElement("form", {onSubmit: this.handleFormSubmit}, 
-          React.createElement("input", {type: "text", valueLink: this.linkState("text"), 
-                 onClick: this.handleInputClick, 
-                 onBlur: this.cancelEdit})
-        )
-      );
-    }
-  });
-
   /**
    * Room list entry.
    */
@@ -542,13 +470,6 @@ loop.panel = (function(_, mozL10n) {
       }.bind(this));
     },
 
-    renameRoom: function(newRoomName) {
-      this.props.dispatcher.dispatch(new sharedActions.RenameRoom({
-        roomToken: this.props.room.roomToken,
-        newRoomName: newRoomName
-      }));
-    },
-
     handleMouseLeave: function(event) {
       this.setState({urlCopied: false});
     },
@@ -572,8 +493,7 @@ loop.panel = (function(_, mozL10n) {
              onClick: this.handleClickEntry}, 
           React.createElement("h2", null, 
             React.createElement("span", {className: "room-notification"}), 
-            React.createElement(EditInPlace, {text: this.props.room.decryptedContext.roomName, 
-                         onChange: this.renameRoom}), 
+            this.props.room.decryptedContext.roomName, 
             React.createElement("button", {className: copyButtonClasses, 
               title: mozL10n.get("rooms_list_copy_url_tooltip"), 
               onClick: this.handleCopyButtonClick}), 

browser/components/loop/content/js/panel.jsx

@@ -411,78 +411,6 @@ loop.panel = (function(_, mozL10n) {
     }
   });
 
-  var EditInPlace = React.createClass({
-    mixins: [React.addons.LinkedStateMixin],
-
-    propTypes: {
-      onChange: React.PropTypes.func.isRequired,
-      text: React.PropTypes.string,
-    },
-
-    getDefaultProps: function() {
-      return {text: ""};
-    },
-
-    getInitialState: function() {
-      return {edit: false, text: this.props.text};
-    },
-
-    componentWillReceiveProps: function(nextProps) {
-      if (nextProps.text !== this.props.text) {
-        this.setState({text: nextProps.text});
-      }
-    },
-
-    handleTextClick: function(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.setState({edit: true}, function() {
-        this.getDOMNode().querySelector("input").select();
-      }.bind(this));
-    },
-
-    handleInputClick: function(event) {
-      event.stopPropagation();
-    },
-
-    handleFormSubmit: function(event) {
-      event.preventDefault();
-      // While we already validate for a non-empty string in the store, we need
-      // to check it at the component level to avoid desynchronized rendering
-      // issues.
-      if (this.state.text.trim()) {
-        this.props.onChange(this.state.text);
-      } else {
-        this.setState({text: this.props.text});
-      }
-      this.setState({edit: false});
-    },
-
-    cancelEdit: function(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.setState({edit: false, text: this.props.text});
-    },
-
-    render: function() {
-      if (!this.state.edit) {
-        return (
-          <span className="edit-in-place" onClick={this.handleTextClick}
-                title={mozL10n.get("rooms_name_this_room_tooltip2")}>
-            {this.state.text}
-          </span>
-        );
-      }
-      return (
-        <form onSubmit={this.handleFormSubmit}>
-          <input type="text" valueLink={this.linkState("text")}
-                 onClick={this.handleInputClick}
-                 onBlur={this.cancelEdit} />
-        </form>
-      );
-    }
-  });
-
   /**
    * Room list entry.
    */
@@ -542,13 +470,6 @@ loop.panel = (function(_, mozL10n) {
       }.bind(this));
     },
 
-    renameRoom: function(newRoomName) {
-      this.props.dispatcher.dispatch(new sharedActions.RenameRoom({
-        roomToken: this.props.room.roomToken,
-        newRoomName: newRoomName
-      }));
-    },
-
     handleMouseLeave: function(event) {
       this.setState({urlCopied: false});
     },
@@ -572,8 +493,7 @@ loop.panel = (function(_, mozL10n) {
              onClick={this.handleClickEntry}>
           <h2>
             <span className="room-notification" />
-            <EditInPlace text={this.props.room.decryptedContext.roomName}
-                         onChange={this.renameRoom} />
+            {this.props.room.decryptedContext.roomName}
             <button className={copyButtonClasses}
               title={mozL10n.get("rooms_list_copy_url_tooltip")}
               onClick={this.handleCopyButtonClick} />

browser/components/loop/test/desktop-local/panel_test.js

@@ -467,43 +467,6 @@ describe("loop.panel", function() {
         React.createElement(loop.panel.RoomEntry, props));
     }
 
-    describe("Edit room name", function() {
-      var roomEntry, domNode;
-
-      beforeEach(function() {
-        roomEntry = mountRoomEntry({
-          dispatcher: dispatcher,
-          deleteRoom: sandbox.stub(),
-          room: new loop.store.Room(roomData)
-        });
-        domNode = roomEntry.getDOMNode();
-
-        TestUtils.Simulate.click(domNode.querySelector(".edit-in-place"));
-      });
-
-      it("should render an edit form on room name click", function() {
-        expect(domNode.querySelector("form")).not.eql(null);
-        expect(domNode.querySelector("input").value)
-          .eql(roomData.decryptedContext.roomName);
-      });
-
-      it("should dispatch a RenameRoom action when submitting the form",
-        function() {
-          var dispatch = sandbox.stub(dispatcher, "dispatch");
-
-          TestUtils.Simulate.change(domNode.querySelector("input"), {
-            target: {value: "New name"}
-          });
-          TestUtils.Simulate.submit(domNode.querySelector("form"));
-
-          sinon.assert.calledOnce(dispatch);
-          sinon.assert.calledWithExactly(dispatch, new sharedActions.RenameRoom({
-            roomToken: roomData.roomToken,
-            newRoomName: "New name"
-          }));
-        });
-    });
-
     describe("Copy button", function() {
       var roomEntry, copyButton;
 
@@ -636,7 +599,7 @@ describe("loop.panel", function() {
         roomEntry.setProps({room: updatedRoom});
 
         expect(
-          roomEntry.getDOMNode().querySelector(".edit-in-place").textContent)
+          roomEntry.getDOMNode().textContent)
         .eql("New room name");
       });
     });

browser/locales/en-US/chrome/browser/loop/loop.properties

@@ -307,7 +307,6 @@ rooms_list_delete_tooltip=Delete conversation
 rooms_list_deleteConfirmation_label=Are you sure?
 rooms_list_no_current_conversations=No current conversations
 rooms_name_this_room_label=Name this conversation
-rooms_name_this_room_tooltip2=Click to edit the conversation name
 rooms_name_change_failed_label=Conversation cannot be renamed
 rooms_new_room_button_label=Start a conversation
 rooms_only_occupant_label=You're the first one here.