[2.x-manual-backport][Discover] Add Footer Bar for Single Line Editor (#8565)

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))

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 {

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 @@
   } 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;

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;
+}

src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx

@@ -22,10 +22,9 @@
   status: ResultStatus;
   body?: {
     error?: {
-      reason?: string;
-      details: string;
+      statusCode?: number;
+      message?: string;
     };
-    statusCode?: number;
   };
   elapsedMs?: number;
   startTime?: number;
@@ -77,6 +76,22 @@
         </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 @@
     }
 
     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 @@
           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 @@
       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>

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;
+}