elastic · andrew-goldstein · May 4, 2023 · Apr 29, 2023 · May 3, 2023 · May 4, 2023
diff --git a/...y_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx b/...y_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx
@@ -7,7 +7,7 @@
 
 import { DARK_THEME } from '@elastic/charts';
 import numeral from '@elastic/numeral';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { EMPTY_STAT } from '../../../helpers';
@@ -66,14 +66,16 @@ const defaultProps: Props = {
 
 describe('DataQualityDetails', () => {
   describe('when ILM phases are provided', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       jest.clearAllMocks();
 
       render(
         <TestProviders>
           <DataQualityDetails {...defaultProps} />
         </TestProviders>
       );
+
+      await waitFor(() => {}); // wait for PatternComponent state updates
     });
 
     test('it renders the storage details', () => {

diff --git a/.../data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx b/.../data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx
@@ -7,7 +7,7 @@
 
 import { DARK_THEME } from '@elastic/charts';
 import numeral from '@elastic/numeral';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { EMPTY_STAT } from '../../../../helpers';
@@ -67,14 +67,16 @@ const defaultProps: Props = {
 };
 
 describe('IndicesDetails', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     jest.clearAllMocks();
 
     render(
       <TestProviders>
         <IndicesDetails {...defaultProps} />
       </TestProviders>
     );
+
+    await waitFor(() => {});
   });
 
   describe('rendering patterns', () => {

diff --git a/...ution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx b/...ution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx
@@ -7,7 +7,7 @@
 
 import { DARK_THEME } from '@elastic/charts';
 import numeral from '@elastic/numeral';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { EMPTY_STAT } from '../../helpers';
@@ -25,7 +25,7 @@ const formatNumber = (value: number | undefined) =>
 const ilmPhases: string[] = ['hot', 'warm', 'unmanaged'];
 
 describe('IndexInvalidValues', () => {
-  test('it renders the data quality summary', () => {
+  test('it renders the data quality summary', async () => {
     render(
       <TestProviders>
         <Body
@@ -44,14 +44,16 @@ describe('IndexInvalidValues', () => {
       </TestProviders>
     );
 
-    expect(screen.getByTestId('dataQualitySummary')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('dataQualitySummary')).toBeInTheDocument();
+    });
   });
 
   describe('patterns', () => {
     const patterns = ['.alerts-security.alerts-default', 'auditbeat-*', 'logs-*', 'packetbeat-*'];
 
     patterns.forEach((pattern) => {
-      test(`it renders the '${pattern}' pattern`, () => {
+      test(`it renders the '${pattern}' pattern`, async () => {
         render(
           <TestProviders>
             <Body
@@ -70,7 +72,9 @@ describe('IndexInvalidValues', () => {
           </TestProviders>
         );
 
-        expect(screen.getByTestId(`${pattern}PatternPanel`)).toBeInTheDocument();
+        await waitFor(() => {
+          expect(screen.getByTestId(`${pattern}PatternPanel`)).toBeInTheDocument();
+        });
       });
     });
 
@@ -94,7 +98,9 @@ describe('IndexInvalidValues', () => {
       );
 
       const items = await screen.findAllByTestId('bodyPatternSpacer');
-      expect(items).toHaveLength(patterns.length - 1);
+      await waitFor(() => {
+        expect(items).toHaveLength(patterns.length - 1);
+      });
     });
   });
 });
diff --git a/...uality_dashboard/impl/data_quality/data_quality_panel/data_quality_context/index.test.tsx b/...uality_dashboard/impl/data_quality/data_quality_panel/data_quality_context/index.test.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+
+import { DataQualityProvider, useDataQualityContext } from '.';
+
+const mockHttpFetch = jest.fn();
+const ContextWrapper: React.FC = ({ children }) => (
+  <DataQualityProvider httpFetch={mockHttpFetch}>{children}</DataQualityProvider>
+);
+
+describe('DataQualityContext', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('it throws an error when useDataQualityContext hook is used without a DataQualityContext', () => {
+    const { result } = renderHook(useDataQualityContext);
+
+    expect(result.error).toEqual(
+      new Error('useDataQualityContext must be used within a DataQualityProvider')
+    );
+  });
+
+  test('it should return the httpFetch function', async () => {
+    const { result } = renderHook(useDataQualityContext, { wrapper: ContextWrapper });
+    const httpFetch = await result.current.httpFetch;
+
+    const path = '/path/to/resource';
+    httpFetch(path);
+
+    expect(mockHttpFetch).toBeCalledWith(path);
+  });
+});
diff --git a/...ata_quality_dashboard/impl/data_quality/data_quality_panel/data_quality_context/index.tsx b/...ata_quality_dashboard/impl/data_quality/data_quality_panel/data_quality_context/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 type { HttpHandler } from '@kbn/core-http-browser';
+import React, { useMemo } from 'react';
+
+interface DataQualityProviderProps {
+  httpFetch: HttpHandler;
+}
+
+const DataQualityContext = React.createContext<DataQualityProviderProps | undefined>(undefined);
+
+export const DataQualityProvider: React.FC<DataQualityProviderProps> = ({
+  children,
+  httpFetch,
+}) => {
+  const value = useMemo(
+    () => ({
+      httpFetch,
+    }),
+    [httpFetch]
+  );
+
+  return <DataQualityContext.Provider value={value}>{children}</DataQualityContext.Provider>;
+};
+
+export const useDataQualityContext = () => {
+  const context = React.useContext(DataQualityContext);
+
+  if (context == null) {
+    throw new Error('useDataQualityContext must be used within a DataQualityProvider');
+  }
+
+  return context;
+};
diff --git a/...ity/data_quality_panel/data_quality_summary/summary_actions/check_all/check_index.test.ts b/...ity/data_quality_panel/data_quality_summary/summary_actions/check_all/check_index.test.ts
@@ -87,8 +87,9 @@ describe('checkIndex', () => {
 
   const indexName = 'auditbeat-custom-index-1';
   const pattern = 'auditbeat-*';
+  const httpFetch = jest.fn();
 
-  describe('happy path', () => {
+  describe('when `checkIndex` successfully completes the check', () => {
     const onCheckCompleted = jest.fn();
 
     beforeEach(async () => {
@@ -99,6 +100,7 @@ describe('checkIndex', () => {
         ecsMetadata,
         formatBytes,
         formatNumber,
+        httpFetch,
         indexName,
         onCheckCompleted,
         pattern,
@@ -145,6 +147,7 @@ describe('checkIndex', () => {
         ecsMetadata,
         formatBytes,
         formatNumber,
+        httpFetch,
         indexName,
         onCheckCompleted,
         pattern,
@@ -166,6 +169,7 @@ describe('checkIndex', () => {
         ecsMetadata: null, // <--
         formatBytes,
         formatNumber,
+        httpFetch,
         indexName,
         onCheckCompleted,
         pattern,
@@ -218,6 +222,7 @@ describe('checkIndex', () => {
         ecsMetadata,
         formatBytes,
         formatNumber,
+        httpFetch,
         indexName,
         onCheckCompleted,
         pattern,
@@ -226,7 +231,7 @@ describe('checkIndex', () => {
     });
 
     test('it invokes onCheckCompleted with the expected `error`', () => {
-      expect(onCheckCompleted.mock.calls[0][0].error).toEqual(`Error: ${error}`);
+      expect(onCheckCompleted.mock.calls[0][0].error).toEqual(error);
     });
 
     test('it invokes onCheckCompleted with the expected `indexName`', () => {
@@ -268,6 +273,7 @@ describe('checkIndex', () => {
         ecsMetadata,
         formatBytes,
         formatNumber,
+        httpFetch,
         indexName,
         onCheckCompleted,
         pattern,
@@ -326,6 +332,7 @@ describe('checkIndex', () => {
         ecsMetadata,
         formatBytes,
         formatNumber,
+        httpFetch,
         indexName,
         onCheckCompleted,
         pattern,

diff --git a/..._quality/data_quality_panel/data_quality_summary/summary_actions/check_all/check_index.ts b/..._quality/data_quality_panel/data_quality_summary/summary_actions/check_all/check_index.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { HttpHandler } from '@kbn/core-http-browser';
 import { getUnallowedValueRequestItems } from '../../../allowed_values/helpers';
 import {
   getMappingsProperties,
@@ -27,6 +28,7 @@ export async function checkIndex({
   ecsMetadata,
   formatBytes,
   formatNumber,
+  httpFetch,
   indexName,
   onCheckCompleted,
   pattern,
@@ -36,13 +38,18 @@ export async function checkIndex({
   ecsMetadata: Record<string, EcsMetadata> | null;
   formatBytes: (value: number | undefined) => string;
   formatNumber: (value: number | undefined) => string;
+  httpFetch: HttpHandler;
   indexName: string;
   onCheckCompleted: OnCheckCompleted;
   pattern: string;
   version: string;
 }) {
   try {
-    const indexes = await fetchMappings({ abortController, patternOrIndexName: indexName });
+    const indexes = await fetchMappings({
+      abortController,
+      httpFetch,
+      patternOrIndexName: indexName,
+    });
 
     const requestItems = getUnallowedValueRequestItems({
       ecsMetadata,
@@ -51,6 +58,7 @@ export async function checkIndex({
 
     const searchResults = await fetchUnallowedValues({
       abortController,
+      httpFetch,
       indexName,
       requestItems,
     });
@@ -87,7 +95,7 @@ export async function checkIndex({
   } catch (error) {
     if (!abortController.signal.aborted) {
       onCheckCompleted({
-        error: error != null ? error.toString() : i18n.AN_ERROR_OCCURRED_CHECKING_INDEX(indexName),
+        error: error != null ? error.message : i18n.AN_ERROR_OCCURRED_CHECKING_INDEX(indexName),
         formatBytes,
         formatNumber,
         indexName,

diff --git a/.../data_quality/data_quality_panel/data_quality_summary/summary_actions/check_all/index.tsx b/.../data_quality/data_quality_panel/data_quality_summary/summary_actions/check_all/index.tsx
@@ -12,6 +12,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { checkIndex } from './check_index';
+import { useDataQualityContext } from '../../../data_quality_context';
 import { getAllIndicesToCheck } from './helpers';
 import * as i18n from '../../../../translations';
 import type { EcsMetadata, IndexToCheck, OnCheckCompleted } from '../../../../types';
@@ -58,6 +59,7 @@ const CheckAllComponent: React.FC<Props> = ({
   setCheckAllTotalIndiciesToCheck,
   setIndexToCheck,
 }) => {
+  const { httpFetch } = useDataQualityContext();
   const abortController = useRef(new AbortController());
   const [isRunning, setIsRunning] = useState<boolean>(false);
 
@@ -91,6 +93,7 @@ const CheckAllComponent: React.FC<Props> = ({
             ecsMetadata: EcsFlat as unknown as Record<string, EcsMetadata>,
             formatBytes,
             formatNumber,
+            httpFetch,
             indexName,
             onCheckCompleted,
             pattern,
@@ -121,6 +124,7 @@ const CheckAllComponent: React.FC<Props> = ({
     cancelIfRunning,
     formatBytes,
     formatNumber,
+    httpFetch,
     incrementCheckAllIndiciesChecked,
     isRunning,
     onCheckCompleted,