[Lens] Fix embeddable title and description for reporting and dashboa…

…rd tooltip (#78767) Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Oct 1, 2020 · 198c5d9 · 198c5d9
1 parent e248f32
commit 198c5d9
Show file tree

Hide file tree

Showing 24 changed files with 206 additions and 39 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
@@ -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;

diff --git 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/datatable_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/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"

diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.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',

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
@@ -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
@@ -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,

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
@@ -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) {

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.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

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/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>

diff --git a/x-pack/plugins/lens/public/metric_visualization/types.ts b/x-pack/plugins/lens/public/metric_visualization/types.ts
@@ -11,5 +11,7 @@ export interface State {
 
 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.test.ts b/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",

diff --git 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,9 +30,11 @@ const toExpression = (
         type: 'function',
         function: 'lens_metric_chart',
         arguments: {
-          title: [(operation && operation.label) || ''],
+          title: [attributes?.title || ''],
+          description: [attributes?.description || ''],
+          metricTitle: [(operation && operation.label) || ''],
           accessor: [state.accessor],
-          mode: [mode],
+          mode: [attributes?.mode || 'full'],
         },
       },
     ],
@@ -104,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/expression.tsx b/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,

diff --git 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