Have the token respect flags on the service.

app/subapps/browser/browser.js

@@ -200,9 +200,9 @@ YUI.add('subapp-browser', function(Y) {
       this._registerSubappHelpers();
 
       // Setup event handlers.
+      // These event handlers come from app/subapps/browser/events-extension.js
       this.on('*:changeState', this._onChangeState, this);
       this.on('*:serviceDeployed', this._onServiceDeployed, this);
-      // These event handlers come from app/subapps/browser/events-extension.js
       this.on('*:highlight', this._onHighlight, this);
       this.on('*:unhighlight', this._onUnhighlight, this);
       this.on('*:fade', this._onFade, this);

app/subapps/browser/views/added-service-token.js

@@ -105,6 +105,13 @@ YUI.add('juju-added-service-token', function(Y) {
           content;
       // Need to convert the model to a POJO for the template.
       attrs.service = attrs.service.getAttrs();
+      // Override the local flags with the service flags.
+      // XXX kadams54, 05/11/14 - Note that this is a temporary fix. Far better
+      // would be to just use the service flags directly, but that's a
+      // far-reaching change that we want to tackle at a later point.
+      attrs.highlight = attrs.service.highlight;
+      attrs.visible = !attrs.service.fade;
+      // Render the template.
       content = this.template(attrs);
       container.setHTML(content);
       // Make the token easily selectable in the DOM.

test/test_added_services_view.js

@@ -144,6 +144,36 @@ describe('added services view', function() {
           view.get('container').one('.environment-counts').get('_yuid'),
           'views template was re-rendered');
     });
+
+    it('respects existing flags on the service', function() {
+      var db = view.get('db'),
+          serviceTokens = view.get('serviceTokens'),
+          container = view.get('container');
+      var idFoo = 'service-foo',
+          idBar = 'service-bar',
+          idBaz = 'service-baz',
+          serviceFoo = db.services.getById(idFoo),
+          serviceBar = db.services.getById(idBar),
+          serviceBaz = db.services.getById(idBaz);
+      serviceFoo.set('highlight', true);
+      serviceBar.set('fade', true);
+      view.render();
+      var tokenFoo = container.one('.token[data-id="' + idFoo + '"]'),
+          tokenBar = container.one('.token[data-id="' + idBar + '"]'),
+          tokenBaz = container.one('.token[data-id="' + idBaz + '"]');
+      assert.notEqual(tokenFoo.one('.action[data-action="fade"]'), null,
+                      'Fade button not shown');
+      assert.notEqual(tokenFoo.one('.action[data-action="unhighlight"]'), null,
+                      'Unhighlight button not shown');
+      assert.notEqual(tokenBar.one('.action[data-action="show"]'), null,
+                      'Show button not shown');
+      assert.notEqual(tokenBar.one('.action[data-action="highlight"]'), null,
+                      'Highlight button not shown');
+      assert.notEqual(tokenBaz.one('.action[data-action="fade"]'), null,
+                      'Fade button not shown');
+      assert.notEqual(tokenBaz.one('.action[data-action="highlight"]'), null,
+                      'Highlight button not shown');
+    });
   });
 
   describe('bind events', function() {