Merge pull request #8490 from spalger/backport/5.0/recent-spalger-prs

Backport recent @spalger prs

src/core_plugins/console/public/console.js

@@ -15,7 +15,6 @@ require('./src/directives/sense_history');
 require('./src/directives/sense_settings');
 require('./src/directives/sense_help');
 require('./src/directives/sense_welcome');
-require('./src/directives/sense_navbar');
 
 devTools.register(() => ({
   order: 1,

src/core_plugins/console/public/index.html

@@ -1,6 +1,4 @@
-<kbn-dev-tools-app data-test-subj="console">
-  <sense-navbar></sense-navbar>
-
+<kbn-dev-tools-app data-test-subj="console" top-nav-config="topNavController">
   <div id="editor_output_container">
     <div id="editor_container">
       <ul id="autocomplete"></ul>

src/core_plugins/console/public/src/controllers/sense_controller.js

@@ -5,6 +5,7 @@ import { initializeInput } from '../input';
 import { initializeOutput } from '../output';
 import es from '../es';
 import init from '../app';
+import { SenseTopNavController } from './sense_top_nav_controller';
 
 const module = require('ui/modules').get('app/sense');
 
@@ -16,14 +17,14 @@ module.run(function (Private, $rootScope) {
   };
 });
 
-module.controller('SenseController', function SenseController($scope, $timeout, $location, docTitle) {
-
+module.controller('SenseController', function SenseController(Private, $scope, $timeout, $location, docTitle) {
   docTitle.change('Console');
 
-  let input, output;
+  $scope.topNavController = Private(SenseTopNavController)
 
   // We need to wait for these elements to be rendered before we can select them with jQuery
   // and then initialize this app
+  let input, output;
   $timeout(() => {
     output = initializeOutput($('#output'));
     input = initializeInput($('#editor'), $('#editor_actions'), $('#copy_as_curl'), output);

src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js

@@ -0,0 +1,35 @@
+import KbnTopNavControllerProvider from 'ui/kbn_top_nav/kbn_top_nav_controller';
+import storage from '../storage';
+
+export function SenseTopNavController(Private) {
+  const KbnTopNavController = Private(KbnTopNavControllerProvider);
+
+  const controller = new KbnTopNavController([
+    {
+      key: 'welcome',
+      hideButton: true,
+      template: `<sense-welcome></sense-welcome>`
+    },
+    {
+      key: 'history',
+      description: 'History',
+      template: `<sense-history></sense-history>`
+    },
+    {
+      key: 'settings',
+      description: 'Settings',
+      template: `<sense-settings></sense-settings>`
+    },
+    {
+      key: 'help',
+      description: 'Help',
+      template: `<sense-help></sense-help>`
+    },
+  ]);
+
+  if (storage.get('version_welcome_shown') !== '@@SENSE_REVISION') {
+    controller.open('welcome')
+  }
+
+  return controller
+}

src/core_plugins/console/public/src/directives/sense_navbar.html

@@ -1 +0,0 @@
-<kbn-top-nav name="console" ng-if="sense" config="navbar.menu" data-test-subj="top-nav"></kbn-top-nav>

src/core_plugins/console/public/src/directives/sense_navbar.js

@@ -1,54 +0,0 @@
-const history = require('../history');
-const es = require('../es');
-const storage = require('../storage');
-require('ui/kbn_top_nav');
-const KbnTopNavControllerProvider = require('ui/kbn_top_nav/kbn_top_nav_controller');
-
-require('ui/modules')
-.get('app/sense')
-.directive('senseNavbar', function () {
-  return {
-    restrict: 'E',
-    template: require('./sense_navbar.html'),
-    require: '^ngController',
-    scope: {},
-    link($scope, $el, attrs, sense) {
-      $scope.sense = sense
-    },
-    controllerAs: 'navbar',
-    controller: class SenseNavbarController {
-      constructor($scope, $timeout, $element, Private) {
-        const KbnTopNavController = Private(KbnTopNavControllerProvider);
-        $scope.chrome = require('ui/chrome');
-
-        this.menu = new KbnTopNavController([
-          {
-            key: 'welcome',
-            hideButton: true,
-            template: `<sense-welcome></sense-welcome>`
-          },
-          {
-            key: 'history',
-            description: 'History',
-            template: `<sense-history></sense-history>`
-          },
-          {
-            key: 'settings',
-            description: 'Settings',
-            template: `<sense-settings></sense-settings>`
-          },
-          {
-            key: 'help',
-            description: 'Help',
-            template: `<sense-help></sense-help>`
-          },
-        ]);
-
-        if (storage.get('version_welcome_shown') !== '@@SENSE_REVISION') {
-          this.menu.open('welcome')
-        }
-
-      }
-    }
-  };
-});

src/core_plugins/console/public/src/directives/settings.html

@@ -14,6 +14,7 @@
           type="number"
           required
           class="form-control"
+          data-test-subj="setting-font-size-input"
           >
       </div>
     </div>
@@ -62,7 +63,8 @@
     <button
       type="submit"
       ng-disabled="settingsForm.$invalid"
-      class="btn btn-primary">
+      class="btn btn-primary"
+      data-test-subj="settings-save-button">
       Save
     </button>
   </div>

src/core_plugins/console/public/src/directives/welcome.html

@@ -24,4 +24,4 @@
   <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
 </ul>
 
-<button type="button" class="btn-primary" ng-click="kbnTopNav.close()">Get to work</button>
+<button type="button" class="btn-primary" data-test-subj="help-close-button" ng-click="kbnTopNav.close()">Get to work</button>

src/core_plugins/console/public/src/settings.js

@@ -2,6 +2,9 @@ let $ = require('jquery');
 let es = require('./es');
 const storage = require('./storage');
 
+import getInput from './input'
+import getOutput from './output'
+
 function getFontSize() {
   return storage.get('font_size', 14);
 }
@@ -28,7 +31,7 @@ function setBasicAuth(mode) {
   return true;
 }
 
-function getAutocomplete() {
+export function getAutocomplete() {
   return storage.get('autocomplete_settings', { fields: true, indices: true });
 }
 
@@ -37,10 +40,10 @@ function setAutocomplete(settings) {
   return true;
 }
 
-function applyCurrentSettings(editor) {
+export function applyCurrentSettings(editor) {
   if (typeof editor === 'undefined') {
-    applyCurrentSettings(require('./input')());
-    applyCurrentSettings(require('./output')());
+    applyCurrentSettings(getInput());
+    applyCurrentSettings(getOutput());
   }
   if (editor) {
     editor.getSession().setUseWrapMode(getWrapMode());
@@ -48,7 +51,7 @@ function applyCurrentSettings(editor) {
   }
 }
 
-function getCurrentSettings() {
+export function getCurrentSettings() {
   return {
     autocomplete: getAutocomplete(),
     wrapMode: getWrapMode(),
@@ -56,18 +59,10 @@ function getCurrentSettings() {
   };
 }
 
-function updateSettings({ fontSize, wrapMode, autocomplete}) {
+export function updateSettings({ fontSize, wrapMode, autocomplete}) {
   setFontSize(fontSize);
   setWrapMode(wrapMode);
   setAutocomplete(autocomplete);
-  require('./input')().focus();
+  getInput().focus();
   return getCurrentSettings();
 }
-
-module.exports = {
-  getAutocomplete,
-  applyCurrentSettings,
-
-  getCurrentSettings,
-  updateSettings,
-};

src/core_plugins/kibana/public/dev_tools/directives/dev_tools_app.js

@@ -1,19 +1,27 @@
 import uiModules from 'ui/modules';
-import devTools from 'ui/registry/dev_tools';
+import DevToolsRegistryProvider from 'ui/registry/dev_tools';
 import template from 'plugins/kibana/dev_tools/partials/dev_tools_app.html';
 import 'plugins/kibana/dev_tools/styles/dev_tools_app.less';
+import 'ui/kbn_top_nav';
 
 uiModules
 .get('apps/dev_tools')
 .directive('kbnDevToolsApp', function (Private, $location) {
+  const devToolsRegistry = Private(DevToolsRegistryProvider);
+
   return {
     restrict: 'E',
     replace: true,
     template,
     transclude: true,
-    link: function ($scope) {
-      $scope.devTools = Private(devTools).inOrder;
-      $scope.currentPath = `#${$location.path()}`;
+    scope: {
+      topNavConfig: '='
+    },
+    bindToController: true,
+    controllerAs: 'kbnDevToolsApp',
+    controller() {
+      this.devTools = devToolsRegistry.inOrder;
+      this.currentPath = `#${$location.path()}`;
     }
   };
 });

src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html

@@ -1,15 +1,16 @@
-<div class="dev-tools-app-container app-container">
-  <nav class="navbar navbar-default navbar-static-top subnav">
-    <bread-crumbs omit-current-page="true"></bread-crumbs>
-
-    <ul class="nav navbar-nav">
-      <li ng-repeat="item in devTools" ng-class="{active: currentPath === item.url}">
-        <a class="navbar-link" kbn-href="{{::item.url}}">
-          {{::item.display}}
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div role="main" class="dev-tools-container" ng-transclude></div>
+<div class="dev-tools__app-container app-container">
+  <bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
+  <kbn-top-nav name="devtools" config="kbnDevToolsApp.topNavConfig">
+    <div class="localTabs">
+      <a
+        ng-repeat="item in kbnDevToolsApp.devTools"
+        class="localTab"
+        ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
+        kbn-href="{{::item.url}}"
+      >
+        {{::item.display}}
+      </a>
+    </div>
+  </kbn-top-nav>
+  <div role="main" class="dev-tools__container" ng-transclude></div>
 </div>

src/core_plugins/kibana/public/dev_tools/styles/dev_tools_app.less

@@ -1,9 +1,10 @@
 @import (reference) "~ui/styles/mixins.less";
+@import (reference) "~ui/styles/variables.less";
 
-.dev-tools-app-container {
+.dev-tools__container {
   .flex-parent;
 }
 
-.dev-tools-container {
+.dev-tools__app-container {
   .flex-parent;
 }

src/core_plugins/kibana/public/management/app.html

@@ -1,32 +1,26 @@
 <div class="app-container">
-  <nav class="navbar management-navbar navbar-default navbar-static-top subnav" data-test-subj="managementNav">
-    <bread-crumbs omit-current-page="true"></bread-crumbs>
-
-    <ul class="nav navbar-nav">
-      <li class="current-page" ng-hide="sectionName">
+  <bread-crumbs class="bread-crumbs--navbar" omit-current-page="true"></bread-crumbs>
+  <kbn-top-nav name="management-subnav" data-test-subj="managementNav">
+    <div class="localTabs">
+      <span ng-if="!sectionName" class="localTab">
         {{::section.display}}
-      </li>
+      </span>
 
-      <li
+      <a
         ng-if="sectionName"
         ng-repeat="item in section.items.inOrder"
-        ng-class="item.class"
+        class="localTab"
+        ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
+        kbn-href="{{::item.url}}"
+        data-test-subj="{{::item.name}}"
+        tooltip="{{::item.tooltip}}"
+        tooltip-placement="bottom"
+        tooltip-popup-delay="400"
+        tooltip-append-to-body="1"
       >
-        <a
-          class="navbar-link"
-          ng-class="{ 'is-navbar-nav-link-disabled': !item.url }"
-          kbn-href="{{::item.url}}"
-          data-test-subj="{{::item.name}}"
-          tooltip="{{::item.tooltip}}"
-          tooltip-placement="bottom"
-          tooltip-popup-delay="400"
-          tooltip-append-to-body="1"
-        >
-          {{::item.display}}
-        </a>
-      </li>
-    </ul>
-  </nav>
-
+        {{::item.display}}
+      </a>
+    </div>
+  </kbn-top-nav>
   <div role="main" class="management-container" ng-transclude></div>
 </div>

src/core_plugins/kibana/public/management/index.js

@@ -13,6 +13,7 @@ import appTemplate from 'plugins/kibana/management/app.html';
 import landingTemplate from 'plugins/kibana/management/landing.html';
 import chrome from 'ui/chrome/chrome';
 import management from 'ui/management';
+import 'ui/kbn_top_nav';
 
 uiRoutes
 .when('/management', {
@@ -41,7 +42,7 @@ uiModules
 
       if ($scope.section) {
         $scope.section.items.forEach(item => {
-          item.class = `#${$location.path()}`.indexOf(item.url) > -1 ? 'active' : undefined;
+          item.active = `#${$location.path()}`.indexOf(item.url) > -1;
         });
       }
 

src/ui/public/kbn_top_nav/kbn_top_nav.html

@@ -1,4 +1,4 @@
-<navbar ng-show="chrome.getVisible()" class="kibana-nav-options">
+<navbar ng-show="kbnTopNav.isVisible()" class="kibana-nav-options" data-test-subj="top-nav">
   <div ng-transclude></div>
   <div class="button-group kibana-nav-actions" role="toolbar">
     <button
@@ -13,6 +13,7 @@
       tooltip-placement="bottom"
       tooltip-popup-delay="400"
       tooltip-append-to-body="1"
+      data-test-subj="menu-item-{{menuItem.key}}"
     >
     </button>
   </div>
@@ -20,7 +21,7 @@
 </navbar>
 <div class="config" ng-show="kbnTopNav.rendered">
   <div id="template_wrapper" class="container-fluid"></div>
-  <div class="config-close remove" ng-click="kbnTopNav.close()" data-test-subj="config-close-button">
+  <div class="config-close remove" ng-click="kbnTopNav.close()">
     <i class="fa fa-chevron-circle-up"></i>
   </div>
 </div>

src/ui/public/kbn_top_nav/kbn_top_nav.js

@@ -54,6 +54,18 @@ module.directive('kbnTopNav', function (Private) {
     restrict: 'E',
     transclude: true,
     template,
+
+    // TODO: The kbnTopNav currently requires that it share a scope with
+    // it's parent directive. This allows it to export the kbnTopNav controller
+    // and allows the config templates to use values from the parent scope.
+    //
+    // Moving this to an isolate scope will require modifying the config
+    // directive to support child directives, instead of templates, so that
+    // parent controllers can be imported/required rather than simply referenced
+    // directly in the template.
+    //
+    // scope: {}
+
     controller($scope, $attrs, $element) {
       const extensions = getNavbarExtensions($attrs.name);
       let controls = _.get($scope, $attrs.config, []);
@@ -65,6 +77,7 @@ module.directive('kbnTopNav', function (Private) {
 
       $scope.kbnTopNav = new KbnTopNavController(controls);
       $scope.kbnTopNav._link($scope, $element);
+
       return $scope.kbnTopNav;
     }
   };

src/ui/public/kbn_top_nav/kbn_top_nav_controller.js

@@ -1,5 +1,6 @@
 import { capitalize, isArray, isFunction } from 'lodash';
 
+import chrome from 'ui/chrome';
 import uiModules from 'ui/modules';
 import filterTemplate from 'ui/chrome/config/filter.html';
 import intervalTemplate from 'ui/chrome/config/interval.html';
@@ -22,6 +23,10 @@ export default function ($compile) {
       this.addItems(opts);
     }
 
+    isVisible() {
+      return chrome.getVisible();
+    }
+
     addItems(rawOpts) {
       if (!isArray(rawOpts)) rawOpts = [rawOpts];
 

src/ui/public/styles/base.less

@@ -217,16 +217,6 @@ a {
   .button-variant(@navbar-default-color; @navbar-default-bg; @navbar-default-border);
 }
 
-// right section of the main nav base
-.navbar-static-top .navbar-right {
-  font-size: @font-size-small;
-
-  .loading-spinner {
-    color: @navbar-inverse-brand-hover-color;
-    vertical-align: middle;
-  }
-}
-
 .navbar-timepicker {
   > li > a {
     padding-left: 7px !important;
@@ -315,6 +305,12 @@ table {
 
 //== breadCrumbsTemplate
 bread-crumbs {
+  display: block;
+
+  &.bread-crumbs--navbar {
+    background-color: @navbar-default-bg;
+  }
+
   ul {
     margin: 0;
     padding: 8px 10px;

src/ui/public/styles/bootstrap/navbar.less

@@ -79,7 +79,6 @@
     // Undo the collapse side padding for navbars with containers to ensure
     // alignment of right-aligned contents.
     .navbar-fixed-top &,
-    .navbar-static-top &,
     .navbar-fixed-bottom & {
       padding-left: 0;
       padding-right: 0;
@@ -124,16 +123,6 @@
 // Display the navbar across the entirety of the page or fixed it to the top or
 // bottom of the page.
 
-// Static top (unfixed, but 100% wide) navbar
-.navbar-static-top {
-  z-index: @zindex-navbar;
-  border-width: 0 0 1px;
-
-  @media (min-width: @grid-float-breakpoint) {
-    border-radius: 0;
-  }
-}
-
 // Fix the top/bottom navbars when screen real estate supports it
 .navbar-fixed-top,
 .navbar-fixed-bottom {

src/ui/public/styles/bootstrap/theme.less

@@ -164,7 +164,6 @@
 }
 
 // Undo rounded corners in static and fixed navbars
-.navbar-static-top,
 .navbar-fixed-top,
 .navbar-fixed-bottom {
   border-radius: 0;

src/ui/public/styles/config.less

@@ -3,7 +3,6 @@
 .config {
   .navbar;
   .navbar-default();
-  .navbar-static-top;
   border-bottom: 1px solid;
   border-bottom-color: @config-border;
 

src/ui/public/styles/local_tabs.less

@@ -0,0 +1,33 @@
+@import (reference) "./variables.less";
+
+.localTabs {
+  display: flex;
+  align-items: center;
+}
+
+  .localTab {
+    flex: 0 0 auto;
+    padding: 5px 0 6px;
+    font-size: 18px;
+    line-height: 20px;
+    color: @kibanaGray2;
+    border-bottom: 2px solid transparent;
+    background-color: transparent;
+    text-decoration: none;
+
+    &.localTab-disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    &:only-child,
+    &:hover,
+    &.localTab-isSelected {
+      color: @kibanaGray1;
+      border-bottom-color: @kibanaGray1;
+    }
+  }
+
+  .localTab + .localTab {
+    margin-left: 20px;
+  }

src/ui/public/styles/theme.less

@@ -17,55 +17,6 @@
   border-width: 0;
 }
 
-  .navbar-static-top {
-    background-color: @kibanaGray5;
-    color: @kibanaGray2;
-    .navbar-brand:hover,
-    .navbar-brand {
-      float: none;
-      color: @kibanaGray2;
-      font-size: 1em;
-      background-color: transparent;
-      padding-top: 8px;
-      height: 35px;
-    }
-    .navbar-nav {
-
-      > li > a,
-      > span {
-        color: @kibanaGray2;
-        font-size: 1.5em;
-        padding: 5px 0 6px 0;
-        margin: 0 10px;
-        border-bottom: 2px solid transparent;
-      }
-      // singular tabs are treated as titles
-      > li:only-child > a {
-        color: @kibanaGray1;
-      }
-      // Active, hover state for the getTabs
-      > .active > a,
-      > .active > a:hover,
-      > .active > a:active,
-      > li > a:active,
-      > li > a:hover {
-        color: @kibanaGray1;
-        background-color: transparent;
-        border-bottom: 2px solid @kibanaGray1;
-      }
-
-      .is-navbar-nav-link-disabled {
-        opacity: 0.5;
-        cursor: default;
-
-        &:hover {
-          border-bottom-color: transparent;
-          color: @kibanaGray2;
-        }
-      }
-    }
-  }
-
   .navbar-btn-link {
     margin: 0;
     border-radius: 0;

src/ui/public/vislib/lib/handler/handler.js

@@ -103,7 +103,7 @@ export default function HandlerBaseClass(Private) {
      */
     render() {
       const self = this;
-      const charts = this.charts = [];
+      const { binder, charts = [] } = this;
       const selection = d3.select(this.el);
 
       selection.selectAll('*').remove();
@@ -125,7 +125,7 @@ export default function HandlerBaseClass(Private) {
           self.enable(event, chart);
         });
 
-        chart.events.on('rendered', () => {
+        binder.on(chart.events, 'rendered', () => {
           loadedCount++;
           if (loadedCount === chartSelection.length) {
             // events from all charts are propagated to vis, we only need to fire renderComplete on one (first)

test/functional/apps/console/_console.js

@@ -54,4 +54,18 @@ bdd.describe('console app', function describeIndexTests() {
       });
     });
   });
+
+  bdd.it('settings should allow changing the text size', async function () {
+    await PageObjects.console.setFontSizeSetting(20);
+    await PageObjects.common.try(async () => {
+      // the settings are not applied synchronously, so we retry for a time
+      expect(await PageObjects.console.getRequestFontSize()).to.be('20px');
+    });
+
+    await PageObjects.console.setFontSizeSetting(24);
+    await PageObjects.common.try(async () => {
+      // the settings are not applied synchronously, so we retry for a time
+      expect(await PageObjects.console.getRequestFontSize()).to.be('24px');
+    });
+  });
 });

test/support/page_objects/console_page.js

@@ -12,12 +12,16 @@ async function getVisibleTextFromAceEditor(editor) {
 }
 
 export default class ConsolePage {
-  init() {
+  init(remote) {
+    this.remote = remote;
+  }
 
+  async getRequestEditor() {
+    return await PageObjects.common.findTestSubject('console request-editor');
   }
 
   async getRequest() {
-    const requestEditor = await PageObjects.common.findTestSubject('console request-editor');
+    const requestEditor = await this.getRequestEditor();
     return await getVisibleTextFromAceEditor(requestEditor);
   }
 
@@ -32,7 +36,36 @@ export default class ConsolePage {
   }
 
   async collapseHelp() {
-    const closeButton = await PageObjects.common.findTestSubject('console top-nav config-close-button');
+    const closeButton = await PageObjects.common.findTestSubject('console help-close-button');
     await closeButton.click();
   }
+
+  async openSettings() {
+    const settingsButton = await PageObjects.common.findTestSubject('console top-nav menu-item-settings');
+    await settingsButton.click();
+  }
+
+  async setFontSizeSetting(newSize) {
+    await this.openSettings();
+
+    // while the settings form opens/loads this may fail, so retry for a while
+    await PageObjects.common.try(async () => {
+      const fontSizeInput = await PageObjects.common.findTestSubject('console setting-font-size-input');
+      await fontSizeInput.clearValue();
+      await fontSizeInput.click();
+      await fontSizeInput.type(String(newSize));
+    });
+
+    const saveButton = await PageObjects.common.findTestSubject('console settings-save-button');
+    await saveButton.click();
+  }
+
+  async getFontSize(editor) {
+    const aceLine = await editor.findByClassName('ace_line');
+    return await aceLine.getComputedStyle('font-size');
+  }
+
+  async getRequestFontSize() {
+    return await this.getFontSize(await this.getRequestEditor());
+  }
 }