[Visualizations] Remove kui usage (#82810)

* [Visualize] Remove kui usage * Use EuiPromptButton istead of EuiCallout * Add a link to advanced settings for visualizations docs * Changes requested on code review Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 10, 2020 · 471c281 · 471c281
1 parent af5f299
commit 471c281
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 33 deletions.
diff --git 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/_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
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -17,29 +17,42 @@
  * under the License.
  */
 
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import React from 'react';
+import { getDocLinks } from '../services';
 
 export function DisabledLabVisualization({ title }: { title: string }) {
+  const advancedSettingsLink = getDocLinks().links.management.visualizationSettings;
   return (
-    <div className="visDisabledLabVisualization">
-      <div
-        className="kuiVerticalRhythm visDisabledLabVisualization__icon kuiIcon fa-flask"
-        aria-hidden="true"
+    <I18nProvider>
+      <EuiEmptyPrompt
+        titleSize="xs"
+        title={
+          <h6>
+            <FormattedMessage
+              id="visualizations.disabledLabVisualizationTitle"
+              defaultMessage="{title} is a lab visualization."
+              values={{ title }}
+            />
+          </h6>
+        }
+        iconType="beaker"
+        body={
+          <FormattedMessage
+            id="visualizations.disabledLabVisualizationMessage"
+            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>
+        }
       />
-      <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>
+    </I18nProvider>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		@import 'visualize_lab_disabled';
		@import 'embeddables';