From 486b16e56f76ba0124b80b564f8516e2e22bc37b Mon Sep 17 00:00:00 2001
From: "Quynh Nguyen (Quinn)" <43350163+qn895@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:45:22 -0500
Subject: [PATCH] [ML] Add border to text editor for ES|QL data visualizer
 (#192726)

## Summary

This PR adds border to text editor for ES|QL data visualizer so make it
more clear where the boundaries for the editor is.

<img width="1505" alt="image"
src="https://github.com/user-attachments/assets/264f4892-f361-4013-b49f-55fa5b90aa8f">

Also fixes the content of the top values overflowing.


https://github.com/user-attachments/assets/19c90cb3-2d35-41df-aea4-889a00e6ebdb


Fixes https://github.com/elastic/kibana/issues/192788
Fixes https://github.com/elastic/kibana/issues/192637

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../components/top_values/top_values.tsx      |  8 ++++++
 .../index_data_visualizer_esql.tsx            | 28 +++++++++++++------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx
index 0d7d6b4c480e..5d263135389e 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/top_values/top_values.tsx
@@ -14,6 +14,8 @@ import {
   EuiText,
   EuiButtonIcon,
   EuiSpacer,
+  useEuiTheme,
+  euiScrollBarStyles,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -69,6 +71,7 @@ export const TopValues: FC<Props> = ({
       data: { fieldFormats },
     },
   } = useDataVisualizerKibana();
+  const euiTheme = useEuiTheme();
 
   if (stats === undefined || !stats.topValues) return null;
   const { fieldName, sampleCount, approximate } = stats;
@@ -169,6 +172,10 @@ export const TopValues: FC<Props> = ({
     <ExpandedRowPanel
       dataTestSubj={'dataVisualizerFieldDataTopValues'}
       className={classNames('dvPanel__wrapper', compressed ? 'dvPanel--compressed' : undefined)}
+      css={css`
+        overflow-x: auto;
+        ${euiScrollBarStyles(euiTheme)}
+      `}
     >
       <ExpandedRowFieldHeader>
         {showSampledValues ? (
@@ -215,6 +222,7 @@ export const TopValues: FC<Props> = ({
                   onAddFilter !== undefined ? (
                     <div
                       css={css`
+                        position: static;
                         width: 48px;
                       `}
                     >
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx
index 8e3d48c47c78..d50ee4c8916f 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx
@@ -259,15 +259,25 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
           </EuiFlexGroup>
         </EuiPageTemplate.Header>
         <EuiSpacer size="m" />
-        <TextBasedLangEditor
-          query={localQuery}
-          onTextLangQueryChange={onTextLangQueryChange}
-          onTextLangQuerySubmit={onTextLangQuerySubmit}
-          detectedTimestamp={currentDataView?.timeFieldName}
-          hideRunQueryText={false}
-          isLoading={queryHistoryStatus ?? false}
-          displayDocumentationAsFlyout
-        />
+        <EuiFlexItem
+          grow={false}
+          data-test-subj="DataVisualizerESQLEditor"
+          css={css({
+            borderTop: euiTheme.euiBorderThin,
+            borderLeft: euiTheme.euiBorderThin,
+            borderRight: euiTheme.euiBorderThin,
+          })}
+        >
+          <TextBasedLangEditor
+            query={localQuery}
+            onTextLangQueryChange={onTextLangQueryChange}
+            onTextLangQuerySubmit={onTextLangQuerySubmit}
+            detectedTimestamp={currentDataView?.timeFieldName}
+            hideRunQueryText={false}
+            isLoading={queryHistoryStatus ?? false}
+            displayDocumentationAsFlyout
+          />
+        </EuiFlexItem>
 
         <EuiFlexGroup gutterSize="m" direction={isWithinLargeBreakpoint ? 'column' : 'row'}>
           <EuiFlexItem>