From 031fcd5eb00b5da2db68f9565e747a3a4e0a2e51 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 29 Aug 2019 17:41:30 +0200
Subject: [PATCH 01/29] Convert context loading button to react

---
 .../loading_button/loading_button.tsx         | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx

diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx
new file mode 100644
index 0000000000000..3167f2be0d9fd
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx
@@ -0,0 +1,50 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiButtonEmpty } from '@elastic/eui';
+
+export function LoadingButton({
+  clickHandler,
+  defaultStepSize = 20,
+  isLoading = false,
+  type = 'loadPredecessor',
+}: {
+  clickHandler: () => void;
+  defaultStepSize: number;
+  isLoading: boolean;
+  type: string;
+}) {
+  return (
+    <EuiButtonEmpty
+      data-test-subj={
+        type === 'loadPredecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
+      }
+      isLoading={isLoading}
+      iconType={type === 'loadPredecessor' ? 'arrowUp' : 'arrowDown'}
+      onClick={clickHandler}
+    >
+      <FormattedMessage
+        id="kbn.context.loadMoreDescription"
+        defaultMessage="Load {defaultStepSize} more"
+        values={{ defaultStepSize }}
+      />
+    </EuiButtonEmpty>
+  );
+}

From 45cf0e84d03b85f29fa0ec792b97a5d8c930a42d Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 29 Aug 2019 17:42:37 +0200
Subject: [PATCH 02/29] Use react component, remove angular code

---
 .../kibana/public/context/app.html            | 26 +++++++------------
 .../components/loading_button/index.js        |  2 +-
 .../loading_button/loading_button.html        | 12 ---------
 ..._button.js => loading_button_directive.js} | 24 ++++-------------
 4 files changed, 15 insertions(+), 49 deletions(-)
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html
 rename src/legacy/core_plugins/kibana/public/context/components/loading_button/{loading_button.js => loading_button_directive.js} (67%)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index 997c167920f71..fc8ac533499af 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -65,22 +65,14 @@
   <div class="kuiBar kuiVerticalRhythm">
     <div class="kuiBarSection">
       <context-loading-button
-        data-test-subj="predecessorLoadMoreButton"
-        is-disabled="![
+        click-handler="contextApp.actions.fetchMorePredecessorRows"
+        default-step-size="contextApp.state.queryParameters.defaultStepSize"
+        is-loading="![
           contextApp.constants.LOADING_STATUS.LOADED,
           contextApp.constants.LOADING_STATUS.FAILED,
         ].includes(contextApp.state.loadingStatus.predecessors.status)"
-        icon="'fa-chevron-up'"
-        ng-click="contextApp.actions.fetchMorePredecessorRows()"
-      >
-        <span
-          i18n-id="kbn.context.loadMoreDescription"
-          i18n-default-message="Load {defaultStepSize} more"
-          i18n-values="{
-            defaultStepSize: contextApp.state.queryParameters.defaultStepSize
-          }"
-        ></span>
-      </context-loading-button>
+        type="'loadPredecessor'"
+      ></context-loading-button>
       <context-size-picker
         count="contextApp.state.queryParameters.predecessorCount"
         data-test-subj="predecessorCountPicker"
@@ -142,13 +134,13 @@
   <div class="kuiBar kuiVerticalRhythm">
     <div class="kuiBarSection">
       <context-loading-button
-        data-test-subj="successorLoadMoreButton"
-        is-disabled="![
+        click-handler="contextApp.actions.fetchMoreSuccessorRows"
+        default-step-size="contextApp.state.queryParameters.defaultStepSize"
+        is-loading="![
           contextApp.constants.LOADING_STATUS.LOADED,
           contextApp.constants.LOADING_STATUS.FAILED,
         ].includes(contextApp.state.loadingStatus.successors.status)"
-        icon="'fa-chevron-down'"
-        ng-click="contextApp.actions.fetchMoreSuccessorRows()"
+        type="'loadSuccessor'"
       >
         <span
           i18n-id="kbn.context.loadMoreDescription"
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js b/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js
index b9cdff8e26a5d..9f74fcb3dcbea 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js
+++ b/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-import './loading_button';
+import './loading_button_directive';
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html
deleted file mode 100644
index b994ede80dbed..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<button
-  class="kuiButton kuiButton--basic kuiButton--iconText"
-  ng-disabled="isDisabled"
->
-  <span class="kuiButton__inner">
-    <span
-      class="kuiButton__icon kuiIcon fa-spinner fa-spin"
-      ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
-    />
-    <span ng-transclude />
-  </span>
-</button>
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.js b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js
similarity index 67%
rename from src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.js
rename to src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js
index 62effb3536a7a..afc231c1f15ad 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.js
+++ b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js
@@ -16,25 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import 'ngreact';
 import { uiModules } from 'ui/modules';
-import contextLoadingButtonTemplate from './loading_button.html';
-
-
-const module = uiModules.get('apps/context', [
-  'kibana',
-  'ngRoute',
-]);
+import { wrapInI18nContext } from 'ui/i18n';
+import { LoadingButton } from './loading_button';
 
-module.directive('contextLoadingButton', function ContextLoadingButton() {
-  return {
-    replace: true,
-    restrict: 'E',
-    scope: {
-      isDisabled: '=',
-      icon: '=',
-    },
-    template: contextLoadingButtonTemplate,
-    transclude: true,
-  };
+uiModules.get('apps/context').directive('contextLoadingButton', function (reactDirective) {
+  return reactDirective(wrapInI18nContext(LoadingButton));
 });

From 1017a98b8b07110b1ffa671ce0292c2729b5f4d1 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 30 Aug 2019 10:53:07 +0200
Subject: [PATCH 03/29] Create SizePicker react component

---
 .../kibana/public/context/app.html            |  2 +
 .../core_plugins/kibana/public/context/app.js |  2 +-
 .../size_picker/{index.js => index.ts}        |  2 +-
 .../components/size_picker/size_picker.html   |  7 --
 .../components/size_picker/size_picker.js     | 64 -------------------
 .../components/size_picker/size_picker.tsx    | 44 +++++++++++++
 .../size_picker/size_picker_directive.ts      | 26 ++++++++
 7 files changed, 74 insertions(+), 73 deletions(-)
 rename src/legacy/core_plugins/kibana/public/context/components/size_picker/{index.js => index.ts} (95%)
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.html
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.js
 create mode 100644 src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
 create mode 100644 src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index 997c167920f71..ee02ddd2ba9f8 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -86,6 +86,7 @@
         data-test-subj="predecessorCountPicker"
         is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
+        type="predecessor"
       ></context-size-picker>
       <span
         i18n-id="kbn.context.newerDocumentsDescription"
@@ -163,6 +164,7 @@
         data-test-subj="successorCountPicker"
         is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         on-change-count="contextApp.actions.fetchGivenSuccessorRows"
+        type="succesor"
       ></context-size-picker>
       <div
         i18n-id="kbn.context.olderDocumentsDescription"
diff --git a/src/legacy/core_plugins/kibana/public/context/app.js b/src/legacy/core_plugins/kibana/public/context/app.js
index 8a7de39d402c7..b0fd0198d2d44 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.js
+++ b/src/legacy/core_plugins/kibana/public/context/app.js
@@ -23,7 +23,7 @@ import { callAfterBindingsWorkaround } from 'ui/compat';
 import { uiModules } from 'ui/modules';
 import contextAppTemplate from './app.html';
 import './components/loading_button';
-import './components/size_picker/size_picker';
+import './components/size_picker';
 import { getFirstSortableField } from './api/utils/sorting';
 import {
   createInitialQueryParametersState,
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/index.js b/src/legacy/core_plugins/kibana/public/context/components/size_picker/index.ts
similarity index 95%
rename from src/legacy/core_plugins/kibana/public/context/components/size_picker/index.js
rename to src/legacy/core_plugins/kibana/public/context/components/size_picker/index.ts
index 034044dabff60..09f24fc786e85 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/index.js
+++ b/src/legacy/core_plugins/kibana/public/context/components/size_picker/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-import './size_picker';
+import './size_picker_directive';
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.html b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.html
deleted file mode 100644
index d3bda3268310a..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<input
-  class="kuiTextInput cxtSizePicker"
-  ng-disabled="contextSizePicker.isDisabled"
-  ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
-  ng-model="contextSizePicker.getOrSetCount"
-  type="number"
->
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.js b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.js
deleted file mode 100644
index c6679b26f4ea3..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import _ from 'lodash';
-import { uiModules } from 'ui/modules';
-import { callAfterBindingsWorkaround } from 'ui/compat';
-import contextSizePickerTemplate from './size_picker.html';
-
-const module = uiModules.get('apps/context', [
-  'kibana',
-]);
-
-module.directive('contextSizePicker', function ContextSizePicker() {
-  return {
-    bindToController: true,
-    controller: callAfterBindingsWorkaround(ContextSizePickerController),
-    controllerAs: 'contextSizePicker',
-    link: linkContextSizePicker,
-    replace: true,
-    restrict: 'E',
-    require: 'ngModel',
-    scope: {
-      count: '=',
-      isDisabled: '=',
-      onChangeCount: '=',  // To avoid inconsistent ngModel states this action
-      // should make sure the new value is propagated back
-      // to the `count` property. If that propagation
-      // fails, the user input will be reset to the value
-      // of `count`.
-    },
-    template: contextSizePickerTemplate,
-  };
-});
-
-function linkContextSizePicker(scope, element, attrs, ngModel) {
-  scope.countModel = ngModel;
-}
-
-function ContextSizePickerController($scope) {
-  $scope.$watch(
-    () => this.count,
-    () => $scope.countModel.$rollbackViewValue(),
-  );
-
-  this.getOrSetCount = (count) => (
-    _.isUndefined(count) ? this.count : this.onChangeCount(count)
-  );
-}
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
new file mode 100644
index 0000000000000..2df0e6d188312
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { EuiFieldText } from '@elastic/eui';
+
+export function SizePicker({
+  count,
+  isDisabled,
+  onChangeCount,
+  type,
+}: {
+  count: number;
+  isDisabled: boolean;
+  onChangeCount: (count: number) => void;
+  type: string;
+}) {
+  return (
+    <EuiFieldText
+      aria-label={`Max number of ${type} records to display`}
+      className="cxtSizePicker"
+      data-test-subj={type === 'successor' ? 'successorCountPicker' : 'predecessorCountPicker'}
+      disabled={isDisabled}
+      onChange={ev => onChangeCount(Number(ev.target.value))}
+      type="number"
+      value={count}
+    />
+  );
+}
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts
new file mode 100644
index 0000000000000..a195577890cf2
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+import { wrapInI18nContext } from 'ui/i18n';
+import { SizePicker } from './size_picker';
+
+uiModules.get('apps/context').directive('contextSizePicker', function(reactDirective: any) {
+  return reactDirective(wrapInI18nContext(SizePicker));
+});

From 44ace83c6fd6bdcda11b7c97d1f6b913b770dcc3 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 30 Aug 2019 16:10:18 +0200
Subject: [PATCH 04/29] Add more Eui components

---
 .../kibana/public/context/app.html            | 14 +----
 .../components/size_picker/size_picker.tsx    | 55 +++++++++++++++----
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index ee02ddd2ba9f8..b8dbeae3babe5 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -83,15 +83,10 @@
       </context-loading-button>
       <context-size-picker
         count="contextApp.state.queryParameters.predecessorCount"
-        data-test-subj="predecessorCountPicker"
         is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
-        type="predecessor"
+        type="'predecessor'"
       ></context-size-picker>
-      <span
-        i18n-id="kbn.context.newerDocumentsDescription"
-        i18n-default-message="newer documents"
-      ></span>
       <span
         class="kuiStatusText kuiStatusText--warning"
         ng-if="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
@@ -161,15 +156,10 @@
       </context-loading-button>
       <context-size-picker
         count="contextApp.state.queryParameters.successorCount"
-        data-test-subj="successorCountPicker"
         is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         on-change-count="contextApp.actions.fetchGivenSuccessorRows"
-        type="succesor"
+        type="'successor'"
       ></context-size-picker>
-      <div
-        i18n-id="kbn.context.olderDocumentsDescription"
-        i18n-default-message="older documents"
-      ></div>
       <span
         class="kuiStatusText kuiStatusText--warning"
         ng-if="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
index 2df0e6d188312..cd8bfd1159215 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
@@ -17,7 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { EuiFieldText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
 export function SizePicker({
   count,
@@ -30,15 +33,47 @@ export function SizePicker({
   onChangeCount: (count: number) => void;
   type: string;
 }) {
+  const arialLabel =
+    type === 'successor'
+      ? i18n.translate('kbn.context.olderDocumentsAriaLabel', {
+          defaultMessage: 'Number of older documents',
+        })
+      : i18n.translate('kbn.context.newerDocumentsAriaLabel', {
+          defaultMessage: 'Number of newer documents',
+        });
+
   return (
-    <EuiFieldText
-      aria-label={`Max number of ${type} records to display`}
-      className="cxtSizePicker"
-      data-test-subj={type === 'successor' ? 'successorCountPicker' : 'predecessorCountPicker'}
-      disabled={isDisabled}
-      onChange={ev => onChangeCount(Number(ev.target.value))}
-      type="number"
-      value={count}
-    />
+    <EuiFlexGroup component="span">
+      <EuiFlexItem grow={false}>
+        <EuiFormRow>
+          <EuiFieldNumber
+            aria-label={arialLabel}
+            className="cxtSizePicker"
+            data-test-subj={
+              type === 'successor' ? 'successorCountPicker' : 'predecessorCountPicker'
+            }
+            disabled={isDisabled}
+            onChange={ev => onChangeCount(Number(ev.target.value))}
+            type="number"
+            value={count}
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem grow>
+        <EuiFormRow displayOnly>
+          {type === 'successor' ? (
+            <FormattedMessage
+              id="kbn.context.olderDocumentsDescription"
+              defaultMessage="Older documents"
+            />
+          ) : (
+            <FormattedMessage
+              id="kbn.context.newerDocumentsDescription"
+              defaultMessage="Newer documents"
+            />
+          )}
+        </EuiFormRow>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

From b12b5c21b7381e96f493e95b3c9f91c7607a6778 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Mon, 2 Sep 2019 19:08:11 +0200
Subject: [PATCH 05/29] Merge LoadingButton and SizePicker to ActionBar

---
 .../kibana/public/context/app.html            | 42 ++++++----------
 .../core_plugins/kibana/public/context/app.js |  3 +-
 .../{size_picker => action_bar}/_index.scss   |  0
 .../_size_picker.scss                         |  0
 .../action_bar.tsx}                           | 32 +++++++++++-
 .../action_bar_directive.ts}                  |  6 +--
 .../{size_picker => action_bar}/index.ts      |  2 +-
 .../components/loading_button/index.js        | 20 --------
 .../loading_button/loading_button.tsx         | 50 -------------------
 .../loading_button_directive.js               | 26 ----------
 10 files changed, 49 insertions(+), 132 deletions(-)
 rename src/legacy/core_plugins/kibana/public/context/components/{size_picker => action_bar}/_index.scss (100%)
 rename src/legacy/core_plugins/kibana/public/context/components/{size_picker => action_bar}/_size_picker.scss (100%)
 rename src/legacy/core_plugins/kibana/public/context/components/{size_picker/size_picker.tsx => action_bar/action_bar.tsx} (74%)
 rename src/legacy/core_plugins/kibana/public/context/components/{size_picker/size_picker_directive.ts => action_bar/action_bar_directive.ts} (82%)
 rename src/legacy/core_plugins/kibana/public/context/components/{size_picker => action_bar}/index.ts (95%)
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index 542538e078f85..188a419e5739a 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -64,21 +64,18 @@
   <!-- Controls -->
   <div class="kuiBar kuiVerticalRhythm">
     <div class="kuiBarSection">
-      <context-loading-button
-        click-handler="contextApp.actions.fetchMorePredecessorRows"
+      <context-action-bar
+        count="contextApp.state.queryParameters.predecessorCount"
         default-step-size="contextApp.state.queryParameters.defaultStepSize"
+        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         is-loading="![
-          contextApp.constants.LOADING_STATUS.LOADED,
-          contextApp.constants.LOADING_STATUS.FAILED,
+        contextApp.constants.LOADING_STATUS.LOADED,
+        contextApp.constants.LOADING_STATUS.FAILED,
         ].includes(contextApp.state.loadingStatus.predecessors.status)"
-        type="'loadPredecessor'"
-      ></context-loading-button>
-      <context-size-picker
-        count="contextApp.state.queryParameters.predecessorCount"
-        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
+        on-button-click="contextApp.actions.fetchMorePredecessorRows"
         type="'predecessor'"
-      ></context-size-picker>
+      ></context-action-bar>
       <span
         class="kuiStatusText kuiStatusText--warning"
         ng-if="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
@@ -129,29 +126,18 @@
   <!-- Controls -->
   <div class="kuiBar kuiVerticalRhythm">
     <div class="kuiBarSection">
-      <context-loading-button
-        click-handler="contextApp.actions.fetchMoreSuccessorRows"
+      <context-action-bar
+        count="contextApp.state.queryParameters.successorCount"
         default-step-size="contextApp.state.queryParameters.defaultStepSize"
+        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         is-loading="![
-          contextApp.constants.LOADING_STATUS.LOADED,
-          contextApp.constants.LOADING_STATUS.FAILED,
+        contextApp.constants.LOADING_STATUS.LOADED,
+        contextApp.constants.LOADING_STATUS.FAILED,
         ].includes(contextApp.state.loadingStatus.successors.status)"
-        type="'loadSuccessor'"
-      >
-        <span
-          i18n-id="kbn.context.loadMoreDescription"
-          i18n-default-message="Load {defaultStepSize} more"
-          i18n-values="{
-            defaultStepSize: contextApp.state.queryParameters.defaultStepSize
-          }"
-        ></span>
-      </context-loading-button>
-      <context-size-picker
-        count="contextApp.state.queryParameters.successorCount"
-        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         on-change-count="contextApp.actions.fetchGivenSuccessorRows"
+        on-button-click="contextApp.actions.fetchMoreSuccessorRows"
         type="'successor'"
-      ></context-size-picker>
+      ></context-action-bar>
       <span
         class="kuiStatusText kuiStatusText--warning"
         ng-if="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
diff --git a/src/legacy/core_plugins/kibana/public/context/app.js b/src/legacy/core_plugins/kibana/public/context/app.js
index b0fd0198d2d44..58522d61f0d05 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.js
+++ b/src/legacy/core_plugins/kibana/public/context/app.js
@@ -22,8 +22,7 @@ import _ from 'lodash';
 import { callAfterBindingsWorkaround } from 'ui/compat';
 import { uiModules } from 'ui/modules';
 import contextAppTemplate from './app.html';
-import './components/loading_button';
-import './components/size_picker';
+import './components/action_bar';
 import { getFirstSortableField } from './api/utils/sorting';
 import {
   createInitialQueryParametersState,
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/_index.scss b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_index.scss
similarity index 100%
rename from src/legacy/core_plugins/kibana/public/context/components/size_picker/_index.scss
rename to src/legacy/core_plugins/kibana/public/context/components/action_bar/_index.scss
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/_size_picker.scss b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_size_picker.scss
similarity index 100%
rename from src/legacy/core_plugins/kibana/public/context/components/size_picker/_size_picker.scss
rename to src/legacy/core_plugins/kibana/public/context/components/action_bar/_size_picker.scss
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
similarity index 74%
rename from src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
rename to src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index cd8bfd1159215..1057311b98890 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -20,16 +20,28 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 
-export function SizePicker({
+export function ActionBar({
   count,
+  defaultStepSize = 5,
   isDisabled,
+  isLoading,
+  onButtonClick,
   onChangeCount,
   type,
 }: {
   count: number;
+  defaultStepSize: number;
+  isLoading: boolean;
   isDisabled: boolean;
+  onButtonClick: () => void;
   onChangeCount: (count: number) => void;
   type: string;
 }) {
@@ -44,6 +56,22 @@ export function SizePicker({
 
   return (
     <EuiFlexGroup component="span">
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          data-test-subj={
+            type === 'predecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
+          }
+          isLoading={isLoading}
+          iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
+          onClick={onButtonClick}
+        >
+          <FormattedMessage
+            id="kbn.context.loadMoreDescription"
+            defaultMessage="Load {defaultStepSize} more"
+            values={{ defaultStepSize }}
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiFormRow>
           <EuiFieldNumber
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_directive.ts
similarity index 82%
rename from src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts
rename to src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_directive.ts
index a195577890cf2..0942539e63785 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/size_picker_directive.ts
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_directive.ts
@@ -19,8 +19,8 @@
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 import { wrapInI18nContext } from 'ui/i18n';
-import { SizePicker } from './size_picker';
+import { ActionBar } from './action_bar';
 
-uiModules.get('apps/context').directive('contextSizePicker', function(reactDirective: any) {
-  return reactDirective(wrapInI18nContext(SizePicker));
+uiModules.get('apps/context').directive('contextActionBar', function(reactDirective: any) {
+  return reactDirective(wrapInI18nContext(ActionBar));
 });
diff --git a/src/legacy/core_plugins/kibana/public/context/components/size_picker/index.ts b/src/legacy/core_plugins/kibana/public/context/components/action_bar/index.ts
similarity index 95%
rename from src/legacy/core_plugins/kibana/public/context/components/size_picker/index.ts
rename to src/legacy/core_plugins/kibana/public/context/components/action_bar/index.ts
index 09f24fc786e85..de16caef9c773 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/size_picker/index.ts
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-import './size_picker_directive';
+import './action_bar_directive';
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js b/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js
deleted file mode 100644
index 9f74fcb3dcbea..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import './loading_button_directive';
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx
deleted file mode 100644
index 3167f2be0d9fd..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiButtonEmpty } from '@elastic/eui';
-
-export function LoadingButton({
-  clickHandler,
-  defaultStepSize = 20,
-  isLoading = false,
-  type = 'loadPredecessor',
-}: {
-  clickHandler: () => void;
-  defaultStepSize: number;
-  isLoading: boolean;
-  type: string;
-}) {
-  return (
-    <EuiButtonEmpty
-      data-test-subj={
-        type === 'loadPredecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
-      }
-      isLoading={isLoading}
-      iconType={type === 'loadPredecessor' ? 'arrowUp' : 'arrowDown'}
-      onClick={clickHandler}
-    >
-      <FormattedMessage
-        id="kbn.context.loadMoreDescription"
-        defaultMessage="Load {defaultStepSize} more"
-        values={{ defaultStepSize }}
-      />
-    </EuiButtonEmpty>
-  );
-}
diff --git a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js b/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js
deleted file mode 100644
index afc231c1f15ad..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/components/loading_button/loading_button_directive.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import 'ngreact';
-import { uiModules } from 'ui/modules';
-import { wrapInI18nContext } from 'ui/i18n';
-import { LoadingButton } from './loading_button';
-
-uiModules.get('apps/context').directive('contextLoadingButton', function (reactDirective) {
-  return reactDirective(wrapInI18nContext(LoadingButton));
-});

From 6e7c45dc733ccdca4f8c5918222734c8823d7756 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 3 Sep 2019 16:08:26 +0200
Subject: [PATCH 06/29] Rename scss + fix unused path

---
 src/legacy/core_plugins/kibana/public/context/_index.scss       | 2 +-
 .../action_bar/{_size_picker.scss => _action_bar.scss}          | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/legacy/core_plugins/kibana/public/context/components/action_bar/{_size_picker.scss => _action_bar.scss} (100%)

diff --git a/src/legacy/core_plugins/kibana/public/context/_index.scss b/src/legacy/core_plugins/kibana/public/context/_index.scss
index b605bc3d6edea..49293fa1b8ad8 100644
--- a/src/legacy/core_plugins/kibana/public/context/_index.scss
+++ b/src/legacy/core_plugins/kibana/public/context/_index.scss
@@ -5,4 +5,4 @@
 //   cxtChart__legend--small
 //   cxtChart__legend-isLoading
 
-@import 'components/size_picker/index';
+@import 'components/action_bar/index';
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_size_picker.scss b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
similarity index 100%
rename from src/legacy/core_plugins/kibana/public/context/components/action_bar/_size_picker.scss
rename to src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss

From 923c4811746422d68522edde1fdd64cc057d8d9d Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 3 Sep 2019 23:08:00 +0200
Subject: [PATCH 07/29] Fix wrong scss import

---
 .../kibana/public/context/components/action_bar/_index.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_index.scss b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_index.scss
index 6a7ffa7201919..1f54ecea5e1cb 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_index.scss
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_index.scss
@@ -1 +1 @@
-@import './size_picker';
+@import './action_bar';

From e8235b8141fb55c89c91b809245d46c0e1f4bb2f Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 3 Sep 2019 23:08:21 +0200
Subject: [PATCH 08/29] Adapt notes

---
 src/legacy/core_plugins/kibana/public/context/NOTES.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/NOTES.md b/src/legacy/core_plugins/kibana/public/context/NOTES.md
index 07f6533403c4c..445080c215998 100644
--- a/src/legacy/core_plugins/kibana/public/context/NOTES.md
+++ b/src/legacy/core_plugins/kibana/public/context/NOTES.md
@@ -81,11 +81,9 @@ query status and results.
 **query_parameters**: Exports the actions, reducers and selectors related to
 the parameters used to construct the query.
 
-**components/loading_button**: Defines the `<context-loading-button>`
+**components/action_bar**: Defines the `<context-action-bar>`
 directive including its respective styles.
 
-**components/size_picker**: Defines the `<context-size-picker>`
-directive including its respective styles.
 
 **api/anchor.js**: Exports `fetchAnchor()` that creates and executes the
 query for the anchor document.

From 0996392fc53b63215c218806a010418cc3bcccae Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Wed, 4 Sep 2019 11:19:49 +0200
Subject: [PATCH 09/29] Adapt warning messages

---
 .../kibana/public/context/app.html            |  67 +++-----
 .../components/action_bar/action_bar.tsx      | 146 +++++++++++-------
 2 files changed, 113 insertions(+), 100 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index 188a419e5739a..656f54c9c165d 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -62,9 +62,7 @@
   ng-if="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.FAILED"
 >
   <!-- Controls -->
-  <div class="kuiBar kuiVerticalRhythm">
-    <div class="kuiBarSection">
-      <context-action-bar
+  <context-action-bar
         count="contextApp.state.queryParameters.predecessorCount"
         default-step-size="contextApp.state.queryParameters.defaultStepSize"
         is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
@@ -73,22 +71,13 @@
         contextApp.constants.LOADING_STATUS.FAILED,
         ].includes(contextApp.state.loadingStatus.predecessors.status)"
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
-        on-button-click="contextApp.actions.fetchMorePredecessorRows"
+        on-load-more-click="contextApp.actions.fetchMorePredecessorRows"
         type="'predecessor'"
-      ></context-action-bar>
-      <span
-        class="kuiStatusText kuiStatusText--warning"
-        ng-if="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
-          && (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
-      >
-        <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
-        <span ng-bind-template="Only {{ contextApp.state.rows.predecessors.length }} documents newer than the anchor could be found."></span>
-      </span>
-    </div>
-
-    <div class="kuiBarSection">
-    </div>
-  </div>
+        warning="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
+        && (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
+        warningDocCount="contextApp.state.rows.predecessors.length"
+  ></context-action-bar>
+   
 
   <!-- Loading feedback -->
   <div
@@ -124,31 +113,19 @@
   </div>
 
   <!-- Controls -->
-  <div class="kuiBar kuiVerticalRhythm">
-    <div class="kuiBarSection">
-      <context-action-bar
-        count="contextApp.state.queryParameters.successorCount"
-        default-step-size="contextApp.state.queryParameters.defaultStepSize"
-        is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
-        is-loading="![
-        contextApp.constants.LOADING_STATUS.LOADED,
-        contextApp.constants.LOADING_STATUS.FAILED,
-        ].includes(contextApp.state.loadingStatus.successors.status)"
-        on-change-count="contextApp.actions.fetchGivenSuccessorRows"
-        on-button-click="contextApp.actions.fetchMoreSuccessorRows"
-        type="'successor'"
-      ></context-action-bar>
-      <span
-        class="kuiStatusText kuiStatusText--warning"
-        ng-if="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
-          && (contextApp.state.queryParameters.successorCount > contextApp.state.rows.successors.length)"
-      >
-        <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
-        <span ng-bind-template="Only {{ contextApp.state.rows.successors.length }} documents older than the anchor could be found."></span>
-      </span>
-    </div>
-
-    <div class="kuiBarSection">
-    </div>
-  </div>
+  <context-action-bar
+    count="contextApp.state.queryParameters.successorCount"
+    default-step-size="contextApp.state.queryParameters.defaultStepSize"
+    is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
+    is-loading="![
+    contextApp.constants.LOADING_STATUS.LOADED,
+    contextApp.constants.LOADING_STATUS.FAILED,
+    ].includes(contextApp.state.loadingStatus.successors.status)"
+    on-change-count="contextApp.actions.fetchGivenSuccessorRows"
+    on-load-more-click="contextApp.actions.fetchMoreSuccessorRows"
+    type="'successor'"
+    warning="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
+    && (contextApp.state.queryParameters.successorCount > contextApp.state.rows.successors.length)"
+    warningDocCount="contextApp.state.rows.successors.length"
+  ></context-action-bar>
 </main>
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 1057311b98890..2dae4c39eba5f 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -19,13 +19,14 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-
 import {
+  EuiButtonEmpty,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
   EuiFieldNumber,
-  EuiButtonEmpty,
+  EuiSpacer,
 } from '@elastic/eui';
 
 export function ActionBar({
@@ -33,75 +34,110 @@ export function ActionBar({
   defaultStepSize = 5,
   isDisabled,
   isLoading,
-  onButtonClick,
   onChangeCount,
+  onLoadMoreClick,
   type,
+  warning,
+  warningDocCount = 0,
 }: {
   count: number;
   defaultStepSize: number;
-  isLoading: boolean;
   isDisabled: boolean;
-  onButtonClick: () => void;
+  isLoading: boolean;
   onChangeCount: (count: number) => void;
+  onLoadMoreClick: () => void;
   type: string;
+  warning: boolean;
+  warningDocCount?: number;
 }) {
-  const arialLabel =
-    type === 'successor'
-      ? i18n.translate('kbn.context.olderDocumentsAriaLabel', {
-          defaultMessage: 'Number of older documents',
-        })
-      : i18n.translate('kbn.context.newerDocumentsAriaLabel', {
-          defaultMessage: 'Number of newer documents',
-        });
-
   return (
-    <EuiFlexGroup component="span">
-      <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
-          data-test-subj={
-            type === 'predecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
-          }
-          isLoading={isLoading}
-          iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
-          onClick={onButtonClick}
-        >
-          <FormattedMessage
-            id="kbn.context.loadMoreDescription"
-            defaultMessage="Load {defaultStepSize} more"
-            values={{ defaultStepSize }}
+    <>
+      {type === 'successor' && <EuiSpacer size="s" />}
+      {type === 'successor' && warning && (
+        <>
+          <EuiCallOut
+            color="warning"
+            iconType="bolt"
+            title={
+              <FormattedMessage
+                id="kbn.context.newerDocumentsWarning"
+                defaultMessage="Only {warningDocCount} documents newer than the anchor could be found."
+                values={{ warningDocCount }}
+              />
+            }
           />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFormRow>
-          <EuiFieldNumber
-            aria-label={arialLabel}
-            className="cxtSizePicker"
+          <EuiSpacer size="s" />
+        </>
+      )}
+      <EuiFlexGroup direction="row" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
             data-test-subj={
-              type === 'successor' ? 'successorCountPicker' : 'predecessorCountPicker'
+              type === 'predecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
             }
-            disabled={isDisabled}
-            onChange={ev => onChangeCount(Number(ev.target.value))}
-            type="number"
-            value={count}
-          />
-        </EuiFormRow>
-      </EuiFlexItem>
-      <EuiFlexItem grow>
-        <EuiFormRow displayOnly>
-          {type === 'successor' ? (
+            isLoading={isLoading}
+            iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
+            onClick={onLoadMoreClick}
+          >
             <FormattedMessage
-              id="kbn.context.olderDocumentsDescription"
-              defaultMessage="Older documents"
+              id="kbn.context.loadMoreDescription"
+              defaultMessage="Load {defaultStepSize} more"
+              values={{ defaultStepSize }}
             />
-          ) : (
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFormRow>
+            <EuiFieldNumber
+              aria-label={
+                type === 'successor'
+                  ? i18n.translate('kbn.context.olderDocumentsAriaLabel', {
+                      defaultMessage: 'Number of older documents',
+                    })
+                  : i18n.translate('kbn.context.newerDocumentsAriaLabel', {
+                      defaultMessage: 'Number of newer documents',
+                    })
+              }
+              className="cxtSizePicker"
+              data-test-subj={
+                type === 'successor' ? 'successorCountPicker' : 'predecessorCountPicker'
+              }
+              disabled={isDisabled}
+              onChange={ev => onChangeCount(Number(ev.target.value))}
+              type="number"
+              value={count}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow displayOnly>
+            {type === 'successor' ? (
+              <FormattedMessage
+                id="kbn.context.olderDocumentsDescription"
+                defaultMessage="Older documents"
+              />
+            ) : (
+              <FormattedMessage
+                id="kbn.context.newerDocumentsDescription"
+                defaultMessage="Newer documents"
+              />
+            )}
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {type === 'predecessor' && warning && (
+        <EuiCallOut
+          color="warning"
+          iconType="bolt"
+          title={
             <FormattedMessage
-              id="kbn.context.newerDocumentsDescription"
-              defaultMessage="Newer documents"
+              id="kbn.context.olderDocumentsWarning"
+              defaultMessage="Only 1 documents older than the anchor could be found."
             />
-          )}
-        </EuiFormRow>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+          }
+        />
+      )}
+      {type === 'predecessor' && <EuiSpacer size="s" />}
+    </>
   );
 }

From 14ad4564374a4cdd116ddd745e792ee49b409964 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Wed, 4 Sep 2019 11:35:40 +0200
Subject: [PATCH 10/29] Adapt older documents warning

---
 .../kibana/public/context/components/action_bar/action_bar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 2dae4c39eba5f..a08abae2dca05 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -132,7 +132,8 @@ export function ActionBar({
           title={
             <FormattedMessage
               id="kbn.context.olderDocumentsWarning"
-              defaultMessage="Only 1 documents older than the anchor could be found."
+              defaultMessage="Only {warningDocCount} documents older than the anchor could be found."
+              values={{ warningDocCount }}
             />
           }
         />

From 2db71e7ca076979889b38030a4197317dd2035b2 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Wed, 4 Sep 2019 12:31:14 +0200
Subject: [PATCH 11/29] Add jest tests

---
 .../components/action_bar/action_bar.test.tsx | 92 +++++++++++++++++++
 .../components/action_bar/action_bar.tsx      |  3 +
 2 files changed, 95 insertions(+)
 create mode 100644 src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
new file mode 100644
index 0000000000000..6dcd5df07dce8
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
@@ -0,0 +1,92 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ActionBar } from './action_bar';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+describe('Test Discover Context ActionBar for successor records', () => {
+  const props = {
+    count: 20,
+    defaultStepSize: 10,
+    isDisabled: false,
+    isLoading: false,
+    onChangeCount: jest.fn(),
+    onLoadMoreClick: jest.fn(),
+    type: 'successor',
+    warning: true,
+    warningDocCount: 1,
+  };
+  const wrapper = mountWithIntl(<ActionBar {...props} />);
+
+  test('Count input', () => {
+    expect(findTestSubject(wrapper, 'successorCountPicker').props().value).toBe(20);
+    findTestSubject(wrapper, 'successorCountPicker').simulate('change', { target: { value: 123 } });
+    expect(props.onChangeCount).toHaveBeenCalledTimes(1);
+  });
+
+  test('Load more button ', () => {
+    expect(findTestSubject(wrapper, 'successorLoadMoreButton').text()).toBe('Load 10 more');
+    findTestSubject(wrapper, 'successorLoadMoreButton').simulate('click');
+    expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('Warning about limitation of additional records', () => {
+    expect(findTestSubject(wrapper, 'successorWarningMsg').text()).toBe(
+      'Only 1 documents newer than the anchor could be found.'
+    );
+  });
+});
+
+describe('Test Discover Context ActionBar for predecessor records', () => {
+  const props = {
+    count: 20,
+    defaultStepSize: 7,
+    isDisabled: false,
+    isLoading: false,
+    onChangeCount: jest.fn(),
+    onLoadMoreClick: jest.fn(),
+    type: 'predecessor',
+    warning: true,
+    warningDocCount: 1,
+  };
+  const wrapper = mountWithIntl(<ActionBar {...props} />);
+
+  test('Count input', () => {
+    expect(findTestSubject(wrapper, 'predecessorCountPicker').props().value).toBe(20);
+    findTestSubject(wrapper, 'predecessorCountPicker').simulate('change', {
+      target: { value: 123 },
+    });
+    expect(props.onChangeCount).toHaveBeenCalledTimes(1);
+  });
+
+  test('Load more button ', () => {
+    expect(findTestSubject(wrapper, 'predecessorLoadMoreButton').text()).toBe('Load 7 more');
+    findTestSubject(wrapper, 'predecessorLoadMoreButton').simulate('click');
+    expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('Warning about limitation of additional records', () => {
+    expect(findTestSubject(wrapper, 'predecessorWarningMsg').text()).toBe(
+      'Only 1 documents older than the anchor could be found.'
+    );
+  });
+});
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index a08abae2dca05..3255b37bc0c57 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -57,6 +57,7 @@ export function ActionBar({
         <>
           <EuiCallOut
             color="warning"
+            data-test-subj="successorWarningMsg"
             iconType="bolt"
             title={
               <FormattedMessage
@@ -76,6 +77,7 @@ export function ActionBar({
               type === 'predecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
             }
             isLoading={isLoading}
+            disabled={isDisabled}
             iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
             onClick={onLoadMoreClick}
           >
@@ -128,6 +130,7 @@ export function ActionBar({
       {type === 'predecessor' && warning && (
         <EuiCallOut
           color="warning"
+          data-test-subj="predecessorWarningMsg"
           iconType="bolt"
           title={
             <FormattedMessage

From 5ecc2c3b05f43d8b9bf0d8fad3774ff9623723bf Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 5 Sep 2019 18:45:11 +0200
Subject: [PATCH 12/29] Visual and Textual changes

---
 .../components/action_bar/action_bar.tsx      | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 3255b37bc0c57..5cf29956ac5cb 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -46,7 +46,7 @@ export function ActionBar({
   isLoading: boolean;
   onChangeCount: (count: number) => void;
   onLoadMoreClick: () => void;
-  type: string;
+  type: 'successor' | 'predecessor';
   warning: boolean;
   warningDocCount?: number;
 }) {
@@ -60,26 +60,35 @@ export function ActionBar({
             data-test-subj="successorWarningMsg"
             iconType="bolt"
             title={
-              <FormattedMessage
-                id="kbn.context.newerDocumentsWarning"
-                defaultMessage="Only {warningDocCount} documents newer than the anchor could be found."
-                values={{ warningDocCount }}
-              />
+              warningDocCount === 0 ? (
+                <FormattedMessage
+                  id="kbn.context.newerDocumentsWarningZero"
+                  defaultMessage="No documents newer than the anchor could be found."
+                />
+              ) : (
+                <FormattedMessage
+                  id="kbn.context.newerDocumentsWarning"
+                  defaultMessage="Only {warningDocCount} documents newer than the anchor could be found."
+                  values={{ warningDocCount }}
+                />
+              )
             }
+            size="s"
           />
           <EuiSpacer size="s" />
         </>
       )}
-      <EuiFlexGroup direction="row" responsive={false}>
+      <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
             data-test-subj={
               type === 'predecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
             }
-            isLoading={isLoading}
             disabled={isDisabled}
             iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
+            isLoading={isLoading}
             onClick={onLoadMoreClick}
+            size="s"
           >
             <FormattedMessage
               id="kbn.context.loadMoreDescription"
@@ -133,12 +142,20 @@ export function ActionBar({
           data-test-subj="predecessorWarningMsg"
           iconType="bolt"
           title={
-            <FormattedMessage
-              id="kbn.context.olderDocumentsWarning"
-              defaultMessage="Only {warningDocCount} documents older than the anchor could be found."
-              values={{ warningDocCount }}
-            />
+            warningDocCount === 0 ? (
+              <FormattedMessage
+                id="kbn.context.olderDocumentsWarningZero"
+                defaultMessage="No documents older than the anchor could be found."
+              />
+            ) : (
+              <FormattedMessage
+                id="kbn.context.olderDocumentsWarning"
+                defaultMessage="Only {warningDocCount} documents older than the anchor could be found."
+                values={{ warningDocCount }}
+              />
+            )
           }
+          size="s"
         />
       )}
       {type === 'predecessor' && <EuiSpacer size="s" />}

From 283dcede8c28421288e3192ccfd2fe372f21cc9d Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Thu, 5 Sep 2019 18:59:38 +0200
Subject: [PATCH 13/29] Adapt Load button

---
 .../public/context/components/action_bar/action_bar.tsx    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 5cf29956ac5cb..707d26d8c4eaf 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -90,11 +90,7 @@ export function ActionBar({
             onClick={onLoadMoreClick}
             size="s"
           >
-            <FormattedMessage
-              id="kbn.context.loadMoreDescription"
-              defaultMessage="Load {defaultStepSize} more"
-              values={{ defaultStepSize }}
-            />
+            <FormattedMessage id="kbn.context.loadMoreDescription" defaultMessage="Load" />
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -115,6 +111,7 @@ export function ActionBar({
               }
               disabled={isDisabled}
               onChange={ev => onChangeCount(Number(ev.target.value))}
+              step={defaultStepSize}
               type="number"
               value={count}
             />

From 354b29a6d9acab428fd74300d363317f82b2377e Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Thu, 5 Sep 2019 12:58:48 -0500
Subject: [PATCH 14/29] vertical alignment and copy changes

---
 .../public/context/components/action_bar/action_bar.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 707d26d8c4eaf..854f0c6ac7d5d 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -88,7 +88,7 @@ export function ActionBar({
             iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
             isLoading={isLoading}
             onClick={onLoadMoreClick}
-            size="s"
+            flush="right"
           >
             <FormattedMessage id="kbn.context.loadMoreDescription" defaultMessage="Load" />
           </EuiButtonEmpty>
@@ -122,12 +122,12 @@ export function ActionBar({
             {type === 'successor' ? (
               <FormattedMessage
                 id="kbn.context.olderDocumentsDescription"
-                defaultMessage="Older documents"
+                defaultMessage="older documents"
               />
             ) : (
               <FormattedMessage
                 id="kbn.context.newerDocumentsDescription"
-                defaultMessage="Newer documents"
+                defaultMessage="newer documents"
               />
             )}
           </EuiFormRow>

From 7d1bc5fec5e9ee56bf04713ba5f068c29814591f Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 06:29:33 +0200
Subject: [PATCH 15/29] Extract warnings to component

---
 .../components/action_bar/action_bar.test.tsx |   8 +-
 .../components/action_bar/action_bar.tsx      | 127 ++++++++----------
 .../action_bar/action_bar_warning.tsx         |  73 ++++++++++
 3 files changed, 131 insertions(+), 77 deletions(-)
 create mode 100644 src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
index 6dcd5df07dce8..0eff4e0cb9a0b 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { ActionBar } from './action_bar';
+import { ActionBar, ActionBarProps } from './action_bar';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
@@ -34,7 +34,7 @@ describe('Test Discover Context ActionBar for successor records', () => {
     type: 'successor',
     warning: true,
     warningDocCount: 1,
-  };
+  } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
   test('Count input', () => {
@@ -44,7 +44,6 @@ describe('Test Discover Context ActionBar for successor records', () => {
   });
 
   test('Load more button ', () => {
-    expect(findTestSubject(wrapper, 'successorLoadMoreButton').text()).toBe('Load 10 more');
     findTestSubject(wrapper, 'successorLoadMoreButton').simulate('click');
     expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
   });
@@ -67,7 +66,7 @@ describe('Test Discover Context ActionBar for predecessor records', () => {
     type: 'predecessor',
     warning: true,
     warningDocCount: 1,
-  };
+  } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
   test('Count input', () => {
@@ -79,7 +78,6 @@ describe('Test Discover Context ActionBar for predecessor records', () => {
   });
 
   test('Load more button ', () => {
-    expect(findTestSubject(wrapper, 'predecessorLoadMoreButton').text()).toBe('Load 7 more');
     findTestSubject(wrapper, 'predecessorLoadMoreButton').simulate('click');
     expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
   });
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 707d26d8c4eaf..2a09acf5cefbc 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -21,13 +21,53 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButtonEmpty,
-  EuiCallOut,
+  EuiFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiFieldNumber,
   EuiSpacer,
 } from '@elastic/eui';
+import { ActionBarWarning } from './action_bar_warning';
+
+export type ActionBarType = 'successor' | 'predecessor';
+
+export interface ActionBarProps {
+  /**
+   * it's the number of documents to be / that were fetched
+   */
+  count: number;
+  /**
+   * the number of docs to be added to the current count
+   */
+  defaultStepSize: number;
+  /**
+   * is true while the anchor of disovers context is fetched
+   */
+  isDisabled: boolean;
+  /**
+   * is true when list entries are fetched
+   */
+  isLoading: boolean;
+  /**
+   * is executed when the input containing count is changed
+   * @param count
+   */
+  onChangeCount: (count: number) => void;
+  /**
+   * is executed the 'Load' button is clicked
+   */
+  onLoadMoreClick: () => void;
+  /**
+   * just a note how predecssor and successor types are used
+   * predecessor bar + list entries | anchor record | successor list entries + bar
+   */
+  type: ActionBarType;
+  /**
+   * displayed when less documents then count are available
+   */
+  warning: boolean;
+  warningDocCount?: number;
+}
 
 export function ActionBar({
   count,
@@ -39,53 +79,19 @@ export function ActionBar({
   type,
   warning,
   warningDocCount = 0,
-}: {
-  count: number;
-  defaultStepSize: number;
-  isDisabled: boolean;
-  isLoading: boolean;
-  onChangeCount: (count: number) => void;
-  onLoadMoreClick: () => void;
-  type: 'successor' | 'predecessor';
-  warning: boolean;
-  warningDocCount?: number;
-}) {
+}: ActionBarProps) {
+  const isSuccessor = type === 'successor';
   return (
     <>
-      {type === 'successor' && <EuiSpacer size="s" />}
-      {type === 'successor' && warning && (
-        <>
-          <EuiCallOut
-            color="warning"
-            data-test-subj="successorWarningMsg"
-            iconType="bolt"
-            title={
-              warningDocCount === 0 ? (
-                <FormattedMessage
-                  id="kbn.context.newerDocumentsWarningZero"
-                  defaultMessage="No documents newer than the anchor could be found."
-                />
-              ) : (
-                <FormattedMessage
-                  id="kbn.context.newerDocumentsWarning"
-                  defaultMessage="Only {warningDocCount} documents newer than the anchor could be found."
-                  values={{ warningDocCount }}
-                />
-              )
-            }
-            size="s"
-          />
-          <EuiSpacer size="s" />
-        </>
-      )}
+      {isSuccessor && <EuiSpacer size="s" />}
+      {isSuccessor && warning && <ActionBarWarning docCount={warningDocCount} type={type} />}
+      {isSuccessor && warning && <EuiSpacer size="s" />}
       <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
-            data-test-subj={
-              type === 'predecessor' ? 'predecessorLoadMoreButton' : 'successorLoadMoreButton'
-            }
-            disabled={isDisabled}
-            iconType={type === 'predecessor' ? 'arrowUp' : 'arrowDown'}
+            data-test-subj={`${type}LoadMoreButton`}
+            iconType={isSuccessor ? 'arrowDown' : 'arrowUp'}
+            isDisabled={isDisabled}
             isLoading={isLoading}
             onClick={onLoadMoreClick}
             size="s"
@@ -97,7 +103,7 @@ export function ActionBar({
           <EuiFormRow>
             <EuiFieldNumber
               aria-label={
-                type === 'successor'
+                isSuccessor
                   ? i18n.translate('kbn.context.olderDocumentsAriaLabel', {
                       defaultMessage: 'Number of older documents',
                     })
@@ -106,9 +112,7 @@ export function ActionBar({
                     })
               }
               className="cxtSizePicker"
-              data-test-subj={
-                type === 'successor' ? 'successorCountPicker' : 'predecessorCountPicker'
-              }
+              data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
               onChange={ev => onChangeCount(Number(ev.target.value))}
               step={defaultStepSize}
@@ -119,7 +123,7 @@ export function ActionBar({
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFormRow displayOnly>
-            {type === 'successor' ? (
+            {isSuccessor ? (
               <FormattedMessage
                 id="kbn.context.olderDocumentsDescription"
                 defaultMessage="Older documents"
@@ -133,29 +137,8 @@ export function ActionBar({
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {type === 'predecessor' && warning && (
-        <EuiCallOut
-          color="warning"
-          data-test-subj="predecessorWarningMsg"
-          iconType="bolt"
-          title={
-            warningDocCount === 0 ? (
-              <FormattedMessage
-                id="kbn.context.olderDocumentsWarningZero"
-                defaultMessage="No documents older than the anchor could be found."
-              />
-            ) : (
-              <FormattedMessage
-                id="kbn.context.olderDocumentsWarning"
-                defaultMessage="Only {warningDocCount} documents older than the anchor could be found."
-                values={{ warningDocCount }}
-              />
-            )
-          }
-          size="s"
-        />
-      )}
-      {type === 'predecessor' && <EuiSpacer size="s" />}
+      {!isSuccessor && warning && <ActionBarWarning docCount={warningDocCount} type={type} />}
+      {!isSuccessor && <EuiSpacer size="s" />}
     </>
   );
 }
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
new file mode 100644
index 0000000000000..ac8e6a34ee34c
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
@@ -0,0 +1,73 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut } from '@elastic/eui';
+
+import { ActionBarType } from './action_bar';
+
+export function ActionBarWarning({ docCount, type }: { docCount: number; type: ActionBarType }) {
+  if (type === 'predecessor') {
+    return (
+      <EuiCallOut
+        color="warning"
+        data-test-subj="predecessorWarningMsg"
+        iconType="bolt"
+        title={
+          docCount === 0 ? (
+            <FormattedMessage
+              id="kbn.context.olderDocumentsWarningZero"
+              defaultMessage="No documents older than the anchor could be found."
+            />
+          ) : (
+            <FormattedMessage
+              id="kbn.context.olderDocumentsWarning"
+              defaultMessage="Only {docCount} documents older than the anchor could be found."
+              values={{ docCount }}
+            />
+          )
+        }
+        size="s"
+      />
+    );
+  }
+
+  return (
+    <EuiCallOut
+      color="warning"
+      data-test-subj="successorWarningMsg"
+      iconType="bolt"
+      title={
+        docCount === 0 ? (
+          <FormattedMessage
+            id="kbn.context.newerDocumentsWarningZero"
+            defaultMessage="No documents newer than the anchor could be found."
+          />
+        ) : (
+          <FormattedMessage
+            id="kbn.context.newerDocumentsWarning"
+            defaultMessage="Only {docCount} documents newer than the anchor could be found."
+            values={{ docCount }}
+          />
+        )
+      }
+      size="s"
+    />
+  );
+}

From 582cf91035656715675e0ae041e16e38ba75939e Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 07:23:16 +0200
Subject: [PATCH 16/29] Fix invalid warningDocCount assignment

---
 src/legacy/core_plugins/kibana/public/context/app.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index 656f54c9c165d..4e10b0b76303d 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -75,9 +75,9 @@
         type="'predecessor'"
         warning="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
         && (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
-        warningDocCount="contextApp.state.rows.predecessors.length"
+        warning-doc-count="contextApp.state.rows.predecessors.length"
   ></context-action-bar>
-   
+
 
   <!-- Loading feedback -->
   <div

From ca2f0f7f309e86f2736380ee336f2cb6790046f4 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 09:01:19 +0200
Subject: [PATCH 17/29] Fix translations, add comments

---
 .../kibana/public/context/app.html            | 12 ++---
 .../components/action_bar/_action_bar.scss    |  5 +-
 .../components/action_bar/action_bar.test.tsx | 16 +++----
 .../components/action_bar/action_bar.tsx      | 46 ++++++++++---------
 .../translations/translations/ja-JP.json      |  1 -
 .../translations/translations/zh-CN.json      |  1 -
 6 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index 4e10b0b76303d..a4834ebde6334 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -63,8 +63,9 @@
 >
   <!-- Controls -->
   <context-action-bar
-        count="contextApp.state.queryParameters.predecessorCount"
         default-step-size="contextApp.state.queryParameters.defaultStepSize"
+        doc-count="contextApp.state.queryParameters.predecessorCount"
+        doc-count-available="contextApp.state.rows.predecessors.length"
         is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
         is-loading="![
         contextApp.constants.LOADING_STATUS.LOADED,
@@ -73,9 +74,6 @@
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
         on-load-more-click="contextApp.actions.fetchMorePredecessorRows"
         type="'predecessor'"
-        warning="(contextApp.state.loadingStatus.predecessors.status === contextApp.constants.LOADING_STATUS.LOADED)
-        && (contextApp.state.queryParameters.predecessorCount > contextApp.state.rows.predecessors.length)"
-        warning-doc-count="contextApp.state.rows.predecessors.length"
   ></context-action-bar>
 
 
@@ -114,8 +112,9 @@
 
   <!-- Controls -->
   <context-action-bar
-    count="contextApp.state.queryParameters.successorCount"
     default-step-size="contextApp.state.queryParameters.defaultStepSize"
+    doc-count="contextApp.state.queryParameters.successorCount"
+    doc-count-available="contextApp.state.rows.successors.length"
     is-disabled="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.LOADED"
     is-loading="![
     contextApp.constants.LOADING_STATUS.LOADED,
@@ -124,8 +123,5 @@
     on-change-count="contextApp.actions.fetchGivenSuccessorRows"
     on-load-more-click="contextApp.actions.fetchMoreSuccessorRows"
     type="'successor'"
-    warning="(contextApp.state.loadingStatus.successors.status === contextApp.constants.LOADING_STATUS.LOADED)
-    && (contextApp.state.queryParameters.successorCount > contextApp.state.rows.successors.length)"
-    warningDocCount="contextApp.state.rows.successors.length"
   ></context-action-bar>
 </main>
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
index 3e9b05a2872ca..f87c7969475cf 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
@@ -2,13 +2,12 @@
  * 1. Hide increment and decrement buttons for type="number" input.
  */
 .cxtSizePicker {
-  appearance: textfield;
   text-align: center;
   width: $euiSize * 5;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
-    appearance: none; /* 1 */
-    margin: 0; /* 1 */
+    appearance: none;
+    margin: 0;
   }
 }
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
index 0eff4e0cb9a0b..28470115e2abf 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
@@ -25,15 +25,14 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('Test Discover Context ActionBar for successor records', () => {
   const props = {
-    count: 20,
     defaultStepSize: 10,
+    docCount: 20,
+    docCountAvailable: 0,
     isDisabled: false,
     isLoading: false,
     onChangeCount: jest.fn(),
     onLoadMoreClick: jest.fn(),
     type: 'successor',
-    warning: true,
-    warningDocCount: 1,
   } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
@@ -43,29 +42,28 @@ describe('Test Discover Context ActionBar for successor records', () => {
     expect(props.onChangeCount).toHaveBeenCalledTimes(1);
   });
 
-  test('Load more button ', () => {
+  test('Load button ', () => {
     findTestSubject(wrapper, 'successorLoadMoreButton').simulate('click');
     expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
   });
 
   test('Warning about limitation of additional records', () => {
     expect(findTestSubject(wrapper, 'successorWarningMsg').text()).toBe(
-      'Only 1 documents newer than the anchor could be found.'
+      'No documents newer than the anchor could be found.'
     );
   });
 });
 
 describe('Test Discover Context ActionBar for predecessor records', () => {
   const props = {
-    count: 20,
+    docCount: 20,
+    docCountAvailable: 1,
     defaultStepSize: 7,
     isDisabled: false,
     isLoading: false,
     onChangeCount: jest.fn(),
     onLoadMoreClick: jest.fn(),
     type: 'predecessor',
-    warning: true,
-    warningDocCount: 1,
   } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
@@ -77,7 +75,7 @@ describe('Test Discover Context ActionBar for predecessor records', () => {
     expect(props.onChangeCount).toHaveBeenCalledTimes(1);
   });
 
-  test('Load more button ', () => {
+  test('Load button ', () => {
     findTestSubject(wrapper, 'predecessorLoadMoreButton').simulate('click');
     expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
   });
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 7a179f81abd22..70e40a0a61627 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -32,16 +32,21 @@ import { ActionBarWarning } from './action_bar_warning';
 export type ActionBarType = 'successor' | 'predecessor';
 
 export interface ActionBarProps {
-  /**
-   * it's the number of documents to be / that were fetched
-   */
-  count: number;
   /**
    * the number of docs to be added to the current count
    */
   defaultStepSize: number;
   /**
-   * is true while the anchor of disovers context is fetched
+   * the number of docs to be displayed
+   */
+  docCount: number;
+  /**
+   *  the number of documents that are acually available
+   *  display warning when it's lower than docCount
+   */
+  docCountAvailable: number;
+  /**
+   * is true while the anchor record is fetched
    */
   isDisabled: boolean;
   /**
@@ -49,43 +54,40 @@ export interface ActionBarProps {
    */
   isLoading: boolean;
   /**
-   * is executed when the input containing count is changed
+   * is triggered when the input containing count is changed
    * @param count
    */
   onChangeCount: (count: number) => void;
   /**
-   * is executed the 'Load' button is clicked
+   * is triggered the 'Load' button is clicked
    */
   onLoadMoreClick: () => void;
   /**
-   * just a note how predecssor and successor types are used
-   * predecessor bar + list entries | anchor record | successor list entries + bar
+   * can be `predecessor` or `successor`, usage in context:
+   * predecessor action bar + records
+   * anchor record
+   * successor records + action bar
    */
   type: ActionBarType;
-  /**
-   * displayed when less documents then count are available
-   */
-  warning: boolean;
-  warningDocCount?: number;
 }
 
 export function ActionBar({
-  count,
   defaultStepSize = 5,
+  docCount,
+  docCountAvailable,
   isDisabled,
   isLoading,
   onChangeCount,
   onLoadMoreClick,
   type,
-  warning,
-  warningDocCount = 0,
 }: ActionBarProps) {
+  const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
   const isSuccessor = type === 'successor';
   return (
     <>
       {isSuccessor && <EuiSpacer size="s" />}
-      {isSuccessor && warning && <ActionBarWarning docCount={warningDocCount} type={type} />}
-      {isSuccessor && warning && <EuiSpacer size="s" />}
+      {isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
+      {isSuccessor && showWarning && <EuiSpacer size="s" />}
       <EuiFlexGroup direction="row" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
@@ -96,7 +98,7 @@ export function ActionBar({
             onClick={onLoadMoreClick}
             flush="right"
           >
-            <FormattedMessage id="kbn.context.loadMoreDescription" defaultMessage="Load" />
+            <FormattedMessage id="kbn.context.loadButtonLabel" defaultMessage="Load" />
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -117,7 +119,7 @@ export function ActionBar({
               onChange={ev => onChangeCount(Number(ev.target.value))}
               step={defaultStepSize}
               type="number"
-              value={count}
+              value={docCount}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -137,7 +139,7 @@ export function ActionBar({
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {!isSuccessor && warning && <ActionBarWarning docCount={warningDocCount} type={type} />}
+      {!isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
       {!isSuccessor && <EuiSpacer size="s" />}
     </>
   );
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index b8938d2cae174..572dc2ac75bf7 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -1371,7 +1371,6 @@
     "kbn.context.failedToLoadAnchorDocumentDescription": "別ののドキュメントの読み込みに失敗しました",
     "kbn.context.failedToLoadAnchorDocumentErrorDescription": "別のドキュメントの読み込みに失敗しました。",
     "kbn.context.loadingDescription": "読み込み中…",
-    "kbn.context.loadMoreDescription": "他 {defaultStepSize} を読み込む",
     "kbn.context.newerDocumentsDescription": "新しいドキュメント",
     "kbn.context.noSearchableTiebreakerFieldDescription": "インデックスパターン {indexPatternId} で検索可能なタイブレーカーフィールドが見つかりませんでした。高度な設定 {tieBreakerFields} tを変更してこのインデックスパターンの有効なフィールドを含めてください。",
     "kbn.context.olderDocumentsDescription": "古いドキュメント",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 950fe053ca5e6..0697ba52434b0 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -1371,7 +1371,6 @@
     "kbn.context.failedToLoadAnchorDocumentDescription": "无法加载该定位点文档",
     "kbn.context.failedToLoadAnchorDocumentErrorDescription": "无法加载定位点文档。",
     "kbn.context.loadingDescription": "正在加载……",
-    "kbn.context.loadMoreDescription": "再加载 {defaultStepSize} 个",
     "kbn.context.newerDocumentsDescription": "较新文档",
     "kbn.context.noSearchableTiebreakerFieldDescription": "索引模式 {indexPatternId} 中找不到任何可搜索的平分决胜字段。请更改高级设置“{tieBreakerFields}”以包括此索引模式的有效字段。",
     "kbn.context.olderDocumentsDescription": "较旧文档",

From 919a616f62e0649a3919f905deceade8683383ed Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 15:52:34 +0200
Subject: [PATCH 18/29] Switch older / younger warnings

---
 .../components/action_bar/action_bar_warning.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
index ac8e6a34ee34c..65c7c06ef5442 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
@@ -32,13 +32,13 @@ export function ActionBarWarning({ docCount, type }: { docCount: number; type: A
         title={
           docCount === 0 ? (
             <FormattedMessage
-              id="kbn.context.olderDocumentsWarningZero"
-              defaultMessage="No documents older than the anchor could be found."
+              id="kbn.context.newerDocumentsWarningZero"
+              defaultMessage="No documents newer than the anchor could be found."
             />
           ) : (
             <FormattedMessage
-              id="kbn.context.olderDocumentsWarning"
-              defaultMessage="Only {docCount} documents older than the anchor could be found."
+              id="kbn.context.newerDocumentsWarning"
+              defaultMessage="Only {docCount} documents newer than the anchor could be found."
               values={{ docCount }}
             />
           )
@@ -56,13 +56,13 @@ export function ActionBarWarning({ docCount, type }: { docCount: number; type: A
       title={
         docCount === 0 ? (
           <FormattedMessage
-            id="kbn.context.newerDocumentsWarningZero"
-            defaultMessage="No documents newer than the anchor could be found."
+            id="kbn.context.olderDocumentsWarningZero"
+            defaultMessage="No documents older than the anchor could be found."
           />
         ) : (
           <FormattedMessage
-            id="kbn.context.newerDocumentsWarning"
-            defaultMessage="Only {docCount} documents newer than the anchor could be found."
+            id="kbn.context.olderDocumentsWarning"
+            defaultMessage="Only {docCount} documents older than the anchor could be found."
             values={{ docCount }}
           />
         )

From ce441dde637c43f2e171bc057d875f78bd0f1883 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 16:32:14 +0200
Subject: [PATCH 19/29] Remove step size of input and defaultStepSize

---
 .../public/context/components/action_bar/action_bar.tsx     | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 70e40a0a61627..a3817bf8b3c16 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -32,10 +32,6 @@ import { ActionBarWarning } from './action_bar_warning';
 export type ActionBarType = 'successor' | 'predecessor';
 
 export interface ActionBarProps {
-  /**
-   * the number of docs to be added to the current count
-   */
-  defaultStepSize: number;
   /**
    * the number of docs to be displayed
    */
@@ -72,7 +68,6 @@ export interface ActionBarProps {
 }
 
 export function ActionBar({
-  defaultStepSize = 5,
   docCount,
   docCountAvailable,
   isDisabled,
@@ -117,7 +112,6 @@ export function ActionBar({
               data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
               onChange={ev => onChangeCount(Number(ev.target.value))}
-              step={defaultStepSize}
               type="number"
               value={docCount}
             />

From 9534a11ea6088bc6bd6cfdaee9f931a2b7cb6edc Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 18:20:20 +0200
Subject: [PATCH 20/29] Replace ActionBarType with SurrDocType + depended
 adaptions

---
 .../components/action_bar/action_bar.test.tsx | 28 +++++++++----------
 .../components/action_bar/action_bar.tsx      | 13 ++++-----
 .../action_bar/action_bar_warning.tsx         | 11 ++++----
 test/functional/page_objects/context_page.js  |  8 +++---
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
index 28470115e2abf..328f79449ba22 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
@@ -25,31 +25,32 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('Test Discover Context ActionBar for successor records', () => {
   const props = {
-    defaultStepSize: 10,
     docCount: 20,
     docCountAvailable: 0,
     isDisabled: false,
     isLoading: false,
     onChangeCount: jest.fn(),
     onLoadMoreClick: jest.fn(),
-    type: 'successor',
+    type: 'successors',
   } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
   test('Count input', () => {
-    expect(findTestSubject(wrapper, 'successorCountPicker').props().value).toBe(20);
-    findTestSubject(wrapper, 'successorCountPicker').simulate('change', { target: { value: 123 } });
+    expect(findTestSubject(wrapper, 'successorsCountPicker').props().value).toBe(20);
+    findTestSubject(wrapper, 'successorsCountPicker').simulate('change', {
+      target: { value: 123 },
+    });
     expect(props.onChangeCount).toHaveBeenCalledTimes(1);
   });
 
   test('Load button ', () => {
-    findTestSubject(wrapper, 'successorLoadMoreButton').simulate('click');
+    findTestSubject(wrapper, 'successorsLoadMoreButton').simulate('click');
     expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
   });
 
   test('Warning about limitation of additional records', () => {
-    expect(findTestSubject(wrapper, 'successorWarningMsg').text()).toBe(
-      'No documents newer than the anchor could be found.'
+    expect(findTestSubject(wrapper, 'successorsWarningMsg').text()).toBe(
+      'No documents older than the anchor could be found.'
     );
   });
 });
@@ -58,31 +59,30 @@ describe('Test Discover Context ActionBar for predecessor records', () => {
   const props = {
     docCount: 20,
     docCountAvailable: 1,
-    defaultStepSize: 7,
     isDisabled: false,
     isLoading: false,
     onChangeCount: jest.fn(),
     onLoadMoreClick: jest.fn(),
-    type: 'predecessor',
+    type: 'predecessors',
   } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
   test('Count input', () => {
-    expect(findTestSubject(wrapper, 'predecessorCountPicker').props().value).toBe(20);
-    findTestSubject(wrapper, 'predecessorCountPicker').simulate('change', {
+    expect(findTestSubject(wrapper, 'predecessorsCountPicker').props().value).toBe(20);
+    findTestSubject(wrapper, 'predecessorsCountPicker').simulate('change', {
       target: { value: 123 },
     });
     expect(props.onChangeCount).toHaveBeenCalledTimes(1);
   });
 
   test('Load button ', () => {
-    findTestSubject(wrapper, 'predecessorLoadMoreButton').simulate('click');
+    findTestSubject(wrapper, 'predecessorsLoadMoreButton').simulate('click');
     expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
   });
 
   test('Warning about limitation of additional records', () => {
-    expect(findTestSubject(wrapper, 'predecessorWarningMsg').text()).toBe(
-      'Only 1 documents older than the anchor could be found.'
+    expect(findTestSubject(wrapper, 'predecessorsWarningMsg').text()).toBe(
+      'Only 1 documents newer than the anchor could be found.'
     );
   });
 });
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index a3817bf8b3c16..dafd5fc31b9d1 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -28,8 +28,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { ActionBarWarning } from './action_bar_warning';
-
-export type ActionBarType = 'successor' | 'predecessor';
+import { SurrDocType } from '../../api/context';
 
 export interface ActionBarProps {
   /**
@@ -59,12 +58,12 @@ export interface ActionBarProps {
    */
   onLoadMoreClick: () => void;
   /**
-   * can be `predecessor` or `successor`, usage in context:
-   * predecessor action bar + records
+   * can be `predecessors` or `successors`, usage in context:
+   * predecessors action bar + records
    * anchor record
-   * successor records + action bar
+   * successors records + action bar
    */
-  type: ActionBarType;
+  type: SurrDocType;
 }
 
 export function ActionBar({
@@ -77,7 +76,7 @@ export function ActionBar({
   type,
 }: ActionBarProps) {
   const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
-  const isSuccessor = type === 'successor';
+  const isSuccessor = type === 'successors';
   return (
     <>
       {isSuccessor && <EuiSpacer size="s" />}
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
index 65c7c06ef5442..6b922bb05a243 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar_warning.tsx
@@ -19,15 +19,14 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut } from '@elastic/eui';
+import { SurrDocType } from '../../api/context';
 
-import { ActionBarType } from './action_bar';
-
-export function ActionBarWarning({ docCount, type }: { docCount: number; type: ActionBarType }) {
-  if (type === 'predecessor') {
+export function ActionBarWarning({ docCount, type }: { docCount: number; type: SurrDocType }) {
+  if (type === 'predecessors') {
     return (
       <EuiCallOut
         color="warning"
-        data-test-subj="predecessorWarningMsg"
+        data-test-subj="predecessorsWarningMsg"
         iconType="bolt"
         title={
           docCount === 0 ? (
@@ -51,7 +50,7 @@ export function ActionBarWarning({ docCount, type }: { docCount: number; type: A
   return (
     <EuiCallOut
       color="warning"
-      data-test-subj="successorWarningMsg"
+      data-test-subj="successorsWarningMsg"
       iconType="bolt"
       title={
         docCount === 0 ? (
diff --git a/test/functional/page_objects/context_page.js b/test/functional/page_objects/context_page.js
index a189376f06454..437aa411c48d3 100644
--- a/test/functional/page_objects/context_page.js
+++ b/test/functional/page_objects/context_page.js
@@ -54,19 +54,19 @@ export function ContextPageProvider({ getService, getPageObjects }) {
     }
 
     async getPredecessorCountPicker() {
-      return await testSubjects.find('predecessorCountPicker');
+      return await testSubjects.find('predecessorsCountPicker');
     }
 
     async getSuccessorCountPicker() {
-      return await testSubjects.find('successorCountPicker');
+      return await testSubjects.find('successorsCountPicker');
     }
 
     async getPredecessorLoadMoreButton() {
-      return await testSubjects.find('predecessorLoadMoreButton');
+      return await testSubjects.find('predecessorsLoadMoreButton');
     }
 
     async getSuccessorLoadMoreButton() {
-      return await testSubjects.find('successorLoadMoreButton');
+      return await testSubjects.find('successorsLoadMoreButton');
     }
 
     async clickPredecessorLoadMoreButton() {

From b1302150a126545370742620a7470834f45ed9e5 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 18:23:52 +0200
Subject: [PATCH 21/29] Use valueAsNumber instead of Number(value)

---
 .../kibana/public/context/components/action_bar/action_bar.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index dafd5fc31b9d1..91d3a0ef22a1c 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -110,7 +110,7 @@ export function ActionBar({
               className="cxtSizePicker"
               data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
-              onChange={ev => onChangeCount(Number(ev.target.value))}
+              onChange={ev => onChangeCount(ev.target.valueAsNumber)}
               type="number"
               value={docCount}
             />

From 9be7528db1b73b5de5152bfb9a215eda4caa3645 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 18:32:56 +0200
Subject: [PATCH 22/29] Add comment about CSS number input

---
 .../public/context/components/action_bar/_action_bar.scss    | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
index f87c7969475cf..da0911c3a452b 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/_action_bar.scss
@@ -1,13 +1,10 @@
-/**
- * 1. Hide increment and decrement buttons for type="number" input.
- */
 .cxtSizePicker {
   text-align: center;
   width: $euiSize * 5;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
-    appearance: none;
+    appearance: none; // Hide increment and decrement buttons for type="number" input.
     margin: 0;
   }
 }

From 42c0ae516fc863eb42e0d622463affcaad4ebb68 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Fri, 6 Sep 2019 20:47:51 +0200
Subject: [PATCH 23/29] Fix types in app.html

---
 src/legacy/core_plugins/kibana/public/context/app.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index a4834ebde6334..f72a46a6e8d16 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -73,7 +73,7 @@
         ].includes(contextApp.state.loadingStatus.predecessors.status)"
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
         on-load-more-click="contextApp.actions.fetchMorePredecessorRows"
-        type="'predecessor'"
+        type="'predecessors'"
   ></context-action-bar>
 
 
@@ -122,6 +122,6 @@
     ].includes(contextApp.state.loadingStatus.successors.status)"
     on-change-count="contextApp.actions.fetchGivenSuccessorRows"
     on-load-more-click="contextApp.actions.fetchMoreSuccessorRows"
-    type="'successor'"
+    type="'successors'"
   ></context-action-bar>
 </main>

From 0e3a0b530a74e2be71be515d8bb936d5138a071c Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Sat, 7 Sep 2019 09:44:54 +0200
Subject: [PATCH 24/29] Debounce input

---
 .../components/action_bar/action_bar.tsx      | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 91d3a0ef22a1c..fe56c7bb0b589 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -16,8 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
+import { debounce } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButtonEmpty,
@@ -31,12 +32,16 @@ import { ActionBarWarning } from './action_bar_warning';
 import { SurrDocType } from '../../api/context';
 
 export interface ActionBarProps {
+  /**
+   *  the number of documents fetched initially and added when the load button is clicked
+   */
+  defaultStepSize: number;
   /**
    * the number of docs to be displayed
    */
   docCount: number;
   /**
-   *  the number of documents that are acually available
+   *  the number of documents that are  available
    *  display warning when it's lower than docCount
    */
   docCountAvailable: number;
@@ -67,6 +72,7 @@ export interface ActionBarProps {
 }
 
 export function ActionBar({
+  defaultStepSize,
   docCount,
   docCountAvailable,
   isDisabled,
@@ -77,6 +83,9 @@ export function ActionBar({
 }: ActionBarProps) {
   const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
   const isSuccessor = type === 'successors';
+  const [newDocCount, setNewDocCount] = useState(docCount);
+  const onChangeDebouncedRef = useRef(debounce((val: number) => onChangeCount(val), 500));
+
   return (
     <>
       {isSuccessor && <EuiSpacer size="s" />}
@@ -89,7 +98,10 @@ export function ActionBar({
             iconType={isSuccessor ? 'arrowDown' : 'arrowUp'}
             isDisabled={isDisabled}
             isLoading={isLoading}
-            onClick={onLoadMoreClick}
+            onClick={() => {
+              onLoadMoreClick();
+              setNewDocCount(newDocCount + defaultStepSize);
+            }}
             flush="right"
           >
             <FormattedMessage id="kbn.context.loadButtonLabel" defaultMessage="Load" />
@@ -110,9 +122,15 @@ export function ActionBar({
               className="cxtSizePicker"
               data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
-              onChange={ev => onChangeCount(ev.target.valueAsNumber)}
+              onChange={ev => {
+                const value = ev.target.valueAsNumber;
+                setNewDocCount(value);
+                if (value >= 0) {
+                  onChangeDebouncedRef.current(value);
+                }
+              }}
               type="number"
-              value={docCount}
+              value={newDocCount >= 0 ? newDocCount : ''}
             />
           </EuiFormRow>
         </EuiFlexItem>

From 1f71e88d65a16a06d3107adc00f0a6612619583a Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Mon, 9 Sep 2019 17:00:59 +0200
Subject: [PATCH 25/29] Migrate constants + state to typescript

---
 .../context/query_parameters/{constants.js => constants.ts}  | 1 -
 .../public/context/query_parameters/{state.js => state.ts}   | 5 ++++-
 2 files changed, 4 insertions(+), 2 deletions(-)
 rename src/legacy/core_plugins/kibana/public/context/query_parameters/{constants.js => constants.ts} (99%)
 rename src/legacy/core_plugins/kibana/public/context/query_parameters/{state.js => state.ts} (89%)

diff --git a/src/legacy/core_plugins/kibana/public/context/query_parameters/constants.js b/src/legacy/core_plugins/kibana/public/context/query_parameters/constants.ts
similarity index 99%
rename from src/legacy/core_plugins/kibana/public/context/query_parameters/constants.js
rename to src/legacy/core_plugins/kibana/public/context/query_parameters/constants.ts
index 9b9e93f7ba000..9fdf79a714e78 100644
--- a/src/legacy/core_plugins/kibana/public/context/query_parameters/constants.js
+++ b/src/legacy/core_plugins/kibana/public/context/query_parameters/constants.ts
@@ -19,7 +19,6 @@
 
 import { createInitialQueryParametersState } from './state';
 
-
 export const MAX_CONTEXT_SIZE = 10000; // Elasticsearch's default maximum size limit
 export const MIN_CONTEXT_SIZE = 0;
 export const QUERY_PARAMETER_KEYS = Object.keys(createInitialQueryParametersState());
diff --git a/src/legacy/core_plugins/kibana/public/context/query_parameters/state.js b/src/legacy/core_plugins/kibana/public/context/query_parameters/state.ts
similarity index 89%
rename from src/legacy/core_plugins/kibana/public/context/query_parameters/state.js
rename to src/legacy/core_plugins/kibana/public/context/query_parameters/state.ts
index 6fa5ad843de58..094dba6341d0c 100644
--- a/src/legacy/core_plugins/kibana/public/context/query_parameters/state.js
+++ b/src/legacy/core_plugins/kibana/public/context/query_parameters/state.ts
@@ -17,7 +17,10 @@
  * under the License.
  */
 
-export function createInitialQueryParametersState(defaultStepSize, tieBreakerField) {
+export function createInitialQueryParametersState(
+  defaultStepSize: number = 5,
+  tieBreakerField: string = '_doc'
+) {
   return {
     anchorId: null,
     columns: [],

From b72f197013d739064e7ed6e32f6894cc951d6a15 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Mon, 9 Sep 2019 18:47:30 +0200
Subject: [PATCH 26/29] Implement original behavior of input - submit form
 onblur - submit form on enter/return

---
 .../kibana/public/context/app.html            |  2 -
 .../components/action_bar/action_bar.test.tsx | 39 ++++++++++--------
 .../components/action_bar/action_bar.tsx      | 40 ++++++++++---------
 3 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/app.html b/src/legacy/core_plugins/kibana/public/context/app.html
index f72a46a6e8d16..68e1d536a91ce 100644
--- a/src/legacy/core_plugins/kibana/public/context/app.html
+++ b/src/legacy/core_plugins/kibana/public/context/app.html
@@ -72,7 +72,6 @@
         contextApp.constants.LOADING_STATUS.FAILED,
         ].includes(contextApp.state.loadingStatus.predecessors.status)"
         on-change-count="contextApp.actions.fetchGivenPredecessorRows"
-        on-load-more-click="contextApp.actions.fetchMorePredecessorRows"
         type="'predecessors'"
   ></context-action-bar>
 
@@ -121,7 +120,6 @@
     contextApp.constants.LOADING_STATUS.FAILED,
     ].includes(contextApp.state.loadingStatus.successors.status)"
     on-change-count="contextApp.actions.fetchGivenSuccessorRows"
-    on-load-more-click="contextApp.actions.fetchMoreSuccessorRows"
     type="'successors'"
   ></context-action-bar>
 </main>
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
index 328f79449ba22..28b5b54fb1353 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
@@ -25,27 +25,30 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('Test Discover Context ActionBar for successor records', () => {
   const props = {
+    defaultStepSize: 5,
     docCount: 20,
     docCountAvailable: 0,
     isDisabled: false,
     isLoading: false,
     onChangeCount: jest.fn(),
-    onLoadMoreClick: jest.fn(),
     type: 'successors',
   } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
+  test('Load button ', () => {
+    findTestSubject(wrapper, 'successorsLoadMoreButton').simulate('click');
+    expect(props.onChangeCount).toHaveBeenCalledWith(25);
+  });
+
   test('Count input', () => {
-    expect(findTestSubject(wrapper, 'successorsCountPicker').props().value).toBe(20);
+    expect(findTestSubject(wrapper, 'successorsCountPicker').props().value).toBe(25);
     findTestSubject(wrapper, 'successorsCountPicker').simulate('change', {
-      target: { value: 123 },
+      target: { value: '123' },
     });
-    expect(props.onChangeCount).toHaveBeenCalledTimes(1);
-  });
-
-  test('Load button ', () => {
-    findTestSubject(wrapper, 'successorsLoadMoreButton').simulate('click');
-    expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
+    findTestSubject(wrapper, 'successorsCountPicker').simulate('blur');
+    expect(props.onChangeCount).toHaveBeenCalledTimes(2);
+    findTestSubject(wrapper, 'successorsCountPicker').simulate('submit');
+    expect(props.onChangeCount).toHaveBeenCalledTimes(3);
   });
 
   test('Warning about limitation of additional records', () => {
@@ -57,6 +60,7 @@ describe('Test Discover Context ActionBar for successor records', () => {
 
 describe('Test Discover Context ActionBar for predecessor records', () => {
   const props = {
+    defaultStepSize: 5,
     docCount: 20,
     docCountAvailable: 1,
     isDisabled: false,
@@ -67,17 +71,20 @@ describe('Test Discover Context ActionBar for predecessor records', () => {
   } as ActionBarProps;
   const wrapper = mountWithIntl(<ActionBar {...props} />);
 
+  test('Load button ', () => {
+    findTestSubject(wrapper, 'predecessorsLoadMoreButton').simulate('click');
+    expect(props.onChangeCount).toHaveBeenCalledTimes(1);
+  });
+
   test('Count input', () => {
-    expect(findTestSubject(wrapper, 'predecessorsCountPicker').props().value).toBe(20);
+    expect(findTestSubject(wrapper, 'predecessorsCountPicker').props().value).toBe(25);
     findTestSubject(wrapper, 'predecessorsCountPicker').simulate('change', {
       target: { value: 123 },
     });
-    expect(props.onChangeCount).toHaveBeenCalledTimes(1);
-  });
-
-  test('Load button ', () => {
-    findTestSubject(wrapper, 'predecessorsLoadMoreButton').simulate('click');
-    expect(props.onLoadMoreClick).toHaveBeenCalledTimes(1);
+    findTestSubject(wrapper, 'predecessorsCountPicker').simulate('blur');
+    expect(props.onChangeCount).toHaveBeenCalledTimes(2);
+    findTestSubject(wrapper, 'predecessorsCountPicker').simulate('submit');
+    expect(props.onChangeCount).toHaveBeenCalledTimes(3);
   });
 
   test('Warning about limitation of additional records', () => {
diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index fe56c7bb0b589..211ca342e7ca6 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -16,9 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { debounce } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButtonEmpty,
@@ -30,6 +29,7 @@ import {
 } from '@elastic/eui';
 import { ActionBarWarning } from './action_bar_warning';
 import { SurrDocType } from '../../api/context';
+import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
 
 export interface ActionBarProps {
   /**
@@ -58,15 +58,11 @@ export interface ActionBarProps {
    * @param count
    */
   onChangeCount: (count: number) => void;
-  /**
-   * is triggered the 'Load' button is clicked
-   */
-  onLoadMoreClick: () => void;
   /**
    * can be `predecessors` or `successors`, usage in context:
-   * predecessors action bar + records
+   * predecessors action bar + records (these are newer records)
    * anchor record
-   * successors records + action bar
+   * successors records + action bar (these are older records)
    */
   type: SurrDocType;
 }
@@ -78,16 +74,20 @@ export function ActionBar({
   isDisabled,
   isLoading,
   onChangeCount,
-  onLoadMoreClick,
   type,
 }: ActionBarProps) {
   const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
   const isSuccessor = type === 'successors';
   const [newDocCount, setNewDocCount] = useState(docCount);
-  const onChangeDebouncedRef = useRef(debounce((val: number) => onChangeCount(val), 500));
+  const onSubmit = (ev: any) => {
+    ev.preventDefault();
+    if (newDocCount !== docCount) {
+      onChangeCount(newDocCount);
+    }
+  };
 
   return (
-    <>
+    <form onSubmit={onSubmit}>
       {isSuccessor && <EuiSpacer size="s" />}
       {isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
       {isSuccessor && showWarning && <EuiSpacer size="s" />}
@@ -99,8 +99,9 @@ export function ActionBar({
             isDisabled={isDisabled}
             isLoading={isLoading}
             onClick={() => {
-              onLoadMoreClick();
-              setNewDocCount(newDocCount + defaultStepSize);
+              const value = newDocCount + defaultStepSize;
+              setNewDocCount(value);
+              onChangeCount(value);
             }}
             flush="right"
           >
@@ -122,11 +123,14 @@ export function ActionBar({
               className="cxtSizePicker"
               data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
+              min={MIN_CONTEXT_SIZE}
+              max={MAX_CONTEXT_SIZE}
               onChange={ev => {
-                const value = ev.target.valueAsNumber;
-                setNewDocCount(value);
-                if (value >= 0) {
-                  onChangeDebouncedRef.current(value);
+                setNewDocCount(ev.target.valueAsNumber);
+              }}
+              onBlur={() => {
+                if (newDocCount !== docCount) {
+                  onChangeCount(newDocCount);
                 }
               }}
               type="number"
@@ -152,6 +156,6 @@ export function ActionBar({
       </EuiFlexGroup>
       {!isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
       {!isSuccessor && <EuiSpacer size="s" />}
-    </>
+    </form>
   );
 }

From 81aeb3be3d6ab618f45dd6a5541db52eba4a2704 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Mon, 9 Sep 2019 18:48:43 +0200
Subject: [PATCH 27/29] Remove unused increaseCount functions + tests - the
 increase of count is done by the react component

---
 .../kibana/public/context/query/actions.js    | 14 ----
 .../action_increase_predecessor_count.js      | 69 -------------------
 .../action_increase_successor_count.js        | 69 -------------------
 .../context/query_parameters/actions.js       | 14 ----
 4 files changed, 166 deletions(-)
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js
 delete mode 100644 src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js

diff --git a/src/legacy/core_plugins/kibana/public/context/query/actions.js b/src/legacy/core_plugins/kibana/public/context/query/actions.js
index 10a4812f85f4f..72624210fcb49 100644
--- a/src/legacy/core_plugins/kibana/public/context/query/actions.js
+++ b/src/legacy/core_plugins/kibana/public/context/query/actions.js
@@ -32,8 +32,6 @@ export function QueryActionsProvider(Private, Promise) {
   const fetchAnchor = Private(fetchAnchorProvider);
   const { fetchSurroundingDocs } = Private(fetchContextProvider);
   const {
-    increasePredecessorCount,
-    increaseSuccessorCount,
     setPredecessorCount,
     setQueryParameters,
     setSuccessorCount,
@@ -173,16 +171,6 @@ export function QueryActionsProvider(Private, Promise) {
     return fetchSurroundingRows('successors', state);
   };
 
-  const fetchMorePredecessorRows = (state) => () => {
-    increasePredecessorCount(state)();
-    return fetchSurroundingRows('predecessors', state);
-  };
-
-  const fetchMoreSuccessorRows = (state) => () => {
-    increaseSuccessorCount(state)();
-    return fetchSurroundingRows('successors', state);
-  };
-
   const setAllRows = (state) => (predecessorRows, anchorRow, successorRows) => (
     state.rows.all = [
       ...(predecessorRows || []),
@@ -199,8 +187,6 @@ export function QueryActionsProvider(Private, Promise) {
     fetchContextRowsWithNewQueryParameters,
     fetchGivenPredecessorRows,
     fetchGivenSuccessorRows,
-    fetchMorePredecessorRows,
-    fetchMoreSuccessorRows,
     setAllRows,
   };
 }
diff --git a/src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js b/src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js
deleted file mode 100644
index cd19f7af8d829..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_predecessor_count.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import expect from '@kbn/expect';
-import ngMock from 'ng_mock';
-
-import { createStateStub } from './_utils';
-import { QueryParameterActionsProvider } from '../actions';
-
-
-describe('context app', function () {
-  beforeEach(ngMock.module('kibana'));
-
-  describe('action increasePredecessorCount', function () {
-    let increasePredecessorCount;
-
-    beforeEach(ngMock.inject(function createPrivateStubs(Private) {
-      increasePredecessorCount = Private(QueryParameterActionsProvider).increasePredecessorCount;
-    }));
-
-    it('should increase the predecessorCount by the given value', function () {
-      const state = createStateStub();
-
-      increasePredecessorCount(state)(20);
-
-      expect(state.queryParameters.predecessorCount).to.equal(30);
-    });
-
-    it('should increase the predecessorCount by the default step size if not value is given', function () {
-      const state = createStateStub();
-
-      increasePredecessorCount(state)();
-
-      expect(state.queryParameters.predecessorCount).to.equal(13);
-    });
-
-    it('should limit the predecessorCount to 0 as a lower bound', function () {
-      const state = createStateStub();
-
-      increasePredecessorCount(state)(-20);
-
-      expect(state.queryParameters.predecessorCount).to.equal(0);
-    });
-
-    it('should limit the predecessorCount to 10000 as an upper bound', function () {
-      const state = createStateStub();
-
-      increasePredecessorCount(state)(20000);
-
-      expect(state.queryParameters.predecessorCount).to.equal(10000);
-    });
-  });
-});
diff --git a/src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js b/src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js
deleted file mode 100644
index 7036df1ea626f..0000000000000
--- a/src/legacy/core_plugins/kibana/public/context/query_parameters/__tests__/action_increase_successor_count.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import expect from '@kbn/expect';
-import ngMock from 'ng_mock';
-
-import { createStateStub } from './_utils';
-import { QueryParameterActionsProvider } from '../actions';
-
-
-describe('context app', function () {
-  beforeEach(ngMock.module('kibana'));
-
-  describe('action increaseSuccessorCount', function () {
-    let increaseSuccessorCount;
-
-    beforeEach(ngMock.inject(function createPrivateStubs(Private) {
-      increaseSuccessorCount = Private(QueryParameterActionsProvider).increaseSuccessorCount;
-    }));
-
-    it('should increase the successorCount by the given value', function () {
-      const state = createStateStub();
-
-      increaseSuccessorCount(state)(20);
-
-      expect(state.queryParameters.successorCount).to.equal(30);
-    });
-
-    it('should increase the successorCount by the default step size if not value is given', function () {
-      const state = createStateStub();
-
-      increaseSuccessorCount(state)();
-
-      expect(state.queryParameters.successorCount).to.equal(13);
-    });
-
-    it('should limit the successorCount to 0 as a lower bound', function () {
-      const state = createStateStub();
-
-      increaseSuccessorCount(state)(-20);
-
-      expect(state.queryParameters.successorCount).to.equal(0);
-    });
-
-    it('should limit the successorCount to 10000 as an upper bound', function () {
-      const state = createStateStub();
-
-      increaseSuccessorCount(state)(20000);
-
-      expect(state.queryParameters.successorCount).to.equal(10000);
-    });
-  });
-});
diff --git a/src/legacy/core_plugins/kibana/public/context/query_parameters/actions.js b/src/legacy/core_plugins/kibana/public/context/query_parameters/actions.js
index cd5af188ad321..1c895b8d9e1c5 100644
--- a/src/legacy/core_plugins/kibana/public/context/query_parameters/actions.js
+++ b/src/legacy/core_plugins/kibana/public/context/query_parameters/actions.js
@@ -40,12 +40,6 @@ export function QueryParameterActionsProvider(indexPatterns, Private) {
     )
   );
 
-  const increasePredecessorCount = (state) => (
-    value = state.queryParameters.defaultStepSize,
-  ) => (
-    setPredecessorCount(state)(state.queryParameters.predecessorCount + value)
-  );
-
   const setSuccessorCount = (state) => (successorCount) => (
     state.queryParameters.successorCount = clamp(
       MIN_CONTEXT_SIZE,
@@ -54,12 +48,6 @@ export function QueryParameterActionsProvider(indexPatterns, Private) {
     )
   );
 
-  const increaseSuccessorCount = (state) => (
-    value = state.queryParameters.defaultStepSize,
-  ) => (
-    setSuccessorCount(state)(state.queryParameters.successorCount + value)
-  );
-
   const setQueryParameters = (state) => (queryParameters) => (
     Object.assign(
       state.queryParameters,
@@ -82,8 +70,6 @@ export function QueryParameterActionsProvider(indexPatterns, Private) {
   return {
     addFilter,
     updateFilters,
-    increasePredecessorCount,
-    increaseSuccessorCount,
     setPredecessorCount,
     setQueryParameters,
     setSuccessorCount,

From 40704444fce6d3333dc39fa77768652960389351 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 10 Sep 2019 12:37:03 +0200
Subject: [PATCH 28/29] Improve check of valid inputs in the range of
 (MIN|MAX)_CONTEXT_SIZE

---
 .../context/components/action_bar/action_bar.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
index 211ca342e7ca6..57ad8e0b1040f 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.tsx
@@ -79,9 +79,10 @@ export function ActionBar({
   const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
   const isSuccessor = type === 'successors';
   const [newDocCount, setNewDocCount] = useState(docCount);
-  const onSubmit = (ev: any) => {
+  const isValid = (value: number) => value >= MIN_CONTEXT_SIZE && value <= MAX_CONTEXT_SIZE;
+  const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
-    if (newDocCount !== docCount) {
+    if (newDocCount !== docCount && isValid(newDocCount)) {
       onChangeCount(newDocCount);
     }
   };
@@ -100,8 +101,10 @@ export function ActionBar({
             isLoading={isLoading}
             onClick={() => {
               const value = newDocCount + defaultStepSize;
-              setNewDocCount(value);
-              onChangeCount(value);
+              if (isValid(value)) {
+                setNewDocCount(value);
+                onChangeCount(value);
+              }
             }}
             flush="right"
           >
@@ -129,7 +132,7 @@ export function ActionBar({
                 setNewDocCount(ev.target.valueAsNumber);
               }}
               onBlur={() => {
-                if (newDocCount !== docCount) {
+                if (newDocCount !== docCount && isValid(newDocCount)) {
                   onChangeCount(newDocCount);
                 }
               }}

From 3e2facb04654fbb24a4b69302960c0aea8b20123 Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 10 Sep 2019 12:37:47 +0200
Subject: [PATCH 29/29] Improve tests

---
 .../components/action_bar/action_bar.test.tsx | 117 +++++++++---------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
index 28b5b54fb1353..325cfb2c9f0bb 100644
--- a/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/context/components/action_bar/action_bar.test.tsx
@@ -22,74 +22,73 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ActionBar, ActionBarProps } from './action_bar';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
+import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
 
-describe('Test Discover Context ActionBar for successor records', () => {
-  const props = {
-    defaultStepSize: 5,
-    docCount: 20,
-    docCountAvailable: 0,
-    isDisabled: false,
-    isLoading: false,
-    onChangeCount: jest.fn(),
-    type: 'successors',
-  } as ActionBarProps;
-  const wrapper = mountWithIntl(<ActionBar {...props} />);
+describe('Test Discover Context ActionBar for successor | predecessor records', () => {
+  ['successors', 'predecessors'].forEach(type => {
+    const onChangeCount = jest.fn();
+    const props = {
+      defaultStepSize: 5,
+      docCount: 20,
+      docCountAvailable: 0,
+      isDisabled: false,
+      isLoading: false,
+      onChangeCount,
+      type,
+    } as ActionBarProps;
+    const wrapper = mountWithIntl(<ActionBar {...props} />);
 
-  test('Load button ', () => {
-    findTestSubject(wrapper, 'successorsLoadMoreButton').simulate('click');
-    expect(props.onChangeCount).toHaveBeenCalledWith(25);
-  });
+    const input = findTestSubject(wrapper, `${type}CountPicker`);
+    const btn = findTestSubject(wrapper, `${type}LoadMoreButton`);
 
-  test('Count input', () => {
-    expect(findTestSubject(wrapper, 'successorsCountPicker').props().value).toBe(25);
-    findTestSubject(wrapper, 'successorsCountPicker').simulate('change', {
-      target: { value: '123' },
+    test(`${type}: Load button click`, () => {
+      btn.simulate('click');
+      expect(onChangeCount).toHaveBeenCalledWith(25);
     });
-    findTestSubject(wrapper, 'successorsCountPicker').simulate('blur');
-    expect(props.onChangeCount).toHaveBeenCalledTimes(2);
-    findTestSubject(wrapper, 'successorsCountPicker').simulate('submit');
-    expect(props.onChangeCount).toHaveBeenCalledTimes(3);
-  });
 
-  test('Warning about limitation of additional records', () => {
-    expect(findTestSubject(wrapper, 'successorsWarningMsg').text()).toBe(
-      'No documents older than the anchor could be found.'
-    );
-  });
-});
+    test(`${type}: Load button click doesnt submit when MAX_CONTEXT_SIZE was reached`, () => {
+      onChangeCount.mockClear();
+      input.simulate('change', { target: { valueAsNumber: MAX_CONTEXT_SIZE } });
+      btn.simulate('click');
+      expect(onChangeCount).toHaveBeenCalledTimes(0);
+    });
+
+    test(`${type}: Count input change submits on blur`, () => {
+      input.simulate('change', { target: { valueAsNumber: 123 } });
+      input.simulate('blur');
+      expect(onChangeCount).toHaveBeenCalledWith(123);
+    });
 
-describe('Test Discover Context ActionBar for predecessor records', () => {
-  const props = {
-    defaultStepSize: 5,
-    docCount: 20,
-    docCountAvailable: 1,
-    isDisabled: false,
-    isLoading: false,
-    onChangeCount: jest.fn(),
-    onLoadMoreClick: jest.fn(),
-    type: 'predecessors',
-  } as ActionBarProps;
-  const wrapper = mountWithIntl(<ActionBar {...props} />);
+    test(`${type}: Count input change submits on return`, () => {
+      input.simulate('change', { target: { valueAsNumber: 124 } });
+      input.simulate('submit');
+      expect(onChangeCount).toHaveBeenCalledWith(124);
+    });
 
-  test('Load button ', () => {
-    findTestSubject(wrapper, 'predecessorsLoadMoreButton').simulate('click');
-    expect(props.onChangeCount).toHaveBeenCalledTimes(1);
-  });
+    test(`${type}: Count input doesnt submits values higher than MAX_CONTEXT_SIZE `, () => {
+      onChangeCount.mockClear();
+      input.simulate('change', { target: { valueAsNumber: MAX_CONTEXT_SIZE + 1 } });
+      input.simulate('submit');
+      expect(onChangeCount).toHaveBeenCalledTimes(0);
+    });
 
-  test('Count input', () => {
-    expect(findTestSubject(wrapper, 'predecessorsCountPicker').props().value).toBe(25);
-    findTestSubject(wrapper, 'predecessorsCountPicker').simulate('change', {
-      target: { value: 123 },
+    test(`${type}: Count input doesnt submits values lower than MIN_CONTEXT_SIZE `, () => {
+      onChangeCount.mockClear();
+      input.simulate('change', { target: { valueAsNumber: MIN_CONTEXT_SIZE - 1 } });
+      input.simulate('submit');
+      expect(onChangeCount).toHaveBeenCalledTimes(0);
     });
-    findTestSubject(wrapper, 'predecessorsCountPicker').simulate('blur');
-    expect(props.onChangeCount).toHaveBeenCalledTimes(2);
-    findTestSubject(wrapper, 'predecessorsCountPicker').simulate('submit');
-    expect(props.onChangeCount).toHaveBeenCalledTimes(3);
-  });
 
-  test('Warning about limitation of additional records', () => {
-    expect(findTestSubject(wrapper, 'predecessorsWarningMsg').text()).toBe(
-      'Only 1 documents newer than the anchor could be found.'
-    );
+    test(`${type}: Warning about limitation of additional records`, () => {
+      if (type === 'predecessors') {
+        expect(findTestSubject(wrapper, 'predecessorsWarningMsg').text()).toBe(
+          'No documents newer than the anchor could be found.'
+        );
+      } else {
+        expect(findTestSubject(wrapper, 'successorsWarningMsg').text()).toBe(
+          'No documents older than the anchor could be found.'
+        );
+      }
+    });
   });
 });