Multi-line kql bar

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

@@ -1,3 +1,41 @@
+.kbnQueryBar__wrap {
+  max-width: 100%;
+  z-index: $euiZContentMenu;
+}
+
+// Uses the append style, but no bordering
+.kqlQueryBar__languageSwitcherButton {
+  border-right: none !important;
+}
+
+.kbnQueryBar__textarea {
+  z-index: $euiZContentMenu;
+  resize: none !important; // When in the group, it will autosize
+  height: $euiSizeXXL;
+  // 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;
+
+  &:not(:focus) {
+    @include euiYScrollWithShadows;
+    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;
+  }
+}
+
 @include euiBreakpoint('xs', 's') {
   .kbnQueryBar--withDatePicker {
     > :first-child {
@@ -16,5 +54,11 @@
     // sass-lint:disable-block no-important
     flex-grow: 0 !important;
     flex-basis: auto !important;
+    margin-right: -$euiSizeXS !important;
+
+    &.kbnQueryBar__datePickerWrapper-isHidden {
+      width: 0;
+      overflow: hidden;
+    }
   }
 }

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

@@ -60,7 +60,7 @@ export function QueryLanguageSwitcher(props: Props) {
     <EuiButtonEmpty
       size="xs"
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
-      className="euiFormControlLayout__append"
+      className="euiFormControlLayout__append kqlQueryBar__languageSwitcherButton"
       data-test-subj={'switchQueryLanguageButton'}
     >
       {props.language === 'lucene' ? luceneLabel : kqlLabel}

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

@@ -67,6 +67,7 @@ interface Props {
 
 export function QueryBarTopRow(props: Props) {
   const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false);
+  const [isQueryInputFocused, setIsQueryInputFocused] = useState(false);
 
   const kibana = useKibana<IDataPluginServices>();
   const { uiSettings, notifications, storage, appName, docLinks } = kibana.services;
@@ -105,6 +106,10 @@ export function QueryBarTopRow(props: Props) {
     });
   }
 
+  function onChangeQueryInputFocus(isFocused: boolean) {
+    setIsQueryInputFocused(isFocused);
+  }
+
   function onTimeChange({
     start,
     end,
@@ -180,6 +185,7 @@ export function QueryBarTopRow(props: Props) {
           query={props.query!}
           screenTitle={props.screenTitle}
           onChange={onQueryChange}
+          onChangeQueryInputFocus={onChangeQueryInputFocus}
           onSubmit={onInputSubmit}
           persistedLog={persistedLog}
           dataTestSubj={props.dataTestSubj}
@@ -264,8 +270,12 @@ export function QueryBarTopRow(props: Props) {
         };
       });
 
+    const wrapperClasses = classNames('kbnQueryBar__datePickerWrapper', {
+      'kbnQueryBar__datePickerWrapper-isHidden': isQueryInputFocused,
+    });
+
     return (
-      <EuiFlexItem className="kbnQueryBar__datePickerWrapper">
+      <EuiFlexItem className={wrapperClasses}>
         <EuiSuperDatePicker
           start={props.dateRangeFrom}
           end={props.dateRangeTo}
@@ -279,6 +289,7 @@ export function QueryBarTopRow(props: Props) {
           commonlyUsedRanges={commonlyUsedRanges}
           dateFormat={uiSettings!.get('dateFormat')}
           isAutoRefreshOnly={props.showAutoRefreshOnly}
+          className="kbnQueryBar__datePicker"
         />
       </EuiFlexItem>
     );