From 5df9c86fedb58649adb8e27b25ad8e8fb9ac5b5c Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Fri, 31 Jan 2020 11:10:46 +0100
Subject: [PATCH] [ML] Fix Data Visualizer responsive layout  (#56372) (#56472)

* [ML] replace Example component with EuiListGroup

* [ML] center alignment
---
 .../field_data_card/examples_list/example.tsx | 31 -------------------
 .../examples_list/examples_list.tsx           | 17 +++++++---
 2 files changed, 12 insertions(+), 36 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/example.tsx

diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/example.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/example.tsx
deleted file mode 100644
index 29fe690f4a43b..0000000000000
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/example.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { FC } from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
-
-interface Props {
-  example: string | object;
-}
-
-export const Example: FC<Props> = ({ example }) => {
-  const exampleStr = typeof example === 'string' ? example : JSON.stringify(example);
-
-  // Use 95% width for each example so that the truncation ellipses show up when
-  // wrapped inside a tooltip.
-  return (
-    <EuiFlexGroup gutterSize="s" alignItems="center">
-      <EuiFlexItem grow={false} style={{ width: '95%' }} className="eui-textTruncate">
-        <EuiToolTip content={exampleStr}>
-          <EuiText size="s" className="eui-textTruncate">
-            {exampleStr}
-          </EuiText>
-        </EuiToolTip>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
index 0bf911c1edf86..c8eb810115401 100644
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
@@ -6,12 +6,10 @@
 
 import React, { FC } from 'react';
 
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiListGroup, EuiListGroupItem, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Example } from './example';
-
 interface Props {
   examples: Array<string | object>;
 }
@@ -22,7 +20,14 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
   }
 
   const examplesContent = examples.map((example, i) => {
-    return <Example key={`example_${i}`} example={example} />;
+    return (
+      <EuiListGroupItem
+        style={{ padding: 0, justifyContent: 'center' }}
+        size="xs"
+        key={`example_${i}`}
+        label={typeof example === 'string' ? example : JSON.stringify(example)}
+      />
+    );
   });
 
   return (
@@ -39,7 +44,9 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
         </h6>
       </EuiText>
       <EuiSpacer size="s" />
-      {examplesContent}
+      <EuiListGroup flush={true} showToolTips={true}>
+        {examplesContent}
+      </EuiListGroup>
     </div>
   );
 };