fixing styling and functionality

Signed-off-by: Sean Li <lnse@amazon.com>
opensearch-project · Oct 15, 2024 · a7f7fcc · a7f7fcc
1 parent 63ca9f7
commit a7f7fcc
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/...a/public/query/query_string/language_service/lib/__snapshots__/query_result.test.tsx.snap b/...a/public/query/query_string/language_service/lib/__snapshots__/query_result.test.tsx.snap
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx b/src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx
@@ -100,7 +100,13 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
     }
 
     return (
-      <EuiButtonEmpty iconSide="left" iconType={'checkInCircleEmpty'} size="xs" onClick={() => {}}>
+      <EuiButtonEmpty
+        iconSide="left"
+        iconType={'checkInCircleEmpty'}
+        iconGap="s"
+        size="xs"
+        onClick={() => {}}
+      >
         <EuiText size="xs" color="subdued" data-test-subj="queryResultCompleteMsg">
           {message}
         </EuiText>

diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -237,3 +237,18 @@
   // Needed so the footer items never have paddings
   padding: 0 !important;
 }
+
+// TODO: Temporary workaround to disable padding for single line editor footer
+.euiFormControlLayout--group.euiFormControlLayout--compressed .osdQuerEditor__singleLine .euiText {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.euiFormControlLayout--group .osdQuerEditor__singleLine .euiText {
+  background-color: unset !important;
+  line-height: 21px !important;
+}
+
+.euiFormControlLayout--group .osdQuerEditor__singleLine .euiButtonEmpty {
+  border-right: 0;
+}
diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -5,7 +5,7 @@
 
 import { EuiCompressedFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { monaco } from '@osd/monaco';
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 import { CodeEditor } from '../../../../../opensearch_dashboards_react/public';
 
 interface SingleLineInputProps extends React.JSX.IntrinsicAttributes {
@@ -65,22 +65,31 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
   footerItems,
 }) => {
   const [editorIsFocused, setEditorIsFocused] = useState(false);
+  const blurTimeoutRef = useRef<NodeJS.Timeout | undefined>();
 
   const handleEditorDidMount = useCallback(
     (editor: monaco.editor.IStandaloneCodeEditor) => {
       editorDidMount(editor);
 
       const focusDisposable = editor.onDidFocusEditorText(() => {
+        if (blurTimeoutRef.current) {
+          clearTimeout(blurTimeoutRef.current);
+        }
         setEditorIsFocused(true);
       });
 
-      // const blurDisposable = editor.onDidBlurEditorText(() => {
-      //   setEditorIsFocused(false);
-      // })
+      const blurDisposable = editor.onDidBlurEditorText(() => {
+        blurTimeoutRef.current = setTimeout(() => {
+          setEditorIsFocused(false);
+        }, 3000);
+      });
 
       return () => {
         focusDisposable.dispose();
-        // blurDisposable.dispose();
+        blurDisposable.dispose();
+        if (blurTimeoutRef.current) {
+          clearTimeout(blurTimeoutRef.current);
+        }
       };
     },
     [editorDidMount]

diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -447,6 +447,7 @@ export default class QueryEditorUI extends Component<Props, State> {
           <EuiButtonEmpty
             iconSide="left"
             iconType="clock"
+            iconGap="s"
             size="xs"
             onClick={this.toggleRecentQueries}
             className="queryEditor__footerItem"
@@ -508,13 +509,13 @@ export default class QueryEditorUI extends Component<Props, State> {
         {!this.state.isCollapsed && (
           <>
             <div className="osdQueryEditor__body">{languageEditor.Body()}</div>
-            <RecentQueriesTable
-              isVisible={this.state.isRecentQueryVisible && useQueryEditor}
-              queryString={this.queryString}
-              onClickRecentQuery={this.onClickRecentQuery}
-            />
           </>
         )}
+        <RecentQueriesTable
+          isVisible={this.state.isRecentQueryVisible && useQueryEditor}
+          queryString={this.queryString}
+          onClickRecentQuery={this.onClickRecentQuery}
+        />
 
         {this.renderQueryEditorExtensions()}
       </div>