Merge lp:~rharding/juju-gui/update-urls into lp:juju-gui/experimental

[Richard Harding]

Rearchitect the browser to use routes more

- Use nested routes and route handling to build the browser UI
- Break up the Views in the browser subapp to be more singular per UX
component.
- Adjust tests to fit with this.

https://codereview.appspot.com/8679045/

[Richard Harding (rharding)]

Reviewers: mp+158713_code.launchpad.net,

Message:
Please take a look.

Description:

TBD

https://code.launchpad.net/~rharding/juju-gui/update-urls/+merge/158713

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/modules-debug.js
   M app/subapps/browser/browser.js
   M app/subapps/browser/templates/browser_charm.handlebars
   A app/subapps/browser/templates/editorial.handlebars
   M app/subapps/browser/templates/sidebar.handlebars
   M app/subapps/browser/views/charm.js
   A app/subapps/browser/views/editorial.js
   M app/subapps/browser/views/fullscreen.js
   M app/subapps/browser/views/sidebar.js
   M app/subapps/browser/views/view.js
   M app/templates/charm-token.handlebars
   M test/test_browser_app.js
   M test/test_browser_charm_details.js

[lp:~rharding/juju-gui/update-urls]

555. By Richard Harding on 2013-04-15

Garden

556. By Richard Harding on 2013-04-15

Garden

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/8679045/

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/8679045/

[Jeff Pihach (hatch)]

Thanks for the refactor - I have a few comments below that I'd like some
discussion on.

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

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode110
app/subapps/browser/browser.js:110: var isFullscreen = true;
unused

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode137
app/subapps/browser/browser.js:137: var containerID = '#subapp-browser',
should this not be
var containerID = this.get('container') ?

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode146
app/subapps/browser/browser.js:146: if (this._getSubPath(req.path) !==
'fullscreen') {
see comment in routes.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode150
app/subapps/browser/browser.js:150: containerID += ' .bws-content';
maybe add a comment here as to what's happening here.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode178
app/subapps/browser/browser.js:178: if (!this._sidebar) {
maybe a comment here as to why this is necessary

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode206
app/subapps/browser/browser.js:206: if (req.path.indexOf('fullscreen')
!== -1) {
see comment in routes

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode245
app/subapps/browser/browser.js:245: valueFn: function() {
maybe some documentation as to what's going on here.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/browser.js#newcode267
app/subapps/browser/browser.js:267: { path: '/bws/fullscreen/*/',
callbacks: 'fullscreen' },
It looks like these routes are identical and then you are using a string
search to determine the view to render. I would probably investigate
using a route like:
/bws/:viewSize/

and then viewSize will be available as a param in your callbacks so you
won't have to stringsearch for it. IMHO it should also simplify your
routes and callbacks.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/templates/browser_charm.handlebars
File app/subapps/browser/templates/browser_charm.handlebars (right):

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/templates/browser_charm.handlebars#newcode4
app/subapps/browser/templates/browser_charm.handlebars:4: <a
href="/bws/sidebar/" class="back">{{#if
isFullscreen}}Back{{else}}Close{{/if}}</a>
this url will need to be generated and then passed in with the hbs
params to work properly with both namespaces.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/templates/browser_charm.handlebars#newcode52
app/subapps/browser/templates/browser_charm.handlebars:52: Change log
isn't changelog one word?

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/views/charm.js
File app/subapps/browser/views/charm.js (right):

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/views/charm.js#newcode372
app/subapps/browser/views/charm.js:372: isFullscreen = false;
you accept ...

[Richard Harding (rharding)]

We had a chat about most of it. I've added a bunch of comment blocks to
help clear up some of the bits.

Some of this is missing for the follow up such as url generation and app
state tracking.

Thanks for catching a few hard coded bits for in progress I missed
cleaning up!

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/templates/browser_charm.handlebars
File app/subapps/browser/templates/browser_charm.handlebars (right):

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/templates/browser_charm.handlebars#newcode4
app/subapps/browser/templates/browser_charm.handlebars:4: <a
href="/bws/sidebar/" class="back">{{#if
isFullscreen}}Back{{else}}Close{{/if}}</a>
On 2013/04/15 18:21:21, jeff.pihach wrote:
> this url will need to be generated and then passed in with the hbs
params to
> work properly with both namespaces.

Yes, url generation will come in a follow up branch.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/templates/browser_charm.handlebars#newcode52
app/subapps/browser/templates/browser_charm.handlebars:52: Change log
On 2013/04/15 18:21:21, jeff.pihach wrote:
> isn't changelog one word?

I would say so, but we're going off the UX docs given to us which lists
it as two. We can bring up the point to UX.

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/views/charm.js
File app/subapps/browser/views/charm.js (right):

https://codereview.appspot.com/8679045/diff/3001/app/subapps/browser/views/charm.js#newcode372
app/subapps/browser/views/charm.js:372: isFullscreen = false;
On 2013/04/15 18:21:21, jeff.pihach wrote:
> you accept isFullscreen as a param and then overwrite it regardless.

Yep, hard coded for early dev and didn't back out.

https://codereview.appspot.com/8679045/

[lp:~rharding/juju-gui/update-urls]

557. By Richard Harding on 2013-04-15

Update per review

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/8679045/

[j.c.sackett (jcsackett)]

Thanks for this refactor; I have some comments and questions below.

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (left):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/browser.js#oldcode191
app/subapps/browser/browser.js:191: ]
Don't we need a route like "/bws/sidebar/id*/* to match things like the
readme and interface routes above?

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

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/browser.js#newcode139
app/subapps/browser/browser.js:139: // The fullscreen view requires that
there be no editorial content if
The sequence of if statements here seem odd; can't we just check the
subpath thing, and set our containerID &c based on that, as that will
also be false if fullscreen isn't even in the URL?

It's possible I'm just not really understanding some of this branch, as
I'm having trouble figuring out the situation in which we call
renderEditorial but don't want to renderEditorial.

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/templates/browser_charm.handlebars
File app/subapps/browser/templates/browser_charm.handlebars (left):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/templates/browser_charm.handlebars#oldcode54
app/subapps/browser/templates/browser_charm.handlebars:54: {{/if}}
Does this (and the events change in views/charm.js) have to do with the
routes &c change, or just a driveby?

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/views/charm.js
File app/subapps/browser/views/charm.js (right):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/views/charm.js#newcode366
app/subapps/browser/views/charm.js:366: * @param {Node} container the
node to insert our rendered content into.
These params don't match; _renderCharmView has "charm" and isFullScreen,
not container. It's getting container as an attr.

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/views/editorial.js
File app/subapps/browser/views/editorial.js (right):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/views/editorial.js#newcode126
app/subapps/browser/views/editorial.js:126: );
Given views/charm.js has this same failure as apiFailure, and we're
using it here as a callback, we should probably define it in one place
and have both of those places use it.

https://codereview.appspot.com/8679045/diff/10002/app/templates/charm-token.handlebars
File app/templates/charm-token.handlebars (right):

https://codereview.appspot.com/8679045/diff/10002/app/templates/charm-token.handlebars#newcode1
app/templates/charm-token.handlebars:1: <a href="/bws/sidebar/{{id}}">
Can you update the token's less file to make sure pointer type remains
normal now that the entire thing is a link?

https://codereview.appspot.com/8679045/

[Richard Harding (rharding)]

Comments below. Will have an updated branch in a bit.

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/browser.js
File app/subapps/browser/browser.js (left):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/browser.js#oldcode191
app/subapps/browser/browser.js:191: ]
On 2013/04/15 21:06:34, j.c.sackett wrote:
> Don't we need a route like "/bws/sidebar/id*/* to match things like
the readme
> and interface routes above?

Short answer: yes
Longer: this functionality never worked and needs to be tied into the
rendering state of the charm details so it'll be implemented later.

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

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/browser.js#newcode139
app/subapps/browser/browser.js:139: // The fullscreen view requires that
there be no editorial content if
On 2013/04/15 21:06:34, j.c.sackett wrote:
> The sequence of if statements here seem odd; can't we just check the
subpath
> thing, and set our containerID &c based on that, as that will also be
false if
> fullscreen isn't even in the URL?

> It's possible I'm just not really understanding some of this branch,
as I'm
> having trouble figuring out the situation in which we call
renderEditorial but
> don't want to renderEditorial.

Editorial is kind of a 'default' content. It's also going to be rendered
differently if it's for a fullscreen or sidebar view. Because of that we
track it's state here.

Render editorial is called manually from both sidebar() and
fullscreen(). It determines if it should go through with it based on the
current state.

/bws/sidebar/precise/apach2-2 will call renderEditorial as it's needed
to fill the sidebar while the charm details loads next to it.

/bws/fullscreen/precise/apache2-2 will also enter this path, but we
don't need to render the editorial data so we bypass it.

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/templates/browser_charm.handlebars
File app/subapps/browser/templates/browser_charm.handlebars (left):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/templates/browser_charm.handlebars#oldcode54
app/subapps/browser/templates/browser_charm.handlebars:54: {{/if}}
On 2013/04/15 21:06:34, j.c.sackett wrote:
> Does this (and the events change in views/charm.js) have to do with
the routes
> &c change, or just a driveby?

sorry, this was part of some debugging work where I had issues with the
double render causing events to bind twice and thus clicking this would
open and close the comments at once.

In debugging I moved the event to the h3 as a whole vs just the <a> and
missed reverting it, but it works so it didn't come out.

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/views/charm.js
File app/subapps/browser/views/charm.js (right):

https://codereview.appspot.com/8679045/diff/10002/app/subapps/browser/views/charm.js#newcode366
app/subapps/browser/views/charm.js:366: * @param {Node} container the
node to insert our rendered content into.
On 2013/04/15 21:06:34, j.c.sackett wrote:
> These params don't match; ...

[j.c.sackett (jcsackett)]

On 2013/04/15 22:15:24, rharding wrote:
> Short answer: yes
> Longer: this functionality never worked and needs to be tied into the
rendering
> state of the charm details so it'll be implemented later.

Ok. Can you XXX or something to that effect?

> Editorial is kind of a 'default' content. It's also going to be
rendered
> differently if it's for a fullscreen or sidebar view. Because of that
we track
> it's state here.

> Render editorial is called manually from both sidebar() and
fullscreen(). It
> determines if it should go through with it based on the current state.

> /bws/sidebar/precise/apach2-2 will call renderEditorial as it's needed
to fill
> the sidebar while the charm details loads next to it.

> /bws/fullscreen/precise/apache2-2 will also enter this path, but we
don't need
> to render the editorial data so we bypass it.

Ok. This still feels weird to me, but I understand it. Thanks.

> sorry, this was part of some debugging work where I had issues with
the double
> render causing events to bind twice and thus clicking this would open
and close
> the comments at once.

> In debugging I moved the event to the h3 as a whole vs just the <a>
and missed
> reverting it, but it works so it didn't come out.

I think it's fine as is, I was just double checking my understanding.

> Sorry, you're correct. This was tweaked and I didn't update the
docstring.
> Thanks!

Thanks for fixing!

> Yes, my goal is to move this to a view/utils but was trying to keep
from doing
> too much in the branch. I'll update this.

You can just XXX it for now and get it later, if you like. I just want
to make sure it gets handled.

> This is very temp. Actually you have to carefully click in a blank
area to
> trigger the link right now. I want to get UX/Huw follow up to fix it
up.

Ok, thanks.

https://codereview.appspot.com/8679045/

[j.c.sackett (jcsackett)]

LGTM from discussion and with promised fixes. Thanks!

https://codereview.appspot.com/8679045/

[Jeff Pihach (hatch)]

LGTM Thanks for all the work!

https://codereview.appspot.com/8679045/

[lp:~rharding/juju-gui/update-urls]

558. By Richard Harding on 2013-04-15

Updates per review

559. By Richard Harding on 2013-04-15

Updates per review

560. By Richard Harding on 2013-04-15

lint

561. By Richard Harding on 2013-04-16

Resolve conflicts from trunk

[Richard Harding (rharding)]

*** Submitted:

Rearchitect the browser to use routes more

- Use nested routes and route handling to build the browser UI
- Break up the Views in the browser subapp to be more singular per UX
component.
- Adjust tests to fit with this.

R=jeff.pihach, j.c.sackett
CC=
https://codereview.appspot.com/8679045

https://codereview.appspot.com/8679045/

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-04-09 18:10:36 +0000
+++ app/modules-debug.js	2013-04-16 00:07:30 +0000
@@ -290,6 +290,15 @@
 
         'subapp-browser-sidebar': {
           fullpath: '/juju-ui/subapps/browser/views/sidebar.js',
+          requires: [
+            'subapp-browser-editorial',
+            'subapp-browser-mainview',
+            'subapp-browser-charmview'
+          ]
+        },
+
+        'subapp-browser-editorial': {
+          fullpath: '/juju-ui/subapps/browser/views/editorial.js',
           requires: ['subapp-browser-sidebar']
         },
 

=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-04-04 19:16:03 +0000
+++ app/subapps/browser/browser.js	2013-04-16 00:07:30 +0000
@@ -9,7 +9,8 @@
  *
  */
 YUI.add('subapp-browser', function(Y) {
-  var ns = Y.namespace('juju.subapps');
+  var ns = Y.namespace('juju.subapps'),
+      models = Y.namespace('juju.models');
 
   /**
    * Browser Sub App for the Juju Gui.
@@ -19,7 +20,6 @@
    *
    */
   ns.Browser = Y.Base.create('subapp-browser', Y.juju.SubApp, [], {
-
     /**
      * Some routes might have sub parts that hint to where a user wants focus.
      * In particular we've got the tabs that might have focus. They are the
@@ -49,7 +49,8 @@
      */
     _getViewCfg: function(cfg) {
       return Y.merge(cfg, {
-        db: this.get('db')
+        db: this.get('db'),
+        store: this.get('store')
       });
     },
 
@@ -59,32 +60,42 @@
      *
      */
     views: {
+      charmDetails: {
+        type: 'juju.browser.views.BrowserCharmView',
+        preserve: false
+      },
       fullscreen: {
         type: 'juju.browser.views.FullScreen',
-        preserve: true
-      },
-      fullscreenCharm: {
-        type: 'juju.browser.views.FullScreen',
         preserve: false
       },
       sidebar: {
         type: 'juju.browser.views.Sidebar',
-        preserve: true
-      },
-      sidebarCharm: {
-        type: 'juju.browser.views.Sidebar',
         preserve: false
       }
     },
 
     /**
+       Cleanup after ourselves on destroy.
+
+       @method destructor
+
+     */
+    destructor: function() {
+      this._cacheCharms.destroy();
+    },
+
+    /**
      * General app initializer
      *
      * @method initializer
      * @param {Object} cfg general init config object.
      *
      */
-    initializer: function(cfg) {},
+    initializer: function(cfg) {
+      // Hold onto charm data so we can pass model instances to other views when
+      // charms are selected.
+      this._cacheCharms = new models.BrowserCharmList();
+    },
 
     /**
      * Render the fullscreen view to the client.
@@ -96,35 +107,63 @@
      *
      */
     fullscreen: function(req, res, next) {
-      this.showView('fullscreen', this._getViewCfg());
-      next();
-    },
-
-    /**
-     * Render the fullscreen view of a specific charm to the client.
-     *
-     * @method fullscreenCharm
-     * @param {Request} req current request object.
-     * @param {Response} res current response object.
-     * @param {function} next callable for the next route in the chain.
-     *
-     */
-    fullscreenCharm: function(req, res, next) {
-      var subpath = this._getSubPath(req.path);
-      this.showView('fullscreenCharm', this._getViewCfg({
-        charmID: req.params.id,
-        subpath: subpath
-      }));
-      next();
-    },
-
-    /**
-     * Destroy the subapp instance.
-     *
-     * @method destructor
-     *
-     */
-    destructor: function() {},
+      if (!this._fullscreen) {
+        this._fullscreen = this.showView('fullscreen', this._getViewCfg(), {
+          'callback': function(view) {
+            // if the fullscreen isn't the last part of the path, then ignore
+            // the editorial content.
+            if (this._getSubPath(req.path) === 'fullscreen') {
+              this.renderEditorial(req, res, next);
+            }
+            next();
+          }
+        });
+      } else {
+        next();
+      }
+    },
+
+    /**
+      Render editorial content into the parent view when required.
+
+      The parent view is either fullscreen/sidebar which determines how the
+      editorial content is to be rendered.
+
+      @method renderEditorial
+      @param {Request} req current request object.
+      @param {Response} res current response object.
+      @param {function} next callable for the next route in the chain.
+
+     */
+    renderEditorial: function(req, res, next) {
+      var container = this.get('container'),
+          editorialContainer,
+          extraCfg = {};
+
+      if (req.path.indexOf('fullscreen') !== -1) {
+        // The fullscreen view requires that there be no editorial content if
+        // we're looking at a specific charm. The div we dump our content into
+        // is shared. So if the url is /fullscreen show editorial content, but
+        // if it's not, there's something else handling displaying the
+        // view-data.
+        editorialContainer = container.one(' .bws-view-data');
+        extraCfg.isFullscreen = true;
+      } else {
+        // If this is the sidebar view, then the editorial content goes into a
+        // different div since we can view both editorial content and
+        // view-data (such as a charm details) side by side.
+        editorialContainer = container.one('.bws-content');
+      }
+
+      if (!this._editorial) {
+        this._editorial = new Y.juju.browser.views.EditorialView(
+            this._getViewCfg(extraCfg));
+
+        this._editorial.render(editorialContainer);
+        // Add any sidebar charms to the running cache.
+        this._cacheCharms.add(this._editorial._cacheCharms);
+      }
+    },
 
     /**
      * Handle the route for the sidebar view.
@@ -136,8 +175,26 @@
      *
      */
     sidebar: function(req, res, next) {
-      this.showView('sidebar', this._getViewCfg());
-      next();
+      // Clean up any details we've got.
+      if (this._details) {
+        this._details.destroy({remove: true});
+      }
+
+      if (!this._sidebar) {
+        // Whenever the sidebar view is rendered it needs some editorial
+        // content to display to the user. We only need once instance though,
+        // so only render it on the first view. As users click on charm to
+        // charm and we generate urls /sidebar/precise/xxx we don't want to
+        // re-render the sidebar content.
+        this._sidebar = this.showView('sidebar', this._getViewCfg(), {
+          'callback': function(view) {
+            this.renderEditorial(req, res, next);
+            next();
+          }
+        });
+      } else {
+        next();
+      }
     },
 
     /**
@@ -149,53 +206,112 @@
      * @param {function} next callable for the next route in the chain.
      *
      */
-    sidebarCharm: function(req, res, next) {
-      var subpath = this._getSubPath(req.path);
-      this.showView('sidebarCharm', this._getViewCfg({
-        charmID: req.params.id,
-        subpath: subpath
-      }));
+    charmDetails: function(req, res, next) {
+      var charmID = req.params.id;
+      var extraCfg = {
+        charmID: charmID,
+        container: Y.Node.create('<div class="charmview"/>')
+      };
+
+      // The details view needs to know if we're using a fullscreen template
+      // or the sidebar version.
+      if (req.path.indexOf('fullscreen') !== -1) {
+        extraCfg.isFullscreen = true;
+      }
+
+      // Gotten from the sidebar creating the cache.
+      var model = this._cacheCharms.getById(charmID);
+
+      if (model) {
+        extraCfg.charm = model;
+      }
+
+      this._details = new Y.juju.browser.views.BrowserCharmView(
+          this._getViewCfg(extraCfg));
+      this._details.render();
       next();
     }
 
   }, {
     ATTRS: {
+      /**
+         @attribute container
+         @default '#subapp-browser'
+         @type {String}
+
+       */
       container: {
         value: '#subapp-browser'
       },
-      urlNamespace: {
-        value: 'charmstore'
+
+      /**
+         @attribute store
+         @default Charmworld0
+         @type {Charmworld0}
+
+       */
+      store: {
+        /**
+          We keep one instance of the store and will work on caching results
+          at the app level so that routes can share api calls. However, in
+          tests there's no config for talking to the api so we have to watch
+          out in test runs and allow the store to be broken.
+
+          method store.valueFn
+
+        */
+        valueFn: function() {
+          var url = '';
+          if (!window.juju_config || ! window.juju_config.charmworldURL) {
+            console.error('No juju config to fetch charmworld store url');
+          } else {
+            url = window.juju_config.charmworldURL;
+          }
+          return new Y.juju.Charmworld0({
+            'apiHost': url
+          });
+        }
       },
+
+      /**
+         @attribute routes
+         @default Array of subapp routes.
+         @type {Array}
+
+       */
       routes: {
         value: [
+          // Double routes are needed to catch /fullscreen and /fullscreen/
           { path: '/bws/fullscreen/', callbacks: 'fullscreen' },
-          { path: '/bws/fullscreen/*id/configuration/',
-            callbacks: 'fullscreenCharm' },
-          { path: '/bws/fullscreen/*id/hooks/', callbacks: 'fullscreenCharm' },
-          { path: '/bws/fullscreen/*id/interfaces/',
-            callbacks: 'fullscreenCharm' },
-          { path: '/bws/fullscreen/*id/qa/', callbacks: 'fullscreenCharm' },
-          { path: '/bws/fullscreen/*id/readme/', callbacks: 'fullscreenCharm' },
-          { path: '/bws/fullscreen/*id/', callbacks: 'fullscreenCharm' },
+          { path: '/bws/fullscreen/*/', callbacks: 'fullscreen' },
+          { path: '/bws/fullscreen/*id/', callbacks: 'charmDetails' },
 
           { path: '/bws/sidebar/', callbacks: 'sidebar' },
-
-          { path: '/bws/sidebar/*id/configuration/',
-            callbacks: 'sidebarCharm' },
-          { path: '/bws/sidebar/*id/hooks/', callbacks: 'sidebarCharm' },
-          { path: '/bws/sidebar/*id/interfaces/',
-            callbacks: 'sidebarCharm' },
-          { path: '/bws/sidebar/*id/qa/', callbacks: 'sidebarCharm' },
-          { path: '/bws/sidebar/*id/readme/', callbacks: 'sidebarCharm' },
-          { path: '/bws/sidebar/*id/', callbacks: 'sidebarCharm' }
+          { path: '/bws/sidebar/*/', callbacks: 'sidebar' },
+          { path: '/bws/sidebar/*id/', callbacks: 'charmDetails' }
         ]
+      },
+
+      /**
+         @attribute urlNamespace
+         @default 'charmstore'
+         @type {String}
+
+       */
+      urlNamespace: {
+        value: 'charmstore'
       }
+
     }
   });
 
 }, '0.1.0', {
   requires: [
+    'juju-charm-store',
+    'juju-models',
     'sub-app',
+    'subapp-browser-charmview',
+    'subapp-browser-editorial',
     'subapp-browser-fullscreen',
     'subapp-browser-sidebar'
   ]

=== modified file 'app/subapps/browser/templates/browser_charm.handlebars'
--- app/subapps/browser/templates/browser_charm.handlebars	2013-04-15 14:16:16 +0000
+++ app/subapps/browser/templates/browser_charm.handlebars	2013-04-16 00:07:30 +0000
@@ -1,7 +1,7 @@
 <div class="charm yui3-g">
     <div class="content yui3-u-{{#if isFullscreen}}5-6{{else}}1{{/if}}">
         <div class="nav">
-            <a href="" class="back">{{#if isFullscreen}}Back{{else}}Close{{/if}}</a>
+            <a href="/bws/sidebar/" class="back">{{#if isFullscreen}}Back{{else}}Close{{/if}}</a>
             <a href="" class="add">Add</a>
             <a href="" class="share">
                 <img src="/juju-ui/assets/images/share_icon.jpg" alt="Share" />
@@ -36,11 +36,8 @@
         </div>
 
         <div class="changelog">
-            <h3 class="section-title">
-                {{#if recent_commits}}
-                    <a href="" class="expandToggle" data-state="closed">
-                {{/if}}
-                    Change log
+            <h3 class="section-title" data-state="closed">
+                Change log
                 {{#if recent_commits}}
                     <span class="expand">
                         <span class="more">
@@ -52,7 +49,6 @@
                                 alt="Contract" />
                             </span>
                         </span>
-                    </a>
                 {{/if}}
             </h3>
             {{#if recent_commits}}

=== added file 'app/subapps/browser/templates/editorial.handlebars'
--- app/subapps/browser/templates/editorial.handlebars	1970-01-01 00:00:00 +0000
+++ app/subapps/browser/templates/editorial.handlebars	2013-04-16 00:07:30 +0000
@@ -0,0 +1,9 @@
+<div id="bws_editorial">
+    {{#if isFullscreen}}
+        <p>Some static content</p>
+    {{/if}}
+
+    <div class="featured"></div>
+    <div class="popular"></div>
+    <div class="new"></div>
+</div>

=== modified file 'app/subapps/browser/templates/sidebar.handlebars'
--- app/subapps/browser/templates/sidebar.handlebars	2013-04-15 07:26:46 +0000
+++ app/subapps/browser/templates/sidebar.handlebars	2013-04-16 00:07:30 +0000
@@ -2,12 +2,10 @@
     <div id="bws-sidebar" class="yui3-u-1-4">
         <div class="bws-header">
         </div>
-        <div class="bws-left">
-            <div class="featured"></div>
-            <div class="popular"></div>
-            <div class="new"></div>
+        <div class="bws-content">
         </div>
     </div>
     <div class="bws-view-data yui3-u-3-4">
+        <div></div>
     </div>
 </div>

=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-04-12 07:01:02 +0000
+++ app/subapps/browser/views/charm.js	2013-04-16 00:07:30 +0000
@@ -3,6 +3,7 @@
 
 YUI.add('subapp-browser-charmview', function(Y) {
   var ns = Y.namespace('juju.browser.views'),
+      models = Y.namespace('juju.models'),
       views = Y.namespace('juju.views'),
       widgets = Y.namespace('juju.widgets'),
       DATE_FORMAT = '%H:%M %d/%b/%y';
@@ -29,7 +30,7 @@
      *
      */
     events: {
-      '.changelog .expandToggle': {
+      '.changelog h3.section-title': {
         click: '_toggleLog'
       },
       '.charm .add': {
@@ -55,6 +56,31 @@
     },
 
     /**
+     * Shared method to generate a message to the user based on a bad api
+     * call.
+     *
+     * @method apiFailure
+     * @param {Object} data the json decoded response text.
+     * @param {Object} request the original io_request object for debugging.
+     *
+     */
+    apiFailure: function(data, request) {
+      var message;
+      if (data && data.type) {
+        message = 'Charm API error of type: ' + data.type;
+      } else {
+        message = 'Charm API server did not respond';
+      }
+      this.get('db').notifications.add(
+          new models.Notification({
+            title: 'Failed to load sidebar content.',
+            message: message,
+            level: 'error'
+          })
+      );
+    },
+
+    /**
      * The API retuns the questions and the scores. Combine the data into a
      * single source to make looping in the handlebars templates nicer.
      *
@@ -263,7 +289,6 @@
 
             }
           }, this);
-
     },
 
     /**
@@ -334,29 +359,30 @@
     },
 
     /**
-     * Render out the view to the DOM.
+     * Render the view of a single charm details page.
      *
-     * @method render
-     * @param {Node} container optional specific container to render out to.
+     * @method _renderCharmView
+     * @param {BrowserCharm} charm the charm model instance to view.
+     * @param {Boolean} isFullscreen is this display for the fullscreen
+     * experiecne?
      *
      */
-    render: function(container, isFullscreen) {
-      var charm = this.get('charm');
-      var tplData = charm.getAttrs();
+    _renderCharmView: function(charm, isFullscreen) {
+      this.set('charm', charm);
+
+      var tplData = charm.getAttrs(),
+          container = this.get('container');
+
       tplData.isFullscreen = isFullscreen;
       tplData.prettyCommits = this._formatCommitsForHtml(
           tplData.recent_commits);
 
       var tpl = this.template(tplData);
-      var tplNode = Y.Node.create(tpl);
-
-      container.setHTML(tplNode);
-
-      // Allow for specifying the container to use. This should reset the
+      var tplNode = container.setHTML(tpl);
+
+      // Set the content then update the container so that it reload
       // events.
-      if (container) {
-        this.set('container', container);
-      }
+      Y.one('.bws-view-data').setHTML(tplNode);
 
       this.tabview = new widgets.browser.TabView({
         srcNode: tplNode.one('.tabs')
@@ -374,10 +400,45 @@
       } else {
         this._noReadme(tplNode.one('#bws-readme'));
       }
+    },
+
+    /**
+       Render out the view to the DOM.
+
+       The View might be given either a charmID, which means go fetch the
+       charm data, or a charm model instance, in which case the view has the
+       data it needs to render.
+
+       @method render
+
+     */
+    render: function() {
+      var isFullscreen = this.get('isFullscreen');
+
+      if (this.get('charm')) {
+        this._renderCharmView(this.get('charm'), isFullscreen);
+      } else {
+        this.get('store').charm(this.get('charmID'), {
+          'success': function(data) {
+            var charm = new models.BrowserCharm(data);
+            this.set('charm', charm);
+            this._renderCharmView(this.get('charm'), isFullscreen);
+          },
+          'failure': this.apiFailure
+        }, this);
+      }
     }
   }, {
     ATTRS: {
       /**
+         @attribute charmID
+         @default undefined
+         @type {Int}
+
+       */
+      charmID: {},
+
+      /**
        * The charm we're viewing the details of.
        *
        * @attribute charm
@@ -388,6 +449,16 @@
       charm: {},
 
       /**
+         @attribute isFullscreen
+         @default false
+         @type {Boolean}
+
+       */
+      ifFullscreen: {
+        value: false
+      },
+
+      /**
        * The store is the api endpoint for fetching data.
        *
        * @attribute store
@@ -408,9 +479,12 @@
     'datatype-date-format',
     'event-tracker',
     'gallery-markdown',
+    'juju-charm-store',
+    'juju-models',
     'juju-templates',
     'juju-views',
     'juju-view-utils',
+    'node',
     'prettify',
     'view'
   ]

=== added file 'app/subapps/browser/views/editorial.js'
--- app/subapps/browser/views/editorial.js	1970-01-01 00:00:00 +0000
+++ app/subapps/browser/views/editorial.js	2013-04-16 00:07:30 +0000
@@ -0,0 +1,166 @@
+'use strict';
+
+
+/**
+ * Browser Editorial View.
+ *
+ * @module juju.browser
+ * @submodule views
+ *
+ */
+YUI.add('subapp-browser-editorial', function(Y) {
+  var ns = Y.namespace('juju.browser.views'),
+      models = Y.namespace('juju.models'),
+      views = Y.namespace('juju.views'),
+      widgets = Y.namespace('juju.widgets');
+
+
+  /**
+   * Editorial view for landing pages.
+   *
+   * @class Editorial
+   * @extends {juju.browser.views.Editorial}
+   *
+   */
+  ns.EditorialView = Y.Base.create('browser-view-sidebar', Y.View, [], {
+    template: views.Templates.editorial,
+
+    /**
+     * General YUI initializer.
+     *
+     * @method initializer
+     * @param {Object} cfg configuration object.
+     *
+     */
+    initializer: function(cfg) {
+      // Hold onto charm data so we can pass model instances to other views when
+      // charms are selected.
+      this._cacheCharms = new models.BrowserCharmList();
+    },
+
+    /**
+     * Load the editorial content into the container specified.
+     *
+     * @method render
+     * @param {Node} container An optional node to override where it's going.
+     *
+     */
+    render: function(container) {
+      var tpl = this.template(this.getAttrs()),
+          tplNode = Y.Node.create(tpl),
+          store = this.get('store');
+
+      if (typeof container !== 'object') {
+        container = this.get('container');
+      } else {
+        this.set('container', container);
+      }
+
+      // By default we grab the editorial content from the api to use for
+      // display.
+      this.get('store').sidebarEditorial({
+        'success': function(data) {
+          // Add featured charms
+          var featuredCharms = this.get('store').resultsToCharmlist(
+              data.result.featured);
+          var featuredContainer = tplNode.one('.featured');
+          var featuredCharmContainer = new widgets.browser.CharmContainer({
+            name: 'Featured Charms',
+            cutoff: 1,
+            children: featuredCharms.map(function(charm) {
+              return charm.getAttrs(); })
+          });
+          featuredCharmContainer.render(featuredContainer);
+
+          // Add popular charms
+          var popularCharms = this.get('store').resultsToCharmlist(
+              data.result.popular);
+          var popularContainer = tplNode.one('.popular');
+          var popularCharmContainer = new widgets.browser.CharmContainer({
+            name: 'Popular Charms',
+            cutoff: 2,
+            children: popularCharms.map(function(charm) {
+              return charm.getAttrs(); })
+          });
+          popularCharmContainer.render(popularContainer);
+
+          // Add in the charm tokens for the new as well.
+          var newContainer = tplNode.one('.new');
+          var newCharms = this.get('store').resultsToCharmlist(
+              data.result['new']);
+          var newCharmContainer = new widgets.browser.CharmContainer({
+            name: 'New Charms',
+            cutoff: 2,
+            children: newCharms.map(function(charm) {
+              return charm.getAttrs(); })
+          });
+          newCharmContainer.render(newContainer);
+
+          container.setHTML(tplNode);
+
+          // Add the charms to the cache for use in other views.
+          // Start with a reset to empty any current cached models.
+          this._cacheCharms.reset(newCharms);
+          this._cacheCharms.add(popularCharms);
+          this._cacheCharms.add(featuredCharms);
+          this.charmContainers = [
+            featuredCharmContainer,
+            newCharmContainer,
+            popularCharmContainer
+          ];
+        },
+
+        'failure': function(data, request) {
+          var message;
+          if (data && data.type) {
+            message = 'Charm API error of type: ' + data.type;
+          } else {
+            message = 'Charm API server did not respond';
+          }
+          this.get('db').notifications.add(
+              new models.Notification({
+                title: 'Failed to load sidebar content.',
+                message: message,
+                level: 'error'
+              })
+          );
+        }
+      }, this);
+    },
+
+    /**
+     * Destroy this view and clear from the dom world.
+     *
+     * @method destructor
+     *
+     */
+    destructor: function() {
+      if (this.charmContainers) {
+        Y.Array.each(this.charmContainers, function(container) {
+          container.destroy();
+        });
+      }
+      this._cacheCharms.destroy();
+    }
+  }, {
+    ATTRS: {
+      isFullscreen: {
+        value: false
+      },
+      store: {
+
+      }
+    }
+  });
+
+}, '0.1.0', {
+  requires: [
+    'browser-charm-container',
+    'browser-charm-token',
+    'browser-search-widget',
+    'juju-charm-store',
+    'juju-models',
+    'juju-templates',
+    'view'
+  ]
+});

=== modified file 'app/subapps/browser/views/fullscreen.js'
--- app/subapps/browser/views/fullscreen.js	2013-04-03 15:03:56 +0000
+++ app/subapps/browser/views/fullscreen.js	2013-04-16 00:07:30 +0000
@@ -16,44 +16,27 @@
    *
    */
   ns.FullScreen = Y.Base.create('browser-view-fullscreen', ns.MainView, [], {
-    _fullscreenTarget: '/bws/sidebar',
-
     template: views.Templates.fullscreen,
 
-
     /**
-     * The default view is the editorial rendering. Render this view out.
+     * Render out the view to the DOM.
      *
-     * @method _renderEditorialView
-     * @param {Node} container node to render out to.
+     * @method render
+     * @param {Node} container optional specific container to render out to.
      *
      */
-    _renderEditorialView: function(container) {
+    render: function(container) {
       var tpl = this.template(),
           tplNode = Y.Node.create(tpl);
 
       this._renderSearchWidget(tplNode);
 
-      if (!Y.Lang.isValue(container)) {
+      if (typeof container !== 'object') {
         container = this.get('container');
+      } else {
+        this.set('container', container);
       }
       container.setHTML(tplNode);
-    },
-
-    /**
-     * Render out the view to the DOM.
-     *
-     * @method render
-     * @param {Node} container optional specific container to render out to.
-     *
-     */
-    render: function(container) {
-      if (this.get('charmID')) {
-        this._renderCharmView(container);
-      } else {
-        this._renderEditorialView(container);
-      }
-
       // Bind our view to the events from the search widget used for controls.
       this._bindSearchWidgetEvents();
     }

=== modified file 'app/subapps/browser/views/sidebar.js'
--- app/subapps/browser/views/sidebar.js	2013-04-11 14:48:10 +0000
+++ app/subapps/browser/views/sidebar.js	2013-04-16 00:07:30 +0000
@@ -10,9 +10,7 @@
  */
 YUI.add('subapp-browser-sidebar', function(Y) {
   var ns = Y.namespace('juju.browser.views'),
-      models = Y.namespace('juju.models'),
-      views = Y.namespace('juju.views'),
-      widgets = Y.namespace('juju.widgets');
+      views = Y.namespace('juju.views');
 
 
   /**
@@ -23,56 +21,17 @@
    *
    */
   ns.Sidebar = Y.Base.create('browser-view-sidebar', ns.MainView, [], {
-    _fullscreenTarget: '/bws/fullscreen',
-
     template: views.Templates.sidebar,
-    visible: true,
-
-    events: {
-      '.charm-token': {
-        'click': '_handleTokenSelect'
-      }
-    },
-
-    /**
-     * Event handler for selecting a charm from a list on the page. Forces a
-     * render of the charm details view for the user.
-     *
-     * @method _handleTokenSelect
-     * @param {Event} ev the click event from the charm token.
-     *
-     */
-    _handleTokenSelect: function(ev) {
-      var id = ev.currentTarget.getData('charmid');
-      var model = this._cacheCharms.getById(id);
-      var container = this.get('container');
-
-      // Deselect the currently selected charm and highlight the new one.
-      var selected_charm = container.one('.yui3-charmtoken.active');
-      if (selected_charm) {
-        selected_charm.removeClass('active');
-      }
-      ev.currentTarget.ancestor('.yui3-charmtoken').addClass('active');
-
-      // Show the details view for this model.
-      this._renderCharmDetails(
-          model,
-          container
-      );
-    },
-
-    /**
-     * Initially we load editorial content to populate the sidebar. Build this
-     * content.
-     *
-     * @method _renderEditorialView
-     * @param {Node} container A node to stick the rendered output into.
-     *
-     */
-    _renderEditorialView: function(container) {
+
+    /**
+     * Render out the view to the DOM.
+     *
+     * @method render
+     *
+     */
+    render: function(container) {
       var tpl = this.template(),
-          tplNode = Y.Node.create(tpl),
-          store = this.get('store');
+          tplNode = Y.Node.create(tpl);
 
       this._renderSearchWidget(tplNode);
 
@@ -83,104 +42,6 @@
       }
 
       container.setHTML(tplNode);
-
-      // By default we grab the editorial content from the api to use for
-      // display.
-      this.get('store').sidebarEditorial({
-        'success': function(data) {
-
-          // Add featured charms
-          var featuredCharms = this.get('store').resultsToCharmlist(
-              data.result.featured);
-          var featuredContainer = container.one('.bws-left .featured');
-          var featuredCharmContainer = new widgets.browser.CharmContainer({
-            name: 'Featured Charms',
-            cutoff: 1,
-            children: featuredCharms.map(function(charm) {
-              return charm.getAttrs(); })
-          });
-          featuredCharmContainer.render(featuredContainer);
-
-          // Add popular charms
-          var popularCharms = this.get('store').resultsToCharmlist(
-              data.result.popular);
-          var popularContainer = container.one('.bws-left .popular');
-          var popularCharmContainer = new widgets.browser.CharmContainer({
-            name: 'Popular Charms',
-            cutoff: 2,
-            children: popularCharms.map(function(charm) {
-              return charm.getAttrs(); })
-          });
-          popularCharmContainer.render(popularContainer);
-
-          // Add in the charm tokens for the new as well.
-          var newContainer = container.one('.bws-left .new');
-          var newCharms = this.get('store').resultsToCharmlist(
-              data.result['new']);
-          var newCharmContainer = new widgets.browser.CharmContainer({
-            name: 'New Charms',
-            cutoff: 2,
-            children: newCharms.map(function(charm) {
-              return charm.getAttrs(); })
-          });
-          newCharmContainer.render(newContainer);
-
-          // Add the charms to the cache for use in other views.
-          // Start with a reset to empty any current cached models.
-          this._cacheCharms.reset(newCharms);
-          this._cacheCharms.add(popularCharms);
-          this._cacheCharms.add(featuredCharms);
-          this.charmContainers = [
-            featuredCharmContainer,
-            newCharmContainer,
-            popularCharmContainer
-          ];
-        },
-
-        'failure': function(data, request) {
-          var message;
-          if (data && data.type) {
-            message = 'Charm API error of type: ' + data.type;
-          } else {
-            message = 'Charm API server did not respond';
-          }
-          this.get('db').notifications.add(
-              new models.Notification({
-                title: 'Failed to load sidebar content.',
-                message: message,
-                level: 'error'
-              })
-          );
-        }
-      }, this);
-    },
-
-    /**
-     * Destroy this view and clear from the dom world.
-     *
-     * @method destructor
-     *
-     */
-    destructor: function() {
-      if (this.charmContainers) {
-        Y.Array.each(this.charmContainers, function(container) {
-          container.destroy();
-        });
-      }
-    },
-
-    /**
-     * Render out the view to the DOM.
-     *
-     * @method render
-     *
-     */
-    render: function(container) {
-      if (this.get('charmID')) {
-        this._renderCharmView(container);
-      } else {
-        this._renderEditorialView(container);
-      }
       // Bind our view to the events from the search widget used for controls.
       this._bindSearchWidgetEvents();
     }
@@ -191,13 +52,8 @@
 
 }, '0.1.0', {
   requires: [
-    'browser-charm-container',
-    'browser-charm-token',
     'browser-search-widget',
-    'juju-charm-store',
-    'juju-models',
     'juju-templates',
-    'subapp-browser-charmview',
     'subapp-browser-mainview',
     'view'
   ]

=== modified file 'app/subapps/browser/views/view.js'
--- app/subapps/browser/views/view.js	2013-04-09 18:10:36 +0000
+++ app/subapps/browser/views/view.js	2013-04-16 00:07:30 +0000
@@ -78,63 +78,6 @@
       );
     },
 
-    /**
-     * Helper to just render the charm details pane. This is shared in the
-     * sidebar/fullscreen views.
-     *
-     * @method _renderCharmDetails
-     * @param {BrowserCharm} charm model instance to render from.
-     * @param {Node} container node to look for a details div in to render to.
-     *
-     */
-    _renderCharmDetails: function(charm, container) {
-      var detailsNode = container.one('.bws-view-data');
-      // Destroy any current details.
-      if (this.details) {
-        this.details.destroy(true);
-      }
-      this.details = new ns.BrowserCharmView({
-        charm: charm,
-        store: this.get('store')
-      });
-      this.details.render(detailsNode);
-    },
-
-    /**
-     * Render the view of a single charm details page.
-     *
-     * @method _renderCharmView
-     * @param {Node} container the node to insert our rendered content into.
-     *
-     */
-    _renderCharmView: function(container) {
-      var tpl = this.template(),
-          tplNode = Y.Node.create(tpl);
-
-      // Create/bind the search before we wait for the charm data to load so
-      // that we're prepared for search events in case that request takes a
-      // while or even fails.
-      this._renderSearchWidget(tplNode);
-
-      // We need to have the template in the DOM for sub views to be able to
-      // expect proper structure.
-      if (!Y.Lang.isValue(container)) {
-        container = this.get('container');
-      }
-      container.setHTML(tplNode);
-
-      this.get('store').charm(this.get('charmID'), {
-        'success': function(data) {
-          var charmView = new ns.BrowserCharmView({
-            charm: new models.BrowserCharm(data),
-            store: this.get('store')
-          });
-          charmView.render(tplNode.one('.bws-view-data'), this.isFullscreen());
-          container.setHTML(tplNode);
-        },
-        'failure': this.apiFailure
-      }, this);
-    },
 
     /**
      * Render out the main search widget and controls shared across various
@@ -271,7 +214,6 @@
        */
       charmID: {},
 
-
       /**
        * An instance of the Charmworld API object to hit for any data that
        * needs fetching.
@@ -295,7 +237,6 @@
        *
        */
       subpath: {}
-
     }
   });
 

=== modified file 'app/templates/charm-token.handlebars'
--- app/templates/charm-token.handlebars	2013-04-15 07:26:46 +0000
+++ app/templates/charm-token.handlebars	2013-04-16 00:07:30 +0000
@@ -1,19 +1,21 @@
-<div class="charm-token yui3-g" data-charmid="{{id}}">
-  <div class="yui3-u-1-4">
-    <img url="{{ iconfile }}" alt="Icon" />
-  </div>
-  <div class="yui3-u-3-4">
-    <a href="" class="add hidden">
-      <img src="/juju-ui/assets/images/sidebar_add_icon.jpg" alt="Add" />
-    </a>
-    <h3 class="title">
-      {{ name }}
-    </h3>
-    <div class="metadata">
-        {{ recent_commit_count }} {{pluralize 'commit' recent_commit_count}},
-        {{ recent_download_count }}
-        {{pluralize 'download' recent_download_count}}
+<a href="/bws/sidebar/{{id}}">
+    <div class="charm-token yui3-g" data-charmid="{{id}}">
+      <div class="yui3-u-1-4">
+        <img url="{{ iconfile }}" alt="Icon" />
+      </div>
+      <div class="yui3-u-3-4">
+        <a href="" class="add hidden">
+          <img src="/juju-ui/assets/images/sidebar_add_icon.jpg" alt="Add" />
+        </a>
+        <h3 class="title">
+          {{ name }}
+        </h3>
+        <div class="metadata">
+            {{ recent_commit_count }} {{pluralize 'commit' recent_commit_count}},
+            {{ recent_download_count }}
+            {{pluralize 'download' recent_download_count}}
+        </div>
+        <p class="description">{{truncate description 110 }}</p>
+      </div>
     </div>
-    <p class="description">{{truncate description 110 }}</p>
-  </div>
-</div>
+</a>

=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-04-11 14:48:10 +0000
+++ test/test_browser_app.js	2013-04-16 00:07:30 +0000
@@ -130,53 +130,6 @@
       assert.isTrue(Y.Lang.isObject(container.one('input')));
     });
 
-    it('caches models fetched from the api for later use', function() {
-      var container = Y.one('#subapp-browser');
-      view = new Sidebar();
-      view._cacheCharms.size().should.eql(0);
-
-      // mock out the request data for the editorial view. We want to make
-      // sure we're caching the results.
-      view.get('store').set(
-          'datasource',
-          new Y.DataSource.Local({source: sampleData}));
-      view.render(container);
-
-      view._cacheCharms.size().should.eql(5);
-    });
-
-    it('handles details event when clicking on a charm token', function(done) {
-      var container = Y.one('#subapp-browser');
-      view = new Sidebar();
-
-      // Test is successful when it completes by hitting this callback we've
-      // over written.
-      view._handleTokenSelect = function(ev) {
-        done();
-      };
-
-      view.get('store').set(
-          'datasource',
-          new Y.DataSource.Local({source: sampleData}));
-      view.render(container);
-      container.one('.charm-token').simulate('click');
-    });
-
-    it('renders details when clicking on a charm token', function() {
-      var container = Y.one('#subapp-browser');
-      view = new Sidebar();
-
-      view.get('store').set(
-          'datasource',
-          new Y.DataSource.Local({source: sampleData}));
-      view.render(container);
-      container.one('.charm-token').simulate('click');
-
-      var details_node = container.one('.bws-view-data');
-      details_node.one('h1').get('text').should.eql('byobu-classroom');
-      details_node.all('.tabs').size().should.eql(1);
-    });
-
   });
 })();
 

=== modified file 'test/test_browser_charm_details.js'
--- test/test_browser_charm_details.js	2013-04-15 07:26:46 +0000
+++ test/test_browser_charm_details.js	2013-04-16 00:07:30 +0000
@@ -23,9 +23,13 @@
     });
 
     beforeEach(function() {
-      var docBody = Y.one(document.body);
-      Y.Node.create('<div id="testcontent">' +
-          '</div>').appendTo(docBody);
+      var docBody = Y.one(document.body),
+          testcontent = [
+            '<div id=testcontent><div class="bws-view-data">',
+            '</div></div>'
+          ].join();
+
+      Y.Node.create(testcontent).appendTo(docBody);
 
       // Mock out a dummy location for the Store used in view instances.
       window.juju_config = {
@@ -87,10 +91,11 @@
           ],
           id: 'precise/ceph-9'
         }),
+        container: Y.Node.create('<div class="charmview"/>'),
         store: fakeStore
       });
 
-      view.render(node);
+      view.render();
       Y.one('#bws-readme').get('text').should.eql('README content.');
     });
 
@@ -102,7 +107,8 @@
             'hooks/install'
           ],
           id: 'precise/ceph-9'
-        })
+        }),
+        container: Y.Node.create('<div class="charmview"/>')
       });
 
       // Hook up to the callback for the click event.
@@ -112,8 +118,7 @@
         done();
       };
 
-      view.render(node);
-      view.get('container').should.eql(node);
+      view.render();
       node.one('.charm .add').simulate('click');
     });
 
@@ -140,10 +145,11 @@
           ],
           id: 'precise/ceph-9'
         }),
+        container: Y.Node.create('<div class="charmview"/>'),
         store: fakeStore
       });
 
-      view.render(node);
+      view.render();
       Y.one('#bws-hooks').all('select option').size().should.equal(3);
 
       // Select the hooks install and the content should update.
@@ -180,10 +186,11 @@
           ],
           id: 'precise/ceph-9'
         }),
+        container: Y.Node.create('<div class="charmview"/>'),
         store: fakeStore
       });
 
-      view.render(node);
+      view.render();
       Y.one('#bws-readme').get('innerHTML').should.eql(
           '<h1>README Header</h1>');
     });
@@ -200,9 +207,10 @@
               'type': 'int'
             }
           }
-        })
+        }),
+        container: Y.Node.create('<div class="charmview"/>')
       });
-      view.render(node);
+      view.render();
 
       Y.one('#bws-configuration dd div').get('text').should.eql(
           'Default: 9160');
@@ -235,9 +243,10 @@
         charm: new models.BrowserCharm({
           files: [],
           id: 'precise/ceph-9'
-        })
+        }),
+        container: Y.Node.create('<div class="charmview"/>')
       });
-      view.render(node);
+      view.render();
 
       view._loadQAContent = function() {
         // This test is just verifying that we don't timeout. The event fired,
@@ -274,7 +283,8 @@
       // We don't want any files so we don't have to mock/load them.
       data.files = [];
       var view = new CharmView({
-        charm: new models.BrowserCharm(data)
+        charm: new models.BrowserCharm(data),
+        container: Y.Node.create('<div class="charmview"/>')
       });
 
       // Hook up to the callback for the click event.
@@ -283,9 +293,8 @@
         done();
       };
 
-      view.render(node);
-      view.get('container').should.eql(node);
-      node.one('.changelog .expandToggle').simulate('click');
+      view.render();
+      node.one('.changelog .expand').simulate('click');
     });
 
     it('changelog is reformatted and displayed', function() {
@@ -295,10 +304,11 @@
       // We don't want any files so we don't have to mock/load them.
       data.files = [];
       view = new CharmView({
-        charm: new models.BrowserCharm(data)
+        charm: new models.BrowserCharm(data),
+        container: Y.Node.create('<div class="charmview"/>')
       });
 
-      view.render(node);
+      view.render();
       // Basics that we have the right number of nodes.
       node.all('.remaining li').size().should.eql(9);
       node.all('.first p').size().should.eql(1);