@instructure/outcomes-ui 3.2.0 → 3.2.2

package/lib/translated/nb/components/OutcomeLabels/index.js

@@ -47,6 +47,9 @@ var OutcomeLabels = exports.default = (_dec = (0, _emotion.withStyle)(_styles.de
       var _this$props = this.props,
         outcomes = _this$props.outcomes,
         emptyText = _this$props.emptyText;
+      var filteredOutcomes = outcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeLabel__alignedOutcomes",
@@ -57,8 +60,8 @@ var OutcomeLabels = exports.default = (_dec = (0, _emotion.withStyle)(_styles.de
         size: "small"
       }, (0, _emotion.jsx)("div", {
         css: this.props.styles.text
-      }, outcomes.length === 0 ? emptyText : outcomes.map(function (o, i) {
-        return _this2.wrap(o.title, i < outcomes.length - 1);
+      }, filteredOutcomes.length === 0 ? emptyText : filteredOutcomes.map(function (o, i) {
+        return _this2.wrap(o.title, i < filteredOutcomes.length - 1);
       }))));
     }
   }]);

package/lib/translated/nb/components/OutcomeTags/__tests__/index.test.js

@@ -25,6 +25,11 @@ describe('OutcomeTags', function () {
       id: '3',
       label: 'GHI',
       title: 'Title3'
+    }, {
+      id: '4',
+      label: 'JKL',
+      title: 'Title4',
+      decorator: 'HIDE'
     }];
     return Object.assign({
       outcomes: outcomes,
@@ -58,6 +63,14 @@ describe('OutcomeTags', function () {
     (0, _chai.expect)(text.match(/Title2/)).to.be.truthy;
     (0, _chai.expect)(text.match(/Title3/)).to.be.truthy;
   });
+  it('does not render outcome titles for hidden outcomes', function () {
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var text = wrapper.text();
+    (0, _chai.expect)(text.match(/Title1/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title2/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title3/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title4/)).to.be.falsey;
+  });
   it('does not render outcome labels', function () {
     var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     var text = wrapper.text();
@@ -72,6 +85,18 @@ describe('OutcomeTags', function () {
     var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
     (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('focuses on the prior tag when current tag deleted', function (done) {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     setTimeout(function () {

package/lib/translated/nb/components/OutcomeTags/index.js

@@ -54,6 +54,8 @@ var OutcomeTags = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defa
       var outcomes = this.props.outcomes;
       return outcomes.sort(function (a, b) {
         return a.title ? a.title.localeCompare(b.title) : -1;
+      }).filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
       });
     }
   }, {
@@ -110,6 +112,7 @@ var OutcomeTags = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defa
   }, {
     key: "render",
     value: function render() {
+      var sortedOutcomes = this.getSortedOutcomes();
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeTag__alignedOutcomes"
@@ -117,7 +120,7 @@ var OutcomeTags = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defa
         size: "medium"
       }, (0, _emotion.jsx)(_uiIcons.IconOutcomesLine, null)), (0, _emotion.jsx)("div", {
         css: this.props.styles.tags
-      }, this.props.outcomes.length ? this.renderTags() : this.renderEmpty()));
+      }, sortedOutcomes.length ? this.renderTags() : this.renderEmpty()));
     }
   }]);
   OutcomeTags.displayName = "OutcomeTags";

package/lib/translated/nb/demo.js

@@ -253,6 +253,7 @@ var DemoAlignment = function DemoAlignment(props) {
     artifactType: artifactType,
     artifactId: artifactId,
     contextUuid: contextUuid,
+    launchContexts: launchContexts,
     host: outcomesHost,
     jwt: jwt
   })), /*#__PURE__*/_react.default.createElement(_index.OutcomeList, {

package/lib/translated/nb/services/OutcomesService.js

@@ -98,14 +98,14 @@ var decorateAlignments = function decorateAlignments(alignmentSet, launchContext
     }
   });
 
-  // Now that the outcomes are populated with the decorator, sort by title,
-  // filter out those that we need to hide, then sort by decorator.
+  // Now that the outcomes are populated with the decorator, sort by title then sort by decorator.
+  // The various components will need to filter out those that are hidden, but they need to be
+  // returned and stored in the redux store to prevent them from getting unaligned when the
+  // alignment set is mutated.
   alignmentSet.outcomes = outcomes.sort(function (a, b) {
     var titleA = a && a.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     var titleB = b && b.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     return titleA.localeCompare(titleB);
-  }).filter(function (outcome) {
-    return outcome.decorator !== HIDE;
   }).sort(byDecorator);
   return alignmentSet;
 };

package/lib/translated/nb/services/__tests__/OutcomesService.test.js

@@ -613,7 +613,8 @@ describe('OutcomesService', function () {
         var alignments = getResponse('course', courseUuid, false);
         mockGet('/api/alignment_sets/baz?includes[]=outcomes&includes[]=friendly_description&includes[]=source_context_info&context_uuid=alphabeta&launch_context=launchContext', alignments);
         return subject.getAlignments(host, jwt, 'baz', 'alphabeta', 'launchContext', false).then(function (result) {
-          (0, _chai.expect)(result.outcomes).to.have.length(0);
+          (0, _chai.expect)(result.outcomes).to.have.length(1);
+          (0, _chai.expect)(result.outcomes[0].decorator).to.equal('HIDE');
         });
       });
       it('when outcome not in the course, decorate with not in the course', function () {
@@ -761,14 +762,14 @@ describe('OutcomesService', function () {
       mockGet('/api/alignment_sets/baz?includes[]=outcomes&includes[]=friendly_description&includes[]=source_context_info&context_uuid=alphabeta&launch_context=launchContext', alignments);
       return subject.getAlignments(host, jwt, 'baz', 'alphabeta', 'launchContext', false).then(function (result) {
         // 4, 2, 6 are in launch context (4 2 6 because 'Course...', 'Root...', 'Sub..' alphabetically)
-        // 3 is a course outcome not in launch context, so it is filtered out
         // 1 and 5  are account outcomes not in the course
+        // 3 is a course outcome not in launch context, so it will be hidden
         (0, _chai.expect)(result.outcomes.map(function (o) {
           return o.id;
-        })).to.deep.equal(['4', '2', '6', '1', '5']);
+        })).to.deep.equal(['4', '2', '6', '1', '5', '3']);
         (0, _chai.expect)(result.outcomes.map(function (o) {
           return o.decorator;
-        })).to.deep.equal([void 0, void 0, void 0, 'NOT_IN_COURSE', 'NOT_IN_COURSE']);
+        })).to.deep.equal([void 0, void 0, void 0, 'NOT_IN_COURSE', 'NOT_IN_COURSE', 'HIDE']);
       });
     });
     it('sort order for when launch context is sub-account', function () {

package/lib/translated/nb/store/OutcomePicker/__tests__/actions.test.js

@@ -90,6 +90,61 @@ describe('OutcomePicker/actions', function () {
       });
     });
   });
+  describe('loadSelectedLaunchContext', function () {
+    it('does not setSelectedLaunchContext when there is no launch context', function () {
+      var store = (0, _createMockStore.default)((0, _immutable.Map)((0, _immutable.fromJS)({
+        scopeForTest: {
+          alignments: {}
+        }
+      })));
+      store.dispatch(actions.loadSelectedLaunchContext());
+      (0, _chai.expect)(store.getActions().length).to.equal(0);
+    });
+    it('does not setSelectedLaunchContext when launch context is empty', function () {
+      var store = (0, _createMockStore.default)((0, _immutable.Map)((0, _immutable.fromJS)({
+        scopeForTest: {
+          alignments: {
+            launchContexts: []
+          }
+        }
+      })));
+      store.dispatch(actions.loadSelectedLaunchContext());
+      (0, _chai.expect)(store.getActions().length).to.equal(0);
+    });
+    it('does not setSelectedLaunchContext when already selected', function () {
+      var store = (0, _createMockStore.default)((0, _immutable.Map)((0, _immutable.fromJS)({
+        scopeForTest: {
+          alignments: {},
+          OutcomePicker: {
+            selectedLaunchContext: {
+              uuid: 'foo',
+              name: 'Dave University'
+            }
+          }
+        }
+      })));
+      store.dispatch(actions.loadSelectedLaunchContext());
+      (0, _chai.expect)(store.getActions().length).to.equal(0);
+    });
+    it('setSelectedLaunchContext when launch context is not empty', function () {
+      var store = (0, _createMockStore.default)((0, _immutable.Map)((0, _immutable.fromJS)({
+        scopeForTest: {
+          alignments: {
+            launchContexts: [{
+              uuid: 'foo',
+              name: 'Dave University'
+            }]
+          }
+        }
+      })));
+      store.dispatch(actions.loadSelectedLaunchContext());
+      (0, _chai.expect)(store.getActions().length).to.equal(1);
+      (0, _chai.expect)(store.getActions()[0]).to.deep.equal(scopedActions.setSelectedLaunchContext({
+        uuid: 'foo',
+        name: 'Dave University'
+      }));
+    });
+  });
   describe('changeSelectedLaunchContext', function () {
     it('updates selected launch context', function () {
       var store = (0, _createMockStore.default)();

package/lib/translated/nb/store/OutcomePicker/actions.js

@@ -28,10 +28,9 @@ var loadSelectedLaunchContext = exports.loadSelectedLaunchContext = function loa
   return function (dispatch, getState, _arg, scope) {
     var selected = (0, _selectors3.getSelectedLaunchContext)(getState(), scope);
     var launchContexts = (0, _selectors2.getLaunchContexts)(getState(), scope);
-    if (launchContexts === null || selected) {
-      return Promise.resolve();
+    if (launchContexts && launchContexts.length > 0 && !selected) {
+      dispatch(setSelectedLaunchContext(launchContexts[0]));
     }
-    return dispatch(setSelectedLaunchContext(launchContexts[0]));
   };
 };
 var loadOutcomePicker = exports.loadOutcomePicker = function loadOutcomePicker() {

package/lib/translated/nb/store/alignments/__tests__/actions.test.js

@@ -2,6 +2,7 @@
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _immutable = require("immutable");
 var _chai = require("chai");
@@ -184,6 +185,51 @@ describe('alignments/actions', function () {
         return null;
       });
     });
+    it('does not set launch contexts to empty array ', function () {
+      var service = {
+        getAlignments: _sinon.default.stub().returns({
+          guid: 'guid',
+          outcomes: []
+        })
+      };
+      var store = (0, _createMockStore.default)((0, _immutable.Map)(), service);
+      return store.dispatch(actions.loadAlignments('hexadecimal', [])).then(function () {
+        var _iterator = (0, _createForOfIteratorHelper2.default)(store.getActions()),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var action = _step.value;
+            (0, _chai.expect)(action.type).to.not.equal('SET_LAUNCH_CONTEXTS');
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        (0, _chai.expect)(service.getAlignments.calledOnce).to.be.true;
+        return null;
+      });
+    });
+    it('sets Launch context if one is supplied', function () {
+      var service = {
+        getAlignments: _sinon.default.stub().returns({
+          guid: 'guid',
+          outcomes: []
+        })
+      };
+      var store = (0, _createMockStore.default)((0, _immutable.Map)(), service);
+      return store.dispatch(actions.loadAlignments('hexadecimal', [{
+        uuid: 'foo',
+        name: 'Dave University'
+      }])).then(function () {
+        (0, _chai.expect)(store.getActions()[0]).to.deep.equal(scopedActions.setLaunchContexts([{
+          uuid: 'foo',
+          name: 'Dave University'
+        }]));
+        (0, _chai.expect)(service.getAlignments.calledOnce).to.be.true;
+        return null;
+      });
+    });
     it('calls outcome service with launchContext to load alignments', function () {
       var service = {
         getAlignments: _sinon.default.stub().returns(Promise.resolve())
@@ -199,6 +245,19 @@ describe('alignments/actions', function () {
         }
       })), service);
       return store.dispatch(actions.loadAlignments('hexadecimal')).then(function () {
+        // launch contexts is not passed to loadAlignments. Instead, it is read from the store.
+        var _iterator2 = (0, _createForOfIteratorHelper2.default)(store.getActions()),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var action = _step2.value;
+            (0, _chai.expect)(action.type).to.not.equal('SET_LAUNCH_CONTEXTS');
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
         (0, _chai.expect)(service.getAlignments.calledOnce).to.be.true;
         (0, _chai.expect)(service.getAlignments.getCall(0).args).to.include('foo');
         return null;

package/lib/translated/nb/store/alignments/__tests__/reducers.test.js

@@ -21,6 +21,17 @@ describe('alignments/reducers', function () {
     }],
     openAlignmentId: 10
   });
+  describe('launchContexts', function () {
+    it('is updated by SET_LAUNCH_CONTEXTS', function () {
+      var _newState$get;
+      var newLaunchContexts = [{
+        uuid: 'foo',
+        name: 'Dave University'
+      }];
+      var newState = reduce(state, _constants.SET_LAUNCH_CONTEXTS, newLaunchContexts);
+      (0, _chai.expect)((_newState$get = newState.get('launchContexts')) === null || _newState$get === void 0 ? void 0 : _newState$get.toJS()).to.deep.equal(newLaunchContexts);
+    });
+  });
   describe('alignedOutcomes', function () {
     it('is updated by SET_ALIGNMENTS', function () {
       var newAlignments = {

package/lib/translated/nb/store/alignments/__tests__/selectors.test.js

@@ -69,6 +69,30 @@ describe('alignments/selectors', function () {
       var count = (0, _selectors.getAlignedOutcomeCount)(state, 'anotherScope');
       (0, _chai.expect)(count).to.equal(0);
     });
+    it('does not count hidden outcomes', function () {
+      var newState = (0, _immutable.fromJS)({
+        scopeForTest: {
+          alignments: {
+            alignedOutcomes: [{
+              id: '102',
+              label: 'l2',
+              title: 't1',
+              decorator: 'HIDE'
+            }, {
+              id: '101',
+              label: 'l1',
+              title: 't2'
+            }, {
+              id: '103',
+              label: 'l3',
+              title: 't3'
+            }]
+          }
+        }
+      });
+      var count = (0, _selectors.getAlignedOutcomeCount)(newState, 'scopeForTest');
+      (0, _chai.expect)(count).to.equal(2);
+    });
   });
   describe('makeIsOpen', function () {
     it('returns true if alignment id is openAlignmentId', function () {

package/lib/translated/nb/store/alignments/actions.js

@@ -69,7 +69,7 @@ var loadAlignments = exports.loadAlignments = function loadAlignments(alignmentS
     if (alignmentSetId && (0, _selectors.getOutcomeAlignmentSetId)(getState(), scope) === alignmentSetId) {
       return Promise.resolve();
     }
-    if (launchContexts) {
+    if (launchContexts && launchContexts.length > 0) {
       dispatch(loadLaunchContexts(launchContexts));
       dispatch((0, _actions2.loadSelectedLaunchContext)());
     }

package/lib/translated/nb/store/alignments/selectors.js

@@ -76,7 +76,9 @@ var getAlignedOutcomeIds = exports.getAlignedOutcomeIds = (0, _reselect.createSe
 });
 function getAlignedOutcomeCount(state, scope) {
   if (state && restrict(state, scope).get('alignedOutcomes')) {
-    return restrict(state, scope).get('alignedOutcomes').size;
+    return restrict(state, scope).get('alignedOutcomes').filter(function (outcome) {
+      return outcome.toJS().decorator !== 'HIDE';
+    }).size;
   }
   return 0;
 }

package/lib/translated/nb-x-k12/components/Alignment/__tests__/index.test.js

@@ -87,11 +87,11 @@ describe('Alignment', function () {
       var pill = wrapper.find(_uiPill.Pill).last();
       (0, _chai.expect)(pill).to.have.length(0);
     });
-    it('does not decorate if decorator is HIDE', function () {
+    it('does not render if decorator is HIDE', function () {
       var props = getDecoratedOutcome('HIDE');
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-      var pill = wrapper.find(_uiPill.Pill).last();
-      (0, _chai.expect)(pill).to.have.length(0);
+      var text = wrapper.find(_uiText.Text).last();
+      (0, _chai.expect)(text).to.have.length(0);
     });
     it('decorates if decorator is SUB_ACCOUNT_OUTCOME', function () {
       var props = getDecoratedOutcome('SUB_ACCOUNT_OUTCOME');

package/lib/translated/nb-x-k12/components/Alignment/index.js

@@ -110,7 +110,7 @@ var Alignment = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defaul
       if (index !== 0) {
         itemStyle.push(this.props.styles.itemSeparator);
       }
-      return (0, _emotion.jsx)("li", {
+      return outcome.decorator !== 'HIDE' && (0, _emotion.jsx)("li", {
         css: itemStyle,
         "data-automation": "outcomeAlignment__item"
       }, (0, _emotion.jsx)("span", {

package/lib/translated/nb-x-k12/components/AlignmentList/__tests__/index.test.js

@@ -220,4 +220,30 @@ describe('AlignmentList', function () {
       return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     });
   });
+  describe('outcome decoration', function () {
+    it('behaves as empty if all outcomes are hidden', function () {
+      var props = makeProps({
+        alignedOutcomes: [{
+          id: '1',
+          label: 'A1',
+          title: 'tA1',
+          decorator: 'HIDE'
+        }, {
+          id: '2',
+          label: 'B2',
+          title: 'tB2',
+          decorator: 'HIDE'
+        }, {
+          id: '3',
+          label: 'C3',
+          title: 'tC3',
+          decorator: 'HIDE'
+        }]
+      });
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard)).to.have.length(1);
+    });
+  });
 });

package/lib/translated/nb-x-k12/components/AlignmentList/index.js

@@ -200,10 +200,9 @@ var AlignmentList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     }
   }, {
     key: "renderList",
-    value: function renderList() {
+    value: function renderList(filteredOutcomes) {
       var _this3 = this;
       var _this$props2 = this.props,
-        alignedOutcomes = _this$props2.alignedOutcomes,
         _viewAlignment = _this$props2.viewAlignment,
         closeAlignment = _this$props2.closeAlignment,
         isOpen = _this$props2.isOpen,
@@ -214,7 +213,7 @@ var AlignmentList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
         scope = _this$props2.scope;
       return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("ul", {
         css: this.props.styles.list
-      }, alignedOutcomes.map(function (outcome, index) {
+      }, filteredOutcomes.map(function (outcome, index) {
         return (0, _emotion.jsx)(_index.default, {
           key: outcome.id,
           ref: function ref(o) {
@@ -262,8 +261,11 @@ var AlignmentList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     key: "renderBody",
     value: function renderBody() {
       var alignedOutcomes = this.props.alignedOutcomes;
-      if (alignedOutcomes && alignedOutcomes.length > 0) {
-        return this.renderList();
+      var filteredOutcomes = alignedOutcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
+      if (filteredOutcomes && filteredOutcomes.length > 0) {
+        return this.renderList(filteredOutcomes);
       } else {
         return this.renderEmpty();
       }

package/lib/translated/nb-x-k12/components/OutcomeLabels/__tests__/index.test.js

@@ -55,6 +55,28 @@ describe('OutcomeLabels', function () {
     var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
     (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }, {
+        id: '2',
+        label: 'DEF',
+        title: 'Title2',
+        decorator: 'HIDE'
+      }, {
+        id: '3',
+        label: 'GHI',
+        title: 'Title3',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
   });

package/lib/translated/nb-x-k12/components/OutcomeLabels/index.js

@@ -47,6 +47,9 @@ var OutcomeLabels = exports.default = (_dec = (0, _emotion.withStyle)(_styles.de
       var _this$props = this.props,
         outcomes = _this$props.outcomes,
         emptyText = _this$props.emptyText;
+      var filteredOutcomes = outcomes.filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
+      });
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeLabel__alignedOutcomes",
@@ -57,8 +60,8 @@ var OutcomeLabels = exports.default = (_dec = (0, _emotion.withStyle)(_styles.de
         size: "small"
       }, (0, _emotion.jsx)("div", {
         css: this.props.styles.text
-      }, outcomes.length === 0 ? emptyText : outcomes.map(function (o, i) {
-        return _this2.wrap(o.title, i < outcomes.length - 1);
+      }, filteredOutcomes.length === 0 ? emptyText : filteredOutcomes.map(function (o, i) {
+        return _this2.wrap(o.title, i < filteredOutcomes.length - 1);
       }))));
     }
   }]);

package/lib/translated/nb-x-k12/components/OutcomeTags/__tests__/index.test.js

@@ -25,6 +25,11 @@ describe('OutcomeTags', function () {
       id: '3',
       label: 'GHI',
       title: 'Title3'
+    }, {
+      id: '4',
+      label: 'JKL',
+      title: 'Title4',
+      decorator: 'HIDE'
     }];
     return Object.assign({
       outcomes: outcomes,
@@ -58,6 +63,14 @@ describe('OutcomeTags', function () {
     (0, _chai.expect)(text.match(/Title2/)).to.be.truthy;
     (0, _chai.expect)(text.match(/Title3/)).to.be.truthy;
   });
+  it('does not render outcome titles for hidden outcomes', function () {
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var text = wrapper.text();
+    (0, _chai.expect)(text.match(/Title1/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title2/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title3/)).to.be.truthy;
+    (0, _chai.expect)(text.match(/Title4/)).to.be.falsey;
+  });
   it('does not render outcome labels', function () {
     var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     var text = wrapper.text();
@@ -72,6 +85,18 @@ describe('OutcomeTags', function () {
     var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
     (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
   });
+  it('renders default text when all outcomes are hidden', function () {
+    var props = makeProps({
+      outcomes: [{
+        id: '1',
+        label: 'ABC',
+        title: 'Title1',
+        decorator: 'HIDE'
+      }]
+    });
+    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text().match(/No Outcomes are currently selected/)).to.be.truthy;
+  });
   it('focuses on the prior tag when current tag deleted', function (done) {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     setTimeout(function () {

package/lib/translated/nb-x-k12/components/OutcomeTags/index.js

@@ -54,6 +54,8 @@ var OutcomeTags = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defa
       var outcomes = this.props.outcomes;
       return outcomes.sort(function (a, b) {
         return a.title ? a.title.localeCompare(b.title) : -1;
+      }).filter(function (outcome) {
+        return outcome.decorator !== 'HIDE';
       });
     }
   }, {
@@ -110,6 +112,7 @@ var OutcomeTags = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defa
   }, {
     key: "render",
     value: function render() {
+      var sortedOutcomes = this.getSortedOutcomes();
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.line,
         "data-automation": "outcomeTag__alignedOutcomes"
@@ -117,7 +120,7 @@ var OutcomeTags = exports.default = (_dec = (0, _emotion.withStyle)(_styles.defa
         size: "medium"
       }, (0, _emotion.jsx)(_uiIcons.IconOutcomesLine, null)), (0, _emotion.jsx)("div", {
         css: this.props.styles.tags
-      }, this.props.outcomes.length ? this.renderTags() : this.renderEmpty()));
+      }, sortedOutcomes.length ? this.renderTags() : this.renderEmpty()));
     }
   }]);
   OutcomeTags.displayName = "OutcomeTags";

package/lib/translated/nb-x-k12/demo.js

@@ -253,6 +253,7 @@ var DemoAlignment = function DemoAlignment(props) {
     artifactType: artifactType,
     artifactId: artifactId,
     contextUuid: contextUuid,
+    launchContexts: launchContexts,
     host: outcomesHost,
     jwt: jwt
   })), /*#__PURE__*/_react.default.createElement(_index.OutcomeList, {

package/lib/translated/nb-x-k12/services/OutcomesService.js

@@ -98,14 +98,14 @@ var decorateAlignments = function decorateAlignments(alignmentSet, launchContext
     }
   });
 
-  // Now that the outcomes are populated with the decorator, sort by title,
-  // filter out those that we need to hide, then sort by decorator.
+  // Now that the outcomes are populated with the decorator, sort by title then sort by decorator.
+  // The various components will need to filter out those that are hidden, but they need to be
+  // returned and stored in the redux store to prevent them from getting unaligned when the
+  // alignment set is mutated.
   alignmentSet.outcomes = outcomes.sort(function (a, b) {
     var titleA = a && a.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     var titleB = b && b.title || 'ZZZZZZZZZZZZ'; // treat null as really large
     return titleA.localeCompare(titleB);
-  }).filter(function (outcome) {
-    return outcome.decorator !== HIDE;
   }).sort(byDecorator);
   return alignmentSet;
 };