Make link state (hidden, disabled, tooltip) dynamic via methods

cjcenizal · Jul 2, 2016 · ea468f9 · ea468f9
1 parent ee29dc6
commit ea468f9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/src/plugins/console/public/src/directives/sense_navbar.js b/src/plugins/console/public/src/directives/sense_navbar.js
@@ -24,7 +24,7 @@ require('ui/modules')
         this.menu = new KbnTopNavController([
           {
             key: 'welcome',
-            hideButton: true,
+            hideButton: () => true,
             template: `<sense-welcome></sense-welcome>`
           },
           {

diff --git a/src/ui/public/kbn_top_nav/__tests__/kbn_top_nav_controller.js b/src/ui/public/kbn_top_nav/__tests__/kbn_top_nav_controller.js
@@ -64,16 +64,15 @@ describe('KbnTopNavController', function () {
     });
 
     describe('hideButton:', function () {
-      it('defaults to false', function () {
+      it('defaults to function that returns false', function () {
         const controller = new KbnTopNavController([
           { key: 'foo' },
           { key: '1234' },
         ]);
 
-        expect(pluck(controller.opts, 'hideButton')).to.eql([
-          false,
-          false
-        ]);
+        pluck(controller.opts, 'hideButton').forEach(f => {
+          expect(f()).to.be(false);
+        });
       });
 
       it('excludes opts from opts when true', function () {
@@ -86,6 +85,32 @@ describe('KbnTopNavController', function () {
       });
     });
 
+    describe('disableButton:', function () {
+      it('defaults to function that returns false', function () {
+        const controller = new KbnTopNavController([
+          { key: 'foo' },
+          { key: '1234' },
+        ]);
+
+        pluck(controller.opts, 'disableButton').forEach(f => {
+          expect(f()).to.be(false);
+        });
+      });
+    });
+
+    describe('tooltip:', function () {
+      it('defaults to function that returns empty string', function () {
+        const controller = new KbnTopNavController([
+          { key: 'foo' },
+          { key: '1234' },
+        ]);
+
+        pluck(controller.opts, 'tooltip').forEach(f => {
+          expect(f()).to.be('');
+        });
+      });
+    });
+
     describe('run:', function () {
       it('defaults to a function that toggles the key', function () {
         const controller = new KbnTopNavController([

diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.html b/src/ui/public/kbn_top_nav/kbn_top_nav.html
@@ -6,9 +6,14 @@
       aria-label="{{::menuItem.description}}"
       aria-haspopup="{{!menuItem.hasFunction}}"
       aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
-      ng-class="{active: kbnTopNav.isCurrent(menuItem.key)}"
+      ng-class="{active: kbnTopNav.isCurrent(menuItem.key), 'is-kbn-top-nav-button-disabled': menuItem.disableButton()}"
       ng-click="menuItem.run(menuItem, kbnTopNav)"
-      ng-bind="menuItem.label">
+      ng-bind="menuItem.label"
+      tooltip="{{menuItem.tooltip()}}"
+      tooltip-placement="bottom"
+      tooltip-popup-delay="400"
+      tooltip-append-to-body="1"
+    >
     </button>
   </div>
   <kbn-global-timepicker></kbn-global-timepicker>
@@ -18,4 +23,4 @@
   <div class="config-close remove">
     <i class="fa fa-chevron-circle-up" ng-click="kbnTopNav.close()"></i>
   </div>
-</div>
+</div>
diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav_controller.js b/src/ui/public/kbn_top_nav/kbn_top_nav_controller.js
@@ -1,4 +1,4 @@
-import { defaults, capitalize, isArray } from 'lodash';
+import { defaults, capitalize, isArray, isFunction } from 'lodash';
 
 import uiModules from 'ui/modules';
 import filterTemplate from 'ui/chrome/config/filter.html';
@@ -29,7 +29,7 @@ export default function ($compile) {
         const opt = this._applyOptDefault(rawOpt);
         if (!opt.key) throw new TypeError('KbnTopNav: menu items must have a key');
         this.opts.push(opt);
-        if (!opt.hideButton) this.menuItems.push(opt);
+        if (!opt.hideButton()) this.menuItems.push(opt);
         if (opt.template) this.templates[opt.key] = opt.template;
       });
     }
@@ -57,8 +57,10 @@ export default function ($compile) {
         label: capitalize(opt.key),
         hasFunction: !!opt.run,
         description: opt.run ? opt.key : `Toggle ${opt.key} view`,
-        hideButton: !!opt.hideButton,
-        run: (item) => this.toggle(item.key)
+        hideButton: isFunction(opt.hideButton) ? opt.hideButton : () => false,
+        disableButton: isFunction(opt.disableButton) ? opt.disableButton : () => false,
+        tooltip: isFunction(opt.tooltip) ? opt.tooltip : () => '',
+        run: (item) => !item.disableButton() && this.toggle(item.key)
       });
     }