New query bar

src/plugins/data/public/ui/query_editor/collapsed_query_bar.tsx

@@ -0,0 +1,55 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+import React, { RefObject, createRef, useState } from 'react';
+import { i18n } from '@osd/i18n';
+
+import { EuiFieldText, EuiOutsideClickDetector, EuiPortal, Query } from '@elastic/eui';
+import { SuggestionsComponent } from '../typeahead';
+
+export interface CollapsedQueryBarInputProps {
+  initialValue: string;
+  onChange?: (query: string) => void;
+}
+
+export const CollapsedQueryBarInput: React.FC<CollapsedQueryBarInputProps> = (props) => {
+  const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(false);
+  const [suggestionIndex, setSuggestionIndex] = useState<number | null>(null);
+  const [value, setValue] = useState(props.initialValue ?? '');
+
+  return (
+    <EuiOutsideClickDetector onOutsideClick={() => setIsSuggestionsVisible(false)}>
+      <div>
+        <EuiFieldText
+          data-test-subj="collapsed-query-bar-input-field-text"
+          value={value}
+          onClick={() => setIsSuggestionsVisible(true)}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={() => setIsSuggestionsVisible(true)}
+          placeholder={''}
+          fullWidth
+        />
+        <EuiPortal>
+          <SuggestionsComponent
+            show={isSuggestionsVisible}
+            suggestions={[]}
+            index={suggestionIndex}
+            onClick={(suggestion) => {
+              return;
+            }}
+            onMouseEnter={(i) => setSuggestionIndex(i)}
+            loadMore={() => {}}
+            size="s"
+          />
+        </EuiPortal>
+      </div>
+    </EuiOutsideClickDetector>
+  );
+};

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

@@ -20,6 +20,8 @@
 import { fetchIndexPatterns } from './fetch_index_patterns';
 import { QueryLanguageSelector } from './language_selector';
 import { QueryEditorExtensions } from './query_editor_extensions';
+import { QueryEditorBtnCollapse } from './query_editor_btn_collapse';
+import { CollapsedQueryBarInput } from './collapsed_query_bar';
 
 export interface QueryEditorProps {
   indexPatterns: Array<IIndexPattern | string>;
@@ -47,6 +49,8 @@
   queryLanguage?: string;
   headerClassName?: string;
   bannerClassName?: string;
+  isCollapsed: boolean;
+  onToggleCollapsed: () => void;
 }
 
 interface Props extends QueryEditorProps {
@@ -289,12 +293,29 @@
     const headerClassName = classNames('osdQueryEditorHeader', this.props.headerClassName);
     const bannerClassName = classNames('osdQueryEditorBanner', this.props.bannerClassName);
 
+    const useQueryEditor =
+      this.props.query.language === 'SQLAsync' ||
+      this.props.query.language === 'SQL' ||
+      this.props.query.language === 'PPL';
+
+    console.log('this.state.isDataSourcesVisible', this.state.isDataSourcesVisible);
+    console.log('this.state.isDataSetsVisible', this.state.isDataSetsVisible);
+
+    console.log('this.props.dataSourceContainerRef', this.props.dataSourceContainerRef);
+    console.log('this.props.containerRef', this.props.containerRef);
+
     return (
       <div className={className}>
         <div ref={this.bannerRef} className={bannerClassName} />
         <EuiFlexGroup gutterSize="xs" direction="column">
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="xs" alignItems="center" className={`${className}__wrapper`}>
+              <EuiFlexItem grow={false}>
+                <QueryEditorBtnCollapse
+                  onClick={this.props.onToggleCollapsed}
+                  isCollapsed={this.props.isCollapsed}
+                />
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>{this.props.prepend}</EuiFlexItem>
               {this.state.isDataSourcesVisible && (
                 <EuiFlexItem grow={false} className={`${className}__dataSourceWrapper`}>
@@ -314,28 +335,39 @@
                   <div ref={this.props.containerRef} />
                 </EuiFlexItem>
               )}
+              {(!this.props.isCollapsed || !useQueryEditor) && (
+                <EuiFlexItem>
+                  <CollapsedQueryBarInput
+                    initialValue={this.getQueryString()}
+                    onChange={this.onInputChange}
+                  />
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
           </EuiFlexItem>
+
           <EuiFlexItem onClick={this.onClickInput} grow={true}>
             <div ref={this.headerRef} className={headerClassName} />
-            <CodeEditor
-              height={70}
-              languageId="opensearchql"
-              value={this.getQueryString()}
-              onChange={this.onInputChange}
-              options={{
-                lineNumbers: 'on',
-                lineHeight: 24,
-                fontSize: 14,
-                fontFamily: 'Roboto Mono',
-                minimap: {
-                  enabled: false,
-                },
-                scrollBeyondLastLine: false,
-                wordWrap: 'on',
-                wrappingIndent: 'indent',
-              }}
-            />
+            {this.props.isCollapsed && useQueryEditor && (
+              <CodeEditor
+                height={70}
+                languageId="opensearchql"
+                value={this.getQueryString()}
+                onChange={this.onInputChange}
+                options={{
+                  lineNumbers: 'on',
+                  lineHeight: 24,
+                  fontSize: 14,
+                  fontFamily: 'Roboto Mono',
+                  minimap: {
+                    enabled: false,
+                  },
+                  scrollBeyondLastLine: false,
+                  wordWrap: 'on',
+                  wrappingIndent: 'indent',
+                }}
+              />
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
         {this.renderQueryEditorExtensions()}

src/plugins/data/public/ui/query_editor/query_editor_btn_collapse.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+
+export interface Props {
+  onClick: () => void;
+  isCollapsed: boolean;
+}
+
+export function QueryEditorBtnCollapse({ onClick, isCollapsed }: Props) {
+  const label = i18n.translate('queryEditor.collapse', {
+    defaultMessage: 'Toggle query editor',
+  });
+  return (
+    <EuiToolTip content={label}>
+      <EuiButtonIcon
+        aria-expanded={!isCollapsed}
+        aria-label={label}
+        data-test-subj="queryEditorCollapseBtn"
+        onClick={() => onClick()}
+        iconType={!isCollapsed ? 'arrowRight' : 'arrowDown'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx

@@ -99,6 +99,10 @@
     return () => subscription.unsubscribe();
   }, [props.dependencies, props.config]);
 
+  console.log('isEnabled', isEnabled);
+  console.log('props.config', props.config);
+  console.log('banner', props.bannerContainer, banner);
+  console.log('component', props.componentContainer, component);
   if (!isEnabled) return null;
 
   return (

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx

@@ -24,6 +24,8 @@
     return Object.values(configMap).sort((a, b) => a.order - b.order);
   }, [configMap]);
 
+  console.log('sortedConfigs', sortedConfigs);
+
   return (
     <>
       {sortedConfigs.map((config) => (

src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx

@@ -71,6 +71,7 @@ export interface QueryEditorTopRowProps {
 export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
   const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false);
   const [isQueryEditorFocused, setIsQueryEditorFocused] = useState(false);
+  const [isQueryEditorCollapsed, setIsQueryEditorCollapsed] = useState(false);
 
   const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
   const { uiSettings, storage, appName } = opensearchDashboards.services;
@@ -247,6 +248,8 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           className="osdQueryEditor"
           dataTestSubj={props.dataTestSubj}
           queryLanguage={queryLanguage}
+          isCollapsed={isQueryEditorCollapsed}
+          onToggleCollapsed={() => setIsQueryEditorCollapsed(!isQueryEditorCollapsed)}
         />
       </EuiFlexItem>
     );
@@ -377,10 +380,15 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     >
       {renderQueryEditor()}
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false} gutterSize="none">
-          <EuiFlexItem grow={false}>{props.filterBar}</EuiFlexItem>
-          <EuiFlexItem>{renderSharingMetaFields()}</EuiFlexItem>
-          <EuiFlexItem grow={false}>{renderUpdateButton()}</EuiFlexItem>
+        <EuiFlexGroup responsive={false} gutterSize="none" direction="column">
+          {isQueryEditorCollapsed && <EuiFlexItem grow={false}>{props.filterBar}</EuiFlexItem>}
+
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup>
+              <EuiFlexItem>{renderSharingMetaFields()}</EuiFlexItem>
+              <EuiFlexItem grow={false}>{renderUpdateButton()}</EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
     </EuiFlexGroup>