From 1263c818186d1e0ba23b6003f5f91af58e25b364 Mon Sep 17 00:00:00 2001
From: Paul Sebastian <paulstn@amazon.com>
Date: Sun, 5 Nov 2023 17:57:36 -0800
Subject: [PATCH] implement query area section w/ assistant bar and w/out
 functionality

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
---
 .../common/live_tail/live_tail_button.tsx     |  12 +-
 .../components/common/search/query_area.tsx   |  77 +++++
 public/components/common/search/search.tsx    | 280 +++++++++---------
 3 files changed, 228 insertions(+), 141 deletions(-)
 create mode 100644 public/components/common/search/query_area.tsx

diff --git a/public/components/common/live_tail/live_tail_button.tsx b/public/components/common/live_tail/live_tail_button.tsx
index 0e53152fa..66bb91591 100644
--- a/public/components/common/live_tail/live_tail_button.tsx
+++ b/public/components/common/live_tail/live_tail_button.tsx
@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-//Define pop over interval options for live tail button in your plugin
+// Define pop over interval options for live tail button in your plugin
 
-import { EuiButton } from "@elastic/eui";
-import React, { useMemo } from "react";
-import { LiveTailProps } from "common/types/explorer";
+import { EuiButton } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { LiveTailProps } from 'common/types/explorer';
 
-//Live Tail Button
+// Live Tail Button
 export const LiveTailButton = ({
   isLiveTailOn,
   isLiveTailPopoverOpen,
@@ -20,7 +20,7 @@ export const LiveTailButton = ({
   const liveButton = useMemo(() => {
     return (
       <EuiButton
-        iconType={isLiveTailOn ? "stop" : "play"}
+        iconType={isLiveTailOn ? 'stop' : 'clock'}
         iconSide="left"
         onClick={() => setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)}
         data-test-subj={dataTestSubj}
diff --git a/public/components/common/search/query_area.tsx b/public/components/common/search/query_area.tsx
new file mode 100644
index 000000000..d72be0021
--- /dev/null
+++ b/public/components/common/search/query_area.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiCodeEditor,
+  EuiContextMenuPanel,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiPopover,
+} from '@elastic/eui';
+import React from 'react';
+
+export function QueryArea({
+  languagePopOverButton,
+  isLanguagePopoverOpen,
+  closeLanguagePopover,
+  languagePopOverItems,
+}: any) {
+  return (
+    <EuiPanel paddingSize="m">
+      <EuiFlexGroup gutterSize="m" direction="column">
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="s" alignItems="flexStart">
+            <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
+              <EuiPopover
+                id="smallContextMenuExample"
+                button={languagePopOverButton}
+                isOpen={isLanguagePopoverOpen}
+                closePopover={closeLanguagePopover}
+                panelPaddingSize="none"
+                anchorPosition="downLeft"
+              >
+                <EuiContextMenuPanel size="s" items={languagePopOverItems} />
+              </EuiPopover>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton>index name here</EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCodeEditor
+            theme="textmate"
+            width="100%"
+            height="10rem"
+            showPrintMargin={false}
+            setOptions={{
+              fontSize: '14px',
+            }}
+            aria-label="Code Editor"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="packetbeatApp" size="m" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFieldText fullWidth={true} placeholder="Ask a question" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton iconSide="right" iconType="returnKey" fill={true}>
+                Go
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
index de450d09c..52eaed7f8 100644
--- a/public/components/common/search/search.tsx
+++ b/public/components/common/search/search.tsx
@@ -35,6 +35,7 @@ import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
 import { Autocomplete } from './autocomplete';
 import { DatePicker } from './date_picker';
 import { QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
+import { QueryArea } from './query_area';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -217,145 +218,154 @@ export const Search = (props: any) => {
 
   return (
     <div className="globalQueryBar">
-      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart" wrap>
-        {appLogEvents && (
-          <EuiFlexItem style={{ minWidth: 110 }} grow={false}>
-            <EuiToolTip position="top" content={baseQuery}>
-              <EuiBadge className="base-query-popover" color="hollow">
-                Base Query
-              </EuiBadge>
-            </EuiToolTip>
-          </EuiFlexItem>
-        )}
-        {!appLogEvents && (
-          <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
-            <EuiPopover
-              id="smallContextMenuExample"
-              button={languagePopOverButton}
-              isOpen={isLanguagePopoverOpen}
-              closePopover={closeLanguagePopover}
-              panelPaddingSize="none"
-              anchorPosition="downLeft"
-            >
-              <EuiContextMenuPanel size="s" items={languagePopOverItems} />
-            </EuiPopover>
-          </EuiFlexItem>
-        )}
-        <EuiFlexItem key="search-bar" className="search-area" grow={5} style={{ minWidth: 400 }}>
-          <Autocomplete
-            key={'autocomplete-search-bar'}
-            query={query}
-            tempQuery={tempQuery}
-            baseQuery={baseQuery}
-            handleQueryChange={handleQueryChange}
-            handleQuerySearch={() => {
-              onQuerySearch(queryLang);
-            }}
-            dslService={dslService}
-            getSuggestions={getSuggestions}
-            onItemSelect={onItemSelect}
-            tabId={tabId}
-          />
-          <EuiBadge
-            className={`ppl-link ${
-              uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
-            }`}
-            color="hollow"
-            onClick={() => showFlyout()}
-            onClickAriaLabel={'pplLinkShowFlyout'}
-          >
-            PPL
-          </EuiBadge>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} />
-        <EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
-          {!isLiveTailOn && (
-            <DatePicker
-              startTime={startTime}
-              endTime={endTime}
-              setStartTime={setStartTime}
-              setEndTime={setEndTime}
-              setIsOutputStale={setIsOutputStale}
-              liveStreamChecked={props.liveStreamChecked}
-              onLiveStreamChange={props.onLiveStreamChange}
-              handleTimePickerChange={(timeRange: string[]) => handleTimePickerChange(timeRange)}
-              handleTimeRangePickerRefresh={() => {
-                onQuerySearch(queryLang);
-              }}
-            />
-          )}
-        </EuiFlexItem>
-        {showSaveButton && !showSavePanelOptionsList && (
-          <EuiFlexItem className="euiFlexItem--flexGrowZero live-tail">
-            <EuiPopover
-              panelPaddingSize="none"
-              button={liveButton}
-              isOpen={isLiveTailPopoverOpen}
-              closePopover={closeLiveTailPopover}
-            >
-              <EuiContextMenuPanel items={popoverItems} />
-            </EuiPopover>
-          </EuiFlexItem>
-        )}
-        {isLiveTailOn && (
-          <EuiFlexItem grow={false}>
-            <StopLiveButton StopLive={stopLive} dataTestSubj="eventLiveTail__off" />
-          </EuiFlexItem>
-        )}
-        {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && (
-          <>
-            <EuiFlexItem key={'search-save-'} className="euiFlexItem--flexGrowZero">
-              <EuiPopover
-                button={Savebutton}
-                isOpen={isSavePanelOpen}
-                closePopover={() => setIsSavePanelOpen(false)}
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="flexStart" wrap>
+            {appLogEvents && (
+              <EuiFlexItem style={{ minWidth: 110 }} grow={false}>
+                <EuiToolTip position="top" content={baseQuery}>
+                  <EuiBadge className="base-query-popover" color="hollow">
+                    Base Query
+                  </EuiBadge>
+                </EuiToolTip>
+              </EuiFlexItem>
+            )}
+            {appLogEvents && (
+              <EuiFlexItem
+                key="search-bar"
+                className="search-area"
+                grow={5}
+                style={{ minWidth: 400 }}
               >
-                <SavePanel
-                  selectedOptions={selectedCustomPanelOptions}
-                  handleNameChange={setSelectedPanelName}
-                  handleOptionChange={setSelectedCustomPanelOptions}
-                  savedObjects={savedObjects}
-                  isTextFieldInvalid={isPanelTextFieldInvalid}
-                  savePanelName={selectedPanelName}
-                  showOptionList={
-                    showSavePanelOptionsList &&
-                    searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList
-                  }
-                  curVisId={curVisId}
-                  setSubType={setSubType}
-                  isSaveAsMetricEnabled={
-                    isEqual(curVisId, 'line') && tempQuery.match(PPL_SPAN_REGEX) !== null
+                <Autocomplete
+                  key={'autocomplete-search-bar'}
+                  query={query}
+                  tempQuery={tempQuery}
+                  baseQuery={baseQuery}
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={() => {
+                    onQuerySearch(queryLang);
+                  }}
+                  dslService={dslService}
+                  getSuggestions={getSuggestions}
+                  onItemSelect={onItemSelect}
+                  tabId={tabId}
+                />
+                <EuiBadge
+                  className={`ppl-link ${
+                    uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
+                  }`}
+                  color="hollow"
+                  onClick={() => showFlyout()}
+                  onClickAriaLabel={'pplLinkShowFlyout'}
+                >
+                  PPL
+                </EuiBadge>
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false} />
+            <EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
+              {!isLiveTailOn && (
+                <DatePicker
+                  startTime={startTime}
+                  endTime={endTime}
+                  setStartTime={setStartTime}
+                  setEndTime={setEndTime}
+                  setIsOutputStale={setIsOutputStale}
+                  liveStreamChecked={props.liveStreamChecked}
+                  onLiveStreamChange={props.onLiveStreamChange}
+                  handleTimePickerChange={(timeRange: string[]) =>
+                    handleTimePickerChange(timeRange)
                   }
+                  handleTimeRangePickerRefresh={() => {
+                    onQuerySearch(queryLang);
+                  }}
                 />
-                <EuiPopoverFooter>
-                  <EuiFlexGroup justifyContent="flexEnd">
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty
-                        size="s"
-                        onClick={() => setIsSavePanelOpen(false)}
-                        data-test-subj="eventExplorer__querySaveCancel"
-                      >
-                        Cancel
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButton
-                        size="s"
-                        fill
-                        onClick={() => {
-                          handleSavingObject();
-                          setIsSavePanelOpen(false);
-                        }}
-                        data-test-subj="eventExplorer__querySaveConfirm"
-                      >
-                        Save
-                      </EuiButton>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiPopoverFooter>
-              </EuiPopover>
+              )}
             </EuiFlexItem>
-          </>
+            {showSaveButton && !showSavePanelOptionsList && (
+              <EuiFlexItem className="euiFlexItem--flexGrowZero live-tail">
+                <EuiPopover
+                  panelPaddingSize="none"
+                  button={liveButton}
+                  isOpen={isLiveTailPopoverOpen}
+                  closePopover={closeLiveTailPopover}
+                >
+                  <EuiContextMenuPanel items={popoverItems} />
+                </EuiPopover>
+              </EuiFlexItem>
+            )}
+            {isLiveTailOn && (
+              <EuiFlexItem grow={false}>
+                <StopLiveButton StopLive={stopLive} dataTestSubj="eventLiveTail__off" />
+              </EuiFlexItem>
+            )}
+            {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && (
+              <>
+                <EuiFlexItem key={'search-save-'} className="euiFlexItem--flexGrowZero">
+                  <EuiPopover
+                    button={Savebutton}
+                    isOpen={isSavePanelOpen}
+                    closePopover={() => setIsSavePanelOpen(false)}
+                  >
+                    <SavePanel
+                      selectedOptions={selectedCustomPanelOptions}
+                      handleNameChange={setSelectedPanelName}
+                      handleOptionChange={setSelectedCustomPanelOptions}
+                      savedObjects={savedObjects}
+                      isTextFieldInvalid={isPanelTextFieldInvalid}
+                      savePanelName={selectedPanelName}
+                      showOptionList={
+                        showSavePanelOptionsList &&
+                        searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList
+                      }
+                      curVisId={curVisId}
+                      setSubType={setSubType}
+                      isSaveAsMetricEnabled={
+                        isEqual(curVisId, 'line') && tempQuery.match(PPL_SPAN_REGEX) !== null
+                      }
+                    />
+                    <EuiPopoverFooter>
+                      <EuiFlexGroup justifyContent="flexEnd">
+                        <EuiFlexItem grow={false}>
+                          <EuiButtonEmpty
+                            size="s"
+                            onClick={() => setIsSavePanelOpen(false)}
+                            data-test-subj="eventExplorer__querySaveCancel"
+                          >
+                            Cancel
+                          </EuiButtonEmpty>
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <EuiButton
+                            size="s"
+                            fill
+                            onClick={() => {
+                              handleSavingObject();
+                              setIsSavePanelOpen(false);
+                            }}
+                            data-test-subj="eventExplorer__querySaveConfirm"
+                          >
+                            Save
+                          </EuiButton>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiPopoverFooter>
+                  </EuiPopover>
+                </EuiFlexItem>
+              </>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        {!appLogEvents && (
+          <EuiFlexItem>
+            <QueryArea
+              languagePopOverButton={languagePopOverButton}
+              isLanguagePopoverOpen={isLanguagePopoverOpen}
+              closeLanguagePopover={closeLanguagePopover}
+              languagePopOverItems={languagePopOverItems}
+            />
+          </EuiFlexItem>
         )}
       </EuiFlexGroup>
       {flyout}