From 5dc08a397ee24dcbe3762391984d8629bc813889 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Fri, 6 Nov 2020 12:04:25 +0200
Subject: [PATCH 1/4] [Visualize] Remove kui usage

---
 .../public/embeddable/_index.scss             |  1 -
 .../embeddable/_visualize_lab_disabled.scss   | 13 -------
 .../disabled_lab_visualization.scss           |  4 ++
 .../embeddable/disabled_lab_visualization.tsx | 38 ++++++++++---------
 4 files changed, 24 insertions(+), 32 deletions(-)
 delete mode 100644 src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss
 create mode 100644 src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss

diff --git a/src/plugins/visualizations/public/embeddable/_index.scss b/src/plugins/visualizations/public/embeddable/_index.scss
index c1e3809657bfa..9703e90159f48 100644
--- a/src/plugins/visualizations/public/embeddable/_index.scss
+++ b/src/plugins/visualizations/public/embeddable/_index.scss
@@ -1,2 +1 @@
-@import 'visualize_lab_disabled';
 @import 'embeddables';
diff --git a/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss b/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss
deleted file mode 100644
index 914480ff8c777..0000000000000
--- a/src/plugins/visualizations/public/embeddable/_visualize_lab_disabled.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.visDisabledLabVisualization {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.visDisabledLabVisualization__icon {
-  font-size: $euiFontSizeXL;
-}
-
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss
new file mode 100644
index 0000000000000..a5bce2d7a2c46
--- /dev/null
+++ b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss
@@ -0,0 +1,4 @@
+.visDisabledLabVisualization {
+  width: 100%;
+  height: fit-content
+}
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
index 3d2af2c591a3c..c6ff920dabb43 100644
--- a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
+++ b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -18,28 +18,30 @@
  */
 
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut } from '@elastic/eui';
 import React from 'react';
 
+import './disabled_lab_visualization.scss';
+
 export function DisabledLabVisualization({ title }: { title: string }) {
+  const calloutTitle = (
+    <FormattedMessage
+      id="visualizations.disabledLabVisualizationTitle"
+      defaultMessage="{title} is a lab visualization."
+      values={{ title }}
+    />
+  );
   return (
-    <div className="visDisabledLabVisualization">
-      <div
-        className="kuiVerticalRhythm visDisabledLabVisualization__icon kuiIcon fa-flask"
-        aria-hidden="true"
+    <EuiCallOut
+      className="visDisabledLabVisualization"
+      size="s"
+      title={calloutTitle}
+      iconType="beaker"
+    >
+      <FormattedMessage
+        id="visualizations.disabledLabVisualizationMessage"
+        defaultMessage="Please turn on lab-mode in the advanced settings to see lab visualizations."
       />
-      <div className="kuiVerticalRhythm">
-        <FormattedMessage
-          id="visualizations.disabledLabVisualizationTitle"
-          defaultMessage="{title} is a lab visualization."
-          values={{ title: <em className="visDisabledLabVisualization__title">{title}</em> }}
-        />
-      </div>
-      <div className="kuiVerticalRhythm">
-        <FormattedMessage
-          id="visualizations.disabledLabVisualizationMessage"
-          defaultMessage="Please turn on lab-mode in the advanced settings to see lab visualizations."
-        />
-      </div>
-    </div>
+    </EuiCallOut>
   );
 }

From 79073f2ddca58d2a938e42f8ad5ddab1e0d60d17 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 9 Nov 2020 12:13:58 +0200
Subject: [PATCH 2/4] Use EuiPromptButton istead of EuiCallout

---
 .../disabled_lab_visualization.scss           |  4 ---
 .../embeddable/disabled_lab_visualization.tsx | 29 +++++++++----------
 2 files changed, 14 insertions(+), 19 deletions(-)
 delete mode 100644 src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss

diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss
deleted file mode 100644
index a5bce2d7a2c46..0000000000000
--- a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.visDisabledLabVisualization {
-  width: 100%;
-  height: fit-content
-}
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
index c6ff920dabb43..3bfabf27e0fc0 100644
--- a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
+++ b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -17,14 +17,12 @@
  * under the License.
  */
 
-import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCallOut } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
 
-import './disabled_lab_visualization.scss';
-
 export function DisabledLabVisualization({ title }: { title: string }) {
-  const calloutTitle = (
+  const promptTitle = (
     <FormattedMessage
       id="visualizations.disabledLabVisualizationTitle"
       defaultMessage="{title} is a lab visualization."
@@ -32,16 +30,17 @@ export function DisabledLabVisualization({ title }: { title: string }) {
     />
   );
   return (
-    <EuiCallOut
-      className="visDisabledLabVisualization"
-      size="s"
-      title={calloutTitle}
-      iconType="beaker"
-    >
-      <FormattedMessage
-        id="visualizations.disabledLabVisualizationMessage"
-        defaultMessage="Please turn on lab-mode in the advanced settings to see lab visualizations."
+    <I18nProvider>
+      <EuiEmptyPrompt
+        title={promptTitle}
+        iconType="beaker"
+        body={
+          <FormattedMessage
+            id="visualizations.disabledLabVisualizationMessage"
+            defaultMessage="Please turn on lab-mode in the advanced settings to see lab visualizations."
+          />
+        }
       />
-    </EuiCallOut>
+    </I18nProvider>
   );
 }

From f025303e233c2b5d6646c6ba441bdf8ff2b0eb0d Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 9 Nov 2020 16:49:13 +0200
Subject: [PATCH 3/4] Add a link to advanced settings for visualizations docs

---
 .../public/doc_links/doc_links_service.ts     |  1 +
 .../embeddable/disabled_lab_visualization.tsx | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index 48187fe465392..0815df4b9b0c7 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -131,6 +131,7 @@ export class DocLinksService {
         management: {
           kibanaSearchSettings: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/advanced-options.html#kibana-search-settings`,
           dashboardSettings: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/advanced-options.html#kibana-dashboard-settings`,
+          visualizationSettings: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/advanced-options.html#kibana-visualization-settings`,
         },
         visualize: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/visualize.html`,
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
index 3bfabf27e0fc0..8faf53ed4bba1 100644
--- a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
+++ b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -18,21 +18,22 @@
  */
 
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
-import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import React from 'react';
+import { getDocLinks } from '../services';
 
 export function DisabledLabVisualization({ title }: { title: string }) {
-  const promptTitle = (
-    <FormattedMessage
-      id="visualizations.disabledLabVisualizationTitle"
-      defaultMessage="{title} is a lab visualization."
-      values={{ title }}
-    />
-  );
+  const advancedSettingsLink = getDocLinks().links.management.visualizationSettings;
   return (
     <I18nProvider>
       <EuiEmptyPrompt
-        title={promptTitle}
+        title={
+          <FormattedMessage
+            id="visualizations.disabledLabVisualizationTitle"
+            defaultMessage="{title} is a lab visualization."
+            values={{ title }}
+          />
+        }
         iconType="beaker"
         body={
           <FormattedMessage
@@ -40,6 +41,14 @@ export function DisabledLabVisualization({ title }: { title: string }) {
             defaultMessage="Please turn on lab-mode in the advanced settings to see lab visualizations."
           />
         }
+        actions={
+          <EuiLink target="_blank" external href={advancedSettingsLink}>
+            <FormattedMessage
+              id="visualizations.disabledLabVisualizationLink"
+              defaultMessage="Read documentation"
+            />
+          </EuiLink>
+        }
       />
     </I18nProvider>
   );

From df4e127a10a05348389e0d8758be99015341170c Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 9 Nov 2020 17:48:19 +0200
Subject: [PATCH 4/4] Changes requested on code review

---
 .../embeddable/disabled_lab_visualization.tsx       | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
index 8faf53ed4bba1..ea7760f31d54c 100644
--- a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
+++ b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -27,12 +27,15 @@ export function DisabledLabVisualization({ title }: { title: string }) {
   return (
     <I18nProvider>
       <EuiEmptyPrompt
+        titleSize="xs"
         title={
-          <FormattedMessage
-            id="visualizations.disabledLabVisualizationTitle"
-            defaultMessage="{title} is a lab visualization."
-            values={{ title }}
-          />
+          <h6>
+            <FormattedMessage
+              id="visualizations.disabledLabVisualizationTitle"
+              defaultMessage="{title} is a lab visualization."
+              values={{ title }}
+            />
+          </h6>
         }
         iconType="beaker"
         body={