[7.x] [Lens] Fix embeddable title and description for reporting and dashboard tooltip (#78767) (#79164)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: dej611

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -109,12 +109,11 @@ function renderTooltip(description: string) {
   );
 }
 
-const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
-type VisualizeEmbeddable = any;
+type EmbeddableWithDescription = IEmbeddable & { getDescription: () => string };
 
-function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
-  if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
-    const description = embeddable.getVisualizationDescription();
+function getViewDescription(embeddable: IEmbeddable | EmbeddableWithDescription) {
+  if ('getDescription' in embeddable) {
+    const description = embeddable.getDescription();
 
     if (description) {
       return description;

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -167,7 +167,7 @@ export class VisualizeEmbeddable
         typeof inspectorAdapters === 'function' ? inspectorAdapters() : inspectorAdapters;
     }
   }
-  public getVisualizationDescription() {
+  public getDescription() {
     return this.vis.description;
   }
 

x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap

@@ -33,6 +33,7 @@ export interface DatatableColumns {
 
 interface Args {
   title: string;
+  description?: string;
   columns: DatatableColumns & { type: 'lens_datatable_columns' };
 }
 
@@ -72,6 +73,10 @@ export const datatable: ExpressionFunctionDefinition<
         defaultMessage: 'Title',
       }),
     },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     columns: {
       types: ['lens_datatable_columns'],
       help: '',
@@ -207,7 +212,10 @@ export function DatatableComponent(props: DatatableRenderProps) {
   }
 
   return (
-    <VisualizationContainer>
+    <VisualizationContainer
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+    >
       <EuiBasicTable
         className="lnsDataTable"
         data-test-subj="lnsDataTable"

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

@@ -194,7 +194,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
     };
   },
 
-  toExpression(state, datasourceLayers): Ast {
+  toExpression(state, datasourceLayers, { title, description } = {}): Ast {
     const layer = state.layers[0];
     const datasource = datasourceLayers[layer.layerId];
     const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
@@ -211,6 +211,8 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           type: 'function',
           function: 'lens_datatable',
           arguments: {
+            title: [title || ''],
+            description: [description || ''],
             columns: [
               {
                 type: 'expression',

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -73,7 +73,11 @@ export function buildExpression({
   datasourceMap,
   datasourceStates,
   datasourceLayers,
+  title,
+  description,
 }: {
+  title?: string;
+  description?: string;
   visualization: Visualization | null;
   visualizationState: unknown;
   datasourceMap: Record<string, Datasource>;
@@ -89,7 +93,10 @@ export function buildExpression({
   if (visualization === null) {
     return null;
   }
-  const visualizationExpression = visualization.toExpression(visualizationState, datasourceLayers);
+  const visualizationExpression = visualization.toExpression(visualizationState, datasourceLayers, {
+    title,
+    description,
+  });
 
   const completeExpression = prependDatasourceExpression(
     visualizationExpression,

x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts

@@ -61,6 +61,8 @@ export async function persistedStateToExpression(
     state: { visualization: visualizationState, datasourceStates: persistedDatasourceStates },
     visualizationType,
     references,
+    title,
+    description,
   } = doc;
   if (!visualizationType) return null;
   const visualization = visualizations[visualizationType!];
@@ -78,6 +80,8 @@ export async function persistedStateToExpression(
   const datasourceLayers = createDatasourceLayers(datasources, datasourceStates);
 
   return buildExpression({
+    title,
+    description,
     visualization,
     visualizationState,
     datasourceMap: datasources,

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts

@@ -295,6 +295,12 @@ export class Embeddable
     return this.deps.attributeService.getInputAsValueType(input);
   };
 
+  // same API as Visualize
+  public getDescription() {
+    // mind that savedViz is loaded in async way here
+    return this.savedVis && this.savedVis.description;
+  }
+
   destroy() {
     super.destroy();
     if (this.domNode) {

x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx

@@ -32,10 +32,21 @@ function sampleArgs() {
     accessor: 'a',
     layerId: 'l1',
     title: 'My fanci metric chart',
+    description: 'Fancy chart description',
+    metricTitle: 'My fanci metric chart',
     mode: 'full',
   };
 
-  return { data, args };
+  const noAttributesArgs: MetricConfig = {
+    accessor: 'a',
+    layerId: 'l1',
+    title: '',
+    description: '',
+    metricTitle: 'My fanci metric chart',
+    mode: 'full',
+  };
+
+  return { data, args, noAttributesArgs };
 }
 
 describe('metric_expression', () => {
@@ -53,14 +64,15 @@ describe('metric_expression', () => {
   });
 
   describe('MetricChart component', () => {
-    test('it renders the title and value', () => {
+    test('it renders the all attributes when passed (title, description, metricTitle, value)', () => {
       const { data, args } = sampleArgs();
 
       expect(
         shallow(<MetricChart data={data} args={args} formatFactory={(x) => x as IFieldFormat} />)
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          reportDescription="Fancy chart description"
           reportTitle="My fanci metric chart"
         >
           <AutoScale>
@@ -90,21 +102,66 @@ describe('metric_expression', () => {
       `);
     });
 
-    test('it does not render title in reduced mode', () => {
-      const { data, args } = sampleArgs();
+    test('it renders only chart content when title and description are empty strings', () => {
+      const { data, noAttributesArgs } = sampleArgs();
 
       expect(
         shallow(
           <MetricChart
             data={data}
-            args={{ ...args, mode: 'reduced' }}
+            args={noAttributesArgs}
             formatFactory={(x) => x as IFieldFormat}
           />
         )
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
-          reportTitle="My fanci metric chart"
+          reportDescription=""
+          reportTitle=""
+        >
+          <AutoScale>
+            <div
+              data-test-subj="lns_metric_value"
+              style={
+                Object {
+                  "fontSize": "60pt",
+                  "fontWeight": 600,
+                }
+              }
+            >
+              10110
+            </div>
+            <div
+              data-test-subj="lns_metric_title"
+              style={
+                Object {
+                  "fontSize": "24pt",
+                }
+              }
+            >
+              My fanci metric chart
+            </div>
+          </AutoScale>
+        </VisualizationContainer>
+      `);
+    });
+
+    test('it does not render metricTitle in reduced mode', () => {
+      const { data, noAttributesArgs } = sampleArgs();
+
+      expect(
+        shallow(
+          <MetricChart
+            data={data}
+            args={{ ...noAttributesArgs, mode: 'reduced' }}
+            formatFactory={(x) => x as IFieldFormat}
+          />
+        )
+      ).toMatchInlineSnapshot(`
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportDescription=""
+          reportTitle=""
         >
           <AutoScale>
             <div

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

@@ -43,6 +43,14 @@ export const metricChart: ExpressionFunctionDefinition<
       types: ['string'],
       help: 'The chart title.',
     },
+    description: {
+      types: ['string'],
+      help: '',
+    },
+    metricTitle: {
+      types: ['string'],
+      help: 'The title of the metric shown.',
+    },
     accessor: {
       types: ['string'],
       help: 'The column whose value is being displayed',
@@ -98,12 +106,16 @@ export function MetricChart({
   args,
   formatFactory,
 }: MetricChartProps & { formatFactory: FormatFactory }) {
-  const { title, accessor, mode } = args;
+  const { metricTitle, title, description, accessor, mode } = args;
   let value = '-';
   const firstTable = Object.values(data.tables)[0];
   if (!accessor) {
     return (
-      <VisualizationContainer reportTitle={title} className="lnsMetricExpression__container" />
+      <VisualizationContainer
+        reportTitle={title}
+        reportDescription={description}
+        className="lnsMetricExpression__container"
+      />
     );
   }
 
@@ -119,14 +131,18 @@ export function MetricChart({
   }
 
   return (
-    <VisualizationContainer reportTitle={title} className="lnsMetricExpression__container">
+    <VisualizationContainer
+      reportTitle={title}
+      reportDescription={description}
+      className="lnsMetricExpression__container"
+    >
       <AutoScale>
         <div data-test-subj="lns_metric_value" style={{ fontSize: '60pt', fontWeight: 600 }}>
           {value}
         </div>
         {mode === 'full' && (
           <div data-test-subj="lns_metric_title" style={{ fontSize: '24pt' }}>
-            {title}
+            {metricTitle}
           </div>
         )}
       </AutoScale>