From 20f7f6eba894e1fa320abaa28d5b16c5c681f993 Mon Sep 17 00:00:00 2001
From: Trevan Richins <trichins@eastwindnetworks.com>
Date: Mon, 8 Feb 2016 13:00:09 -0700
Subject: [PATCH 1/6] Create "chromeConfigControls" for plugins to add chrome
 config sections

Each chromeConfigControl has a navbar component and a config component.
---
 src/ui/public/autoload/modules.js             |  1 -
 src/ui/public/chrome/chrome.html              | 11 ++----
 src/ui/public/chrome/config/filter.html       |  7 ----
 src/ui/public/chrome/config/interval.html     |  7 ----
 src/ui/public/chrome/context.js               | 36 -----------------
 .../chrome/directives/append_nav_controls.js  | 15 +++++++
 .../chrome/directives/config_controls.html    |  8 ++++
 .../chrome/directives/config_controls.js      | 20 ++++++++++
 src/ui/public/chrome/directives/index.js      |  2 +
 .../public/registry/chrome_config_controls.js |  8 ++++
 src/ui/public/timepicker/config/filter.html   |  7 ++++
 src/ui/public/timepicker/config/interval.html |  7 ++++
 src/ui/public/timepicker/toggle.js            | 39 ++++++++++++++++---
 src/ui/ui_app.js                              |  2 +-
 src/ui/ui_exports.js                          |  1 +
 15 files changed, 105 insertions(+), 66 deletions(-)
 delete mode 100644 src/ui/public/chrome/config/filter.html
 delete mode 100644 src/ui/public/chrome/config/interval.html
 delete mode 100644 src/ui/public/chrome/context.js
 create mode 100644 src/ui/public/chrome/directives/config_controls.html
 create mode 100644 src/ui/public/chrome/directives/config_controls.js
 create mode 100644 src/ui/public/registry/chrome_config_controls.js
 create mode 100644 src/ui/public/timepicker/config/filter.html
 create mode 100644 src/ui/public/timepicker/config/interval.html

diff --git a/src/ui/public/autoload/modules.js b/src/ui/public/autoload/modules.js
index af825a973179d..109ce4e16eedd 100644
--- a/src/ui/public/autoload/modules.js
+++ b/src/ui/public/autoload/modules.js
@@ -1,6 +1,5 @@
 import 'angular';
 import 'ui/chrome';
-import 'ui/chrome/context';
 import 'ui/bind';
 import 'ui/bound_to_config_obj';
 import 'ui/config';
diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html
index 6e5cccbfdd497..2b24a819d21c5 100644
--- a/src/ui/public/chrome/chrome.html
+++ b/src/ui/public/chrome/chrome.html
@@ -1,5 +1,5 @@
 <kbn-notifications list="notifList"></kbn-notifications>
-<div class="content" chrome-context >
+<div class="content">
   <nav
     ng-style="::{ background: chrome.getNavBackground() }"
     ng-class="{ show: chrome.getVisible() }"
@@ -56,6 +56,8 @@
     <!-- /Full navbar -->
   </nav>
 
+  <div kbn-chrome-config-controls>
+  </div>
   <!-- TODO: These config dropdowns shouldn't be hard coded -->
   <config
     config-template="appSwitcherTemplate"
@@ -63,12 +65,5 @@
     config-close="appSwitcherTemplate.close">
   </config>
 
-  <config
-    ng-show="timefilter.enabled"
-    config-template="pickerTemplate"
-    config-object="timefilter"
-    config-close="pickerTemplate.close">
-  </config>
-
   <div class="application" ng-class="'tab-' + chrome.getActiveTabId('-none-') + ' ' + chrome.getApplicationClasses()" ng-view></div>
 </div>
diff --git a/src/ui/public/chrome/config/filter.html b/src/ui/public/chrome/config/filter.html
deleted file mode 100644
index 71a3dd32645ef..0000000000000
--- a/src/ui/public/chrome/config/filter.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<kbn-timepicker
-  from="timefilter.time.from"
-  to="timefilter.time.to"
-  mode="timefilter.time.mode"
-  active-tab="'filter'"
-  interval="timefilter.refreshInterval">
-</kbn-timepicker>
diff --git a/src/ui/public/chrome/config/interval.html b/src/ui/public/chrome/config/interval.html
deleted file mode 100644
index d41a601709709..0000000000000
--- a/src/ui/public/chrome/config/interval.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<kbn-timepicker
-  from="timefilter.time.from"
-  to="timefilter.time.to"
-  mode="timefilter.time.mode"
-  active-tab="'interval'"
-  interval="timefilter.refreshInterval">
-</kbn-timepicker>
diff --git a/src/ui/public/chrome/context.js b/src/ui/public/chrome/context.js
deleted file mode 100644
index 1741c87b27ce1..0000000000000
--- a/src/ui/public/chrome/context.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import _ from 'lodash';
-import ConfigTemplate from 'ui/ConfigTemplate';
-define(function (require) {
-
-  require('ui/modules')
-  .get('kibana')
-  // TODO: all of this really belongs in the timepicker
-  .directive('chromeContext', function (timefilter, globalState) {
-
-    var listenForUpdates = _.once(function ($scope) {
-      $scope.$listen(timefilter, 'update', function (newVal, oldVal) {
-        globalState.time = _.clone(timefilter.time);
-        globalState.refreshInterval = _.clone(timefilter.refreshInterval);
-        globalState.save();
-      });
-    });
-
-    return {
-      link: function ($scope) {
-        listenForUpdates($scope);
-
-        // chrome is responsible for timepicker ui and state transfer...
-        $scope.timefilter = timefilter;
-        $scope.pickerTemplate = new ConfigTemplate({
-          filter: require('ui/chrome/config/filter.html'),
-          interval: require('ui/chrome/config/interval.html')
-        });
-
-        $scope.toggleRefresh = function () {
-          timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
-        };
-      }
-    };
-  });
-
-});
diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js
index 1433ec0654428..247b1f5cc1e63 100644
--- a/src/ui/public/chrome/directives/append_nav_controls.js
+++ b/src/ui/public/chrome/directives/append_nav_controls.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
 import UiModules from 'ui/modules';
 
 export default function (chrome, internals) {
@@ -12,6 +13,7 @@ export default function (chrome, internals) {
       template: function ($element) {
         const parts = [$element.html()];
         const controls = Private(chromeNavControlsRegistry);
+        const configs = Private(chromeConfigControlsRegistry);
 
         for (const control of controls.inOrder) {
           parts.unshift(
@@ -20,7 +22,20 @@ export default function (chrome, internals) {
           );
         }
 
+        for (const control of configs.inOrder) {
+          const controlHtml = `<render-directive definition="configs['${control.name}'].navbar">
+            ${control.navbar.template}
+          </render-directive>`;
+          parts.unshift(
+            `<!-- nav control ${control.name} -->`,
+            controlHtml
+          );
+        }
+
         return parts.join('\n');
+      },
+      controller: function ($scope) {
+        $scope.configs = Private(chromeConfigControlsRegistry).byName;
       }
     };
   });
diff --git a/src/ui/public/chrome/directives/config_controls.html b/src/ui/public/chrome/directives/config_controls.html
new file mode 100644
index 0000000000000..115346011c154
--- /dev/null
+++ b/src/ui/public/chrome/directives/config_controls.html
@@ -0,0 +1,8 @@
+<div ng-repeat="control in controls">
+  <config
+    config-template="control.config.template"
+    config-object="control.config.object"
+    config-submit="::control.config.submit"
+    config-close="::control.config.close">
+  </config>
+</div>
diff --git a/src/ui/public/chrome/directives/config_controls.js b/src/ui/public/chrome/directives/config_controls.js
new file mode 100644
index 0000000000000..a17a75589afa1
--- /dev/null
+++ b/src/ui/public/chrome/directives/config_controls.js
@@ -0,0 +1,20 @@
+import $ from 'jquery';
+
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
+import UiModules from 'ui/modules';
+
+export default function (chrome, internals) {
+
+  UiModules
+  .get('kibana')
+  .directive('kbnChromeConfigControls', function (Private) {
+    const controls = Private(chromeConfigControlsRegistry);
+    return {
+      template: require('ui/chrome/directives/config_controls.html'),
+      controller: function ($scope) {
+        $scope.controls = controls.inOrder;
+      }
+    };
+  });
+
+}
diff --git a/src/ui/public/chrome/directives/index.js b/src/ui/public/chrome/directives/index.js
index 530646292d388..1d38db2acb222 100644
--- a/src/ui/public/chrome/directives/index.js
+++ b/src/ui/public/chrome/directives/index.js
@@ -3,8 +3,10 @@ import 'ui/directives/config';
 import './app_switcher';
 import kbnChromeProv from './kbn_chrome';
 import kbnChromeNavControlsProv from './append_nav_controls';
+import kbnChromeConfigControlsProv from './config_controls';
 
 export default function (chrome, internals) {
   kbnChromeProv(chrome, internals);
   kbnChromeNavControlsProv(chrome, internals);
+  kbnChromeConfigControlsProv(chrome, internals);
 }
diff --git a/src/ui/public/registry/chrome_config_controls.js b/src/ui/public/registry/chrome_config_controls.js
new file mode 100644
index 0000000000000..db4a905803a66
--- /dev/null
+++ b/src/ui/public/registry/chrome_config_controls.js
@@ -0,0 +1,8 @@
+import _ from 'lodash';
+define(function (require) {
+  return require('ui/registry/_registry')({
+    name: 'chromeConfigControls',
+    order: ['order'],
+    index: ['name']
+  });
+});
diff --git a/src/ui/public/timepicker/config/filter.html b/src/ui/public/timepicker/config/filter.html
new file mode 100644
index 0000000000000..7dcf535fcc5b1
--- /dev/null
+++ b/src/ui/public/timepicker/config/filter.html
@@ -0,0 +1,7 @@
+<kbn-timepicker
+  from="configObject.time.from"
+  to="configObject.time.to"
+  mode="configObject.time.mode"
+  active-tab="'filter'"
+  interval="configObject.refreshInterval">
+</kbn-timepicker>
diff --git a/src/ui/public/timepicker/config/interval.html b/src/ui/public/timepicker/config/interval.html
new file mode 100644
index 0000000000000..529af7868b639
--- /dev/null
+++ b/src/ui/public/timepicker/config/interval.html
@@ -0,0 +1,7 @@
+<kbn-timepicker
+  from="configObject.time.from"
+  to="configObject.time.to"
+  mode="configObject.time.mode"
+  active-tab="'interval'"
+  interval="configObject.refreshInterval">
+</kbn-timepicker>
diff --git a/src/ui/public/timepicker/toggle.js b/src/ui/public/timepicker/toggle.js
index 2b9bf03fdc6be..e1b174bd5117b 100644
--- a/src/ui/public/timepicker/toggle.js
+++ b/src/ui/public/timepicker/toggle.js
@@ -1,16 +1,43 @@
+import _ from 'lodash';
 import UiModules from 'ui/modules';
-import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
+import ConfigTemplate from 'ui/ConfigTemplate';
 
 import toggleHtml from './toggle.html';
 
-// TODO: the chrome-context directive is currently responsible for several variables
-// on scope used by this template. We need to get rid of that directive and move that
-// logic here
+chromeConfigControlsRegistry.register(function (timefilter, globalState) {
+  let pickerTemplate = new ConfigTemplate({
+    filter: require('ui/timepicker/config/filter.html'),
+    interval: require('ui/timepicker/config/interval.html')
+  });
+
+  var listenForUpdates = _.once(function ($scope) {
+    $scope.$listen(timefilter, 'update', function (newVal, oldVal) {
+      globalState.time = _.clone(timefilter.time);
+      globalState.refreshInterval = _.clone(timefilter.refreshInterval);
+      globalState.save();
+    });
+  });
 
-chromeNavControlsRegistry.register(function () {
   return {
     name: 'timepicker toggle',
     order: 100,
-    template: toggleHtml
+    navbar: {
+      template: toggleHtml,
+      controller: function ($scope) {
+        listenForUpdates($scope);
+        $scope.pickerTemplate = pickerTemplate;
+        $scope.timefilter = timefilter;
+
+        $scope.toggleRefresh = function () {
+          timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause;
+        };
+      }
+    },
+    config: {
+      template: pickerTemplate,
+      close: pickerTemplate.close,
+      object: timefilter
+    }
   };
 });
diff --git a/src/ui/ui_app.js b/src/ui/ui_app.js
index 438908aa26e74..e5b30cb7a6911 100644
--- a/src/ui/ui_app.js
+++ b/src/ui/ui_app.js
@@ -36,7 +36,7 @@ class UiApp {
   getModules() {
     return _.chain([
       this.uiExports.find(_.get(this, 'spec.uses', [])),
-      this.uiExports.find(['chromeNavControls', 'sledgehammers']),
+      this.uiExports.find(['chromeNavControls', 'sledgehammers', 'chromeConfigControls']),
     ])
     .flatten()
     .uniq()
diff --git a/src/ui/ui_exports.js b/src/ui/ui_exports.js
index f7be016258bac..b269e209df7e7 100644
--- a/src/ui/ui_exports.js
+++ b/src/ui/ui_exports.js
@@ -65,6 +65,7 @@ class UiExports {
       case 'settingsSections':
       case 'docViews':
       case 'sledgehammers':
+      case 'chromeConfigControls':
         return (plugin, spec) => {
           this.aliases[type] = _.union(this.aliases[type] || [], spec);
         };

From 070d87d04a1acd7d5d287ad326dc6e76c4ec1e40 Mon Sep 17 00:00:00 2001
From: Trevan Richins <trichins@eastwindnetworks.com>
Date: Wed, 10 Feb 2016 13:36:56 -0700
Subject: [PATCH 2/6] Handle review comments

Change kbn-chrome-config-controls to an element
Import the config section html instead of require
---
 src/ui/public/chrome/chrome.html                   | 3 +--
 src/ui/public/chrome/directives/config_controls.js | 1 +
 src/ui/public/timepicker/toggle.js                 | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html
index 2b24a819d21c5..65a67b2008fea 100644
--- a/src/ui/public/chrome/chrome.html
+++ b/src/ui/public/chrome/chrome.html
@@ -56,8 +56,7 @@
     <!-- /Full navbar -->
   </nav>
 
-  <div kbn-chrome-config-controls>
-  </div>
+  <kbn-chrome-config-controls></kbn-chrome-config-controls>
   <!-- TODO: These config dropdowns shouldn't be hard coded -->
   <config
     config-template="appSwitcherTemplate"
diff --git a/src/ui/public/chrome/directives/config_controls.js b/src/ui/public/chrome/directives/config_controls.js
index a17a75589afa1..c3c5b89176661 100644
--- a/src/ui/public/chrome/directives/config_controls.js
+++ b/src/ui/public/chrome/directives/config_controls.js
@@ -10,6 +10,7 @@ export default function (chrome, internals) {
   .directive('kbnChromeConfigControls', function (Private) {
     const controls = Private(chromeConfigControlsRegistry);
     return {
+      restrict: 'E',
       template: require('ui/chrome/directives/config_controls.html'),
       controller: function ($scope) {
         $scope.controls = controls.inOrder;
diff --git a/src/ui/public/timepicker/toggle.js b/src/ui/public/timepicker/toggle.js
index e1b174bd5117b..76eb8f9594d65 100644
--- a/src/ui/public/timepicker/toggle.js
+++ b/src/ui/public/timepicker/toggle.js
@@ -4,11 +4,13 @@ import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
 import ConfigTemplate from 'ui/ConfigTemplate';
 
 import toggleHtml from './toggle.html';
+import filterConfig from './config/filter.html';
+import intervalConfig from './config/interval.html';
 
 chromeConfigControlsRegistry.register(function (timefilter, globalState) {
   let pickerTemplate = new ConfigTemplate({
-    filter: require('ui/timepicker/config/filter.html'),
-    interval: require('ui/timepicker/config/interval.html')
+    filter: filterConfig,
+    interval: intervalConfig
   });
 
   var listenForUpdates = _.once(function ($scope) {

From e6a368060b52819b84314d006c4d4ebe2d14d5d9 Mon Sep 17 00:00:00 2001
From: Trevan Richins <trichins@eastwindnetworks.com>
Date: Wed, 10 Feb 2016 13:38:31 -0700
Subject: [PATCH 3/6] Add tests for chrome config controls

---
 .../chrome/__tests__/config_controls.js       | 54 +++++++++++++++++++
 .../public/chrome/__tests__/nav_controls.js   | 41 +++++++++++---
 .../chrome/directives/append_nav_controls.js  | 42 ++++++++-------
 .../chrome/directives/config_controls.js      |  3 +-
 4 files changed, 113 insertions(+), 27 deletions(-)
 create mode 100644 src/ui/public/chrome/__tests__/config_controls.js

diff --git a/src/ui/public/chrome/__tests__/config_controls.js b/src/ui/public/chrome/__tests__/config_controls.js
new file mode 100644
index 0000000000000..d9d2c29af1c94
--- /dev/null
+++ b/src/ui/public/chrome/__tests__/config_controls.js
@@ -0,0 +1,54 @@
+import ngMock from 'ngMock';
+import $ from 'jquery';
+import expect from 'expect.js';
+
+import uiModules from 'ui/modules';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
+import Registry from 'ui/registry/_registry';
+import 'ui/chrome/directives/config_controls';
+import 'ui/directives/config';
+
+describe('chrome config controls', function () {
+  let compile;
+  let stubRegistry;
+
+  beforeEach(ngMock.module('kibana', function (PrivateProvider) {
+    stubRegistry = new Registry({
+      order: ['order']
+    });
+
+    PrivateProvider.swap(chromeConfigControlsRegistry, stubRegistry);
+  }));
+
+  beforeEach(ngMock.inject(function ($compile, $rootScope) {
+    compile = function () {
+      const $el = $('<kbn-chrome-config-controls></kbn-chrome-config-controls>');
+      let $scope = $rootScope.$new();
+      $compile($el)($scope);
+      $scope.$digest();
+      return $el;
+    };
+  }));
+
+  it('injects configs from the ui/registry/chrome_config_controls registry', function () {
+    stubRegistry.register(function () {
+      return {
+        name: 'control1',
+        order: 1,
+        config: {
+        }
+      };
+    });
+    stubRegistry.register(function () {
+      return {
+        name: 'control2',
+        order: 2,
+        config: {
+        }
+      };
+    });
+
+    var $el = compile();
+    expect($el.find('config')).to.have.length(2);
+  });
+});
diff --git a/src/ui/public/chrome/__tests__/nav_controls.js b/src/ui/public/chrome/__tests__/nav_controls.js
index b4d61a813b969..f30fb64624430 100644
--- a/src/ui/public/chrome/__tests__/nav_controls.js
+++ b/src/ui/public/chrome/__tests__/nav_controls.js
@@ -4,18 +4,26 @@ import expect from 'expect.js';
 
 import uiModules from 'ui/modules';
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
+import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
 import Registry from 'ui/registry/_registry';
 
 describe('chrome nav controls', function () {
   let compile;
-  let stubRegistry;
+  let stubNavRegistry;
+  let stubConfigRegistry;
 
   beforeEach(ngMock.module('kibana', function (PrivateProvider) {
-    stubRegistry = new Registry({
+    stubNavRegistry = new Registry({
       order: ['order']
     });
 
-    PrivateProvider.swap(chromeNavControlsRegistry, stubRegistry);
+    PrivateProvider.swap(chromeNavControlsRegistry, stubNavRegistry);
+
+    stubConfigRegistry = new Registry({
+      order: ['order']
+    });
+
+    PrivateProvider.swap(chromeConfigControlsRegistry, stubConfigRegistry);
   }));
 
   beforeEach(ngMock.inject(function ($compile, $rootScope) {
@@ -28,7 +36,7 @@ describe('chrome nav controls', function () {
   }));
 
   it('injects templates from the ui/registry/chrome_nav_controls registry', function () {
-    stubRegistry.register(function () {
+    stubNavRegistry.register(function () {
       return {
         name: 'control',
         order: 100,
@@ -40,22 +48,39 @@ describe('chrome nav controls', function () {
     expect($el.find('#testTemplateEl')).to.have.length(1);
   });
 
+  it('injects templates from the ui/registry/chrome_config_controls registry', function () {
+    stubConfigRegistry.register(function () {
+      return {
+        name: 'control',
+        order: 100,
+        navbar: {
+          template: `<span id="testTemplateEl"></span>`
+        }
+      };
+    });
+
+    var $el = compile();
+    expect($el.find('#testTemplateEl')).to.have.length(1);
+  });
+
   it('renders controls in reverse order, assuming that each control will float:right', function () {
-    stubRegistry.register(function () {
+    stubConfigRegistry.register(function () {
       return {
         name: 'control2',
         order: 2,
-        template: `<span id="2", class="testControl"></span>`
+        navbar: {
+          template: `<span id="2", class="testControl"></span>`
+        }
       };
     });
-    stubRegistry.register(function () {
+    stubNavRegistry.register(function () {
       return {
         name: 'control1',
         order: 1,
         template: `<span id="1", class="testControl"></span>`
       };
     });
-    stubRegistry.register(function () {
+    stubNavRegistry.register(function () {
       return {
         name: 'control3',
         order: 3,
diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js
index 247b1f5cc1e63..8f51371199a5e 100644
--- a/src/ui/public/chrome/directives/append_nav_controls.js
+++ b/src/ui/public/chrome/directives/append_nav_controls.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+import _ from 'lodash';
 
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
 import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
@@ -12,25 +12,31 @@ export default function (chrome, internals) {
     return {
       template: function ($element) {
         const parts = [$element.html()];
-        const controls = Private(chromeNavControlsRegistry);
+        const navs = Private(chromeNavControlsRegistry);
         const configs = Private(chromeConfigControlsRegistry);
 
-        for (const control of controls.inOrder) {
-          parts.unshift(
-            `<!-- nav control ${control.name} -->`,
-            control.template
-          );
-        }
-
-        for (const control of configs.inOrder) {
-          const controlHtml = `<render-directive definition="configs['${control.name}'].navbar">
-            ${control.navbar.template}
-          </render-directive>`;
-          parts.unshift(
-            `<!-- nav control ${control.name} -->`,
-            controlHtml
-          );
-        }
+        const controls = [
+          ...navs.map(function (nav) {
+            return {
+              template: `<!-- nav control ${nav.name} -->${nav.template}`,
+              order: nav.order
+            };
+          }),
+
+          ...configs.map(function (config) {
+            const configHtml = `<render-directive definition="configs['${config.name}'].navbar">
+              ${config.navbar.template}
+            </render-directive>`;
+            return {
+              template: `<!-- nav control ${config.name} -->${configHtml}`,
+              order: config.order
+            };
+          }),
+        ];
+
+        _.sortBy(controls, 'order').forEach(function (control) {
+          parts.unshift(control.template);
+        });
 
         return parts.join('\n');
       },
diff --git a/src/ui/public/chrome/directives/config_controls.js b/src/ui/public/chrome/directives/config_controls.js
index c3c5b89176661..fbe4676747ee6 100644
--- a/src/ui/public/chrome/directives/config_controls.js
+++ b/src/ui/public/chrome/directives/config_controls.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 
 import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
 import UiModules from 'ui/modules';
+import configControlsHtml from './config_controls.html';
 
 export default function (chrome, internals) {
 
@@ -11,7 +12,7 @@ export default function (chrome, internals) {
     const controls = Private(chromeConfigControlsRegistry);
     return {
       restrict: 'E',
-      template: require('ui/chrome/directives/config_controls.html'),
+      template: configControlsHtml,
       controller: function ($scope) {
         $scope.controls = controls.inOrder;
       }

From 53ef6311cdda1454b993d6cd11b1f5f88e33b4a6 Mon Sep 17 00:00:00 2001
From: Trevan Richins <trichins@eastwindnetworks.com>
Date: Thu, 25 Feb 2016 12:30:08 -0700
Subject: [PATCH 4/6] timefilter is no longer in scope for courier so use
 $$timefilter

---
 src/ui/public/courier/courier.js              |  6 +++---
 .../public/directives/__tests__/timepicker.js | 19 +++++++------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/ui/public/courier/courier.js b/src/ui/public/courier/courier.js
index 6fdc80e00d4d5..81bfb5ab6a36d 100644
--- a/src/ui/public/courier/courier.js
+++ b/src/ui/public/courier/courier.js
@@ -131,9 +131,9 @@ uiModules.get('kibana/courier')
     };
 
     // Listen for refreshInterval changes
-    $rootScope.$watchCollection('timefilter.refreshInterval', function () {
-      var refreshValue = _.get($rootScope, 'timefilter.refreshInterval.value');
-      var refreshPause = _.get($rootScope, 'timefilter.refreshInterval.pause');
+    $rootScope.$watchCollection('$$timefilter.refreshInterval', function () {
+      var refreshValue = _.get($rootScope, '$$timefilter.refreshInterval.value');
+      var refreshPause = _.get($rootScope, '$$timefilter.refreshInterval.pause');
       if (_.isNumber(refreshValue) && !refreshPause) {
         self.fetchInterval(refreshValue);
       } else {
diff --git a/src/ui/public/directives/__tests__/timepicker.js b/src/ui/public/directives/__tests__/timepicker.js
index d4fb70d7e0f1e..afcade18a46f3 100644
--- a/src/ui/public/directives/__tests__/timepicker.js
+++ b/src/ui/public/directives/__tests__/timepicker.js
@@ -28,23 +28,18 @@ var init = function () {
   clock = sinon.useFakeTimers(moment(anchor).valueOf());
 
   // Create the scope
-  ngMock.inject(function ($rootScope, $compile) {
+  ngMock.inject(function ($rootScope, $compile, timefilter) {
 
     // Give us a scope
     $parentScope = $rootScope;
 
     // Add some parameters to it
-    var timefilter = {
-      time : {
-        from: moment().subtract(15, 'minutes'),
-        to: moment(),
-        mode: undefined
-      },
-      refreshInterval : {
-        value : 0,
-        display : 'Off'
-      }
-    };
+    timefilter.time.from = moment().subtract(15, 'minutes');
+    timefilter.time.to = moment();
+    timefilter.time.mode = undefined;
+    timefilter.refreshInterval.value = 0;
+    timefilter.refreshInterval.display = 'Off';
+
     $parentScope.timefilter = timefilter;
 
     // Create the element

From 255f2d4af7510c6baa18d09d078ae8335a21f384 Mon Sep 17 00:00:00 2001
From: Trevan Richins <trichins@eastwindnetworks.com>
Date: Tue, 8 Mar 2016 11:50:26 -0700
Subject: [PATCH 5/6] Handle name and template better

---
 .../chrome/directives/append_nav_controls.js     | 10 ++++++----
 src/ui/public/registry/chrome_config_controls.js | 16 ++++++++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/ui/public/chrome/directives/append_nav_controls.js b/src/ui/public/chrome/directives/append_nav_controls.js
index 40dcad690da4d..2fd90a7a2d247 100644
--- a/src/ui/public/chrome/directives/append_nav_controls.js
+++ b/src/ui/public/chrome/directives/append_nav_controls.js
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import $ from 'jquery';
 
 import chromeNavControlsRegistry from 'ui/registry/chrome_nav_controls';
 import chromeConfigControlsRegistry from 'ui/registry/chrome_config_controls';
@@ -31,11 +32,12 @@ export default function (chrome, internals) {
           }),
 
           ...configs.map(function (config) {
-            const configHtml = `<render-directive definition="configs['${config.name}'].navbar">
-              ${config.navbar.template}
-            </render-directive>`;
+            let $wrapper = $('<div></div>');
+            let $directive = $(`<render-directive definition="configs['${config.name}'].navbar"></render-directive>`);
+            $directive.html(config.navbar.template);
+            $wrapper.append($directive);
             return {
-              template: `<!-- nav control ${config.name} -->${configHtml}`,
+              template: `<!-- nav control ${config.name} -->${$wrapper.html()}`,
               order: config.order
             };
           }),
diff --git a/src/ui/public/registry/chrome_config_controls.js b/src/ui/public/registry/chrome_config_controls.js
index db4a905803a66..3e0b32c4dc0ac 100644
--- a/src/ui/public/registry/chrome_config_controls.js
+++ b/src/ui/public/registry/chrome_config_controls.js
@@ -1,8 +1,12 @@
 import _ from 'lodash';
-define(function (require) {
-  return require('ui/registry/_registry')({
-    name: 'chromeConfigControls',
-    order: ['order'],
-    index: ['name']
-  });
+import uiRegistry from 'ui/registry/_registry';
+export default uiRegistry({
+  name: 'chromeConfigControls',
+  order: ['order'],
+  index: ['name'],
+  constructor() {
+    this.forEach(configControl => {
+      configControl.name = configControl.name.replace(/[^a-zA-Z0-9]/g, '_');
+    });
+  }
 });

From afa3684c865281247c72999c8eaf6279566a43d0 Mon Sep 17 00:00:00 2001
From: Trevan Richins <trichins@eastwindnetworks.com>
Date: Tue, 8 Mar 2016 11:51:34 -0700
Subject: [PATCH 6/6] Don't use rootscope $$timefilter

---
 src/ui/public/courier/courier.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ui/public/courier/courier.js b/src/ui/public/courier/courier.js
index 81bfb5ab6a36d..609ac0ccefce3 100644
--- a/src/ui/public/courier/courier.js
+++ b/src/ui/public/courier/courier.js
@@ -19,7 +19,7 @@ import uiModules from 'ui/modules';
 
 
 uiModules.get('kibana/courier')
-.service('courier', function ($rootScope, Private, Promise, indexPatterns, Notifier) {
+.service('courier', function ($rootScope, Private, Promise, indexPatterns, Notifier, timefilter) {
   function Courier() {
     var self = this;
 
@@ -131,9 +131,11 @@ uiModules.get('kibana/courier')
     };
 
     // Listen for refreshInterval changes
-    $rootScope.$watchCollection('$$timefilter.refreshInterval', function () {
-      var refreshValue = _.get($rootScope, '$$timefilter.refreshInterval.value');
-      var refreshPause = _.get($rootScope, '$$timefilter.refreshInterval.pause');
+    $rootScope.$watchCollection(function () {
+      return timefilter.refreshInterval;
+    }, function (interval) {
+      var refreshValue = _.get(interval, 'value');
+      var refreshPause = _.get(interval, 'pause');
       if (_.isNumber(refreshValue) && !refreshPause) {
         self.fetchInterval(refreshValue);
       } else {