Merge remote-tracking branch 'upstream/master' into task/endpointlist-actions

Author: parkiino

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinput.md

@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-QueryStringInput: React.FC<Pick<Props, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>
+QueryStringInput: React.FC<Pick<Props, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "isInvalid" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>
 ```

package.json

@@ -63,7 +63,7 @@
     "uiFramework:createComponent": "cd packages/kbn-ui-framework && yarn createComponent",
     "uiFramework:documentComponent": "cd packages/kbn-ui-framework && yarn documentComponent",
     "kbn:watch": "node scripts/kibana --dev --logging.json=false",
-    "build:types": "tsc --p tsconfig.types.json",
+    "build:types": "rm -rf ./target/types && tsc --p tsconfig.types.json",
     "docs:acceptApiChanges": "node --max-old-space-size=6144 scripts/check_published_api_changes.js --accept",
     "kbn:bootstrap": "node scripts/build_ts_refs && node scripts/register_git_hook",
     "spec_to_console": "node scripts/spec_to_console",

packages/kbn-ui-framework/src/components/local_nav/_local_search.scss

@@ -26,13 +26,6 @@
   border-radius: 0;
   border-left-width: 0;
 }
-
-.kuiLocalSearchAssistedInput {
-  display: flex;
-  flex: 1 1 100%;
-  position: relative;
-}
-
 /**
  * 1. em used for right padding so documentation link and query string
  *    won't overlap if the user increases their default browser font size

src/plugins/data/public/public.api.md

@@ -1479,7 +1479,7 @@ export interface QueryStateChange extends QueryStateChangePartial {
 // Warning: (ae-missing-release-tag) "QueryStringInput" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const QueryStringInput: React.FC<Pick<Props_3, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>;
+export const QueryStringInput: React.FC<Pick<Props_3, "query" | "prepend" | "size" | "className" | "placeholder" | "onChange" | "onBlur" | "onSubmit" | "isInvalid" | "indexPatterns" | "dataTestSubj" | "screenTitle" | "disableAutoFocus" | "persistedLog" | "bubbleSubmitEvent" | "languageSwitcherPopoverAnchorPosition" | "onChangeQueryInputFocus">>;
 
 // @public (undocumented)
 export type QuerySuggestion = QuerySuggestionBasic | QuerySuggestionField;

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -8,30 +8,37 @@
   border-right: none !important;
 }
 
+.kbnQueryBar__textareaWrap {
+  overflow: visible !important; // Override EUI form control
+  display: flex;
+  flex: 1 1 100%;
+  position: relative;
+}
+
 .kbnQueryBar__textarea {
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
-  height: $euiSizeXXL;
+  height: $euiFormControlHeight;
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
-  padding-top: $euiSizeS + 3px !important;
-  transform: translateY(-2px);
-  padding: $euiSizeS - 1px;
+  padding: $euiSizeS;
+  padding-top: $euiSizeS + 3px;
+  transform: translateY(-1px) translateX(-1px);
 
-  &:not(:focus) {
+  &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;
+  }
+
+  &:not(:focus) {
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: hidden;
-    border: none;
-    box-shadow: none;
   }
 
   // When focused, let it scroll
   &:focus {
     overflow-x: auto;
     overflow-y: auto;
-    width: calc(100% + 1px); // To overtake the group's fake border
     white-space: normal;
   }
 }

src/plugins/data/public/ui/query_string_input/query_string_input.tsx

@@ -19,6 +19,7 @@
 
 import React, { Component, RefObject, createRef } from 'react';
 import { i18n } from '@kbn/i18n';
+
 import classNames from 'classnames';
 import {
   EuiTextArea,
@@ -63,6 +64,7 @@ interface Props {
   dataTestSubj?: string;
   size?: SuggestionsListSize;
   className?: string;
+  isInvalid?: boolean;
 }
 
 interface State {
@@ -591,6 +593,7 @@ export class QueryStringInputUI extends Component<Props, State> {
       'euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap',
       this.props.className
     );
+
     return (
       <div className={className}>
         {this.props.prepend}
@@ -607,7 +610,7 @@ export class QueryStringInputUI extends Component<Props, State> {
           >
             <div
               role="search"
-              className="euiFormControlLayout__childrenWrapper kuiLocalSearchAssistedInput"
+              className="euiFormControlLayout__childrenWrapper kbnQueryBar__textareaWrap"
               ref={this.queryBarInputDivRefInstance}
             >
               <EuiTextArea
@@ -651,6 +654,7 @@ export class QueryStringInputUI extends Component<Props, State> {
                 }
                 role="textbox"
                 data-test-subj={this.props.dataTestSubj || 'queryInput'}
+                isInvalid={this.props.isInvalid}
               >
                 {this.getQueryString()}
               </EuiTextArea>

src/plugins/data/public/ui/typeahead/constants.ts

@@ -33,4 +33,4 @@ export const SUGGESTIONS_LIST_REQUIRED_BOTTOM_SPACE = 250;
  * A distance in px to display suggestions list right under the query input without a gap
  * @public
  */
-export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 2;
+export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 1;

src/plugins/data/public/ui/typeahead/suggestions_component.tsx

@@ -154,6 +154,7 @@ export class SuggestionsComponent extends Component<Props> {
 const StyledSuggestionsListDiv = styled.div`
   ${(props: { queryBarRect: DOMRect; verticalListPosition: string }) => `
       position: absolute;
+      z-index: 4001;
       left: ${props.queryBarRect.left}px;
       width: ${props.queryBarRect.width}px;
       ${props.verticalListPosition}`}

src/plugins/es_ui_shared/public/request/use_request.test.helpers.tsx

@@ -106,7 +106,7 @@ export const createUseRequestHelpers = (): UseRequestHelpers => {
     };
 
     const TestComponent = ({ requestConfig }: { requestConfig: UseRequestConfig }) => {
-      const { isInitialRequest, isLoading, error, data, sendRequest } = useRequest(
+      const { isInitialRequest, isLoading, error, data, resendRequest } = useRequest(
         httpClient as HttpSetup,
         requestConfig
       );
@@ -115,7 +115,7 @@ export const createUseRequestHelpers = (): UseRequestHelpers => {
       hookResult.isLoading = isLoading;
       hookResult.error = error;
       hookResult.data = data;
-      hookResult.sendRequest = sendRequest;
+      hookResult.resendRequest = resendRequest;
 
       return null;
     };

src/plugins/es_ui_shared/public/request/use_request.test.ts

@@ -102,7 +102,7 @@ describe('useRequest hook', () => {
         setupSuccessRequest();
         expect(hookResult.isInitialRequest).toBe(true);
 
-        hookResult.sendRequest();
+        hookResult.resendRequest();
         await completeRequest();
         expect(hookResult.isInitialRequest).toBe(false);
       });
@@ -148,7 +148,7 @@ describe('useRequest hook', () => {
         expect(hookResult.error).toBe(getErrorResponse().error);
 
         act(() => {
-          hookResult.sendRequest();
+          hookResult.resendRequest();
         });
         expect(hookResult.isLoading).toBe(true);
         expect(hookResult.error).toBe(getErrorResponse().error);
@@ -183,7 +183,7 @@ describe('useRequest hook', () => {
         expect(hookResult.data).toBe(getSuccessResponse().data);
 
         act(() => {
-          hookResult.sendRequest();
+          hookResult.resendRequest();
         });
         expect(hookResult.isLoading).toBe(true);
         expect(hookResult.data).toBe(getSuccessResponse().data);
@@ -215,7 +215,7 @@ describe('useRequest hook', () => {
   });
 
   describe('callbacks', () => {
-    describe('sendRequest', () => {
+    describe('resendRequest', () => {
       it('sends the request', async () => {
         const { setupSuccessRequest, completeRequest, hookResult, getSendRequestSpy } = helpers;
         setupSuccessRequest();
@@ -224,7 +224,7 @@ describe('useRequest hook', () => {
         expect(getSendRequestSpy().callCount).toBe(1);
 
         await act(async () => {
-          hookResult.sendRequest();
+          hookResult.resendRequest();
           await completeRequest();
         });
         expect(getSendRequestSpy().callCount).toBe(2);
@@ -239,17 +239,17 @@ describe('useRequest hook', () => {
         await advanceTime(REQUEST_TIME);
         expect(getSendRequestSpy().callCount).toBe(1);
         act(() => {
-          hookResult.sendRequest();
+          hookResult.resendRequest();
         });
 
         // The manual request resolves, and we'll send yet another one...
         await advanceTime(REQUEST_TIME);
         expect(getSendRequestSpy().callCount).toBe(2);
         act(() => {
-          hookResult.sendRequest();
+          hookResult.resendRequest();
         });
 
-        // At this point, we've moved forward 3s. The poll is set at 2s. If sendRequest didn't
+        // At this point, we've moved forward 3s. The poll is set at 2s. If resendRequest didn't
         // reset the poll, the request call count would be 4, not 3.
         await advanceTime(REQUEST_TIME);
         expect(getSendRequestSpy().callCount).toBe(3);
@@ -291,14 +291,14 @@ describe('useRequest hook', () => {
       const HALF_REQUEST_TIME = REQUEST_TIME * 0.5;
       setupSuccessRequest({ pollIntervalMs: REQUEST_TIME });
 
-      // Before the original request resolves, we make a manual sendRequest call.
+      // Before the original request resolves, we make a manual resendRequest call.
       await advanceTime(HALF_REQUEST_TIME);
       expect(getSendRequestSpy().callCount).toBe(0);
       act(() => {
-        hookResult.sendRequest();
+        hookResult.resendRequest();
       });
 
-      // The original quest resolves but it's been marked as outdated by the the manual sendRequest
+      // The original quest resolves but it's been marked as outdated by the the manual resendRequest
       // call "interrupts", so data is left undefined.
       await advanceTime(HALF_REQUEST_TIME);
       expect(getSendRequestSpy().callCount).toBe(1);