Add iconType and disableLanguageSwitcher options to QueryStringInput

elastic · Nov 18, 2020 · 22fbe24 · 22fbe24
1 parent a46bf54
commit 22fbe24
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -19,11 +19,12 @@
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
   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.
+  // Unlike most inputs within layout control groups, the text area still needs a border
+  // for multi-line content. These adjusts help it sit above the control groups
+  // shadow to line up correctly.
   padding: $euiSizeS;
   padding-top: $euiSizeS + 3px;
-  transform: translateY(-1px) translateX(-1px);
+  box-shadow: 0 0 0 1px $euiFormBorderColor;
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;
@@ -40,6 +41,14 @@
     overflow-x: auto;
     overflow-y: auto;
     white-space: normal;
+    box-shadow: 0 0 0 1px $euiFormBorderColor;
+  }
+
+  @include euiFormControlWithIcon($isIconOptional: true);
+  ~ .euiFormControlLayoutIcons {
+    z-index: $euiZContentMenu + 1;
+    top: $euiSizeS + 3px;
+    bottom: unset;
   }
 }
 

diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -31,6 +31,7 @@ import {
   EuiLink,
   htmlIdGenerator,
   EuiPortal,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -55,6 +56,7 @@ export interface QueryStringInputProps {
   persistedLog?: PersistedLog;
   bubbleSubmitEvent?: boolean;
   placeholder?: string;
+  disableLanguageSwitcher?: boolean;
   languageSwitcherPopoverAnchorPosition?: PopoverAnchorPosition;
   onBlur?: () => void;
   onChange?: (query: Query) => void;
@@ -64,6 +66,7 @@ export interface QueryStringInputProps {
   size?: SuggestionsListSize;
   className?: string;
   isInvalid?: boolean;
+  iconType?: string;
 }
 
 interface Props extends QueryStringInputProps {
@@ -608,13 +611,17 @@ export default class QueryStringInputUI extends Component<Props, State> {
       'aria-owns': 'kbnTypeahead__items',
     };
     const ariaCombobox = { ...isSuggestionsVisible, role: 'combobox' };
-    const className = classNames(
+    const containerClassName = classNames(
       'euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap',
       this.props.className
     );
+    const inputClassName = classNames(
+      'kbnQueryBar__textarea',
+      this.props.iconType ? 'kbnQueryBar__textarea--withIcon' : null
+    );
 
     return (
-      <div className={className}>
+      <div className={containerClassName}>
         {this.props.prepend}
         <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
           <div
@@ -647,7 +654,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
                 onClick={this.onClickInput}
                 onBlur={this.onInputBlur}
                 onFocus={this.handleOnFocus}
-                className="kbnQueryBar__textarea"
+                className={inputClassName}
                 fullWidth
                 rows={1}
                 id={this.textareaId}
@@ -678,6 +685,17 @@ export default class QueryStringInputUI extends Component<Props, State> {
               >
                 {this.getQueryString()}
               </EuiTextArea>
+              {this.props.iconType ? (
+                <div className="euiFormControlLayoutIcons">
+                  <span>
+                    <EuiIcon
+                      className="euiFormControlLayoutCustomIcon__icon"
+                      aria-hidden="true"
+                      type="search"
+                    />
+                  </span>
+                </div>
+              ) : null}
             </div>
             <EuiPortal>
               <SuggestionsComponent
@@ -693,12 +711,13 @@ export default class QueryStringInputUI extends Component<Props, State> {
             </EuiPortal>
           </div>
         </EuiOutsideClickDetector>
-
-        <QueryLanguageSwitcher
-          language={this.props.query.language}
-          anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
-          onSelectLanguage={this.onSelectLanguage}
-        />
+        {this.props.disableLanguageSwitcher ? null : (
+          <QueryLanguageSwitcher
+            language={this.props.query.language}
+            anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
+            onSelectLanguage={this.onSelectLanguage}
+          />
+        )}
       </div>
     );
   }