[Exploratory view] Only show metric loading for relevant series (elas…

…tic#118299)

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 };
 };

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();
+  });
+});

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"