[Lens] Fix embeddable title and description for reporting and dashboard tooltip

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

@@ -109,11 +109,10 @@ function renderTooltip(description: string) {
   );
 }
 
-const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
 type VisualizeEmbeddable = any;
 
 function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
-  if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
+  if (embeddable.getVisualizationDescription) {
     const description = embeddable.getVisualizationDescription();
 
     if (description) {

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

@@ -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/visualization.tsx

@@ -15,6 +15,8 @@ export interface LayerState {
 }
 
 export interface DatatableVisualizationState {
+  title?: string;
+  description?: string;
   layers: LayerState[];
 }
 
@@ -211,6 +213,8 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           type: 'function',
           function: 'lens_datatable',
           arguments: {
+            title: [state.title || ''],
+            description: [state.description || ''],
             columns: [
               {
                 type: 'expression',

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_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!];
@@ -79,7 +81,7 @@ export async function persistedStateToExpression(
 
   return buildExpression({
     visualization,
-    visualizationState,
+    visualizationState: { ...(visualizationState as object), title, description },
     datasourceMap: datasources,
     datasourceStates,
     datasourceLayers,

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

@@ -295,6 +295,12 @@ export class Embeddable
     return this.deps.attributeService.getInputAsValueType(input);
   };
 
+  // same API as Visualize
+  public getVisualizationDescription() {
+    // 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/metric_visualization/expression.test.tsx

@@ -32,6 +32,7 @@ function sampleArgs() {
     accessor: 'a',
     layerId: 'l1',
     title: 'My fanci metric chart',
+    metricTitle: 'My fanci metric chart',
     mode: 'full',
   };
 

x-pack/plugins/lens/public/metric_visualization/expression.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>

x-pack/plugins/lens/public/metric_visualization/types.ts

@@ -5,11 +5,13 @@
  */
 
 export interface State {
+  title?: string;
+  description?: string;
   layerId: string;
   accessor?: string;
 }
 
 export interface MetricConfig extends State {
-  title: string;
+  metricTitle: string;
   mode: 'reduced' | 'full';
 }

x-pack/plugins/lens/public/metric_visualization/visualization.test.ts

@@ -171,11 +171,17 @@ describe('metric_visualization', () => {
                 "accessor": Array [
                   "a",
                 ],
+                "description": Array [
+                  "",
+                ],
+                "metricTitle": Array [
+                  "shazm",
+                ],
                 "mode": Array [
                   "full",
                 ],
                 "title": Array [
-                  "shazm",
+                  "",
                 ],
               },
               "function": "lens_metric_chart",

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

@@ -30,7 +30,9 @@ const toExpression = (
         type: 'function',
         function: 'lens_metric_chart',
         arguments: {
-          title: [(operation && operation.label) || ''],
+          title: [state.title || ''],
+          description: [state.description || ''],
+          metricTitle: [(operation && operation.label) || ''],
           accessor: [state.accessor],
           mode: [mode],
         },

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

@@ -37,6 +37,14 @@ export const pie: ExpressionFunctionDefinition<
     defaultMessage: 'Pie renderer',
   }),
   args: {
+    title: {
+      types: ['string'],
+      help: 'The chart title.',
+    },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     groups: {
       types: ['string'],
       multi: true,

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

@@ -228,7 +228,12 @@ export function PieComponent(
     );
   }
   return (
-    <VisualizationContainer className="lnsPieExpression__container" isReady={state.isReady}>
+    <VisualizationContainer
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+      className="lnsPieExpression__container"
+      isReady={state.isReady}
+    >
       <Chart>
         <Settings
           // Legend is hidden in many scenarios

x-pack/plugins/lens/public/pie_visualization/to_expression.ts

@@ -37,6 +37,8 @@ function expressionHelper(
         type: 'function',
         function: 'lens_pie',
         arguments: {
+          title: [state.title || ''],
+          description: [state.description || ''],
           shape: [state.shape],
           hideLabels: [isPreview],
           groups: operations.map((o) => o.columnId),

x-pack/plugins/lens/public/pie_visualization/types.ts

@@ -23,11 +23,15 @@ export type LayerState = SharedLayerState & {
 };
 
 export interface PieVisualizationState {
+  title?: string;
+  description?: string;
   shape: 'donut' | 'pie' | 'treemap';
   layers: LayerState[];
 }
 
 export type PieExpressionArgs = SharedLayerState & {
+  title?: string;
+  description?: string;
   shape: 'pie' | 'donut' | 'treemap';
   hideLabels: boolean;
 };

x-pack/plugins/lens/public/visualization_container.test.tsx

@@ -43,13 +43,16 @@ describe('VisualizationContainer', () => {
     expect(reportingEl.prop('data-shared-item')).toBeTruthy();
   });
 
-  test('renders title for reporting, if provided', () => {
+  test('renders title and description for reporting, if provided', () => {
     const component = mount(
-      <VisualizationContainer reportTitle="shazam!">Hello!</VisualizationContainer>
+      <VisualizationContainer reportTitle="shazam!" reportDescription="Description">
+        Hello!
+      </VisualizationContainer>
     );
     const reportingEl = component.find('[data-shared-item]').first();
 
     expect(reportingEl.prop('data-title')).toEqual('shazam!');
+    expect(reportingEl.prop('data-description')).toEqual('Description');
   });
 
   test('renders style', () => {

x-pack/plugins/lens/public/visualization_container.tsx

@@ -12,6 +12,7 @@ import classNames from 'classnames';
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   isReady?: boolean;
   reportTitle?: string;
+  reportDescription?: string;
 }
 
 /**
@@ -21,6 +22,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 export function VisualizationContainer({
   isReady = true,
   reportTitle,
+  reportDescription,
   children,
   className,
   ...rest
@@ -31,6 +33,7 @@ export function VisualizationContainer({
       data-render-complete={isReady}
       className={classNames(className, 'lnsVisualizationContainer')}
       data-title={reportTitle}
+      data-description={reportDescription}
       {...rest}
     >
       {children}

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

@@ -85,6 +85,14 @@ export const xyChart: ExpressionFunctionDefinition<
     defaultMessage: 'An X/Y chart',
   }),
   args: {
+    title: {
+      types: ['string'],
+      help: 'The chart title.',
+    },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     xTitle: {
       types: ['string'],
       help: i18n.translate('xpack.lens.xyChart.xTitle.help', {
@@ -215,7 +223,12 @@ export function XYChartReportable(props: XYChartRenderProps) {
   }, [setState]);
 
   return (
-    <VisualizationContainer className="lnsXyExpression__container" isReady={state.isReady}>
+    <VisualizationContainer
+      className="lnsXyExpression__container"
+      isReady={state.isReady}
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+    >
       <MemoizedChart {...props} />
     </VisualizationContainer>
   );

x-pack/plugins/lens/public/xy_visualization/to_expression.ts

@@ -97,6 +97,8 @@ export const buildExpression = (
         type: 'function',
         function: 'lens_xy_chart',
         arguments: {
+          title: [state.title || ''],
+          description: [state.description || ''],
           xTitle: [state.xTitle || ''],
           yTitle: [state.yTitle || ''],
           yRightTitle: [state.yRightTitle || ''],

x-pack/plugins/lens/public/xy_visualization/types.ts

@@ -383,6 +383,8 @@ export type LayerArgs = LayerConfig & {
 
 // Arguments to XY chart expression, with computed properties
 export interface XYArgs {
+  title?: string;
+  description?: string;
   xTitle: string;
   yTitle: string;
   yRightTitle: string;
@@ -398,6 +400,8 @@ export interface XYArgs {
 
 // Persisted parts of the state
 export interface XYState {
+  title?: string;
+  description?: string;
   preferredSeriesType: SeriesType;
   legend: LegendConfig;
   fittingFunction?: FittingFunction;