Create an added services view under /services.

The new view displays in the sidebar, along with the search widget.

app/modules-debug.js

@@ -586,6 +586,10 @@ var GlobalConfig = {
           fullpath: '/juju-ui/subapps/browser/views/charmbrowser.js'
         },
 
+        'juju-addedservices': {
+          fullpath: '/juju-ui/subapps/browser/views/addedservices.js'
+        },
+
         //Browser Models
         'juju-browser-models': {
           fullpath: '/juju-ui/models/browser.js'

app/subapps/browser/browser.js

@@ -181,7 +181,8 @@ YUI.add('subapp-browser', function(Y) {
           sectionA: {
             charmbrowser: this._charmBrowserDispatcher.bind(this),
             inspector: this._inspectorDispatcher.bind(this),
-            empty: this.emptySectionA.bind(this)
+            empty: this.emptySectionA.bind(this),
+            services: this._addedServicesDispatcher.bind(this)
           },
           sectionB: {
             machine: this._machine.bind(this),
@@ -237,8 +238,6 @@ YUI.add('subapp-browser', function(Y) {
     */
     _charmBrowserDispatcher: function(metadata) {
       this.renderCharmBrowser(metadata);
-      // XXX Won't be needed once window.flags.il becomes the norm. The details
-      // template should be updated to hide by default.
       if (this._shouldShowCharm()) {
         // The entity rendering views need to handle the new state format
         // before this can be hooked up.
@@ -363,6 +362,16 @@ YUI.add('subapp-browser', function(Y) {
       this.get('environmentHeader').setSelectedTab('machines');
     },
 
+    /**
+      Handles rendering and/or updating the added services UI component.
+
+      @method _addedServicesDispatcher
+    */
+    _addedServicesDispatcher: function() {
+      this._detailsVisible(false);
+      this.renderAddedServices();
+    },
+
     /**
       Empties out the sectionA UI making sure to properly clean up.
 
@@ -391,6 +400,10 @@ YUI.add('subapp-browser', function(Y) {
         this._inspector.destroy();
         this._inspector = null;
       }
+      if (this._addedServices) {
+        this._addedServices.destroy();
+        this._addedServices = null;
+      }
     },
 
     /**
@@ -489,6 +502,22 @@ YUI.add('subapp-browser', function(Y) {
       this._charmbrowser.render(metadata, this._searchChanged());
     },
 
+    /**
+       Render added services view content into the parent view when required.
+
+       @method renderAddedServices
+     */
+    renderAddedServices: function() {
+      if (!this._addedServices) {
+        this._addedServices = new views.AddedServices(this._getViewCfg({
+          container: this._sidebar.get('container').one('.bws-content')
+        }));
+        this._addedServices.addTarget(this);
+      }
+      // Render is idempotent
+      this._addedServices.render();
+    },
+
     /**
       Create a 'welcome' message walkthrough for new users.
 
@@ -792,6 +821,7 @@ YUI.add('subapp-browser', function(Y) {
     'subapp-browser-bundleview',
     'subapp-browser-sidebar',
     'machine-view-panel-extension',
-    'juju-charmbrowser'
+    'juju-charmbrowser',
+    'juju-addedservices'
   ]
 });

app/subapps/browser/templates/addedservices.handlebars

@@ -0,0 +1,4 @@
+<div class="search-widget"></div>
+<div class="services-list">
+  List added services here.
+</div>

app/subapps/browser/views/addedservices.js

@@ -0,0 +1,79 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+/*
+  Sidebar added services view.
+
+  @module juju.views
+*/
+YUI.add('juju-addedservices', function(Y) {
+  var ns = Y.namespace('juju.browser.views'),
+      views = Y.namespace('juju.views'),
+      Templates = views.Templates;
+
+  ns.AddedServices = Y.Base.create('addedservices', Y.View, [
+    views.SearchWidgetMgmtExtension
+  ], {
+
+    template: Templates.addedservices,
+
+    /**
+      Sets the default properties.
+
+      @method initializer
+    */
+    initializer: function() {
+      this.searchWidget = null;
+    },
+
+    /**
+      Renders the added services list.
+
+      This method should always be idempotent.
+
+      @method render
+    */
+    render: function() {
+      var container = this.get('container');
+      container.setHTML(this.template());
+      // Provided by 'search-widget-mgmt-extension'.
+      this._renderSearchWidget();
+    },
+
+    /**
+      Destroys the rendered tokens.
+
+      @method destructor
+    */
+    destructor: function() {
+      this.get('container').remove(true);
+    }
+  },
+  {
+    ATTRS: {
+    }
+  });
+
+}, '', {
+  requires: [
+    'search-widget-mgmt-extension',
+    'view'
+  ]
+});

app/views/state.js

@@ -386,6 +386,10 @@ YUI.add('juju-app-state', function(Y) {
             component: 'machine',
             metadata: this._parseMachineUrl(part)
           });
+        } else if (part.indexOf('services') === 0) {
+          state.sectionA = this._addToSection({
+            component: 'services'
+          });
         } else if (part.length > 0) {
           // If it's not an inspector or machine and it's more than 0 characters
           // then it's a charm url.

lib/views/browser/main.less

@@ -14,6 +14,17 @@
     left: @bws-sidebar-width;
   }
 }
+
+.bws-list {
+  overflow-y: auto;
+  border-top: 8px solid #d7d7d7;
+  position: absolute;
+  top: 81px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 #subapp-browser {
   .customize-scrollbar;
   .type9;
@@ -111,13 +122,10 @@
         top: 145px;
       }
       .charm-list {
-        overflow-y: auto;
-        border-top: 8px solid #d7d7d7;
-        position: absolute;
-        top: 81px;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        .bws-list;
+      }
+      .services-list {
+        .bws-list;
       }
     }
   }

test/index.html

@@ -76,6 +76,7 @@
   <!-- Tests (Alphabetical) -->
 
   <script src="test_added_services_button.js"></script>
+  <script src="test_addedservices_view.js"></script>
   <script src="test_app.js"></script>
   <script src="test_app_hotkeys.js"></script>
   <script src="test_application_notifications.js"></script>

test/test_addedservices_view.js

@@ -0,0 +1,87 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+describe('added services view', function() {
+  var Y, view, View, utils;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(
+        'juju-tests-utils',
+        'juju-addedservices',
+        function(Y) {
+          utils = Y.namespace('juju-tests.utils');
+          View = Y.juju.browser.views.AddedServices;
+          done();
+        });
+  });
+
+  beforeEach(function() {
+    view = new View();
+  });
+
+  afterEach(function(done) {
+    if (view) {
+      view.after('destroy', function() { done(); });
+      view.destroy();
+    }
+  });
+
+  it('is extended by the search widget', function() {
+    assert.notEqual(view._renderSearchWidget, undefined);
+  });
+
+  describe('render', function() {
+    var renderSearch;
+
+    beforeEach(function() {
+      renderSearch = utils.makeStubMethod(view, '_renderSearchWidget');
+      this._cleanups.push(renderSearch.reset);
+    });
+
+    it('appends the template to the container', function() {
+      view.render();
+      var container = view.get('container');
+      assert.notEqual(container.one('.search-widget'), null);
+      assert.notEqual(container.one('.services-list'), null);
+    });
+
+    it('calls to render the search widget on render', function() {
+      view.render();
+      assert.equal(renderSearch.calledOnce(), true);
+    });
+  });
+
+  describe('destroy', function() {
+
+    it('removes the container from the DOM', function() {
+      view.render();
+      var container = view.get('container');
+      assert.notEqual(container.getDOMNode(), null,
+                      'Container is not present in DOM.');
+      assert.notEqual(container.one('.services-list'), null,
+                      'Template HTML is not present in DOM');
+      view.destroy();
+      assert.equal(container.getDOMNode(), null,
+                   'Container is still present in DOM');
+      assert.equal(container.one('.services-list'), null,
+                   'Template HTML is still present in DOM');
+    });
+  });
+});