[Discover] Add Footer Bar for Single Line Editor (#8565)

* initial commit for single line editor footer Signed-off-by: Sean Li <lnse@amazon.com> * fixing styling and functionality Signed-off-by: Sean Li <lnse@amazon.com> * Changeset file for PR #8565 created/updated * fixing bug with error not showing up in footer Signed-off-by: Sean Li <lnse@amazon.com> * fixing loading state thanks ashwinpc Signed-off-by: Sean Li <lnse@amazon.com> * trying to surface errors Signed-off-by: Sean Li <lnse@amazon.com> * adding new error for error state Signed-off-by: Sean Li <lnse@amazon.com> * Revert "fixing loading state thanks ashwinpc" This reverts commit 64b5969. * correctly passing async search strat errors Signed-off-by: Sean Li <lnse@amazon.com> --------- Signed-off-by: Sean Li <lnse@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Oct 23, 2024 · c11a801 · c11a801
1 parent 85e0767
commit c11a801
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 94 deletions.
diff --git a/changelogs/fragments/8565.yml b/changelogs/fragments/8565.yml
@@ -0,0 +1,2 @@
+feat:
+- Adds editor footer to single line editor on focus ([#8565](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8565))
diff --git a/src/plugins/data/common/data_frames/types.ts b/src/plugins/data/common/data_frames/types.ts
@@ -121,7 +121,7 @@ export type IDataFrameResponse = SearchResponse<any> &
   (IDataFrameDefaultResponse | IDataFramePollingResponse | IDataFrameErrorResponse);
 
 export interface IDataFrameError extends SearchResponse<any> {
-  error: Error;
+  error: Error | string;
 }
 
 export interface PollQueryResultsParams {

diff --git a/src/plugins/data/common/utils/helpers.ts b/src/plugins/data/common/utils/helpers.ts
@@ -28,7 +28,6 @@
  * under the License.
  */
 
-import { i18n } from '@osd/i18n';
 import { PollQueryResultsHandler, FetchStatusResponse } from '../data_frames';
 
 export interface QueryStatusOptions {
@@ -53,11 +52,7 @@ export const handleQueryResults = async <T>(
   } while (queryStatus !== 'SUCCESS' && queryStatus !== 'FAILED');
 
   if (queryStatus === 'FAILED') {
-    throw new Error(
-      i18n.translate('data.search.request.failed', {
-        defaultMessage: 'An error occurred while executing the search query',
-      })
-    );
+    throw new Error(queryResultsRes?.body.error);
   }
 
   return queryResultsRes;

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/_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
@@ -22,10 +22,9 @@ export interface QueryStatus {
   status: ResultStatus;
   body?: {
     error?: {
-      reason?: string;
-      details: string;
+      statusCode?: number;
+      message?: string;
     };
-    statusCode?: number;
   };
   elapsedMs?: number;
   startTime?: number;
@@ -77,6 +76,22 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
         </EuiButtonEmpty>
       );
     }
+    const time = Math.floor(elapsedTime / 1000);
+    return (
+      <EuiButtonEmpty
+        color="text"
+        size="xs"
+        onClick={() => {}}
+        isLoading
+        data-test-subj="queryResultLoading"
+        className="editor__footerItem"
+      >
+        {i18n.translate('data.query.languageService.queryResults.loadTime', {
+          defaultMessage: 'Loading {time} s',
+          values: { time },
+        })}
+      </EuiButtonEmpty>
+    );
   }
 
   if (props.queryStatus.status === ResultStatus.READY) {
@@ -101,7 +116,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>
@@ -122,8 +143,10 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
           size="xs"
           onClick={onButtonClick}
           data-test-subj="queryResultErrorBtn"
+          className="editor__footerItem"
+          color="danger"
         >
-          <EuiText size="xs" color="subdued">
+          <EuiText size="xs" color="danger" className="editor__footerItem">
             {i18n.translate('data.query.languageService.queryResults.error', {
               defaultMessage: `Error`,
             })}
@@ -137,23 +160,15 @@ export function QueryResult(props: { queryStatus: QueryStatus }) {
       data-test-subj="queryResultError"
     >
       <EuiPopoverTitle>ERRORS</EuiPopoverTitle>
-      <div style={{ width: '250px' }}>
-        <EuiText size="s">
-          <strong>
-            {i18n.translate('data.query.languageService.queryResults.reasons', {
-              defaultMessage: `Reasons:`,
-            })}
-          </strong>
-          {props.queryStatus.body.error.reason}
-        </EuiText>
+      <div style={{ width: '250px' }} className="eui-textBreakWord">
         <EuiText size="s">
           <p>
             <strong>
-              {i18n.translate('data.query.languageService.queryResults.details', {
-                defaultMessage: `Details:`,
+              {i18n.translate('data.query.languageService.queryResults.message', {
+                defaultMessage: `Message:`,
               })}
-            </strong>
-            {props.queryStatus.body.error.details}
+            </strong>{' '}
+            {props.queryStatus.body.error.message}
           </p>
         </EuiText>
       </div>

diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -218,3 +218,40 @@
     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;
+}
+
+// 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
@@ -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, useRef, 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,59 +62,109 @@ 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"
-      data-test-subj="osdQueryEditor__singleLine"
-    >
-      <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 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(() => {
+        blurTimeoutRef.current = setTimeout(() => {
+          setEditorIsFocused(false);
+        }, 500);
+      });
+
+      return () => {
+        focusDisposable.dispose();
+        blurDisposable.dispose();
+        if (blurTimeoutRef.current) {
+          clearTimeout(blurTimeoutRef.current);
+        }
+      };
+    },
+    [editorDidMount]
+  );
+
+  return (
+    <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap">
+      {prepend}
+      <div
+        className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper"
+        data-test-subj="osdQueryEditor__singleLine"
+      >
+        <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',
+              horizontalScrollbarSize: 1,
             },
-          ],
-        }}
-        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>
-);
+  );
+};