Cleared message box on changes to the UI

ui/jstests/test-learning-resource.jsx

@@ -488,6 +488,67 @@ define(['QUnit', 'jquery', 'react', 'lodash', 'learning_resources',
     }
   );
 
+  QUnit.test('If terms or description are changed, clear error messages',
+    function (assert) {
+      var done = assert.async();
+
+      var afterMount = function (component) {
+        waitForAjax(3, function () {
+          // Set component message then type into description to clear it.
+          component.setState({message: "Hello, world!"}, function () {
+            var textarea = React.addons.TestUtils.
+              findRenderedDOMComponentWithTag(
+              component,
+              'textarea'
+            );
+
+            React.addons.TestUtils.Simulate.change(textarea, {value: "x"});
+            component.forceUpdate(function () {
+              assert.equal(component.state.message, undefined);
+
+              // Reset component message then adjust vocabs list to clear it.
+              component.setState({message: "Hello, world!"}, function () {
+                var selects = _.map(React.addons.TestUtils.
+                  scryRenderedDOMComponentsWithTag(
+                  component,
+                  'select'
+                ), function(piece) {
+                  return React.findDOMNode(piece);
+                });
+
+                // First is vocab, second is terms
+                assert.equal(selects.length, 2);
+                $(selects[0]).val('difficulty').trigger('change');
+                component.forceUpdate(function () {
+                  assert.equal(component.state.message, undefined);
+
+                  // Reset component message then adjust term list to clear it.
+                  component.setState({message: {error: "Error!"}}, function () {
+                    $(selects[1]).val('required').trigger('change');
+
+                    component.forceUpdate(function () {
+                      assert.equal(component.state.message, undefined);
+
+                      done();
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      };
+
+      React.addons.TestUtils.renderIntoDocument(
+        <LearningResourcePanel
+          repoSlug="repo"
+          closeLearningResourcePanel={function() {}}
+          learningResourceId="1"
+          ref={afterMount}/>
+      );
+    }
+  );
+
   QUnit.test(
     "LearningResourcePanel.loader should populate its stuff",
     function(assert) {

ui/static/ui/js/learning_resources.jsx

@@ -90,6 +90,9 @@ define('learning_resources',
       this.props.setValues(
         _.pluck(this.props.vocabs, 'vocabulary'), selectedValue[0]
       );
+
+      // clear message
+      this.props.reportMessage(undefined);
     }
   });
 
@@ -142,6 +145,10 @@ define('learning_resources',
         _.filter(e.target.options, function(option) {
           return option.selected && option.value !== null;
         }), 'value');
+
+      // clear messages
+      this.props.reportMessage(undefined);
+
       // check if the current vocabulary allows free tagging and in case add
       // the new tags before proceeding
       if (this.props.selectedVocabulary.vocabulary_type === 'f') {
@@ -242,7 +249,8 @@ define('learning_resources',
       var selectedVocabulary = this.state.selectedVocabulary;
       selectedVocabulary.terms.push(termObj);
       this.setState({
-        selectedVocabulary: selectedVocabulary
+        selectedVocabulary: selectedVocabulary,
+        message: undefined
       });
     },
 
@@ -264,6 +272,7 @@ define('learning_resources',
             vocabs={vocabulariesAndTerms}
             selectedVocabulary={this.state.selectedVocabulary}
             setValues={this.setSelectedVocabulary}
+            reportMessage={this.reportMessage}
           />;
 
         termSelector =
@@ -297,7 +306,8 @@ define('learning_resources',
             <label className="col-sm-12 control-label">Description</label>
               <textarea
                 className="form-control col-sm-12 textarea-desc"
-                valueLink={this.linkState('description')}>
+                value={this.state.description}
+                onChange={this.handleDescription}>
               </textarea>
           </div>
           <p className="text-right">
@@ -316,6 +326,13 @@ define('learning_resources',
         </form>
       </div>;
     },
+    handleDescription: function(event) {
+      event.preventDefault();
+      this.setState({
+        description: event.target.value,
+        message: undefined
+      });
+    },
     saveLearningResourcePanel: function (event) {
       event.preventDefault();
       this.saveForm(false);