Merge lp:~rharding/juju-gui/deploy-quicksearch into lp:juju-gui/experimental

[Richard Harding]

Provide a 'deploy' button in quicksearch results.

- Add the control to the tokens for both charms and bundles
- Wire up a new event that the search widget can fire EVT_DEPLOY
- Make views that extend view.js (fullscree/sidebar) watch for that event and
build a proper deploy command.
- Make sure those views get access to the deploy and bundleDeploy helpers from
the browser.js
- Deploying does not actual perform a selection so no search or details takes
place. It's an alternate behavior for quicksearch.

Several drive-by fixes for things. Documented in the reviewer comments.

QA:

The button is feature flagged due to the fact that this quick deploy doesn't
involve the charm cache and causes the inspector to 'hang' for a sec when you
hit the deploy button. It's not an ideal experience.

http://gui:8888/:flags:/searchDeploy

Search for apa and then click on the + next to apache2. It should deploy to
the canvas. No text is in the quicksearch box, no charm highlighted, etc.

You can also QA this with a bundle.

http://gui:8888/:flags:/searchDeploy/charmworldv3/

Now enter "TestB" and get the TestBundle result. Press the + to deploy the
bundle.

https://codereview.appspot.com/18920045/

[Richard Harding (rharding)]

Reviewers: mp+193059_code.launchpad.net,

Message:
Please take a look.

Description:
Provide a 'deploy' button in quicksearch results.

- Add the control to the tokens for both charms and bundles
- Wire up a new event that the search widget can fire EVT_DEPLOY
- Make views that extend view.js (fullscree/sidebar) watch for that
event and
build a proper deploy command.
- Make sure those views get access to the deploy and bundleDeploy
helpers from
the browser.js
- Deploying does not actual perform a selection so no search or details
takes
place. It's an alternate behavior for quicksearch.

Several drive-by fixes for things. Documented in the reviewer comments.

QA:

The button is feature flagged due to the fact that this quick deploy
doesn't
involve the charm cache and causes the inspector to 'hang' for a sec
when you
hit the deploy button. It's not an ideal experience.

http://gui:8888/:flags:/searchDeploy

Search for apa and then click on the + next to apache2. It should deploy
to
the canvas. No text is in the quicksearch box, no charm highlighted,
etc.

You can also QA this with a bundle.

http://gui:8888/:flags:/searchDeploy/charmworldv3/

Now enter "TestB" and get the TestBundle result. Press the + to deploy
the
bundle.

https://code.launchpad.net/~rharding/juju-gui/deploy-quicksearch/+merge/193059

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/18920045/

Affected files (+320, -20 lines):
   A [revision details]
   A app/assets/images/search_add_to_canvas.png
   M app/subapps/browser/browser.js
   M app/subapps/browser/views/bundle.js
   M app/subapps/browser/views/entity-base.js
   M app/subapps/browser/views/view.js
   M app/templates/bundle-token.handlebars
   M app/templates/charm-token.handlebars
   M app/views/utils.js
   M app/widgets/charm-search.js
   M app/widgets/token.js
   M lib/views/browser/bws-searchbox.less
   M lib/views/browser/token.less
   M test/test_browser_app.js
   M test/test_browser_search_widget.js
   M test/test_bundle_details_view.js
   M test/test_token.js

[Richard Harding (rharding)]

Review comments

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode542
app/subapps/browser/browser.js:542: extraCfg.deploy =
this.get('deployBundle');
Only set one deploy method on the details view. They can share the same
code for this. Just the deploy method needs to be different.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode708
app/subapps/browser/browser.js:708: extraCfg.deploy =
this.get('deploy');
pass the deploy methods into the sidebar/fullscreen views so that they
can use quicksearch to perform a deploy (vs the typical path from
details view or drag/drop)

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode800
app/subapps/browser/browser.js:800: deployBundle:
this.get('deployBundle')
See above

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode1165
app/subapps/browser/browser.js:1165: deployBundle: {},
document all the things!

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/bundle.js
File app/subapps/browser/views/bundle.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/bundle.js#newcode76
app/subapps/browser/views/bundle.js:76:
this.get('deploy')(bundle.get('data'));
so this changes to just deploy vs a diff method

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js
File app/subapps/browser/views/view.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js#newcode93
app/subapps/browser/views/view.js:93: );
no idea why there were two different "if search" checks. Block them into
one.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js#newcode101
app/subapps/browser/views/view.js:101: this.search.on(
this is the new event the search-widget grew to handle the deploy
selection.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js#newcode140
app/subapps/browser/views/view.js:140: _deployEntity: function(ev) {
mostly just sharing what the details views for bundles/charms do.

https://codereview.appspot.com/18920045/diff/20001/app/templates/bundle-token.handlebars
File app/templates/bundle-token.handlebars (right):

https://codereview.appspot.com/18920045/diff/20001/app/templates/bundle-token.handlebars#newcode4
app/templates/bundle-token.handlebars:4: {{#if deployButton}}
the token only displays this when requested. The search widget passes
this in for use and other token uses don't care.

https://codereview.appspot.com/18920045/diff/20001/app/templates/bundle-token.handlebars#newcode5
app/templates/bundle-token.handlebars:5: {{#ifFlag 'searchDeploy'}}
we only feature flag the UX since it's a UX driven feature. Simpler than
FF'ing all the code.

https://codereview.appspot.com/18920045/diff/20001/app/views/utils.js
File app/views/utils.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/views/utils.js#newcode1567
app/views/utils.js...

[Gary Poster (gary)]

QA thought: what is the expected/desired behavior of the search dropdown
when the deploy button is clicked? I'm expecting that it should close.

https://codereview.appspot.com/18920045/

[Richard Harding (rharding)]

On 2013/10/29 18:41:03, gary.poster wrote:
> QA thought: what is the expected/desired behavior of the search
dropdown when
> the deploy button is clicked? I'm expecting that it should close.

It should close when you click the deploy button. If it's not then I'd
be curious what browser/search/selection you used. It does close in my
QA here.

Be aware that the input box is still 'live' so if you click into it,
mouse over it, you might get it to pop back?

https://codereview.appspot.com/18920045/

[Gary Poster (gary)]

LGTM with comments; thank you!

Gary

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode1165
app/subapps/browser/browser.js:1165: deployBundle: {},
On 2013/10/29 18:31:54, rharding wrote:
> document all the things!

:-) cool

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/bundle.js
File app/subapps/browser/views/bundle.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/bundle.js#newcode76
app/subapps/browser/views/bundle.js:76:
this.get('deploy')(bundle.get('data'));
On 2013/10/29 18:31:54, rharding wrote:
> so this changes to just deploy vs a diff method

The only downside to the new approach is that sometimes we separate the
two names (deploy vs deployBundle) and sometimes we merge them. That
makes it just a bit harder to figure out what's going on while reading.
In your shoes, I'd be tempted to rename the charm-only deploy function
to "deployCharm" so as to make a parallel with "deployBundle" and a
contrast with the more mutable "deploy". I am sure there are other
solutions, some better than this one. Moreover, this is just a
suggestion. What you have done is OK with me as is, and an improvement.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js
File app/subapps/browser/views/view.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js#newcode93
app/subapps/browser/views/view.js:93: );
On 2013/10/29 18:31:54, rharding wrote:
> no idea why there were two different "if search" checks. Block them
into one.

Heh. cool.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/views/view.js#newcode318
app/subapps/browser/views/view.js:318: deploy: {},
So this is the one I'd call deployCharm.

https://codereview.appspot.com/18920045/diff/20001/app/templates/bundle-token.handlebars
File app/templates/bundle-token.handlebars (right):

https://codereview.appspot.com/18920045/diff/20001/app/templates/bundle-token.handlebars#newcode5
app/templates/bundle-token.handlebars:5: {{#ifFlag 'searchDeploy'}}
On 2013/10/29 18:31:54, rharding wrote:
> we only feature flag the UX since it's a UX driven feature. Simpler
than FF'ing
> all the code.

Cool.

https://codereview.appspot.com/18920045/diff/20001/app/views/utils.js
File app/views/utils.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/views/utils.js#newcode1567
app/views/utils.js:1567: * {{#ifFlag 'flag_name'}} {{/ifFlag}}
On 2013/10/29 18:31:54, rharding wrote:
> Document the real usage.

Uh-oh, the doc string is becoming dangerously close to being helpful.
;-)

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js
File app/widgets/charm-search.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode273
app/widgets/charm-search.js:273: this.ac._onItemClick = function(ev) {
This comment, or a variation of it, deserves to be in the code, IMO.

https://codereview.appspot.com/18920045/diff/20001...

[Gary Poster (gary)]

On 2013/10/29 18:42:45, rharding wrote:
> On 2013/10/29 18:41:03, gary.poster wrote:
> > QA thought: what is the expected/desired behavior of the search
dropdown when
> > the deploy button is clicked? I'm expecting that it should close.

> It should close when you click the deploy button. If it's not then I'd
be
> curious what browser/search/selection you used. It does close in my QA
here.

> Be aware that the input box is still 'live' so if you click into it,
mouse over
> it, you might get it to pop back?

Sounds good. I hadn't qa'd it--you said Jeff would do that. I was
thinking through expectations before reviewing and hoping you agreed
with me. After I reviewed the code I saw you agreed with me. Thanks!

https://codereview.appspot.com/18920045/

[Jeff Pihach (hatch)]

Thanks for this feature! I'll be doing the QA now, just wanted to get my
comments landed so we can discuss.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode541
app/subapps/browser/browser.js:541: if (entityId.indexOf('bundle') !==
-1) {
Because everywhere else that uses 'deploy' is using it for only charms
and 'deployBundle' for bundles, I feel that this adds in a level of
complexity that isn't easy to follow. I don't see any benefit to this
change.

https://codereview.appspot.com/18920045/diff/20001/app/subapps/browser/browser.js#newcode1165
app/subapps/browser/browser.js:1165: deployBundle: {},
Thanks for adding these in!

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js
File app/widgets/charm-search.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode273
app/widgets/charm-search.js:273: this.ac._onItemClick = function(ev) {
We should subclass the ac widget vs doing this monkeypatch. otherwise it
will be difficult to debug if the api changes down the road when we
upgrade YUI.

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode327
app/widgets/charm-search.js:327: this.hide();
You have probably looked into this already, but just in case...Does this
shut down any pending ac requests to avoid the result list from popping
up in the future? I'm just a little concerned that we are hiding the
list element but keeping the ac functional in the background since we
are short circuiting the real code.

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode331
app/widgets/charm-search.js:331: var itemNode = ev.currentTarget;
Instead of simply copying these methods a better approach would simply
be:

this._ac.prototype._onItemClick(ev);

or if you subclass it (I think):

MyNewAutocomplete.superclass.constructor._onItemClick(ev).bind(this);

This way any changes to the parent method won't require us to update
this part of the conditional.

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode373
app/widgets/charm-search.js:373: id = ev.result.raw.charm.id;
Thanks for this fix!

https://codereview.appspot.com/18920045/diff/20001/test/test_browser_app.js
File test/test_browser_app.js (right):

https://codereview.appspot.com/18920045/diff/20001/test/test_browser_app.js#newcode182
test/test_browser_app.js:182: fakeStore = new
Y.juju.charmworld.APIv2({});
Shouldn't we also have tests here(and below) for the v3 api?

https://codereview.appspot.com/18920045/

[Jeff Pihach (hatch)]

QA OK

Love this functionality, works great - just wish the button was a little
more clear as to its purpose and that it would be bigger so it's easier
to click.

https://codereview.appspot.com/18920045/

[Jeff Pihach (hatch)]

LGTM as per our discussion on IRC. Thanks for this branch, great
functionality.

https://codereview.appspot.com/18920045/

[lp:~rharding/juju-gui/deploy-quicksearch]

1167. By Richard Harding on 2013-10-30

Replace deploy with specific calls

1168. By Richard Harding on 2013-10-30

Code review tweaks

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js
File app/widgets/charm-search.js (right):

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode278
app/widgets/charm-search.js:278: if
(ev.target.hasClass('search_add_to_canvas')) {
On 2013/10/29 19:09:46, gary.poster wrote:
> I'm guessing we can't have an event registration for
li.search_add_to_canvas or
> whatever that simply catches the event first because it is a more
specific
> selector, and then calls ev.halt()?

> If not, I suggest changing the body of this block to something like
the
> following.

> this.hide();
> this.handleDeploy(ev.target.getData());

> Then handleDeploy can look at the data and do the right thing (that
is, the code
> you have below) within its own code. That feels like a readability
improvement
> to me.

> Alternatively, you could expand this to divide up on the basis of
bundle vs
> charm.

Agreed and in Jeff's review and discussion we agreed that this version
of 'autocomplete' has gotten complex enough to be it's own module.
Three's a card to clean this up. For a start I've moved the logic into
_onDeploy(ev) and called that. It's what we'll have when moved to its
own module.

https://codereview.appspot.com/18920045/diff/20001/app/widgets/charm-search.js#newcode327
app/widgets/charm-search.js:327: this.hide();
On 2013/10/29 19:21:51, jeff.pihach wrote:
> You have probably looked into this already, but just in case...Does
this shut
> down any pending ac requests to avoid the result list from popping up
in the
> future? I'm just a little concerned that we are hiding the list
element but
> keeping the ac functional in the background since we are short
circuiting the
> real code.

No, that'll have to be a new feature. From what I can tell, there's not
currently request tracking/killing in AC.

https://codereview.appspot.com/18920045/diff/20001/test/test_browser_app.js
File test/test_browser_app.js (right):

https://codereview.appspot.com/18920045/diff/20001/test/test_browser_app.js#newcode182
test/test_browser_app.js:182: fakeStore = new
Y.juju.charmworld.APIv2({});
On 2013/10/29 19:09:46, gary.poster wrote:
> v2? expected v3, but doubt it matters.

True, it's a fakestore never called so it didn't matter. It would make
for one fewer instance to change during the conversion to making v3 live
though so I'll update.

https://codereview.appspot.com/18920045/

[lp:~rharding/juju-gui/deploy-quicksearch]

1169. By Richard Harding on 2013-10-30

QA on laptop, sync with trunk

1170. By Richard Harding on 2013-10-30

Merge with trunk

[Richard Harding (rharding)]

*** Submitted:

Provide a 'deploy' button in quicksearch results.

- Add the control to the tokens for both charms and bundles
- Wire up a new event that the search widget can fire EVT_DEPLOY
- Make views that extend view.js (fullscree/sidebar) watch for that
event and
build a proper deploy command.
- Make sure those views get access to the deploy and bundleDeploy
helpers from
the browser.js
- Deploying does not actual perform a selection so no search or details
takes
place. It's an alternate behavior for quicksearch.

Several drive-by fixes for things. Documented in the reviewer comments.

QA:

The button is feature flagged due to the fact that this quick deploy
doesn't
involve the charm cache and causes the inspector to 'hang' for a sec
when you
hit the deploy button. It's not an ideal experience.

http://gui:8888/:flags:/searchDeploy

Search for apa and then click on the + next to apache2. It should deploy
to
the canvas. No text is in the quicksearch box, no charm highlighted,
etc.

You can also QA this with a bundle.

http://gui:8888/:flags:/searchDeploy/charmworldv3/

Now enter "TestB" and get the TestBundle result. Press the + to deploy
the
bundle.

R=gary.poster, jeff.pihach
CC=
https://codereview.appspot.com/18920045

https://codereview.appspot.com/18920045/

=== modified file 'app/app.js'
--- app/app.js	2013-10-22 00:24:31 +0000
+++ app/app.js	2013-10-30 13:23:35 +0000
@@ -572,7 +572,7 @@
 
       // To use the new service Inspector use the deploy method
       // from the Y.juju.GhostDeployer extension
-      cfg.deploy = Y.bind(this.deployService, this);
+      cfg.deployService = Y.bind(this.deployService, this);
 
       cfg.deployBundle = this.deployBundle.bind(this);
 
@@ -595,7 +595,7 @@
       // When someone wants a charm to be deployed they fire an event and we
       // show the charm panel to configure/deploy the service.
       Y.on('initiateDeploy', function(charm, ghostAttributes) {
-        cfg.deploy(charm, ghostAttributes);
+        cfg.deployService(charm, ghostAttributes);
       }, this);
     },
 
 
=== added file 'app/assets/images/search_add_to_canvas.png'
 Binary files app/assets/images/search_add_to_canvas.png	1970-01-01 00:00:00 +0000 and app/assets/images/search_add_to_canvas.png	2013-10-30 13:23:35 +0000 differ
=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-10-23 00:12:47 +0000
+++ app/subapps/browser/browser.js	2013-10-30 13:23:35 +0000
@@ -536,10 +536,11 @@
         activeTab: this._viewState.hash,
         entityId: entityId,
         container: Y.Node.create('<div class="charmview"/>'),
-        deploy: this.get('deploy'),
-        deployBundle: this.get('deployBundle')
+        deployBundle: this.get('deployBundle'),
+        deployService: this.get('deployService')
       };
 
+
       // If the only thing that changed was the hash, then don't redraw. It's
       // just someone clicking a tab in the UI.
       if (this._details && this._hasStateChanged('hash') &&
@@ -696,7 +697,10 @@
       }
 
       if (this._hasStateChanged('viewmode') || forceFullscreen) {
-        var extraCfg = {};
+        var extraCfg = {
+          deployService: this.get('deployService'),
+          deployBundle: this.get('deployBundle')
+        };
         if (this._viewState.search || this._viewState.charmID) {
           extraCfg.withHome = true;
         }
@@ -789,7 +793,9 @@
       if (this._hasStateChanged('viewmode') || forceSidebar) {
         this._sidebar = new views.Sidebar(
             this._getViewCfg({
-              container: this.get('container')
+              container: this.get('container'),
+              deployService: this.get('deployService'),
+              deployBundle: this.get('deployBundle')
             }));
         this._sidebar.render();
         this._sidebar.addTarget(this);
@@ -1142,11 +1148,19 @@
          The "deploy" function prompts the user for service configuration and
          deploys a service.
 
-         @attribute deploy
+         @attribute deployService
          @default undefined
          @type {Function}
        */
-      deploy: {},
+      deployService: {},
+
+      /**
+       * @attribute deployBundle
+       * @default undefined
+       * @type {Function}
+       *
+       */
+      deployBundle: {},
 
       /**
         The default viewmode
 
=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-10-29 22:51:19 +0000
+++ app/subapps/browser/views/charm.js	2013-10-30 13:23:35 +0000
@@ -93,7 +93,7 @@
       ghostAttributes = {
         icon: this.get('store').iconpath(charm.get('storeId'))
       };
-      this.get('deploy').call(null, charm, ghostAttributes);
+      this.get('deployService').call(null, charm, ghostAttributes);
     },
 
     /**
 
=== modified file 'app/subapps/browser/views/entity-base.js'
--- app/subapps/browser/views/entity-base.js	2013-10-29 22:51:19 +0000
+++ app/subapps/browser/views/entity-base.js	2013-10-30 13:23:35 +0000
@@ -526,12 +526,28 @@
      * The "deploy" function prompts the user for service configuration and
      * deploys a service.
      *
-     * @attribute deploy
-     * @default undefined
-     * @type {Function}
-     *
-     */
-    deploy: {}
+     * The proper deploy function is provided from the browser subapp.
+     *
+     * @attribute deployService
+     * @default undefined
+     * @type {Function}
+     *
+     */
+    deployService: {},
+
+    /**
+     * The "deploy" function prompts the user for service configuration and
+     * deploys a service.
+     *
+     * The proper deploy function is provided from the browser subapp.
+     *
+     * @attribute deployBundle
+     * @default undefined
+     * @type {Function}
+     *
+     */
+    deployBundle: {}
+
   };
 
   ns.EntityBaseView = EntityBaseView;
 
=== modified file 'app/subapps/browser/views/view.js'
--- app/subapps/browser/views/view.js	2013-09-26 21:14:50 +0000
+++ app/subapps/browser/views/view.js	2013-10-30 13:23:35 +0000
@@ -91,14 +91,17 @@
             this.search.on(
                 this.search.EVT_SEARCH_CHANGED, this._searchChanged, this)
         );
-      }
 
-      if (this.search) {
         this.addEvent(
             this.search.on(
                 this.search.EVT_SEARCH_GOHOME, this._goHome, this)
         );
 
+        this.addEvent(
+            this.search.on(
+                this.search.EVT_DEPLOY, this._deployEntity, this)
+        );
+
         // If the showHome attribute is changed, update our html by adding the
         // with-home class to the widget.
         this.after('withHomeChange', function(ev) {
@@ -123,10 +126,39 @@
           }
         }, this);
       }
+
       this._bindViewmodeControls(this.controls);
     },
 
     /**
+     * Deploy either a bundle or charm given by the quicksearch widget.
+     *
+     * @method _deployEntity
+     * @param {Y.Event} ev the event object from the widget.
+     *
+     */
+    _deployEntity: function(ev) {
+      var entityType = ev.entityType,
+          entity = ev.data,
+          entityId = ev.id,
+          deployer;
+
+      if (entityType === 'bundle') {
+        deployer = this.get('deployBundle');
+        var bundle = new models.Bundle(entity);
+        deployer(bundle.get('data'));
+      } else {
+        deployer = this.get('deployService');
+        var charm = new models.Charm(entity);
+        var ghostAttributes;
+        ghostAttributes = {
+          icon: this.get('store').iconpath(charm.get('storeId'))
+        };
+        deployer.call(null, charm, ghostAttributes);
+      }
+    },
+
+    /**
      * Force a navigate event when the search widget says "Home" was clicked.
      *
      * @method _goHome
@@ -278,6 +310,22 @@
       charmID: {},
 
       /**
+       * @attribute deployService
+       * @default undefined
+       * @type {Function}
+       *
+       */
+      deployService: {},
+
+      /**
+       * @attribute deployBundle
+       * @default undefined
+       * @type {Function}
+       *
+       */
+      deployBundle: {},
+
+      /**
          The list of filters to be used in the rendering of the view.
 
          This is always handed down from the subapp, but default to something
@@ -339,6 +387,7 @@
     'juju-charm-store',
     'juju-browser-models',
     'juju-models',
+    'juju-bundle-models',
     'querystring-stringify',
     'view',
     'viewmode-controls'
 
=== modified file 'app/templates/bundle-token.handlebars'
--- app/templates/bundle-token.handlebars	2013-10-30 03:33:36 +0000
+++ app/templates/bundle-token.handlebars	2013-10-30 13:23:35 +0000
@@ -1,6 +1,13 @@
 {{! The token class is used by the deploy method in
     test/test_charm_running.py.  If you change this name, change the other
     one too! }}
+{{#if deployButton}}
+    {{#ifFlag 'searchDeploy'}}
+    <a class="deployButton bundle" href="">
+        <i class="sprite search_add_to_canvas" data-bundleid="{{id}}" title="Deploy bundle"></i>
+    </a>
+    {{/ifFlag}}
+{{/if}}
 <a href="/bundle/{{id}}"
    class="token {{size}}"
    data-charmid="/bundle/{{id}}">
 
=== modified file 'app/templates/charm-token.handlebars'
--- app/templates/charm-token.handlebars	2013-10-30 03:33:36 +0000
+++ app/templates/charm-token.handlebars	2013-10-30 13:23:35 +0000
@@ -1,6 +1,14 @@
 {{! The token class is used by the deploy method in
     test/test_charm_running.py.  If you change this name, change the other
     one too! }}
+
+{{#if deployButton}}
+    {{#ifFlag 'searchDeploy'}}
+    <a class="deployButton" href="">
+        <i class="sprite search_add_to_canvas" data-charmid="{{storeId}}" title="Deploy service"></i>
+    </a>
+    {{/ifFlag}}
+{{/if}}
 <a href="/{{storeId}}"
    class="token {{size}}"
      data-charmid="{{storeId}}">
@@ -21,6 +29,8 @@
     <span class="title">
         {{ name }}
     </span>
+
+
     {{#unless_eq size 'tiny'}}
       <span class="metadata">
           <div><strong>Deployed {{downloads}} {{pluralize 'time' downloads}}</strong></div>
 
=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-10-25 15:33:34 +0000
+++ app/views/utils.js	2013-10-30 13:23:35 +0000
@@ -1564,7 +1564,7 @@
   /*
    * Check if a flag is set.
    *
-   * {{ifFlag 'flag_name'}}
+   * {{#ifFlag 'flag_name'}} {{/ifFlag}}
    *
    */
   Y.Handlebars.registerHelper('ifFlag', function(flag, options) {
 
=== modified file 'app/widgets/charm-search.js'
--- app/widgets/charm-search.js	2013-09-26 21:14:50 +0000
+++ app/widgets/charm-search.js	2013-10-30 13:23:35 +0000
@@ -50,6 +50,7 @@
     EVT_CLEAR_SEARCH: 'clear_search',
     EVT_SEARCH_CHANGED: 'search_changed',
     EVT_SEARCH_GOHOME: 'go_home',
+    EVT_DEPLOY: 'charm_deploy',
 
     TEMPLATE: templates['browser-search'],
 
@@ -207,7 +208,8 @@
         // be false.
         var tokenAttrs = Y.merge(charm.getAttrs(), {
           size: 'tiny',
-          is_approved: false
+          is_approved: false,
+          deployButton: isCategory(charm.get('id')) ? false : true
         });
         var token = new ns.Token(tokenAttrs);
         var html = Y.Node.create(token.TEMPLATE(token.getAttrs()));
@@ -245,6 +247,7 @@
      *
      */
     _setupAutocomplete: function() {
+      var self = this;
       // Bind out helpers to the current objects context, not the auto
       // complete widget context..
       var fetchSuggestions = Y.bind(this._fetchSuggestions, this);
@@ -266,6 +269,77 @@
         },
         source: fetchSuggestions
       });
+
+      // Holder for the deploy logic the AC uses when clicking on a deploy
+      // icon from a result item.
+      this.ac._onDeploy = function(ev) {
+        var isBundle = false,
+            data,
+            found,
+            id;
+
+        // Fire an event up to the View with the charm information so that
+        // it can proceed to build/send the deploy information out to
+        // the environment.
+        id = ev.target.getData('charmId');
+
+        if (!id) {
+          // try to see if this is a bundle clicked on.
+          id = ev.target.getData('bundleId');
+          isBundle = true;
+        }
+        // Find the charm data for the selected item from the set of
+        // results.
+        found = this.get('results').filter(function(result) {
+          if (isBundle) {
+            if (result.raw.bundle.id === id) {
+              return result;
+            }
+          } else {
+            if (result.raw.charm.id === id) {
+              return result;
+            }
+          }
+        });
+
+        // Make sure that we've found a result before returning.
+        if (found.length === 0) {
+          console.error(
+              'Clicked deploy on an item we could not find in results.');
+        } else {
+          if (isBundle) {
+            data = found[0].raw.bundle;
+          } else {
+            data = found[0].raw.charm;
+          }
+
+          self.fire(self.EVT_DEPLOY, {
+            id: id,
+            data: data,
+            entityType: isBundle ? 'bundle' : 'charm'
+          });
+
+        }
+
+      };
+
+      this.ac._onItemClick = function(ev) {
+        // If the selection is coming from the deployButton then we kind of
+        // ignore the way autocomplete works. It's more of a 'quick search'
+        // with a deploy option. No search is really performed after the
+        // deploy button is selected.
+        if (ev.target.hasClass('search_add_to_canvas')) {
+          // Hide the autocomplete widget. You've selected something
+          // that's not really a suggestion, but it should still go away.
+          this.hide();
+          this._onDeploy(ev);
+        } else {
+          var itemNode = ev.currentTarget;
+          this.set('active_item', itemNode);
+          this.selectItem(itemNode, ev);
+        }
+      };
+
       this.ac.render();
 
       this.ac.get('inputNode').on('focus', function(ev) {
@@ -281,6 +355,7 @@
       this.get('boundingBox').delegate('click', function(ev) {
         ev.halt();
       }, 'a', this);
+
     },
 
     /**
@@ -293,14 +368,25 @@
      */
     _suggestionSelected: function(ev) {
       ev.halt();
+
       var change,
-          newVal,
-          charmid = ev.result.raw.charm.id,
-          form = this.get('boundingBox').one('form');
-
-      if (charmid.substr(0, 4) === 'cat:') {
+          form = this.get('boundingBox').one('form'),
+          id,
+          isBundle = false,
+          newVal;
+
+      if (ev.result.raw.charm) {
+        id = ev.result.raw.charm.id;
+      } else {
+        // Currently we have to pretend to be a charm.
+        // XXX: We should support the idea of a bundle separate from charm? Go
+        // with entity? Something to clean up.
+        id = '/bundle/' + ev.result.raw.bundle.id;
+      }
+
+      if (id.substr(0, 4) === 'cat:') {
         form.one('input').set('value', '');
-        var category = charmid.match(/([^\/]+)-\d\/?/);
+        var category = id.match(/([^\/]+)-\d\/?/);
         change = {
           charmID: null,
           search: true,
@@ -318,7 +404,7 @@
         form.one('input').set('value', ev.result.text);
         newVal = ev.result.text;
         change = {
-          charmID: charmid,
+          charmID: id,
           filter: {
             categories: [],
             text: newVal,
 
=== modified file 'app/widgets/token.js'
--- app/widgets/token.js	2013-10-09 22:20:53 +0000
+++ app/widgets/token.js	2013-10-30 13:23:35 +0000
@@ -216,6 +216,16 @@
       charmIcons: {
         setter: '_charmIconsSetter'
       },
+
+      /**
+       * @attribute deployButton
+       * @default false
+       * @type {Boolean}
+       */
+      deployButton: {
+        value: false
+      },
+
       /**
        * @attribute downloads
        * @default undefined
 
=== modified file 'lib/views/browser/bws-searchbox.less'
--- lib/views/browser/bws-searchbox.less	2013-10-29 03:07:12 +0000
+++ lib/views/browser/bws-searchbox.less	2013-10-30 13:23:35 +0000
@@ -66,11 +66,12 @@
                 }
             }
 
-            .token {
+            .token.tiny {
                 padding: 8px 0;
 
                 .title {
                     .type15;
+                    margin-top: 2px;
                 }
 
                 .icon,
 
=== modified file 'lib/views/browser/token.less'
--- lib/views/browser/token.less	2013-10-30 03:33:36 +0000
+++ lib/views/browser/token.less	2013-10-30 13:23:35 +0000
@@ -2,6 +2,21 @@
     .border-box;
     position: relative;
 
+    .deployButton {
+        display: block;
+        float: right;
+        margin-top: 19px;
+
+        /* Bundle tokens are taller due to the charm icons inside. */
+        &.bundle {
+            margin-top: 34px;
+        }
+
+        i.sprite {
+            display: block;
+        }
+    }
+
     .token {
         display: block;
         // Clear floats:
 
=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-10-29 19:38:27 +0000
+++ test/test_browser_app.js	2013-10-30 13:23:35 +0000
@@ -34,7 +34,7 @@
 
   (function() {
     describe('browser fullscreen view', function() {
-      var container, FullScreen, view, views, Y;
+      var container, FullScreen, utils, view, views, Y;
 
       before(function(done) {
         Y = YUI(GlobalConfig).use(
@@ -43,6 +43,7 @@
             'juju-tests-utils',
             'subapp-browser-fullscreen', function(Y) {
               views = Y.namespace('juju.browser.views');
+              utils = Y.namespace('juju-tests.utils');
               FullScreen = views.FullScreen;
               done();
             });
@@ -176,6 +177,23 @@
         });
       });
 
+      it('picks up the search widget deploy event', function(done) {
+        var container = utils.makeContainer('subapp-browser'),
+            fakeStore = new Y.juju.charmworld.APIv2({});
+        view = new FullScreen({
+          charmID: 'precise/jenkins-13',
+          store: fakeStore
+        });
+
+        view._deployEntity = function() {
+          container.remove(true);
+          done();
+        };
+
+        view.render(container);
+        view.search.fire(view.search.EVT_DEPLOY);
+      });
+
     });
   })();
 
@@ -228,7 +246,7 @@
 
   (function() {
     describe('browser sidebar view', function() {
-      var Y, container, view, views, Sidebar;
+      var Y, container, utils, view, views, Sidebar;
 
       before(function(done) {
         Y = YUI(GlobalConfig).use(
@@ -240,6 +258,7 @@
             'subapp-browser-sidebar',
             function(Y) {
               views = Y.namespace('juju.browser.views');
+              utils = Y.namespace('juju-tests.utils');
               Sidebar = views.Sidebar;
               done();
             });
@@ -371,6 +390,23 @@
         });
       });
 
+      it('picks up the search widget deploy event', function(done) {
+        var container = utils.makeContainer('subapp-browser'),
+            fakeStore = new Y.juju.charmworld.APIv2({});
+        view = new Sidebar({
+          charmID: 'precise/jenkins-13',
+          store: fakeStore
+        });
+
+        view._deployEntity = function() {
+          container.remove(true);
+          done();
+        };
+
+        view.render(container);
+        view.search.fire(view.search.EVT_DEPLOY);
+      });
+
     });
   })();
 
 
=== modified file 'test/test_browser_charm_details.js'
--- test/test_browser_charm_details.js	2013-10-29 22:51:19 +0000
+++ test/test_browser_charm_details.js	2013-10-30 13:23:35 +0000
@@ -357,7 +357,7 @@
         container: utils.makeContainer(),
         store: fakeStore
       });
-      view.set('deploy', function(charm, serviceAttrs) {
+      view.set('deployService', function(charm, serviceAttrs) {
         var serviceCharm = view.get('entity');
         assert.deepEqual(charm, serviceCharm);
         assert.equal(charm.get('id'), 'cs:precise/ceph-9');
 
=== modified file 'test/test_browser_search_widget.js'
--- test/test_browser_search_widget.js	2013-09-26 21:14:50 +0000
+++ test/test_browser_search_widget.js	2013-10-30 13:23:35 +0000
@@ -155,6 +155,24 @@
     });
   });
 
+  it('generates a bundle change event when bundle selected', function(done) {
+    search.on(search.EVT_SEARCH_CHANGED, function(ev) {
+      assert.equal(ev.newVal, 'TestBundle');
+      // The bundle id gets prefixed with the /bundle to help routing.
+      assert.equal(ev.change.charmID, '/bundle/~hatch/wiki/7/TestBundle');
+      assert.equal(ev.change.filter.categories.length, 0);
+      done();
+    });
+
+    search._suggestionSelected({
+      halt: function() {},
+      result: {
+        raw: {bundle: {id: '~hatch/wiki/7/TestBundle'}},
+        text: 'TestBundle'
+      }
+    });
+  });
+
   it('supports an onHome event', function(done) {
     search.on(search.EVT_SEARCH_GOHOME, function() {
       done();
@@ -188,6 +206,8 @@
       utils = Y.namespace('juju-tests.utils');
       data = utils.loadFixture('data/autocomplete.json');
 
+      cleanIconHelper = utils.stubCharmIconPath();
+
       // Need the handlebars helper for the token to render.
       Y.Handlebars.registerHelper(
           'charmFilePath',
@@ -307,4 +327,32 @@
     });
   });
 
+  it('fires deploy event when the deploy button is selected', function(done) {
+    window.flags.searchDeploy = true;
+    // This is heading into the private, non-publicized events of the AC
+    // widget in an effort to hit the html on render after results come
+    // back.
+    search.ac.after('resultsChange', function(ev) {
+      //Find one of the deployable results and trigger click event.
+      var chosenOne = container.one('.search_add_to_canvas');
+      chosenOne.simulate('click');
+    });
+
+    search.on(search.EVT_DEPLOY, function(ev) {
+      // Verify that the event was called with the correct payload to deploy.
+      assert.equal(ev.entityType, 'charm');
+      assert.equal(ev.id, 'precise/apache2-passenger-3');
+      assert.equal(ev.data.url, 'cs:precise/apache2-passenger-3');
+      window.flags = {};
+      done();
+    });
+
+    // hack into the ac widget to simulate the valueChange event
+    search.ac._afterValueChange({
+      newVal: 'a',
+      src: 'ui'
+    });
+
+  });
+
 });
 
=== modified file 'test/test_token.js'
--- test/test_token.js	2013-10-10 04:28:39 +0000
+++ test/test_token.js	2013-10-30 13:23:35 +0000
@@ -246,4 +246,27 @@
     assert.equal(token_container.one('span.charms').all('img').size(), 4);
   });
 
+  it('renders the deployer button when asked to', function() {
+    window.flags.searchDeploy = true;
+    var token = new Token({
+      size: 'tiny',
+      storeId: 'test',
+      deployButton: true,
+      description: 'some description',
+      mainCategory: 'app-servers',
+      iconUrl: 'http://localhost.svg'
+    });
+
+    token.render(token_container);
+    assert.notEqual(
+        token_container.get('innerHTML').indexOf('deployButton'),
+        -1
+    );
+
+    var button = token_container.one('.deployButton');
+    var sprite = button.one('i');
+    assert.equal(sprite.getAttribute('data-charmid'), 'test');
+    window.flags = {};
+  });
+
 });