Merge branch 'feature/design' into selectable_list_directive

Addressing review comments

.gitignore

@@ -1,4 +1,5 @@
 .aws-config.json
+.ackrc
 .DS_Store
 .node_binaries
 node_modules

src/plugins/kibana/public/settings/app.html

@@ -1,6 +1,7 @@
 <div class="app-container">
   <nav class="navbar navbar-default navbar-static-top subnav" data-test-subj="settingsNav">
     <div class="container-fluid">
+      <bread-crumbs></bread-crumbs>
       <ul class="nav navbar-nav">
         <li ng-repeat="section in sections" ng-class="section.class">
           <a class="navbar-link" kbn-href="{{section.url}}" data-test-subj="{{section.name}}">{{section.display}}</a>

src/plugins/kibana/public/settings/index.js

@@ -9,6 +9,7 @@ import 'ui/filters/start_from';
 import 'ui/field_editor';
 import 'plugins/kibana/settings/sections/indices/_indexed_fields';
 import 'plugins/kibana/settings/sections/indices/_scripted_fields';
+import 'ui/directives/bread_crumbs';
 import registry from 'ui/registry/settings_sections';
 import uiRoutes from 'ui/routes';
 import uiModules from 'ui/modules';

src/plugins/kibana/public/settings/styles/main.less

@@ -11,6 +11,10 @@ kbn-settings-objects-view {
   display: block;
 }
 
+nav.navbar {
+  height: 70px;
+}
+
 .settings-nav {
   text-transform: capitalize;
 }
@@ -19,6 +23,15 @@ li.kbn-settings-tab:first-letter {
   text-transform: capitalize;
 }
 
+kbn-settings-app {
+  div.app-container {
+    div.container-fluid {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
 kbn-settings-objects {
   form {
     margin-bottom: @line-height-computed;

src/plugins/kibana/public/visualize/styles/main.less

@@ -36,8 +36,9 @@
   }
 
   h3 {
-    margin-top: 35px;
-    padding: 0px 15px;
+    margin-top: 0px;
+    margin-bottom: 8px;
+    padding: 0px 5px;
   }
 
   .wizard-row {

src/plugins/kibana/public/visualize/wizard/step_1.html

@@ -1,3 +1,4 @@
+<bread-crumbs></bread-crumbs>
 <div class="wizard">
   <div class="wizard-column">
     <h3>Create New Visualization</h3>

src/plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,3 +1,4 @@
+<bread-crumbs></bread-crumbs>
 <div class="wizard">
   <div class="wizard-small wizard-column">
     <h3>From a New Search, Select Index</h3>
@@ -6,7 +7,7 @@
       list="indexPattern.list"
       user-make-url="makeUrl"
       class="wizard-row">
-    </paginataed-selectable-list>
+    </paginated-selectable-list>
   </div>
   <div class="wizard-large wizard-column">
     <h3>Or, From a Saved Search</h3>

src/ui/public/chrome/api/__tests__/angular.js

@@ -0,0 +1,19 @@
+import expect from 'expect.js';
+
+import kbnAngular from '../angular';
+import TabFakeStore from '../../__tests__/_tab_fake_store';
+import { noop } from 'lodash';
+
+describe('Chrome API :: Angular', () => {
+  describe('location helper methods', () => {
+    it('should return the sub app based on the url', () => {
+      const chrome = {
+        getInjected: noop,
+        addBasePath: noop
+      };
+      kbnAngular(chrome, {});
+    });
+    it('should return breadcrumbs based on the url', () => {
+    });
+  });
+});

src/ui/public/chrome/api/angular.js

@@ -3,6 +3,9 @@ import modules from 'ui/modules';
 
 module.exports = function (chrome, internals) {
 
+  chrome.getFirstPathSegment = _.noop;
+  chrome.getBreadcrumbs = _.noop;
+
   chrome.setupAngular = function () {
     var kibana = modules.get('kibana');
 
@@ -21,7 +24,16 @@ module.exports = function (chrome, internals) {
       a.href = chrome.addBasePath('/elasticsearch');
       return a.href;
     }()))
-    .config(chrome.$setupXsrfRequestInterceptor);
+    .config(chrome.$setupXsrfRequestInterceptor)
+    .run(($location) => {
+      chrome.getFirstPathSegment = () => {
+        return $location.path().split('/')[1];
+      };
+
+      chrome.getBreadcrumbs = () => {
+        return $location.path().split('/').slice(1);
+      };
+    });
 
     require('../directives')(chrome, internals);
 

src/ui/public/chrome/api/tabs.js

@@ -76,12 +76,6 @@ module.exports = function (chrome, internals) {
     return internals.tabs.getActive();
   };
 
-  /**
-   * @param {any} def - the default value if there isn't any active tab
-   * @return {any}
-   */
-  chrome.getActiveTabId = activeGetter('id');
-
   /**
    * @param {any} def - the default value if there isn't any active tab
    * @return {any}

src/ui/public/chrome/chrome.html

@@ -80,7 +80,7 @@
         </div>
         <!-- /Full navbar -->
       </nav>
-      <div class="application" ng-class="'tab-' + chrome.getActiveTabId('-none-') + ' ' + chrome.getApplicationClasses()" ng-view></div>
+      <div class="application" ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()" ng-view></div>
     </div>
   </div>
 </div>

src/ui/public/directives/__tests__/paginated_selectable_list.js

@@ -0,0 +1,30 @@
+import angular from 'angular';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import _ from 'lodash';
+
+describe('paginatedSelectableList', function () {
+  var list = [
+    { title: 'apple' },
+    { title: 'orange' },
+    { title: 'coconut' },
+    { title: 'banana' },
+    { title: 'grapes' }
+  ];
+  var $controller;
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(ngMock.inject(function (_$controller_) {
+    $controller = _$controller_;
+  }));
+
+  describe('$scope.hits', function () {
+    it('should sort and save the list to a hits array', function () {
+      const $scope = { list: list, listProperty: 'title' };
+      const controller = $controller('paginatedSelectableList', { $scope: $scope });
+
+      expect($scope.hits).to.be.an('array');
+      expect($scope.hits).toEqual(_.sortBy(list, 'title'));
+    });
+  });
+});

src/ui/public/directives/bread_crumbs.js

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+import chrome from 'ui/chrome/chrome';
+import breadCrumbsTemplate from 'ui/partials/bread_crumbs.html';
+import uiModules from 'ui/modules';
+var module = uiModules.get('kibana');
+
+module.directive('breadCrumbs', function () {
+  return {
+    restrict: 'E',
+    scope: true,
+    template: breadCrumbsTemplate,
+    controller: function ($scope) {
+      $scope.crumbs = chrome.getBreadcrumbs();
+
+      if (_.last($scope.crumbs) === '') {
+        // Remove the empty string from the end of the array
+        $scope.crumbs.pop();
+      }
+    }
+  };
+});

src/ui/public/partials/bread_crumbs.html

@@ -0,0 +1,6 @@
+<ul>
+  <li ng-repeat="crumb in crumbs">
+    <span>{{crumb}}</span>
+    <span ng-hide="$last"> / </span>
+  </li>
+</ul>

src/ui/public/partials/paginated_selectable_list.html

@@ -35,15 +35,17 @@
     <li
       class="list-group-item list-group-menu-item"
       ng-repeat="hit in page | filter: query">
-      <a ng-if="userMakeUrl" kbn-href="{{makeUrl(hit)}}">
-        <div><span>{{hit}}</span></div>
-      </a>
-      <div ng-if="userOnSelect" ng-click="onSelect(hit, $event)">
+      <div>
+        <a ng-show="userMakeUrl" kbn-href="{{makeUrl(hit)}}">
+          <span>{{hit}}</span>
+        </a>
+      </div>
+      <div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
         <span>{{hit}}</span>
       </div>
     </li>
     <li class="list-group-item list-group-no-results" ng-if="hits.length === 0">
-      <p ng-bind="'No matches found.'"></p>
+      <p>No matches found.</p>
     </li>
   </ul>
 </paginate>

src/ui/public/styles/base.less

@@ -287,6 +287,32 @@ table {
   }
 }
 
+//== breadCrumbsTemplate
+bread-crumbs {
+  ul {
+    margin: 0;
+    padding: 8px 10px;
+    list-style-type: none;
+    text-transform: capitalize;
+
+    >li {
+      display: inline;
+      >span {
+        color: @kibanaGray2;
+      }
+      >span:hover {
+        color: @kibanaGray1;
+      }
+    }
+
+    >li:last-child {
+      >span {
+        color: @kibanaGray1;
+      }
+    }
+  }
+}
+
 //== SavedObjectFinder
 saved-object-finder,
 paginated-selectable-list {