Merge pull request #7630 from ycombinator/kbn-top-nav/enhancements

[top nav] Enhancements to make nav item state more dynamic

src/ui/public/kbn_top_nav/__tests__/kbn_top_nav_controller.js

@@ -70,10 +70,7 @@ describe('KbnTopNavController', function () {
           { key: '1234' },
         ]);
 
-        expect(pluck(controller.opts, 'hideButton')).to.eql([
-          false,
-          false
-        ]);
+        expect(pluck(controller.opts, 'hideButton')).to.eql([false, false]);
       });
 
       it('excludes opts from opts when true', function () {
@@ -86,6 +83,28 @@ describe('KbnTopNavController', function () {
       });
     });
 
+    describe('disableButton:', function () {
+      it('defaults to false', function () {
+        const controller = new KbnTopNavController([
+          { key: 'foo' },
+          { key: '1234' },
+        ]);
+
+        expect(pluck(controller.opts, 'disableButton')).to.eql([false, false]);
+      });
+    });
+
+    describe('tooltip:', function () {
+      it('defaults to empty string', function () {
+        const controller = new KbnTopNavController([
+          { key: 'foo' },
+          { key: '1234' },
+        ]);
+
+        expect(pluck(controller.opts, 'tooltip')).to.eql(['', '']);
+      });
+    });
+
     describe('run:', function () {
       it('defaults to a function that toggles the key', function () {
         const controller = new KbnTopNavController([

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>

src/ui/public/kbn_top_nav/kbn_top_nav_controller.js

@@ -1,4 +1,4 @@
-import { defaults, capitalize, isArray } from 'lodash';
+import { capitalize, isArray, isFunction, result } from 'lodash';
 
 import uiModules from 'ui/modules';
 import filterTemplate from 'ui/chrome/config/filter.html';
@@ -53,13 +53,18 @@ export default function ($compile) {
 
     // apply the defaults to individual options
     _applyOptDefault(opt = {}) {
-      return defaults({}, opt, {
+      const defaultedOpt = Object.assign({
         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)
-      });
+        run: (item) => !item.disableButton && this.toggle(item.key)
+      }, opt);
+
+      defaultedOpt.hideButton = result(opt, 'hideButton', false);
+      defaultedOpt.disableButton = result(opt, 'disableButton', false);
+      defaultedOpt.tooltip = result(opt, 'tooltip', '');
+
+      return defaultedOpt;
     }
 
     // enable actual rendering

src/ui/public/styles/base.less

@@ -157,6 +157,16 @@ a {
       .button-group > :last-child {
         border-radius: 0;
       }
+
+      button.is-kbn-top-nav-button-disabled {
+        opacity: 0.5;
+        cursor: default;
+
+        &:active {
+          color: @kibanaGray2;
+          background-color: transparent;
+        }
+      }
     }
 
     .kibana-nav-info {