diff --git a/src/ui/public/kbn_top_nav/kbn_top_nav.html b/src/ui/public/kbn_top_nav/kbn_top_nav.html index 0414340e2c2ac..5a26efde52b3f 100644 --- a/src/ui/public/kbn_top_nav/kbn_top_nav.html +++ b/src/ui/public/kbn_top_nav/kbn_top_nav.html @@ -6,10 +6,10 @@ aria-label="{{::menuItem.description}}" aria-haspopup="{{!menuItem.hasFunction}}" aria-expanded="{{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-class="{active: kbnTopNav.isCurrent(menuItem.key), 'is-kbn-top-nav-button-disabled': menuItem.disableButton()}" + ng-click="kbnTopNav.handleClick(menuItem)" ng-bind="menuItem.label" - tooltip="{{menuItem.tooltip}}" + tooltip="{{menuItem.tooltip()}}" tooltip-placement="bottom" tooltip-popup-delay="400" tooltip-append-to-body="1" 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 index 9446639eaaea0..3f475847fef86 100644 --- 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 { capitalize, isArray, isFunction, result } from 'lodash'; +import { 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; }); } @@ -50,19 +50,24 @@ export default function ($compile) { open(key) { this.setCurrent(key); } close(key) { (!key || this.isCurrent(key)) && this.setCurrent(null); } toggle(key) { this.setCurrent(this.isCurrent(key) ? null : key); } - + handleClick(menuItem) { + if (menuItem.disableButton()) { + return false; + } + menuItem.run(menuItem, this); + } // apply the defaults to individual options _applyOptDefault(opt = {}) { const defaultedOpt = Object.assign({ label: capitalize(opt.key), hasFunction: !!opt.run, description: opt.run ? opt.key : `Toggle ${opt.key} view`, - run: (item) => !item.disableButton && this.toggle(item.key) + run: (item) => this.toggle(item.key) }, opt); - defaultedOpt.hideButton = result(opt, 'hideButton', false); - defaultedOpt.disableButton = result(opt, 'disableButton', false); - defaultedOpt.tooltip = result(opt, 'tooltip', ''); + defaultedOpt.hideButton = isFunction(opt.hideButton) ? opt.hideButton : () => opt.hideButton; + defaultedOpt.disableButton = isFunction(opt.disableButton) ? opt.disableButton : () => opt.disableButton; + defaultedOpt.tooltip = isFunction(opt.tooltip) ? opt.tooltip : () => opt.tooltip; return defaultedOpt; }