[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)](#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":"[email protected]"},"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
<[email protected]>","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
<[email protected]>","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
<[email protected]>","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) <[email protected]>

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

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>