Channel descriptions entered that are larger than the max number of bytes now cause an error to be printed to the client without closing the modal and losing the user's draft of the description

1 files changed, 14 insertions, 4 deletions

diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx
index c0818959a..d055feacd 100644
--- a/web/react/components/edit_channel_modal.jsx
+++ b/web/react/components/edit_channel_modal.jsx
@@ -6,17 +6,24 @@ var AsyncClient = require('../utils/async_client.jsx');
 
 module.exports = React.createClass({
     handleEdit: function(e) {
-        var data = {}
+        var data = {};
         data["channel_id"] = this.state.channel_id;
         if (data["channel_id"].length !== 26) return;
         data["channel_description"] = this.state.description.trim();
 
         Client.updateChannelDesc(data,
             function(data) {
+                this.setState({ server_error: "" });
                 AsyncClient.getChannels(true);
+                $(this.refs.modal.getDOMNode()).modal('hide');
             }.bind(this),
             function(err) {
-                AsyncClient.dispatchError(err, "updateChannelDesc");
+                if (err.message === "Invalid channel_description parameter") {
+                    this.setState({ server_error: "This description is too long, please enter a shorter one" });
+                }
+                else {
+                    this.setState({ server_error: err.message });
+                }
             }.bind(this)
         );
     },
@@ -27,13 +34,15 @@ module.exports = React.createClass({
         var self = this;
         $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
             var button = e.relatedTarget;
-            self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid') });
+            self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), server_error: "" });
         });
     },
     getInitialState: function() {
         return { description: "", title: "", channel_id: "" };
     },
     render: function() {
+        var server_error = this.state.server_error ? <div className='form-group has-error'><br/><label className='control-label'>{ this.state.server_error }</label></div> : null;
+
         return (
             <div className="modal fade" ref="modal" id="edit_channel" role="dialog" aria-hidden="true">
               <div className="modal-dialog">
@@ -44,10 +53,11 @@ module.exports = React.createClass({
                   </div>
                   <div className="modal-body">
                     <textarea className="form-control no-resize" rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea>
+                    { server_error }
                   </div>
                   <div className="modal-footer">
                     <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
-                    <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.handleEdit}>Save</button>
+                    <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button>
                   </div>
                 </div>
               </div>