From c0014b5a1651e0002c97d52cf2ae0571ce5a4dc4 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 12 Nov 2021 09:10:48 -0500
Subject: [PATCH] [Exploratory view] Only show metric loading for relevant
 series (#118299) (#118460)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>
---
 .../shared/exploratory_view/rtl_helpers.tsx   |  5 +-
 .../report_metric_options.test.tsx            | 55 +++++++++++++++++++
 .../series_editor/report_metric_options.tsx   |  2 +-
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.test.tsx

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx
index 612cbfcc4bfdfc..04d74844beb83c 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx
@@ -23,7 +23,7 @@ import { ObservabilityPublicPluginsStart } from '../../../plugin';
 import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
 import { lensPluginMock } from '../../../../../lens/public/mocks';
 import * as useAppIndexPatternHook from './hooks/use_app_index_pattern';
-import { IndexPatternContextProvider } from './hooks/use_app_index_pattern';
+import { IndexPatternContext, IndexPatternContextProvider } from './hooks/use_app_index_pattern';
 import { AllSeries, SeriesContextValue, UrlStorageContext } from './hooks/use_series_storage';
 
 import * as fetcherHook from '../../../hooks/use_fetcher';
@@ -234,7 +234,7 @@ export const mockUseHasData = () => {
   return { spy, onRefreshTimeRange };
 };
 
-export const mockAppIndexPattern = () => {
+export const mockAppIndexPattern = (props?: Partial<IndexPatternContext>) => {
   const loadIndexPattern = jest.fn();
   const spy = jest.spyOn(useAppIndexPatternHook, 'useAppIndexPatternContext').mockReturnValue({
     indexPattern: mockIndexPattern,
@@ -244,6 +244,7 @@ export const mockAppIndexPattern = () => {
     loadIndexPattern,
     indexPatterns: { ux: mockIndexPattern } as unknown as Record<AppDataType, IndexPattern>,
     indexPatternErrors: {} as any,
+    ...(props || {}),
   });
   return { spy, loadIndexPattern };
 };
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.test.tsx
new file mode 100644
index 00000000000000..767b765ba1f199
--- /dev/null
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { mockAppIndexPattern, mockIndexPattern, mockUxSeries, render } from '../rtl_helpers';
+import { getDefaultConfigs } from '../configurations/default_configs';
+import { PERCENTILE } from '../configurations/constants';
+import { ReportMetricOptions } from './report_metric_options';
+
+describe('ReportMetricOptions', function () {
+  const dataViewSeries = getDefaultConfigs({
+    reportType: 'kpi-over-time',
+    indexPattern: mockIndexPattern,
+    dataType: 'ux',
+  });
+
+  it('should render properly', async function () {
+    render(
+      <ReportMetricOptions seriesId={0} seriesConfig={dataViewSeries} series={mockUxSeries} />
+    );
+
+    expect(await screen.findByText('No data available')).toBeInTheDocument();
+  });
+
+  it('should display loading if index pattern is not available and is loading', async function () {
+    mockAppIndexPattern({ loading: true, indexPatterns: undefined });
+    const { container } = render(
+      <ReportMetricOptions
+        seriesId={0}
+        seriesConfig={{ ...dataViewSeries, hasOperationType: true }}
+        series={{ ...mockUxSeries, breakdown: PERCENTILE }}
+      />
+    );
+
+    expect(container.getElementsByClassName('euiLoadingSpinner').length).toBe(1);
+  });
+
+  it('should not display loading if index pattern is already loaded', async function () {
+    mockAppIndexPattern({ loading: true });
+    render(
+      <ReportMetricOptions
+        seriesId={0}
+        seriesConfig={{ ...dataViewSeries, hasOperationType: true }}
+        series={{ ...mockUxSeries, breakdown: PERCENTILE }}
+      />
+    );
+
+    expect(await screen.findByText('Page load time')).toBeInTheDocument();
+  });
+});
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx
index 410356d0078d85..bc7c2328dcbba4 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/report_metric_options.tsx
@@ -127,7 +127,7 @@ export function ReportMetricOptions({ seriesId, series, seriesConfig }: Props) {
         </EuiPopover>
       )}
       {series.selectedMetricField &&
-        (indexPattern && !loading ? (
+        (indexPattern ? (
           <EuiBadge
             iconType="cross"
             iconSide="right"