From eb3cd0faae542755d2b2044928dc5180176b36ca Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Tue, 29 Sep 2020 15:05:21 +0200
Subject: [PATCH 1/8] :bug: Forward title and description to the visualization
 container

---
 .../datatable_visualization/expression.tsx    | 10 +++++++-
 .../datatable_visualization/visualization.tsx |  4 ++++
 .../editor_frame/state_helpers.ts             |  4 +++-
 .../metric_expression.tsx                     | 24 +++++++++++++++----
 .../metric_visualization.tsx                  |  4 +++-
 .../lens/public/metric_visualization/types.ts |  4 +++-
 .../pie_visualization/register_expression.tsx |  8 +++++++
 .../pie_visualization/render_function.tsx     |  7 +++++-
 .../public/pie_visualization/to_expression.ts |  2 ++
 .../lens/public/pie_visualization/types.ts    |  4 ++++
 .../lens/public/visualization_container.tsx   |  3 +++
 .../public/xy_visualization/to_expression.ts  |  2 ++
 .../lens/public/xy_visualization/types.ts     |  4 ++++
 .../public/xy_visualization/xy_expression.tsx | 15 +++++++++++-
 14 files changed, 85 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
index dac3b23b98e3b3..d2d22e46a74f73 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
@@ -31,6 +31,7 @@ export interface DatatableColumns {
 
 interface Args {
   title: string;
+  description?: string;
   columns: DatatableColumns & { type: 'lens_datatable_columns' };
 }
 
@@ -70,6 +71,10 @@ export const datatable: ExpressionFunctionDefinition<
         defaultMessage: 'Title',
       }),
     },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     columns: {
       types: ['lens_datatable_columns'],
       help: '',
@@ -205,7 +210,10 @@ export function DatatableComponent(props: DatatableRenderProps) {
   }
 
   return (
-    <VisualizationContainer>
+    <VisualizationContainer
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+    >
       <EuiBasicTable
         className="lnsDataTable"
         data-test-subj="lnsDataTable"
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index 5b462f44b3dd53..882ce8d9b14195 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/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',
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
index 6deb9ffd37a06f..aa90bf1d1a3290 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
+++ b/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,
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_expression.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_expression.tsx
index 3484837f65b435..e0e3f476a40883 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_expression.tsx
@@ -41,6 +41,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',
@@ -96,12 +104,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"
+      />
     );
   }
 
@@ -117,14 +129,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>
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx
index 72c07bed1acb22..1e6a007ddb3c7b 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_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],
         },
diff --git a/x-pack/plugins/lens/public/metric_visualization/types.ts b/x-pack/plugins/lens/public/metric_visualization/types.ts
index 86a781716b3457..91f4d457d80154 100644
--- a/x-pack/plugins/lens/public/metric_visualization/types.ts
+++ b/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';
 }
diff --git a/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx b/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx
index 89d93ab79233f7..d93145f29aa89a 100644
--- a/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/register_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,
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
index d97ab146e000d7..8de810f9aa5d3f 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/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
diff --git a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
index f36b9efb930a93..dd0bd27b225122 100644
--- a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
+++ b/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),
diff --git a/x-pack/plugins/lens/public/pie_visualization/types.ts b/x-pack/plugins/lens/public/pie_visualization/types.ts
index 74156bce2ea703..d121e982cfa18a 100644
--- a/x-pack/plugins/lens/public/pie_visualization/types.ts
+++ b/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;
 };
diff --git a/x-pack/plugins/lens/public/visualization_container.tsx b/x-pack/plugins/lens/public/visualization_container.tsx
index 3ca8d5de932d75..3d4502bbc621ac 100644
--- a/x-pack/plugins/lens/public/visualization_container.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.tsx
@@ -12,6 +12,7 @@ import './visualization_container.scss';
 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}
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index df8d571a1fdf85..6c8efe74a1bb08 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/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 || ''],
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index 185fa20f169eec..2b087930cff862 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/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;
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
index 24bf78dba21211..021216ab54a986 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -83,6 +83,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', {
@@ -213,7 +221,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>
   );

From 9455c42b54aeb0915f51d00a5192c1e19624b98c Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Tue, 29 Sep 2020 15:20:31 +0200
Subject: [PATCH 2/8] :white_check_mark: + :camera_flash: Improved tests +
 updated snapshots

---
 .../__snapshots__/expression.test.tsx.snap                | 4 +++-
 .../metric_visualization/metric_expression.test.tsx       | 1 +
 .../metric_visualization/metric_visualization.test.ts     | 8 +++++++-
 .../plugins/lens/public/visualization_container.test.tsx  | 7 +++++--
 .../__snapshots__/to_expression.test.ts.snap              | 6 ++++++
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
index c0210c3915ce83..9c7bdc3397f9cb 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`datatable_expression DatatableComponent it renders the title and value 1`] = `
-<VisualizationContainer>
+<VisualizationContainer
+  reportTitle="My fanci metric chart"
+>
   <EuiBasicTable
     className="lnsDataTable"
     columns={
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_expression.test.tsx
index 27f971c2ba11a7..5db96d60d3aea2 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_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',
   };
 
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts
index f3c9a725ee2e2b..f4c73695e4d27e 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_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",
diff --git a/x-pack/plugins/lens/public/visualization_container.test.tsx b/x-pack/plugins/lens/public/visualization_container.test.tsx
index 454399ec901215..7fc3541c63072b 100644
--- a/x-pack/plugins/lens/public/visualization_container.test.tsx
+++ b/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', () => {
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
index dd8c6377cacdc1..b35f915336eeed 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
@@ -27,6 +27,9 @@ Object {
             "type": "expression",
           },
         ],
+        "description": Array [
+          "",
+        ],
         "fittingFunction": Array [
           "Carry",
         ],
@@ -139,6 +142,9 @@ Object {
             "type": "expression",
           },
         ],
+        "title": Array [
+          "",
+        ],
         "xTitle": Array [
           "",
         ],

From 7f66e6374e24d95b3c1531de311fc2aee6488b89 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Tue, 29 Sep 2020 15:21:19 +0200
Subject: [PATCH 3/8] :bug: Fix description tooltip for Lens viz in dashboard

---
 .../public/editor_frame_service/embeddable/embeddable.tsx   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
index 61a5d8cacdc4f3..127cf8dbd0a088 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
+++ b/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) {

From fc990e8bd389e2e189a46a9f96dd11fb503ad631 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Tue, 29 Sep 2020 15:50:14 +0200
Subject: [PATCH 4/8] :bug: Forgotten to commit API change into panel header

---
 .../embeddable/public/lib/panel/panel_header/panel_header.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
index 5f73ef2ca76885..2b9d6e7d4d8b49 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -108,11 +108,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) {

From 92e476e631a1d2d9bfdd8831fd51497e4af52baf Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Tue, 29 Sep 2020 15:59:29 +0200
Subject: [PATCH 5/8] :label: Fix type checks

---
 .../lens/public/datatable_visualization/visualization.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index 882ce8d9b14195..b9d0192e3c443a 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -15,7 +15,7 @@ export interface LayerState {
 }
 
 export interface DatatableVisualizationState {
-  title: string;
+  title?: string;
   description?: string;
   layers: LayerState[];
 }

From 31a9d5454ac0b00a42e888d628ba9e2d407f0248 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Wed, 30 Sep 2020 18:28:50 +0200
Subject: [PATCH 6/8] :ok_hand: Refactor based on feedback

---
 .../datatable_visualization/visualization.tsx     |  8 +++-----
 .../editor_frame/expression_helpers.ts            |  9 ++++++++-
 .../editor_frame/state_helpers.ts                 |  4 +++-
 .../lens/public/metric_visualization/types.ts     |  4 ++--
 .../public/metric_visualization/visualization.tsx | 10 +++++-----
 .../public/pie_visualization/to_expression.ts     | 15 ++++++++-------
 .../lens/public/pie_visualization/types.ts        |  2 --
 x-pack/plugins/lens/public/types.ts               |  3 ++-
 .../lens/public/visualization_container.tsx       | 10 ++++++++--
 .../lens/public/xy_visualization/to_expression.ts | 12 +++++++-----
 .../plugins/lens/public/xy_visualization/types.ts |  2 --
 11 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index b9d0192e3c443a..1464ae6988a2df 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -15,8 +15,6 @@ export interface LayerState {
 }
 
 export interface DatatableVisualizationState {
-  title?: string;
-  description?: string;
   layers: LayerState[];
 }
 
@@ -196,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);
@@ -213,8 +211,8 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           type: 'function',
           function: 'lens_datatable',
           arguments: {
-            title: [state.title || ''],
-            description: [state.description || ''],
+            title: [title || ''],
+            description: [description || ''],
             columns: [
               {
                 type: 'expression',
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
index 952718e13c8cfd..e7568147dc568b 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
@@ -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,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
index aa90bf1d1a3290..1fe5224d0b1b4e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
@@ -80,8 +80,10 @@ export async function persistedStateToExpression(
   const datasourceLayers = createDatasourceLayers(datasources, datasourceStates);
 
   return buildExpression({
+    title,
+    description,
     visualization,
-    visualizationState: { ...(visualizationState as object), title, description },
+    visualizationState,
     datasourceMap: datasources,
     datasourceStates,
     datasourceLayers,
diff --git a/x-pack/plugins/lens/public/metric_visualization/types.ts b/x-pack/plugins/lens/public/metric_visualization/types.ts
index 91f4d457d80154..c4a3fd094abe61 100644
--- a/x-pack/plugins/lens/public/metric_visualization/types.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/types.ts
@@ -5,13 +5,13 @@
  */
 
 export interface State {
-  title?: string;
-  description?: string;
   layerId: string;
   accessor?: string;
 }
 
 export interface MetricConfig extends State {
+  title: string;
+  description: string;
   metricTitle: string;
   mode: 'reduced' | 'full';
 }
diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
index 1e6a007ddb3c7b..77d189ce53d012 100644
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
@@ -14,7 +14,7 @@ import { State } from './types';
 const toExpression = (
   state: State,
   datasourceLayers: Record<string, DatasourcePublicAPI>,
-  mode: 'reduced' | 'full' = 'full'
+  attributes?: { mode?: 'reduced' | 'full'; title?: string; description?: string }
 ): Ast | null => {
   if (!state.accessor) {
     return null;
@@ -30,11 +30,11 @@ const toExpression = (
         type: 'function',
         function: 'lens_metric_chart',
         arguments: {
-          title: [state.title || ''],
-          description: [state.description || ''],
+          title: [attributes?.title || ''],
+          description: [attributes?.description || ''],
           metricTitle: [(operation && operation.label) || ''],
           accessor: [state.accessor],
-          mode: [mode],
+          mode: [attributes?.mode || 'full'],
         },
       },
     ],
@@ -106,7 +106,7 @@ export const metricVisualization: Visualization<State> = {
 
   toExpression,
   toPreviewExpression: (state, datasourceLayers) =>
-    toExpression(state, datasourceLayers, 'reduced'),
+    toExpression(state, datasourceLayers, { mode: 'reduced' }),
 
   setDimension({ prevState, columnId }) {
     return { ...prevState, accessor: columnId };
diff --git a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
index dd0bd27b225122..d721a578a3788e 100644
--- a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
@@ -11,15 +11,16 @@ import { PieVisualizationState } from './types';
 
 export function toExpression(
   state: PieVisualizationState,
-  datasourceLayers: Record<string, DatasourcePublicAPI>
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
+  attributes: Partial<{ title: string; description: string }> = {}
 ) {
-  return expressionHelper(state, datasourceLayers, false);
+  return expressionHelper(state, datasourceLayers, { ...attributes, isPreview: false });
 }
 
 function expressionHelper(
   state: PieVisualizationState,
   datasourceLayers: Record<string, DatasourcePublicAPI>,
-  isPreview: boolean
+  attributes: { isPreview: boolean; title?: string; description?: string } = { isPreview: false }
 ): Ast | null {
   const layer = state.layers[0];
   const datasource = datasourceLayers[layer.layerId];
@@ -37,10 +38,10 @@ function expressionHelper(
         type: 'function',
         function: 'lens_pie',
         arguments: {
-          title: [state.title || ''],
-          description: [state.description || ''],
+          title: [attributes.title || ''],
+          description: [attributes.description || ''],
           shape: [state.shape],
-          hideLabels: [isPreview],
+          hideLabels: [attributes.isPreview],
           groups: operations.map((o) => o.columnId),
           metric: [layer.metric],
           numberDisplay: [layer.numberDisplay],
@@ -59,5 +60,5 @@ export function toPreviewExpression(
   state: PieVisualizationState,
   datasourceLayers: Record<string, DatasourcePublicAPI>
 ) {
-  return expressionHelper(state, datasourceLayers, true);
+  return expressionHelper(state, datasourceLayers, { isPreview: true });
 }
diff --git a/x-pack/plugins/lens/public/pie_visualization/types.ts b/x-pack/plugins/lens/public/pie_visualization/types.ts
index d121e982cfa18a..603c80aa00066e 100644
--- a/x-pack/plugins/lens/public/pie_visualization/types.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/types.ts
@@ -23,8 +23,6 @@ export type LayerState = SharedLayerState & {
 };
 
 export interface PieVisualizationState {
-  title?: string;
-  description?: string;
   shape: 'donut' | 'pie' | 'treemap';
   layers: LayerState[];
 }
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
index e97e0d612a2ee6..e5e8a645dd0e80 100644
--- a/x-pack/plugins/lens/public/types.ts
+++ b/x-pack/plugins/lens/public/types.ts
@@ -519,7 +519,8 @@ export interface Visualization<T = unknown> {
 
   toExpression: (
     state: T,
-    datasourceLayers: Record<string, DatasourcePublicAPI>
+    datasourceLayers: Record<string, DatasourcePublicAPI>,
+    attributes?: Partial<{ title: string; description: string }>
   ) => Ast | string | null;
   /**
    * Expression to render a preview version of the chart in very constrained space.
diff --git a/x-pack/plugins/lens/public/visualization_container.tsx b/x-pack/plugins/lens/public/visualization_container.tsx
index c139d4655d15f6..429dc63231cbee 100644
--- a/x-pack/plugins/lens/public/visualization_container.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.tsx
@@ -27,13 +27,19 @@ export function VisualizationContainer({
   className,
   ...rest
 }: Props) {
+  const attributes: Partial<{ 'data-title': string; 'data-description': string }> = {};
+  if (reportTitle) {
+    attributes['data-title'] = reportTitle;
+  }
+  if (reportDescription) {
+    attributes['data-description'] = reportDescription;
+  }
   return (
     <div
       data-shared-item
       data-render-complete={isReady}
       className={classNames(className, 'lnsVisualizationContainer')}
-      data-title={reportTitle}
-      data-description={reportDescription}
+      {...attributes}
       {...rest}
     >
       {children}
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index 6c8efe74a1bb08..5a3c8faa2d4762 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -15,7 +15,8 @@ interface ValidLayer extends LayerConfig {
 
 export const toExpression = (
   state: State,
-  datasourceLayers: Record<string, DatasourcePublicAPI>
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
+  attributes: Partial<{ title: string; description: string }> = {}
 ): Ast | null => {
   if (!state || !state.layers.length) {
     return null;
@@ -31,7 +32,7 @@ export const toExpression = (
     });
   });
 
-  return buildExpression(state, metadata, datasourceLayers);
+  return buildExpression(state, metadata, datasourceLayers, attributes);
 };
 
 export function toPreviewExpression(
@@ -81,7 +82,8 @@ export function getScaleType(metadata: OperationMetadata | null, defaultScale: S
 export const buildExpression = (
   state: State,
   metadata: Record<string, Record<string, OperationMetadata | null>>,
-  datasourceLayers?: Record<string, DatasourcePublicAPI>
+  datasourceLayers?: Record<string, DatasourcePublicAPI>,
+  attributes: Partial<{ title: string; description: string }> = {}
 ): Ast | null => {
   const validLayers = state.layers.filter((layer): layer is ValidLayer =>
     Boolean(layer.accessors.length)
@@ -97,8 +99,8 @@ export const buildExpression = (
         type: 'function',
         function: 'lens_xy_chart',
         arguments: {
-          title: [state.title || ''],
-          description: [state.description || ''],
+          title: [attributes?.title || ''],
+          description: [attributes?.description || ''],
           xTitle: [state.xTitle || ''],
           yTitle: [state.yTitle || ''],
           yRightTitle: [state.yRightTitle || ''],
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index 2b087930cff862..cac982f852c7a4 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/types.ts
@@ -400,8 +400,6 @@ export interface XYArgs {
 
 // Persisted parts of the state
 export interface XYState {
-  title?: string;
-  description?: string;
   preferredSeriesType: SeriesType;
   legend: LegendConfig;
   fittingFunction?: FittingFunction;

From d3b10b507706c225af22c0e734b9d6ad5d943dc0 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Wed, 30 Sep 2020 18:32:19 +0200
Subject: [PATCH 7/8] :white_check_mark: Reshaping tests for new implementation

---
 .../metric_visualization/expression.test.tsx  | 68 +++++++++++++++++--
 1 file changed, 62 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
index 58ad8196088b2a..77a8ce64b21a28 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -32,11 +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', () => {
@@ -54,7 +64,7 @@ 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(
@@ -62,6 +72,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          reportDescription="Fancy chart description"
           reportTitle="My fanci metric chart"
         >
           <AutoScale>
@@ -91,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

From 997c58a94a49ad68a848a530f11bcaa90a182748 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Thu, 1 Oct 2020 10:48:03 +0200
Subject: [PATCH 8/8] :ok_hand: Refactor based on feedback

---
 .../public/lib/panel/panel_header/panel_header.tsx        | 8 ++++----
 .../public/embeddable/visualize_embeddable.ts             | 2 +-
 .../public/editor_frame_service/embeddable/embeddable.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
index 3e98da36fd4a74..dea483efb349f9 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -109,11 +109,11 @@ function renderTooltip(description: string) {
   );
 }
 
-type VisualizeEmbeddable = any;
+type EmbeddableWithDescription = IEmbeddable & { getDescription: () => string };
 
-function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
-  if (embeddable.getVisualizationDescription) {
-    const description = embeddable.getVisualizationDescription();
+function getViewDescription(embeddable: IEmbeddable | EmbeddableWithDescription) {
+  if ('getDescription' in embeddable) {
+    const description = embeddable.getDescription();
 
     if (description) {
       return description;
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
index c091d396b49244..fe8a9adff40529 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
+++ b/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;
   }
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
index 127cf8dbd0a088..16b19ca0af8497 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
@@ -296,7 +296,7 @@ export class Embeddable
   };
 
   // same API as Visualize
-  public getVisualizationDescription() {
+  public getDescription() {
     // mind that savedViz is loaded in async way here
     return this.savedVis && this.savedVis.description;
   }