Use common no data message

Author: sulemanof

src/plugins/vis_type_tagcloud/public/tag_cloud_type.ts

@@ -120,5 +120,4 @@ export const tagCloudVisTypeDefinition = {
       },
     ]),
   },
-  useCustomNoDataScreen: true,
 };

src/plugins/vis_type_tagcloud/public/tag_cloud_vis_renderer.tsx

@@ -20,6 +20,7 @@
 import React, { lazy, Suspense } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { EuiLoadingSpinner } from '@elastic/eui';
+import { get } from 'lodash';
 
 import { VisualizationContainer } from '../../visualizations/public';
 import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
@@ -41,7 +42,7 @@ export const getTagCloudVisRenderer: (
     });
 
     render(
-      <VisualizationContainer>
+      <VisualizationContainer showNoResults={config.visData?.rows?.length === 0}>
         <Suspense fallback={<EuiLoadingSpinner />}>
           <TagCloudChart
             {...config}

src/plugins/visualizations/public/components/visualization_container.tsx

@@ -18,13 +18,19 @@
  */
 
 import React, { ReactNode } from 'react';
+import { VisualizationNoResults } from './visualization_noresults';
 
 interface VisualizationContainerProps {
   className?: string;
   children: ReactNode;
+  showNoResults?: boolean;
 }
 
-export const VisualizationContainer = (props: VisualizationContainerProps) => {
-  const classes = `visualization ${props.className}`;
-  return <div className={classes}>{props.children}</div>;
+export const VisualizationContainer = ({
+  className = '',
+  children,
+  showNoResults = false,
+}: VisualizationContainerProps) => {
+  const classes = `visualization ${className}`;
+  return <div className={classes}>{showNoResults ? <VisualizationNoResults /> : children}</div>;
 };