Use EuiPromptButton istead of EuiCallout

elastic · Nov 9, 2020 · 79073f2 · 79073f2
1 parent 5c23c09
commit 79073f2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.scss
diff --git a/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx b/src/plugins/visualizations/public/embeddable/disabled_lab_visualization.tsx
@@ -17,31 +17,30 @@
  * 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."
       values={{ title }}
     />
   );
   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>
   );
 }