initial commit for single line editor footer

Signed-off-by: Sean Li <[email protected]>
opensearch-project · Oct 11, 2024 · 63ca9f7 · 63ca9f7
1 parent 2b149d2
commit 63ca9f7
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 55 deletions.
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/_recent_query.scss b/src/plugins/data/public/query/query_string/language_service/lib/_recent_query.scss
@@ -7,3 +7,8 @@
     background-color: $euiColorLightestShade;
   }
 }
+
+.editor_footerItem {
+  // Needed so the footer items never have paddings
+  padding: 0 !important;
+}
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
@@ -68,6 +68,7 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
         onClick={() => {}}
         isLoading
         data-test-subj="queryResultLoading"
+        className="editor__footerItem"
       >
         {i18n.translate('data.query.languageService.queryResults.loadTime', {
           defaultMessage: 'Loading {time} s',
@@ -120,8 +121,10 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
           size="xs"
           onClick={onButtonClick}
           data-test-subj="queryResultErrorBtn"
+          className="editor__footerItem"
+          flush="both"
         >
-          <EuiText size="xs" color="subdued">
+          <EuiText size="xs" color="subdued" className="editor__footerItem">
             {i18n.translate('data.query.languageService.queryResults.error', {
               defaultMessage: `Error`,
             })}

diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -215,3 +215,25 @@
     display: block;
   }
 }
+
+.queryEditor__footer {
+  display: flex;
+  gap: 4px;
+  background: $euiColorLightestShade;
+  padding: 2px 4px;
+  margin-top: 5px;
+  margin-left: -5px;
+  margin-right: -5px;
+  z-index: 1;
+  position: relative;
+  align-items: center;
+}
+
+.queryEditor__footerSpacer {
+  flex-grow: 1;
+}
+
+.queryEditor__footerItem {
+  // Needed so the footer items never have paddings
+  padding: 0 !important;
+}
diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCompressedFieldText } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { monaco } from '@osd/monaco';
-import React from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { CodeEditor } from '../../../../../opensearch_dashboards_react/public';
 
 interface SingleLineInputProps extends React.JSX.IntrinsicAttributes {
@@ -15,6 +15,7 @@ interface SingleLineInputProps extends React.JSX.IntrinsicAttributes {
   editorDidMount: (editor: any) => void;
   provideCompletionItems: monaco.languages.CompletionItemProvider['provideCompletionItems'];
   prepend?: React.ComponentProps<typeof EuiCompressedFieldText>['prepend'];
+  footerItems?: any;
 }
 
 type CollapsedComponent<T> = React.ComponentType<T>;
@@ -61,56 +62,96 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
   editorDidMount,
   provideCompletionItems,
   prepend,
-}) => (
-  <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap">
-    {prepend}
-    <div className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper">
-      <CodeEditor
-        height={20} // Adjusted to match lineHeight for a single line
-        languageId={languageId}
-        value={value}
-        onChange={onChange}
-        editorDidMount={editorDidMount}
-        options={{
-          lineNumbers: 'off', // Disabled line numbers
-          // lineHeight: 40,
-          fontSize: 14,
-          fontFamily: 'Roboto Mono',
-          minimap: {
-            enabled: false,
-          },
-          scrollBeyondLastLine: false,
-          wordWrap: 'off', // Disabled word wrapping
-          wrappingIndent: 'none', // No indent since wrapping is off
-          folding: false,
-          glyphMargin: false,
-          lineDecorationsWidth: 0,
-          scrollbar: {
-            vertical: 'hidden',
-          },
-          overviewRulerLanes: 0,
-          hideCursorInOverviewRuler: true,
-          cursorStyle: 'line',
-          wordBasedSuggestions: false,
-        }}
-        suggestionProvider={{
-          provideCompletionItems,
-          triggerCharacters: [' '],
-        }}
-        languageConfiguration={{
-          autoClosingPairs: [
-            {
-              open: '(',
-              close: ')',
+  footerItems,
+}) => {
+  const [editorIsFocused, setEditorIsFocused] = useState(false);
+
+  const handleEditorDidMount = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor) => {
+      editorDidMount(editor);
+
+      const focusDisposable = editor.onDidFocusEditorText(() => {
+        setEditorIsFocused(true);
+      });
+
+      // const blurDisposable = editor.onDidBlurEditorText(() => {
+      //   setEditorIsFocused(false);
+      // })
+
+      return () => {
+        focusDisposable.dispose();
+        // blurDisposable.dispose();
+      };
+    },
+    [editorDidMount]
+  );
+
+  return (
+    <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap">
+      {prepend}
+      <div className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper">
+        <CodeEditor
+          height={20} // Adjusted to match lineHeight for a single line
+          languageId={languageId}
+          value={value}
+          onChange={onChange}
+          editorDidMount={handleEditorDidMount}
+          options={{
+            lineNumbers: 'off', // Disabled line numbers
+            // lineHeight: 40,
+            fontSize: 14,
+            fontFamily: 'Roboto Mono',
+            minimap: {
+              enabled: false,
             },
-            {
-              open: '"',
-              close: '"',
+            scrollBeyondLastLine: false,
+            wordWrap: 'off', // Disabled word wrapping
+            wrappingIndent: 'none', // No indent since wrapping is off
+            folding: false,
+            glyphMargin: false,
+            lineDecorationsWidth: 0,
+            scrollbar: {
+              vertical: 'hidden',
             },
-          ],
-        }}
-        triggerSuggestOnFocus={true}
-      />
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            cursorStyle: 'line',
+            wordBasedSuggestions: false,
+          }}
+          suggestionProvider={{
+            provideCompletionItems,
+            triggerCharacters: [' '],
+          }}
+          languageConfiguration={{
+            autoClosingPairs: [
+              {
+                open: '(',
+                close: ')',
+              },
+              {
+                open: '"',
+                close: '"',
+              },
+            ],
+          }}
+          triggerSuggestOnFocus={true}
+        />
+        {editorIsFocused && (
+          <div className="queryEditor__footer">
+            {footerItems && (
+              <Fragment>
+                {footerItems.start?.map((item) => (
+                  <div className="queryEditor__footerItem">{item}</div>
+                ))}
+                <div className="queryEditor__footerSpacer" />
+                {footerItems.end?.map((item) => (
+                  <div className="queryEditor__footerItem">{item}</div>
+                ))}
+              </Fragment>
+            )}
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -377,10 +377,10 @@ export default class QueryEditorUI extends Component<Props, State> {
       },
       footerItems: {
         start: [
-          <EuiText size="xs" color="subdued">
+          <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
             {`${this.state.lineCount} ${this.state.lineCount === 1 ? 'line' : 'lines'}`}
           </EuiText>,
-          <EuiText size="xs" color="subdued">
+          <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
             {this.props.query.dataset?.timeFieldName || ''}
           </EuiText>,
           <QueryResult queryStatus={this.props.queryStatus!} />,
@@ -391,6 +391,7 @@ export default class QueryEditorUI extends Component<Props, State> {
             iconType="clock"
             size="xs"
             onClick={this.toggleRecentQueries}
+            className="queryEditor__footerItem"
           >
             <EuiText size="xs" color="subdued">
               {'Recent queries'}
@@ -430,6 +431,33 @@ export default class QueryEditorUI extends Component<Props, State> {
       },
       provideCompletionItems: this.provideCompletionItems,
       prepend: this.props.prepend,
+      footerItems: {
+        start: [
+          <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
+            {`${this.state.lineCount ?? 1} ${
+              this.state.lineCount === 1 || !this.state.lineCount ? 'line' : 'lines'
+            }`}
+          </EuiText>,
+          <EuiText size="xs" color="subdued" className="queryEditor__footerItem">
+            {this.props.query.dataset?.timeFieldName || ''}
+          </EuiText>,
+          <QueryResult queryStatus={this.props.queryStatus!} />,
+        ],
+        end: [
+          <EuiButtonEmpty
+            iconSide="left"
+            iconType="clock"
+            size="xs"
+            onClick={this.toggleRecentQueries}
+            className="queryEditor__footerItem"
+            flush="both"
+          >
+            <EuiText size="xs" color="subdued">
+              {'Recent queries'}
+            </EuiText>
+          </EuiButtonEmpty>,
+        ],
+      },
     };
 
     const languageEditorFunc = this.languageManager.getLanguage(this.props.query.language)!.editor;