From 63c00bc5a32a5ec772a1f231f17c76e69eddf91f Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Sat, 21 Sep 2024 04:18:15 +1000
Subject: [PATCH] [8.x] [ML] Add border to text editor for ES|QL data
 visualizer (#192726) (#193621)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Add border to text editor for ES|QL data visualizer
(#192726)](https://github.com/elastic/kibana/pull/192726)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Quynh Nguyen
(Quinn)","email":"43350163+qn895@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-09-20T16:45:22Z","message":"[ML]
Add border to text editor for ES|QL data visualizer (#192726)\n\n##
Summary\r\n\r\nThis PR adds border to text editor for ES|QL data
visualizer so make it\r\nmore clear where the boundaries for the editor
is.\r\n\r\n<img width=\"1505\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/264f4892-f361-4013-b49f-55fa5b90aa8f\">\r\n\r\nAlso
fixes the content of the top values
overflowing.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/19c90cb3-2d35-41df-aea4-889a00e6ebdb\r\n\r\n\r\nFixes
https://github.com/elastic/kibana/issues/192788\r\nFixes
https://github.com/elastic/kibana/issues/192637\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"486b16e56f76ba0124b80b564f8516e2e22bc37b","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","v9.0.0","backport:prev-major","v8.16.0","backport:current-major"],"title":"[ML]
Add border to text editor for ES|QL data
visualizer","number":192726,"url":"https://github.com/elastic/kibana/pull/192726","mergeCommit":{"message":"[ML]
Add border to text editor for ES|QL data visualizer (#192726)\n\n##
Summary\r\n\r\nThis PR adds border to text editor for ES|QL data
visualizer so make it\r\nmore clear where the boundaries for the editor
is.\r\n\r\n<img width=\"1505\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/264f4892-f361-4013-b49f-55fa5b90aa8f\">\r\n\r\nAlso
fixes the content of the top values
overflowing.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/19c90cb3-2d35-41df-aea4-889a00e6ebdb\r\n\r\n\r\nFixes
https://github.com/elastic/kibana/issues/192788\r\nFixes
https://github.com/elastic/kibana/issues/192637\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"486b16e56f76ba0124b80b564f8516e2e22bc37b"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192726","number":192726,"mergeCommit":{"message":"[ML]
Add border to text editor for ES|QL data visualizer (#192726)\n\n##
Summary\r\n\r\nThis PR adds border to text editor for ES|QL data
visualizer so make it\r\nmore clear where the boundaries for the editor
is.\r\n\r\n<img width=\"1505\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/264f4892-f361-4013-b49f-55fa5b90aa8f\">\r\n\r\nAlso
fixes the content of the top values
overflowing.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/19c90cb3-2d35-41df-aea4-889a00e6ebdb\r\n\r\n\r\nFixes
https://github.com/elastic/kibana/issues/192788\r\nFixes
https://github.com/elastic/kibana/issues/192637\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"486b16e56f76ba0124b80b564f8516e2e22bc37b"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Quynh Nguyen (Quinn) <43350163+qn895@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 0d7d6b4c480e9..5d263135389eb 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 8e3d48c47c789..d50ee4c8916f1 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>