From 9c7c4d9aafe421862e6a193680cfc653de459584 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Mon, 14 Mar 2016 18:21:31 -0700 Subject: [PATCH 01/16] init commit --- .../directives/paginated_selectable_list.js | 0 .../partials/paginated_selectable_list.html | 49 +++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 src/ui/public/directives/paginated_selectable_list.js create mode 100644 src/ui/public/partials/paginated_selectable_list.html diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html new file mode 100644 index 000000000000..974d4937642e --- /dev/null +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -0,0 +1,49 @@ +
+
+
+
+ + + + +
+
+ {{finder.hitCount}} of {{finder.hitCount}} +
+
+
+
+ + + From 1aab5e06428f65eac4b330de40d097a274b403c9 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Tue, 15 Mar 2016 11:02:11 -0700 Subject: [PATCH 02/16] troubleshooting --- .../public/visualize/wizard/step_2.html | 19 +- .../directives/paginated_selectable_list.js | 249 ++++++++++++++++++ .../partials/paginated_selectable_list.html | 8 +- 3 files changed, 258 insertions(+), 18 deletions(-) diff --git a/src/plugins/kibana/public/visualize/wizard/step_2.html b/src/plugins/kibana/public/visualize/wizard/step_2.html index b04103312214..1248a8a432e4 100644 --- a/src/plugins/kibana/public/visualize/wizard/step_2.html +++ b/src/plugins/kibana/public/visualize/wizard/step_2.html @@ -1,18 +1,9 @@
-
-

From a New Search

- -
-
-
Index Patterns
-
- -
-
+ +

Or, From a Saved Search

diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index e69de29bb2d1..e3483ee25061 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -0,0 +1,249 @@ +import _ from 'lodash'; +import rison from 'ui/utils/rison'; +import keymap from 'ui/utils/key_map'; +import SavedObjectsSavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry'; +import uiModules from 'ui/modules'; +import paginatedSelectableListTemplate from 'ui/partials/paginated_selectable_list.html'; +var module = uiModules.get('kibana'); + +module.directive('selectableList', function ($location, $injector, kbnUrl, Private, config) { + + var services = Private(SavedObjectsSavedObjectRegistryProvider).byLoaderPropertiesName; + + return { + restrict: 'E', + scope: { + perPage: '=', + list: '=', + userOnSelect: '=?onSelect' + }, + template: paginatedSelectableListTemplate, + controllerAs: 'finder', + controller: function ($scope, $element, $timeout) { + var self = this; + + // the text input element + var $input = $element.find('input[ng-model=filter]'); + + // the list that will hold the suggestions + var $list = $element.find('ul'); + + // the current filter string, used to check that returned results are still useful + var currentFilter = $scope.filter; + + // the most recently entered search/filter + var prevSearch; + + // the list of hits, used to render display + self.hits = []; + + self.service = services[$scope.type]; + self.properties = self.service.loaderProperties; + + filterResults(); + + self.preventClick = function ($event) { + $event.preventDefault(); + }; + + /** + * Passed the hit objects and will determine if the + * hit should have a url in the UI, returns it if so + * @return {string|null} - the url or nothing + */ + self.makeUrl = function (hit) { + if ($scope.userMakeUrl) { + return $scope.userMakeUrl(hit); + } + + if (!$scope.userOnChoose) { + return hit.url; + } + + return '#'; + }; + + /** + * Called when a hit object is clicked, can override the + * url behavior if necessary. + */ + self.onSelect = function (hit, $event) { + if ($scope.userOnSelect) { + $scope.userOnSelect(hit, $event); + } + + var url = self.makeUrl(hit); + if (!url || url === '#' || url.charAt(0) !== '#') return; + + $event.preventDefault(); + + // we want the '/path', not '#/path' + kbnUrl.change(url.substr(1)); + }; + + $scope.$watch('filter', function (newFilter) { + // ensure that the currentFilter changes from undefined to '' + // which triggers + currentFilter = newFilter || ''; + filterResults(); + }); + + //manages the state of the keyboard selector + self.selector = { + enabled: false, + index: -1 + }; + + //key handler for the filter text box + self.filterKeyDown = function ($event) { + switch (keymap[$event.keyCode]) { + case 'tab': + if (self.hitCount === 0) return; + + self.selector.index = 0; + self.selector.enabled = true; + + selectTopHit(); + + $event.preventDefault(); + break; + case 'enter': + if (self.hitCount !== 1) return; + + var hit = self.hits[0]; + if (!hit) return; + + self.onChoose(hit, $event); + $event.preventDefault(); + break; + } + }; + + //key handler for the list items + self.hitKeyDown = function ($event, page, paginate) { + switch (keymap[$event.keyCode]) { + case 'tab': + if (!self.selector.enabled) break; + + self.selector.index = -1; + self.selector.enabled = false; + + //if the user types shift-tab return to the textbox + //if the user types tab, set the focus to the currently selected hit. + if ($event.shiftKey) { + $input.focus(); + } else { + $list.find('li.active a').focus(); + } + + $event.preventDefault(); + break; + case 'down': + if (!self.selector.enabled) break; + + if (self.selector.index + 1 < page.length) { + self.selector.index += 1; + } + $event.preventDefault(); + break; + case 'up': + if (!self.selector.enabled) break; + + if (self.selector.index > 0) { + self.selector.index -= 1; + } + $event.preventDefault(); + break; + case 'right': + if (!self.selector.enabled) break; + + if (page.number < page.count) { + paginate.goToPage(page.number + 1); + self.selector.index = 0; + selectTopHit(); + } + $event.preventDefault(); + break; + case 'left': + if (!self.selector.enabled) break; + + if (page.number > 1) { + paginate.goToPage(page.number - 1); + self.selector.index = 0; + selectTopHit(); + } + $event.preventDefault(); + break; + case 'escape': + if (!self.selector.enabled) break; + + $input.focus(); + $event.preventDefault(); + break; + case 'enter': + if (!self.selector.enabled) break; + + var hitIndex = ((page.number - 1) * paginate.perPage) + self.selector.index; + var hit = self.hits[hitIndex]; + if (!hit) break; + + self.onChoose(hit, $event); + $event.preventDefault(); + break; + case 'shift': + break; + default: + $input.focus(); + break; + } + }; + + self.hitBlur = function ($event) { + self.selector.index = -1; + self.selector.enabled = false; + }; + + function selectTopHit() { + setTimeout(function () { + //triggering a focus event kicks off a new angular digest cycle. + $list.find('a:first').focus(); + }, 0); + } + + function filterResults() { + if (!self.service) return; + if (!self.properties) return; + + // track the filter that we use for this search, + // but ensure that we don't search for the same + // thing twice. This is called from multiple places + // and needs to be smart about when it actually searches + var filter = currentFilter; + if (prevSearch === filter) return; + + prevSearch = filter; + self.service.find(filter) + .then(function (hits) { + // ensure that we don't display old results + // as we can't really cancel requests + if (currentFilter === filter) { + self.hitCount = hits.total; + self.hits = _.sortBy(hits.hits, 'title'); + } + }); + } + + function scrollIntoView($element, snapTop) { + var el = $element[0]; + + if (!el) return; + + if ('scrollIntoViewIfNeeded' in el) { + el.scrollIntoViewIfNeeded(snapTop); + } else if ('scrollIntoView' in el) { + el.scrollIntoView(snapTop); + } + } + } + }; +}); diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index 974d4937642e..969b148166a5 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -1,27 +1,27 @@
-
+
-
+
{{finder.hitCount}} of {{finder.hitCount}}
- +
  • Date: Wed, 16 Mar 2016 02:25:20 -0700 Subject: [PATCH 03/16] almost ready --- .../kibana/public/visualize/styles/main.less | 34 ++- .../public/visualize/wizard/step_2.html | 16 +- .../kibana/public/visualize/wizard/wizard.js | 3 +- src/ui/public/directives/paginate.js | 2 - .../directives/paginated_selectable_list.js | 231 ++---------------- .../public/directives/saved_object_finder.js | 17 -- .../partials/paginated_selectable_list.html | 36 +-- .../public/partials/saved_object_finder.html | 12 - src/ui/public/styles/base.less | 58 +++-- src/ui/public/styles/dark-variables.less | 3 +- .../styles/variables/bootstrap-mods.less | 2 +- 11 files changed, 109 insertions(+), 305 deletions(-) diff --git a/src/plugins/kibana/public/visualize/styles/main.less b/src/plugins/kibana/public/visualize/styles/main.less index ccb1169e698c..2ecfa7a30bcf 100644 --- a/src/plugins/kibana/public/visualize/styles/main.less +++ b/src/plugins/kibana/public/visualize/styles/main.less @@ -13,6 +13,30 @@ padding: 0; display: flex; + .wizard-column-1 { + flex: 2; + display: flex; + flex-direction: column; + padding: 0px 2.5px; + + .wizard-row { + flex: 1; + background-color: @kibanaGray6; + } + } + + .wizard-column-2 { + flex: 3; + display: flex; + flex-direction: column; + padding: 0px 2.5px; + + .wizard-row { + flex: 1; + background-color: @kibanaGray6; + } + } + .wizard-column { flex: 1; display: flex; @@ -45,7 +69,15 @@ .list-group { margin-bottom: 0; - .list-group-item { + .list-group-item .list-group-item-menu:hover { + background-color: transparent; + } + + .list-group-item .list-group-item-menu.active { + background-color: transparent; + } + + .list-group-item .list-group-item-menu { border-radius: 0; border: none; } diff --git a/src/plugins/kibana/public/visualize/wizard/step_2.html b/src/plugins/kibana/public/visualize/wizard/step_2.html index 1248a8a432e4..7c1ab5a3d1a5 100644 --- a/src/plugins/kibana/public/visualize/wizard/step_2.html +++ b/src/plugins/kibana/public/visualize/wizard/step_2.html @@ -1,10 +1,14 @@
    - - -
    +
    +

    From a New Search, Select Index

    + + +
    +

    Or, From a Saved Search

    0) { - self.selector.index -= 1; - } - $event.preventDefault(); - break; - case 'right': - if (!self.selector.enabled) break; - - if (page.number < page.count) { - paginate.goToPage(page.number + 1); - self.selector.index = 0; - selectTopHit(); - } - $event.preventDefault(); - break; - case 'left': - if (!self.selector.enabled) break; - - if (page.number > 1) { - paginate.goToPage(page.number - 1); - self.selector.index = 0; - selectTopHit(); - } - $event.preventDefault(); - break; - case 'escape': - if (!self.selector.enabled) break; - - $input.focus(); - $event.preventDefault(); - break; - case 'enter': - if (!self.selector.enabled) break; - - var hitIndex = ((page.number - 1) * paginate.perPage) + self.selector.index; - var hit = self.hits[hitIndex]; - if (!hit) break; - - self.onChoose(hit, $event); - $event.preventDefault(); - break; - case 'shift': - break; - default: - $input.focus(); - break; - } - }; - - self.hitBlur = function ($event) { - self.selector.index = -1; - self.selector.enabled = false; - }; - - function selectTopHit() { - setTimeout(function () { - //triggering a focus event kicks off a new angular digest cycle. - $list.find('a:first').focus(); - }, 0); - } - - function filterResults() { - if (!self.service) return; - if (!self.properties) return; - - // track the filter that we use for this search, - // but ensure that we don't search for the same - // thing twice. This is called from multiple places - // and needs to be smart about when it actually searches - var filter = currentFilter; - if (prevSearch === filter) return; - - prevSearch = filter; - self.service.find(filter) - .then(function (hits) { - // ensure that we don't display old results - // as we can't really cancel requests - if (currentFilter === filter) { - self.hitCount = hits.total; - self.hits = _.sortBy(hits.hits, 'title'); - } - }); - } - - function scrollIntoView($element, snapTop) { - var el = $element[0]; - - if (!el) return; - - if ('scrollIntoViewIfNeeded' in el) { - el.scrollIntoViewIfNeeded(snapTop); - } else if ('scrollIntoView' in el) { - el.scrollIntoView(snapTop); - } - } } }; }); diff --git a/src/ui/public/directives/saved_object_finder.js b/src/ui/public/directives/saved_object_finder.js index 4b1a02e1624b..6cb56f3fa48d 100644 --- a/src/ui/public/directives/saved_object_finder.js +++ b/src/ui/public/directives/saved_object_finder.js @@ -48,23 +48,6 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr filterResults(); - /** - * Boolean that keeps track of whether hits are sorted ascending (true) - * or descending (false) by title - * @type {Boolean} - */ - self.isAscending = true; - - /** - * Sorts saved object finder hits either ascending or descending - * @param {Array} hits Array of saved finder object hits - * @return {Array} Array sorted either ascending or descending - */ - self.sortHits = function (hits) { - self.isAscending = !self.isAscending; - self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse(); - }; - /** * Passed the hit objects and will determine if the * hit should have a url in the UI, returns it if so diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index 969b148166a5..d6061cfce809 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -7,43 +7,31 @@
    - {{finder.hitCount}} of {{finder.hitCount}} + {{hitCount}} of {{hitCount}}
    - -
      + + diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html index e5eda0c18cdf..72f4986254b6 100644 --- a/src/ui/public/partials/saved_object_finder.html +++ b/src/ui/public/partials/saved_object_finder.html @@ -26,18 +26,6 @@
        - -
      • - - Name - - - -
        • -
      • Date: Wed, 16 Mar 2016 09:25:35 -0700 Subject: [PATCH 04/16] removing commented code --- src/ui/public/styles/dark-variables.less | 2 +- src/ui/public/styles/variables/bootstrap-mods.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/public/styles/dark-variables.less b/src/ui/public/styles/dark-variables.less index 4e1170777b83..e61a7c7a8898 100644 --- a/src/ui/public/styles/dark-variables.less +++ b/src/ui/public/styles/dark-variables.less @@ -145,7 +145,7 @@ @list-group-menu-item-hover-bg: @well-bg; @component-active-color: @gray5; -@component-active-bg: transparent; //@gray9; +@component-active-bg: @gray9; @navbar-default-color: @white; @navbar-default-bg: @gray3; diff --git a/src/ui/public/styles/variables/bootstrap-mods.less b/src/ui/public/styles/variables/bootstrap-mods.less index 16894e72a89b..f341e7825ca3 100644 --- a/src/ui/public/styles/variables/bootstrap-mods.less +++ b/src/ui/public/styles/variables/bootstrap-mods.less @@ -90,7 +90,7 @@ //** Global color for active items (e.g., navs or dropdowns). @component-active-color: @white; //** Global background color for active items (e.g., navs or dropdowns). -@component-active-bg: transparent; //@brand-primary; +@component-active-bg: @brand-primary; //== Tables // From 041c2f6f412e39f6ad57394239ce502f0193c774 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Wed, 16 Mar 2016 17:34:33 -0700 Subject: [PATCH 05/16] adding back sort functionality to saved object and paginated selectable list directives and updating the styling, making makeUrl and onSelect functions mutually exclusive --- .../directives/paginated_selectable_list.js | 38 +++++++++---------- .../public/directives/saved_object_finder.js | 17 +++++++++ .../partials/paginated_selectable_list.html | 18 +++++++-- .../public/partials/saved_object_finder.html | 10 +++++ src/ui/public/styles/base.less | 4 +- 5 files changed, 63 insertions(+), 24 deletions(-) diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index fa3db5e040dc..e1b981e19ae0 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -22,29 +22,29 @@ module.directive('paginatedSelectableList', function (kbnUrl) { $scope.hitCount = $scope.hits.length; + /** + * Boolean that keeps track of whether hits are sorted ascending (true) + * or descending (false) by title + * @type {Boolean} + */ + $scope.isAscending = true; + + /** + * Sorts saved object finder hits either ascending or descending + * @param {Array} hits Array of saved finder object hits + * @return {Array} Array sorted either ascending or descending + */ + $scope.sortHits = function (hits) { + $scope.isAscending = !$scope.isAscending; + $scope.list = $scope.isAscending ? hits.sort() : hits.reverse(); + }; + $scope.makeUrl = function (hit) { - if ($scope.userMakeUrl) { - return $scope.userMakeUrl(hit); - } - return '#'; + return $scope.userMakeUrl(hit); }; $scope.onSelect = function (hit, $event) { - if ($scope.userOnSelect) { - return $scope.userOnSelect(hit, $event); - } - - var url = $scope.makeUrl(hit); - if (!url || url === '#' || url.charAt(0) !== '#') return; - - $event.preventDefault(); - - // we want the '/path', not '#/path' - kbnUrl.change(url.substr(1)); - }; - - $scope.preventClick = function ($event) { - $event.preventDefault(); + return $scope.userOnSelect(hit, $event); }; $scope.$watch('query', function (val) { diff --git a/src/ui/public/directives/saved_object_finder.js b/src/ui/public/directives/saved_object_finder.js index 6cb56f3fa48d..4b1a02e1624b 100644 --- a/src/ui/public/directives/saved_object_finder.js +++ b/src/ui/public/directives/saved_object_finder.js @@ -48,6 +48,23 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr filterResults(); + /** + * Boolean that keeps track of whether hits are sorted ascending (true) + * or descending (false) by title + * @type {Boolean} + */ + self.isAscending = true; + + /** + * Sorts saved object finder hits either ascending or descending + * @param {Array} hits Array of saved finder object hits + * @return {Array} Array sorted either ascending or descending + */ + self.sortHits = function (hits) { + self.isAscending = !self.isAscending; + self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse(); + }; + /** * Passed the hit objects and will determine if the * hit should have a url in the UI, returns it if so diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index d6061cfce809..9f26abffd46c 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -22,13 +22,25 @@
          +
        • + + Name + + + +
        • - + ng-repeat="hit in page | filter: query | orderBy: hit.toString()"> + {{hit}} +
          + {{hit}} +

        • diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html index 72f4986254b6..ad69c41a2d01 100644 --- a/src/ui/public/partials/saved_object_finder.html +++ b/src/ui/public/partials/saved_object_finder.html @@ -26,6 +26,16 @@
            +
          • + + Name + + + +
          • Date: Wed, 16 Mar 2016 21:52:23 -0700 Subject: [PATCH 06/16] fixing issue with list not sorting --- src/ui/public/directives/paginated_selectable_list.js | 4 ++-- src/ui/public/partials/paginated_selectable_list.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index e1b981e19ae0..b0a0d562fb33 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -18,7 +18,7 @@ module.directive('paginatedSelectableList', function (kbnUrl) { controller: function ($scope, $element, $filter) { $scope.perPage = $scope.perPage || 10; - $scope.hits = $scope.list || []; + $scope.hits = $scope.list.sort() || []; $scope.hitCount = $scope.hits.length; @@ -36,7 +36,7 @@ module.directive('paginatedSelectableList', function (kbnUrl) { */ $scope.sortHits = function (hits) { $scope.isAscending = !$scope.isAscending; - $scope.list = $scope.isAscending ? hits.sort() : hits.reverse(); + $scope.hits = $scope.isAscending ? hits.sort() : hits.reverse(); }; $scope.makeUrl = function (hit) { diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index 9f26abffd46c..b98aacca94cc 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -34,7 +34,7 @@
          • + ng-repeat="hit in page | filter: query"> {{hit}} From 27c6f17f56ff8677eb99b761c8a222c52264a18a Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Wed, 16 Mar 2016 22:05:43 -0700 Subject: [PATCH 07/16] refactoring html and css --- .../kibana/public/visualize/styles/main.less | 20 ++----------------- .../public/visualize/wizard/step_2.html | 4 ++-- .../partials/paginated_selectable_list.html | 2 +- 3 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/plugins/kibana/public/visualize/styles/main.less b/src/plugins/kibana/public/visualize/styles/main.less index 2ecfa7a30bcf..527ed1285469 100644 --- a/src/plugins/kibana/public/visualize/styles/main.less +++ b/src/plugins/kibana/public/visualize/styles/main.less @@ -13,28 +13,12 @@ padding: 0; display: flex; - .wizard-column-1 { + div.wizard-small { flex: 2; - display: flex; - flex-direction: column; - padding: 0px 2.5px; - - .wizard-row { - flex: 1; - background-color: @kibanaGray6; - } } - .wizard-column-2 { + div.wizard-large { flex: 3; - display: flex; - flex-direction: column; - padding: 0px 2.5px; - - .wizard-row { - flex: 1; - background-color: @kibanaGray6; - } } .wizard-column { diff --git a/src/plugins/kibana/public/visualize/wizard/step_2.html b/src/plugins/kibana/public/visualize/wizard/step_2.html index 7c1ab5a3d1a5..1d762dcc1fed 100644 --- a/src/plugins/kibana/public/visualize/wizard/step_2.html +++ b/src/plugins/kibana/public/visualize/wizard/step_2.html @@ -1,5 +1,5 @@
            -
            +

            From a New Search, Select Index

            -
            +

            Or, From a Saved Search

            - {{hit}} +
            {{hit}}
            {{hit}} From 1ff22b1f777aa56f4ffda009c8babf0e6495b113 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Thu, 17 Mar 2016 14:22:42 -0700 Subject: [PATCH 08/16] refactoring to allow for array of objects, removing useless css styles --- .../kibana/public/visualize/styles/main.less | 13 ----------- .../directives/paginated_selectable_list.js | 22 ++++++++++++------- .../partials/paginated_selectable_list.html | 2 +- 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/src/plugins/kibana/public/visualize/styles/main.less b/src/plugins/kibana/public/visualize/styles/main.less index 527ed1285469..7be5e46ec6d9 100644 --- a/src/plugins/kibana/public/visualize/styles/main.less +++ b/src/plugins/kibana/public/visualize/styles/main.less @@ -52,19 +52,6 @@ .list-group { margin-bottom: 0; - - .list-group-item .list-group-item-menu:hover { - background-color: transparent; - } - - .list-group-item .list-group-item-menu.active { - background-color: transparent; - } - - .list-group-item .list-group-item-menu { - border-radius: 0; - border: none; - } } .striped { diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index b0a0d562fb33..d5a93b7b5a79 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -11,21 +11,20 @@ module.directive('paginatedSelectableList', function (kbnUrl) { scope: { perPage: '=', list: '=', + listProperty: '=', userMakeUrl: '=', userOnSelect: '=' }, template: paginatedSelectableListTemplate, controller: function ($scope, $element, $filter) { $scope.perPage = $scope.perPage || 10; - - $scope.hits = $scope.list.sort() || []; - - $scope.hitCount = $scope.hits.length; + $scope.hits = $scope.list = _.sortBy($scope.list, accessor) || []; + $scope.filterCount = $scope.hitCount = $scope.hits.length; /** * Boolean that keeps track of whether hits are sorted ascending (true) - * or descending (false) by title - * @type {Boolean} + * or descending (false) + * * @type {Boolean} */ $scope.isAscending = true; @@ -35,8 +34,10 @@ module.directive('paginatedSelectableList', function (kbnUrl) { * @return {Array} Array sorted either ascending or descending */ $scope.sortHits = function (hits) { + const sortedList = _.sortBy(hits, accessor); + $scope.isAscending = !$scope.isAscending; - $scope.hits = $scope.isAscending ? hits.sort() : hits.reverse(); + $scope.hits = $scope.isAscending ? sortedList : sortedList.reverse(); }; $scope.makeUrl = function (hit) { @@ -49,8 +50,13 @@ module.directive('paginatedSelectableList', function (kbnUrl) { $scope.$watch('query', function (val) { $scope.hits = $filter('filter')($scope.list, val); - $scope.hitCount = $scope.hits.length; + $scope.filterCount = $scope.hits.length; }); + + function accessor(val) { + const prop = $scope.listProperty; + return prop ? val[prop] : val; + } } }; }); diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index df87ec27c9ce..de5522772efe 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -15,7 +15,7 @@ autocomplete="off" />
            - {{hitCount}} of {{hitCount}} + {{filterCount}} of {{hitCount}}
            From 420c1bcf77afa25a4b25cbd6b8bd20de267c1c81 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Thu, 17 Mar 2016 22:54:27 -0700 Subject: [PATCH 09/16] adding tests --- .../__tests__/paginated_selectable_list.js | 137 +++++++++++++++--- .../directives/paginated_selectable_list.js | 14 +- 2 files changed, 127 insertions(+), 24 deletions(-) diff --git a/src/ui/public/directives/__tests__/paginated_selectable_list.js b/src/ui/public/directives/__tests__/paginated_selectable_list.js index 833748949290..df259deeb2ae 100644 --- a/src/ui/public/directives/__tests__/paginated_selectable_list.js +++ b/src/ui/public/directives/__tests__/paginated_selectable_list.js @@ -3,28 +3,127 @@ import expect from 'expect.js'; import ngMock from 'ng_mock'; import _ from 'lodash'; +var list = [ + { title: 'apple' }, + { title: 'orange' }, + { title: 'coconut' }, + { title: 'banana' }, + { title: 'grapes' } +]; +var $scope; +var $element; +var $isolatedScope; + +function test(val) { + return val; +} + +var init = function (arr) { + // Load the application + ngMock.module('kibana'); + + // Create the scope + ngMock.inject(function ($rootScope, $compile) { + $scope = $rootScope.$new(); + $scope.perPage = 5; + $scope.list = list; + $scope.listProperty = 'title'; + $scope.test = test; + + // Create the element + $element = angular.element(''); + + // And compile it + $compile($element)($scope); + + // Fire a digest cycle + $element.scope().$digest(); + + // Grab the isolate scope so we can test it + $isolatedScope = $element.isolateScope(); + }); +}; + 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 }); + beforeEach(function () { + init(list); + }); - expect($scope.hits).to.be.an('array'); - expect($scope.hits).toEqual(_.sortBy(list, 'title')); + it('should initially sort an array of objects in ascending order', function () { + var property = $isolatedScope.listProperty; + var sortedList = _.sortBy(list, property); + + expect($isolatedScope.hits).to.be.an('array'); + + $isolatedScope.hits.forEach(function (hit, index) { + expect(hit[property]).to.equal(sortedList[index][property]); + }); + }); + }); + + describe('$scope.sortHits', function () { + beforeEach(function () { + init(list); + }); + + it('should sort an array of objects in ascending order', function () { + var property = $isolatedScope.listProperty; + var sortedList = _.sortBy(list, property); + + $isolatedScope.isAscending = false; + $isolatedScope.sortHits(list); + + expect($isolatedScope.isAscending).to.be(true); + + $isolatedScope.hits.forEach(function (hit, index) { + expect(hit[property]).to.equal(sortedList[index][property]); + }); + }); + + it('should sort an array of objects in descending order', function () { + var property = $isolatedScope.listProperty; + var reversedList = _.sortBy(list, property).reverse(); + + $isolatedScope.isAscending = true; + $isolatedScope.sortHits(list); + + expect($isolatedScope.isAscending).to.be(false); + + $isolatedScope.hits.forEach(function (hit, index) { + expect(hit[property]).to.equal(reversedList[index][property]); + }); + }); + }); + + describe('$scope.makeUrl', function () { + beforeEach(function () { + init(list); + }); + + it('should return the result of the function its passed', function () { + var property = $isolatedScope.listProperty; + var sortedList = _.sortBy(list, property); + + $isolatedScope.hits.forEach(function (hit, index) { + expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]); + }); + }); + }); + + describe('$scope.onSelect', function () { + beforeEach(function () { + init(list); + }); + + it('should return the result of the function its passed', function () { + var property = $isolatedScope.listProperty; + var sortedList = _.sortBy(list, property); + + $isolatedScope.hits.forEach(function (hit, index) { + expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]); + }); }); }); }); diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index d5a93b7b5a79..37f6a121e647 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -9,11 +9,11 @@ module.directive('paginatedSelectableList', function (kbnUrl) { return { restrict: 'E', scope: { - perPage: '=', + perPage: '=?', list: '=', listProperty: '=', - userMakeUrl: '=', - userOnSelect: '=' + userMakeUrl: '=?', + userOnSelect: '=?' }, template: paginatedSelectableListTemplate, controller: function ($scope, $element, $filter) { @@ -41,11 +41,15 @@ module.directive('paginatedSelectableList', function (kbnUrl) { }; $scope.makeUrl = function (hit) { - return $scope.userMakeUrl(hit); + if ($scope.userMakeUrl) { + return $scope.userMakeUrl(hit); + } }; $scope.onSelect = function (hit, $event) { - return $scope.userOnSelect(hit, $event); + if ($scope.userOnSelect) { + return $scope.userOnSelect(hit, $event); + } }; $scope.$watch('query', function (val) { From b968b0b6e0e2767110cd120fe3991c5c66a046ce Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Fri, 18 Mar 2016 17:25:43 -0700 Subject: [PATCH 10/16] adding more tests, refactoring directive --- .../__tests__/paginated_selectable_list.js | 206 ++++++++++-------- .../directives/paginated_selectable_list.js | 9 +- .../partials/paginated_selectable_list.html | 24 +- .../public/partials/saved_object_finder.html | 9 +- src/ui/public/styles/base.less | 1 - 5 files changed, 136 insertions(+), 113 deletions(-) diff --git a/src/ui/public/directives/__tests__/paginated_selectable_list.js b/src/ui/public/directives/__tests__/paginated_selectable_list.js index df259deeb2ae..3d74e9923c5d 100644 --- a/src/ui/public/directives/__tests__/paginated_selectable_list.js +++ b/src/ui/public/directives/__tests__/paginated_selectable_list.js @@ -3,126 +3,162 @@ import expect from 'expect.js'; import ngMock from 'ng_mock'; import _ from 'lodash'; -var list = [ +var objectList = [ { title: 'apple' }, { title: 'orange' }, { title: 'coconut' }, { title: 'banana' }, { title: 'grapes' } ]; + +var stringList = [ + 'apple', + 'orange', + 'coconut', + 'banana', + 'grapes' +]; + +var lists = [objectList, stringList, []]; + var $scope; var $element; var $isolatedScope; -function test(val) { - return val; -} - -var init = function (arr) { - // Load the application - ngMock.module('kibana'); - - // Create the scope - ngMock.inject(function ($rootScope, $compile) { - $scope = $rootScope.$new(); - $scope.perPage = 5; - $scope.list = list; - $scope.listProperty = 'title'; - $scope.test = test; - - // Create the element - $element = angular.element(''); - - // And compile it - $compile($element)($scope); - - // Fire a digest cycle - $element.scope().$digest(); - - // Grab the isolate scope so we can test it - $isolatedScope = $element.isolateScope(); +lists.forEach(function (list) { + var isArrayOfObjects = list.every((item) => { + return _.isPlainObject(item); }); -}; -describe('paginatedSelectableList', function () { - describe('$scope.hits', function () { - beforeEach(function () { - init(list); + var init = function (arr) { + // Load the application + ngMock.module('kibana'); + + // Create the scope + ngMock.inject(function ($rootScope, $compile) { + $scope = $rootScope.$new(); + $scope.perPage = 5; + $scope.list = list; + $scope.listProperty = isArrayOfObjects ? 'title' : undefined; + $scope.test = function (val) { + return val; + }; + + // Create the element + $element = angular.element(''); + + // And compile it + $compile($element)($scope); + + // Fire a digest cycle + $element.scope().$digest(); + + // Grab the isolate scope so we can test it + $isolatedScope = $element.isolateScope(); }); + }; - it('should initially sort an array of objects in ascending order', function () { - var property = $isolatedScope.listProperty; - var sortedList = _.sortBy(list, property); + describe('paginatedSelectableList', function () { - expect($isolatedScope.hits).to.be.an('array'); - - $isolatedScope.hits.forEach(function (hit, index) { - expect(hit[property]).to.equal(sortedList[index][property]); + describe('$scope.hits', function () { + beforeEach(function () { + init(list); }); - }); - }); - describe('$scope.sortHits', function () { - beforeEach(function () { - init(list); - }); + it('should initially sort an array of objects in ascending order', function () { + var property = $isolatedScope.listProperty; + var sortedList = property ? _.sortBy(list, property) : _.sortBy(list); - it('should sort an array of objects in ascending order', function () { - var property = $isolatedScope.listProperty; - var sortedList = _.sortBy(list, property); + expect($isolatedScope.hits).to.be.an('array'); - $isolatedScope.isAscending = false; - $isolatedScope.sortHits(list); - - expect($isolatedScope.isAscending).to.be(true); - - $isolatedScope.hits.forEach(function (hit, index) { - expect(hit[property]).to.equal(sortedList[index][property]); + $isolatedScope.hits.forEach(function (hit, index) { + if (property) { + expect(hit[property]).to.equal(sortedList[index][property]); + } else { + expect(hit).to.equal(sortedList[index]); + } + }); }); }); - it('should sort an array of objects in descending order', function () { - var property = $isolatedScope.listProperty; - var reversedList = _.sortBy(list, property).reverse(); + describe('$scope.sortHits', function () { + beforeEach(function () { + init(list); + }); - $isolatedScope.isAscending = true; - $isolatedScope.sortHits(list); + it('should sort an array of objects in ascending order', function () { + var property = $isolatedScope.listProperty; + var sortedList = property ? _.sortBy(list, property) : _.sortBy(list); - expect($isolatedScope.isAscending).to.be(false); + $isolatedScope.isAscending = false; + $isolatedScope.sortHits(list); - $isolatedScope.hits.forEach(function (hit, index) { - expect(hit[property]).to.equal(reversedList[index][property]); + expect($isolatedScope.isAscending).to.be(true); + + $isolatedScope.hits.forEach(function (hit, index) { + if (property) { + expect(hit[property]).to.equal(sortedList[index][property]); + } else { + expect(hit).to.equal(sortedList[index]); + } + }); + }); + + it('should sort an array of objects in descending order', function () { + var property = $isolatedScope.listProperty; + var reversedList = property ? _.sortBy(list, property).reverse() : _.sortBy(list).reverse(); + + $isolatedScope.isAscending = true; + $isolatedScope.sortHits(list); + + expect($isolatedScope.isAscending).to.be(false); + + $isolatedScope.hits.forEach(function (hit, index) { + if (property) { + expect(hit[property]).to.equal(reversedList[index][property]); + } else { + expect(hit).to.equal(reversedList[index]); + } + }); }); }); - }); - describe('$scope.makeUrl', function () { - beforeEach(function () { - init(list); - }); + describe('$scope.makeUrl', function () { + beforeEach(function () { + init(list); + }); - it('should return the result of the function its passed', function () { - var property = $isolatedScope.listProperty; - var sortedList = _.sortBy(list, property); + it('should return the result of the function its passed', function () { + var property = $isolatedScope.listProperty; + var sortedList = property ? _.sortBy(list, property) : _.sortBy(list); - $isolatedScope.hits.forEach(function (hit, index) { - expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]); + $isolatedScope.hits.forEach(function (hit, index) { + if (property) { + expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]); + } else { + expect($isolatedScope.makeUrl(hit)).to.equal(sortedList[index]); + } + }); }); }); - }); - describe('$scope.onSelect', function () { - beforeEach(function () { - init(list); - }); + describe('$scope.onSelect', function () { + beforeEach(function () { + init(list); + }); - it('should return the result of the function its passed', function () { - var property = $isolatedScope.listProperty; - var sortedList = _.sortBy(list, property); + it('should return the result of the function its passed', function () { + var property = $isolatedScope.listProperty; + var sortedList = property ? _.sortBy(list, property) : _.sortBy(list); - $isolatedScope.hits.forEach(function (hit, index) { - expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]); + $isolatedScope.hits.forEach(function (hit, index) { + if (property) { + expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]); + } else { + expect($isolatedScope.onSelect(hit)).to.equal(sortedList[index]); + } + }); }); }); }); diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index 37f6a121e647..7a63cca6fc9c 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -18,8 +18,8 @@ module.directive('paginatedSelectableList', function (kbnUrl) { template: paginatedSelectableListTemplate, controller: function ($scope, $element, $filter) { $scope.perPage = $scope.perPage || 10; - $scope.hits = $scope.list = _.sortBy($scope.list, accessor) || []; - $scope.filterCount = $scope.hitCount = $scope.hits.length; + $scope.hits = $scope.list = _.sortBy($scope.list, accessor); + $scope.hitCount = $scope.hits.length; /** * Boolean that keeps track of whether hits are sorted ascending (true) @@ -52,11 +52,6 @@ module.directive('paginatedSelectableList', function (kbnUrl) { } }; - $scope.$watch('query', function (val) { - $scope.hits = $filter('filter')($scope.list, val); - $scope.filterCount = $scope.hits.length; - }); - function accessor(val) { const prop = $scope.listProperty; return prop ? val[prop] : val; diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index caeb91390ea9..86dd869afa0e 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -15,36 +15,30 @@ autocomplete="off" />
            - {{filterCount}} of {{hitCount}} + {{ (hits | filter: query).length }} of {{ hitCount }}
- + diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html index ad69c41a2d01..218026461138 100644 --- a/src/ui/public/partials/saved_object_finder.html +++ b/src/ui/public/partials/saved_object_finder.html @@ -19,19 +19,20 @@ {{finder.hitCount}} of {{finder.hitCount}}
- Manage {{finder.properties.nouns}} + + Manage {{finder.properties.nouns}} +
    -
  • +
  • Name @@ -51,12 +52,10 @@

    • -

    • -
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index 42308cab0f49..66a1f6d69d8e 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -353,7 +353,6 @@ paginated-selectable-list { border: none; padding: 5px 0px; border-radius: @border-radius-base; - text-transform: capitalize; } span { From 149cc2ec6f6b8d40b7a9c5664d16dcbca6c0c869 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Tue, 22 Mar 2016 11:58:54 -0700 Subject: [PATCH 11/16] fixing issue with background hover on paginated-selectable-list and saved-object-finder --- src/ui/public/partials/paginated_selectable_list.html | 2 +- src/ui/public/partials/saved_object_finder.html | 2 +- src/ui/public/styles/variables/for-theme.less | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index 86dd869afa0e..3c94ccfb74e0 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -22,7 +22,7 @@
    -
  • +
  • Name diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html index 218026461138..10728fa33399 100644 --- a/src/ui/public/partials/saved_object_finder.html +++ b/src/ui/public/partials/saved_object_finder.html @@ -28,7 +28,7 @@
      -
    • +
    • Name Date: Wed, 23 Mar 2016 11:06:57 -0700 Subject: [PATCH 12/16] adding label filter for input on saved object filter placeholder --- src/ui/public/partials/saved_object_finder.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html index 10728fa33399..11990711f350 100644 --- a/src/ui/public/partials/saved_object_finder.html +++ b/src/ui/public/partials/saved_object_finder.html @@ -8,7 +8,7 @@ Date: Wed, 23 Mar 2016 11:36:02 -0700 Subject: [PATCH 13/16] removing div and adding display block to anchor tag to allow the entire row to be clickable --- src/ui/public/partials/paginated_selectable_list.html | 8 +++----- src/ui/public/styles/base.less | 1 + 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/ui/public/partials/paginated_selectable_list.html b/src/ui/public/partials/paginated_selectable_list.html index 3c94ccfb74e0..8b9874bf4f32 100644 --- a/src/ui/public/partials/paginated_selectable_list.html +++ b/src/ui/public/partials/paginated_selectable_list.html @@ -29,11 +29,9 @@
    • - + + {{ hit }} +
      {{ hit }}
      diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index ee2235ff1b5e..4a97d0d8d407 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -410,6 +410,7 @@ paginated-selectable-list { margin-right: 10px; } + display: block; color: @saved-object-finder-link-color !important; } From 73a8adb9138f296a8a8e7854c1e8a9dc3c828c1a Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Wed, 23 Mar 2016 17:58:18 -0700 Subject: [PATCH 14/16] adding error case and test --- .../__tests__/paginated_selectable_list.js | 7 +++++++ .../public/directives/paginated_selectable_list.js | 12 ++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/ui/public/directives/__tests__/paginated_selectable_list.js b/src/ui/public/directives/__tests__/paginated_selectable_list.js index 3d74e9923c5d..4ac0e8eb4d37 100644 --- a/src/ui/public/directives/__tests__/paginated_selectable_list.js +++ b/src/ui/public/directives/__tests__/paginated_selectable_list.js @@ -61,6 +61,13 @@ lists.forEach(function (list) { describe('paginatedSelectableList', function () { + it('should throw an error when there is no makeUrl and onSelect attribute', ngMock.inject(function ($compile, $rootScope) { + function errorWrapper() { + $compile(angular.element(''))($rootScope.new()); + } + expect(errorWrapper).to.throwError(); + })); + describe('$scope.hits', function () { beforeEach(function () { init(list); diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index 7a63cca6fc9c..2ad179e5fb1d 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -17,6 +17,10 @@ module.directive('paginatedSelectableList', function (kbnUrl) { }, template: paginatedSelectableListTemplate, controller: function ($scope, $element, $filter) { + if (!$scope.userMakeUrl && !$scope.userOnSelect) { + throw new Error('paginatedSelectableList directive expects a makeUrl or onSelect function'); + } + $scope.perPage = $scope.perPage || 10; $scope.hits = $scope.list = _.sortBy($scope.list, accessor); $scope.hitCount = $scope.hits.length; @@ -41,15 +45,11 @@ module.directive('paginatedSelectableList', function (kbnUrl) { }; $scope.makeUrl = function (hit) { - if ($scope.userMakeUrl) { - return $scope.userMakeUrl(hit); - } + return $scope.userMakeUrl(hit); }; $scope.onSelect = function (hit, $event) { - if ($scope.userOnSelect) { - return $scope.userOnSelect(hit, $event); - } + return $scope.userOnSelect(hit, $event); }; function accessor(val) { From 6f0892d6bb2dd3e4846bf94df766e11e86d2bc16 Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Thu, 24 Mar 2016 14:09:47 -0700 Subject: [PATCH 15/16] adding an error case and more tests --- .../__tests__/paginated_selectable_list.js | 40 +++++++++++++++++-- .../directives/paginated_selectable_list.js | 12 +++++- 2 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/ui/public/directives/__tests__/paginated_selectable_list.js b/src/ui/public/directives/__tests__/paginated_selectable_list.js index 4ac0e8eb4d37..88768ff3802b 100644 --- a/src/ui/public/directives/__tests__/paginated_selectable_list.js +++ b/src/ui/public/directives/__tests__/paginated_selectable_list.js @@ -40,13 +40,11 @@ lists.forEach(function (list) { $scope.perPage = 5; $scope.list = list; $scope.listProperty = isArrayOfObjects ? 'title' : undefined; - $scope.test = function (val) { - return val; - }; + $scope.test = function (val) { return val; }; // Create the element $element = angular.element(''); + 'list-property="listProperty" user-make-url="test">'); // And compile it $compile($element)($scope); @@ -60,6 +58,7 @@ lists.forEach(function (list) { }; describe('paginatedSelectableList', function () { + var scope; it('should throw an error when there is no makeUrl and onSelect attribute', ngMock.inject(function ($compile, $rootScope) { function errorWrapper() { @@ -68,6 +67,37 @@ lists.forEach(function (list) { expect(errorWrapper).to.throwError(); })); + it('should throw an error with both makeUrl and onSelect attributes', function () { + function errorWrapper() { + // Load the application + ngMock.module('kibana'); + + // Create the scope + ngMock.inject(function ($rootScope, $compile) { + $scope = $rootScope.$new(); + $scope.perPage = 5; + $scope.list = list; + $scope.listProperty = isArrayOfObjects ? 'title' : undefined; + $scope.test = function (val) { return val; }; + + // Create the element + $element = angular.element(''); + + // And compile it + $compile($element)($scope); + + // Fire a digest cycle + $element.scope().$digest(); + + // Grab the isolate scope so we can test it + $isolatedScope = $element.isolateScope(); + }); + } + + expect(errorWrapper).to.throwError(); + }); + describe('$scope.hits', function () { beforeEach(function () { init(list); @@ -159,6 +189,8 @@ lists.forEach(function (list) { var property = $isolatedScope.listProperty; var sortedList = property ? _.sortBy(list, property) : _.sortBy(list); + $isolatedScope.userOnSelect = function (val) { return val; }; + $isolatedScope.hits.forEach(function (hit, index) { if (property) { expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]); diff --git a/src/ui/public/directives/paginated_selectable_list.js b/src/ui/public/directives/paginated_selectable_list.js index 2ad179e5fb1d..18d5ec3ab6e3 100644 --- a/src/ui/public/directives/paginated_selectable_list.js +++ b/src/ui/public/directives/paginated_selectable_list.js @@ -4,6 +4,10 @@ import paginatedSelectableListTemplate from 'ui/partials/paginated_selectable_li const module = uiModules.get('kibana'); +function throwError(message) { + throw new Error(message); +} + module.directive('paginatedSelectableList', function (kbnUrl) { return { @@ -17,8 +21,14 @@ module.directive('paginatedSelectableList', function (kbnUrl) { }, template: paginatedSelectableListTemplate, controller: function ($scope, $element, $filter) { + // Should specify either user-make-url or user-on-select if (!$scope.userMakeUrl && !$scope.userOnSelect) { - throw new Error('paginatedSelectableList directive expects a makeUrl or onSelect function'); + throwError('paginatedSelectableList directive expects a makeUrl or onSelect function'); + } + + // Should specify either user-make-url or user-on-select, but not both. + if ($scope.userMakeUrl && $scope.userOnSelect) { + throwError('paginatedSelectableList directive expects a makeUrl or onSelect attribute but not both'); } $scope.perPage = $scope.perPage || 10; From 98003aec962553e95f18ce7ca60ed5b53c62392f Mon Sep 17 00:00:00 2001 From: Shelby Sturgis Date: Thu, 24 Mar 2016 15:24:27 -0700 Subject: [PATCH 16/16] refactoring tests --- .../__tests__/paginated_selectable_list.js | 39 +++++-------------- 1 file changed, 9 insertions(+), 30 deletions(-) diff --git a/src/ui/public/directives/__tests__/paginated_selectable_list.js b/src/ui/public/directives/__tests__/paginated_selectable_list.js index 88768ff3802b..0e5d9fcad7ca 100644 --- a/src/ui/public/directives/__tests__/paginated_selectable_list.js +++ b/src/ui/public/directives/__tests__/paginated_selectable_list.js @@ -30,7 +30,7 @@ lists.forEach(function (list) { return _.isPlainObject(item); }); - var init = function (arr) { + var init = function (arr, willFail) { // Load the application ngMock.module('kibana'); @@ -43,8 +43,13 @@ lists.forEach(function (list) { $scope.test = function (val) { return val; }; // Create the element - $element = angular.element(''); + if (willFail) { + $element = angular.element(''); + } else { + $element = angular.element(''); + } // And compile it $compile($element)($scope); @@ -58,8 +63,6 @@ lists.forEach(function (list) { }; describe('paginatedSelectableList', function () { - var scope; - it('should throw an error when there is no makeUrl and onSelect attribute', ngMock.inject(function ($compile, $rootScope) { function errorWrapper() { $compile(angular.element(''))($rootScope.new()); @@ -69,32 +72,8 @@ lists.forEach(function (list) { it('should throw an error with both makeUrl and onSelect attributes', function () { function errorWrapper() { - // Load the application - ngMock.module('kibana'); - - // Create the scope - ngMock.inject(function ($rootScope, $compile) { - $scope = $rootScope.$new(); - $scope.perPage = 5; - $scope.list = list; - $scope.listProperty = isArrayOfObjects ? 'title' : undefined; - $scope.test = function (val) { return val; }; - - // Create the element - $element = angular.element(''); - - // And compile it - $compile($element)($scope); - - // Fire a digest cycle - $element.scope().$digest(); - - // Grab the isolate scope so we can test it - $isolatedScope = $element.isolateScope(); - }); + init(list, true); } - expect(errorWrapper).to.throwError(); });