From 07e57f7c8f2f05aa884cca1887b33ddfd3c4834f Mon Sep 17 00:00:00 2001
From: George Schneeloch <gschneel@mit.edu>
Date: Thu, 29 Oct 2015 17:09:22 -0400
Subject: [PATCH] Sorted terms in taxonomy panel

---
 ui/jstests/test_manage_taxonomies.jsx | 76 +++++++++++++++------------
 ui/static/ui/js/manage_taxonomies.jsx |  5 +-
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/ui/jstests/test_manage_taxonomies.jsx b/ui/jstests/test_manage_taxonomies.jsx
index ae5ecc54..732c759d 100644
--- a/ui/jstests/test_manage_taxonomies.jsx
+++ b/ui/jstests/test_manage_taxonomies.jsx
@@ -2359,22 +2359,21 @@ define(['QUnit', 'jquery', 'lodash', 'manage_taxonomies', 'react',
       });
 
       var afterMount = function(component) {
-        assert.equal(
-          component.state.vocabularies.length,
-          0
-        );
+        assert.equal(component.state.vocabularies.length, 0);
         waitForAjax(2, function() {
-          assert.equal(
-            component.state.vocabularies.length,
-            2
-          );
-          assert.equal(
-            component.state.vocabularies[0].terms.length,
-            2
+          assert.equal(component.state.vocabularies.length, 2);
+          var difficultyVocab = _.find(
+            component.state.vocabularies, function(vocab) {
+              return vocab.vocabulary.name === "difficulty";
+            }
           );
+          assert.equal(difficultyVocab.terms.length, 2);
+          var difficultTerm = _.find(difficultyVocab.terms, function(term) {
+            return term.label === 'difficult';
+          });
           var updateTermUrl = "/api/v1/repositories/demo/vocabularies/" +
-              component.state.vocabularies[0].vocabulary.slug + "/terms/" +
-              component.state.vocabularies[0].terms[0].slug + "/";
+              difficultyVocab.vocabulary.slug + "/terms/" +
+              difficultTerm.slug + "/";
           TestUtils.initMockjax({
             url: updateTermUrl,
             responseText: term,
@@ -2419,13 +2418,19 @@ define(['QUnit', 'jquery', 'lodash', 'manage_taxonomies', 'react',
                     component.state.vocabularies.length,
                     2
                   );
+                  var difficultyVocab = _.find(
+                    component.state.vocabularies, function(vocab) {
+                      return vocab.vocabulary.name === "difficulty";
+                    }
+                  );
                   assert.equal(
-                    component.state.vocabularies[0].terms.length,
+                    difficultyVocab.terms.length,
                     2
                   );
-                  assert.equal(
-                    component.state.vocabularies[0].terms[0].label,
-                    "TestB"
+                  assert.ok(
+                    _.some(difficultyVocab.terms, function(term) {
+                      return term.label === "TestB";
+                    })
                   );
                   done();
                 });
@@ -2573,22 +2578,22 @@ define(['QUnit', 'jquery', 'lodash', 'manage_taxonomies', 'react',
       };
 
       var afterMount = function(component) {
-        assert.equal(
-          component.state.vocabularies.length,
-          0
-        );
+        assert.equal(component.state.vocabularies.length, 0);
         waitForAjax(2, function() {
-          assert.equal(
-            component.state.vocabularies.length,
-            1
-          );
-          assert.equal(
-            component.state.vocabularies[0].terms.length,
-            2
+          assert.equal(component.state.vocabularies.length, 1);
+          var difficultyVocab = _.find(component.state.vocabularies,
+            function(vocab) {
+              return vocab.vocabulary.name === 'difficulty';
+            }
           );
+          assert.equal(difficultyVocab.terms.length, 2);
+          var difficultTerm = _.find(difficultyVocab.terms, function(term) {
+            return term.label === 'difficult';
+          });
+
           var updateTermUrl = "/api/v1/repositories/repo/vocabularies/" +
-              component.state.vocabularies[0].vocabulary.slug + "/terms/" +
-              component.state.vocabularies[0].terms[0].slug + "/";
+              difficultyVocab.vocabulary.slug + "/terms/" +
+              difficultTerm.slug + "/";
           TestUtils.initMockjax({
             url: updateTermUrl,
             type: "DELETE"
@@ -2605,12 +2610,15 @@ define(['QUnit', 'jquery', 'lodash', 'manage_taxonomies', 'react',
             waitForAjax(1, function () {
               assert.equal(refreshCount, 1);
               //assert term update
-              assert.equal(
-                component.state.vocabularies.length,
-                1
+              assert.equal(component.state.vocabularies.length, 1);
+              var difficultyVocab = _.find(component.state.vocabularies,
+                function(vocab) {
+                  return vocab.vocabulary.name === 'difficulty';
+                }
               );
+
               assert.equal(
-                component.state.vocabularies[0].terms.length,
+                difficultyVocab.terms.length,
                 1
               );
               done();
diff --git a/ui/static/ui/js/manage_taxonomies.jsx b/ui/static/ui/js/manage_taxonomies.jsx
index dd75da64..06b8cecd 100644
--- a/ui/static/ui/js/manage_taxonomies.jsx
+++ b/ui/static/ui/js/manage_taxonomies.jsx
@@ -167,7 +167,10 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'uri',
     mixins: [React.addons.LinkedStateMixin],
     render: function () {
       var thiz = this;
-      var items = _.map(this.props.terms, function (term) {
+      var sortedTerms = _.sortBy(this.props.terms, function(term) {
+        return term.label.trim().toLowerCase();
+      });
+      var items = _.map(sortedTerms, function (term) {
         return <TermComponent
           deleteTerm={thiz.props.deleteTerm}
           updateTerm={thiz.props.updateTerm}