[Lens] Add render complete tags to empty states (#106163)

* [Lens] Add render complete tags to empty states

* Fix typo

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx

@@ -11,6 +11,7 @@ import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from '@kbn/test/jest';
 import { EuiDataGrid } from '@elastic/eui';
 import { IAggType, IFieldFormat } from 'src/plugins/data/public';
+import { VisualizationContainer } from '../../visualization_container';
 import { EmptyPlaceholder } from '../../shared_components';
 import { LensIconChartDatatable } from '../../assets/chart_datatable';
 import { DataContext, DatatableComponent } from './table_basic';
@@ -357,6 +358,7 @@ describe('DatatableComponent', () => {
         uiSettings={({ get: jest.fn() } as unknown) as IUiSettingsClient}
       />
     );
+    expect(component.find(VisualizationContainer)).toHaveLength(1);
     expect(component.find(EmptyPlaceholder).prop('icon')).toEqual(LensIconChartDatatable);
   });
 

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx

@@ -329,7 +329,15 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   }, [columnConfig.columns, alignments, firstTable, columns]);
 
   if (isEmpty) {
-    return <EmptyPlaceholder icon={LensIconChartDatatable} />;
+    return (
+      <VisualizationContainer
+        className="lnsDataTableContainer"
+        reportTitle={props.args.title}
+        reportDescription={props.args.description}
+      >
+        <EmptyPlaceholder icon={LensIconChartDatatable} />
+      </VisualizationContainer>
+    );
   }
 
   const dataGridAriaLabel =

x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx

@@ -314,8 +314,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
     return <EmptyPlaceholder icon={LensIconChartHeatmap} />;
   }
 
-  // const colorPalette = euiPaletteForTemperature(5);
-
   return (
     <Chart>
       <Settings
@@ -351,7 +349,7 @@ export function HeatmapChartReportable(props: HeatmapRenderProps) {
     isReady: false,
   });
 
-  // It takes a cycle for the XY chart to render. This prevents
+  // It takes a cycle for the chart to render. This prevents
   // reporting from printing a blank chart placeholder.
   useEffect(() => {
     setState({ isReady: true });

x-pack/plugins/lens/public/metric_visualization/expression.test.tsx

@@ -249,10 +249,16 @@ describe('metric_expression', () => {
           />
         )
       ).toMatchInlineSnapshot(`
-              <EmptyPlaceholder
-                icon={[Function]}
-              />
-          `);
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportDescription=""
+          reportTitle=""
+        >
+          <EmptyPlaceholder
+            icon={[Function]}
+          />
+        </VisualizationContainer>
+      `);
     });
 
     test('it renders an EmptyPlaceholder when null value is passed as data', () => {
@@ -269,9 +275,15 @@ describe('metric_expression', () => {
           />
         )
       ).toMatchInlineSnapshot(`
-        <EmptyPlaceholder
-          icon={[Function]}
-        />
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportDescription=""
+          reportTitle=""
+        >
+          <EmptyPlaceholder
+            icon={[Function]}
+          />
+        </VisualizationContainer>
       `);
     });
 

x-pack/plugins/lens/public/metric_visualization/expression.tsx

@@ -113,32 +113,32 @@ export function MetricChart({
 }: MetricChartProps & { formatFactory: FormatFactory }) {
   const { metricTitle, title, description, accessor, mode } = args;
   const firstTable = Object.values(data.tables)[0];
-  if (!accessor) {
-    return (
-      <VisualizationContainer
-        reportTitle={title}
-        reportDescription={description}
-        className="lnsMetricExpression__container"
-      />
-    );
-  }
 
-  if (!firstTable) {
-    return <EmptyPlaceholder icon={LensIconChartMetric} />;
+  const getEmptyState = () => (
+    <VisualizationContainer
+      reportTitle={title}
+      reportDescription={description}
+      className="lnsMetricExpression__container"
+    >
+      <EmptyPlaceholder icon={LensIconChartMetric} />
+    </VisualizationContainer>
+  );
+
+  if (!accessor || !firstTable) {
+    return getEmptyState();
   }
 
   const column = firstTable.columns.find(({ id }) => id === accessor);
   const row = firstTable.rows[0];
   if (!column || !row) {
-    return <EmptyPlaceholder icon={LensIconChartMetric} />;
+    return getEmptyState();
   }
 
   // NOTE: Cardinality and Sum never receives "null" as value, but always 0, even for empty dataset.
   // Mind falsy values here as 0!
   const shouldShowResults = row[accessor] != null;
-
   if (!shouldShowResults) {
-    return <EmptyPlaceholder icon={LensIconChartMetric} />;
+    return getEmptyState();
   }
 
   const value =

x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx

@@ -19,6 +19,7 @@ import { shallow } from 'enzyme';
 import { LensMultiTable } from '../types';
 import { PieComponent } from './render_function';
 import { PieExpressionArgs } from './types';
+import { VisualizationContainer } from '../visualization_container';
 import { EmptyPlaceholder } from '../shared_components';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { LensIconChartDonut } from '../assets/chart_donut';
@@ -311,6 +312,7 @@ describe('PieVisualization component', () => {
       const component = shallow(
         <PieComponent args={args} {...getDefaultArgs()} data={emptyData} />
       );
+      expect(component.find(VisualizationContainer)).toHaveLength(1);
       expect(component.find(EmptyPlaceholder)).toHaveLength(1);
     });
 
@@ -331,6 +333,7 @@ describe('PieVisualization component', () => {
         <PieComponent args={args} {...getDefaultArgs()} data={emptyData} />
       );
 
+      expect(component.find(VisualizationContainer)).toHaveLength(1);
       expect(component.find(EmptyPlaceholder)).toHaveLength(0);
       expect(component.find(Chart)).toHaveLength(1);
     });
@@ -353,6 +356,7 @@ describe('PieVisualization component', () => {
       const component = shallow(
         <PieComponent args={args} {...getDefaultArgs()} data={emptyData} />
       );
+      expect(component.find(VisualizationContainer)).toHaveLength(1);
       expect(component.find(EmptyPlaceholder).prop('icon')).toEqual(LensIconChartDonut);
     });
   });

x-pack/plugins/lens/public/pie_visualization/render_function.tsx

@@ -233,7 +233,15 @@ export function PieComponent(
     isMetricEmpty;
 
   if (isEmpty) {
-    return <EmptyPlaceholder icon={LensIconChartDonut} />;
+    return (
+      <VisualizationContainer
+        reportTitle={props.args.title}
+        reportDescription={props.args.description}
+        className="lnsPieExpression__container"
+      >
+        <EmptyPlaceholder icon={LensIconChartDonut} />;
+      </VisualizationContainer>
+    );
   }
 
   if (hasNegative) {

x-pack/test/search_sessions_integration/tests/apps/dashboard/async_search/save_search_session_relative_time.ts

@@ -29,8 +29,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const searchSessions = getService('searchSessions');
 
-  // Failing: See https://github.com/elastic/kibana/issues/97701
-  describe.skip('save a search sessions with relative time', () => {
+  describe('save a search sessions with relative time', () => {
     before(async () => {
       await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
         useActualUrl: true,