[Legacy Metric] should call renderComplete once for multi-value metrics (#142842)

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

src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap

@@ -28,7 +28,6 @@ Array [
       }
     }
     onFilter={[Function]}
-    renderComplete={[MockFunction]}
     style={
       Object {
         "bgColor": false,
@@ -116,4 +115,4 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
     }
   }
 />
-`;
+`;

src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { Datatable } from '@kbn/expressions-plugin/common';
 import MetricVisComponent, { MetricVisComponentProps } from './metric_component';
 import { LabelPosition } from '../../common/constants';
@@ -76,15 +76,15 @@ describe('MetricVisComponent', function () {
       ...propOverrides,
     };
 
-    return shallow(<MetricVisComponent {...props} />);
+    return <MetricVisComponent {...props} />;
   };
 
   it('should render component', () => {
-    expect(getComponent().exists()).toBe(true);
+    expect(shallow(getComponent()).exists()).toBe(true);
   });
 
   it('should render correct structure for single metric', function () {
-    expect(getComponent()).toMatchSnapshot();
+    expect(shallow(getComponent())).toMatchSnapshot();
   });
 
   it('should render correct structure for multi-value metrics', function () {
@@ -110,6 +110,36 @@ describe('MetricVisComponent', function () {
       },
     });
 
-    expect(component).toMatchSnapshot();
+    expect(shallow(component)).toMatchSnapshot();
+  });
+
+  it('should call renderComplete once for multi-value metrics', function () {
+    const renderComplete = jest.fn();
+    const component = getComponent({
+      renderComplete,
+      filterable: [true, false],
+      visData: {
+        type: 'datatable',
+        columns: [
+          { id: 'col-0', name: '1st percentile of bytes', meta: { type: 'number' } },
+          { id: 'col-1', name: '99th percentile of bytes', meta: { type: 'number' } },
+        ],
+        rows: [{ 'col-0': 182, 'col-1': 445842.4634666484 }],
+      },
+      visParams: {
+        ...visParams,
+        dimensions: {
+          ...visParams.dimensions,
+          metrics: [
+            { accessor: 0, type: 'vis_dimension', format: { id: 'number', params: {} } },
+            { accessor: 1, type: 'vis_dimension', format: { id: 'number', params: {} } },
+          ],
+        },
+      },
+    });
+
+    mount(component);
+
+    expect(renderComplete).toHaveBeenCalledTimes(1);
   });
 });

src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx

@@ -127,7 +127,7 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
     return this.props.visParams.metric.autoScale && this.props.visParams.metric.colorFullBackground;
   };
 
-  private renderMetric = (metric: MetricOptions, index: number) => {
+  private renderMetric = (metric: MetricOptions, index: number, arrayRef: MetricOptions[]) => {
     const hasBuckets = this.props.visParams.dimensions.bucket !== undefined;
     const MetricComponent = this.props.visParams.metric.autoScale
       ? AutoScaleMetricVisValue
@@ -157,7 +157,7 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
         autoScale={this.props.visParams.metric.autoScale}
         colorFullBackground={this.props.visParams.metric.colorFullBackground}
         labelConfig={this.props.visParams.metric.labels}
-        renderComplete={this.props.renderComplete}
+        renderComplete={arrayRef.length - 1 === index ? this.props.renderComplete : undefined}
       />
     );
   };