implement query area section w/ assistant bar and w/out functionality

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
paulstn · Nov 6, 2023 · 1263c81 · 1263c81
1 parent 80f112a
commit 1263c81
Show file tree

Hide file tree

Showing 3 changed files with 228 additions and 141 deletions.
diff --git 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
@@ -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>
+  );
+}