Update incomplete data messaging

packages/kbn-search-response-warnings/index.ts

@@ -9,10 +9,11 @@
 export type { SearchResponseWarning, WarningHandlerCallback } from './src/types';
 
 export {
-  SearchResponseWarnings,
-  type SearchResponseWarningsProps,
+  SearchResponseWarningsBadge,
+  SearchResponseWarningsBadgePopoverContent,
+  SearchResponseWarningsCallout,
+  SearchResponseWarningsEmptyPrompt,
 } from './src/components/search_response_warnings';
-export { ViewWarningButton } from './src/components/view_warning_button';
 
 export { handleWarnings } from './src/handle_warnings';
 export { hasUnsupportedDownsampledAggregationFailure } from './src/has_unsupported_downsampled_aggregation_failure';

packages/kbn-search-response-warnings/src/__mocks__/search_response_warnings.ts

@@ -10,7 +10,7 @@ import type { SearchResponseWarning } from '../types';
 
 export const searchResponseIncompleteWarningLocalCluster: SearchResponseWarning = {
   type: 'incomplete',
-  message: 'The data might be incomplete or wrong.',
+  requestName: 'My request',
   clusters: {
     '(local)': {
       status: 'partial',

packages/kbn-search-response-warnings/src/components/search_response_warnings/badge.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+import { EuiButton, EuiIcon, EuiPopover, useEuiTheme, useEuiFontSize } from '@elastic/eui';
+import { SearchResponseWarningsBadgePopoverContent } from './badge_popover_content';
+import type { SearchResponseWarning } from '../../types';
+
+interface Props {
+  warnings: SearchResponseWarning[];
+}
+
+export const SearchResponseWarningsBadge = (props: Props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
+
+  if (!props.warnings.length) {
+    return null;
+  }
+
+  return (
+    <EuiPopover
+      panelPaddingSize="none"
+      button={
+        <EuiButton
+          minWidth={0}
+          size="s"
+          color="warning"
+          onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+          data-test-subj="searchResponseWarningsBadgeToogleButton"
+          title={i18n.translate('searchResponseWarnings.badgeButtonLabel', {
+            defaultMessage: '{warningCount} {warningCount, plural, one {warning} other {warnings}}',
+            values: {
+              warningCount: props.warnings.length,
+            },
+          })}
+          css={css`
+            block-size: ${euiTheme.size.l};
+            font-size: ${xsFontSize};
+            padding: 0 ${euiTheme.size.xs};
+            & > * {
+              gap: ${euiTheme.size.xs};
+            }
+          `}
+        >
+          <EuiIcon
+            type="warning"
+            css={css`
+              margin-left: ${euiTheme.size.xxs};
+            `}
+          />
+          {props.warnings.length}
+        </EuiButton>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopoverOpen(false)}
+    >
+      <SearchResponseWarningsBadgePopoverContent
+        onViewDetailsClick={() => {
+          setIsPopoverOpen(false);
+        }}
+        warnings={props.warnings}
+      />
+    </EuiPopover>
+  );
+};

packages/kbn-search-response-warnings/src/components/search_response_warnings/badge_popover_content.test.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SearchResponseWarningsBadgePopoverContent } from './badge_popover_content';
+import type { SearchResponseWarning } from '../../types';
+
+describe('SearchResponseWarningsBadgePopoverContent', () => {
+  describe('single warning', () => {
+    test('Clicking "view details" should open warning details', () => {
+      const mockOpenInInspector = jest.fn();
+      const mockOnViewDetailsClick = jest.fn();
+      const warnings = [
+        {
+          type: 'incomplete',
+          requestName: 'My request',
+          clusters: {
+            remote1: {
+              status: 'partial',
+              indices: '',
+              timed_out: false,
+            },
+          },
+          openInInspector: mockOpenInInspector,
+        } as SearchResponseWarning,
+      ];
+      render(
+        <SearchResponseWarningsBadgePopoverContent
+          onViewDetailsClick={mockOnViewDetailsClick}
+          warnings={warnings}
+        />
+      );
+      const viewDetailsButton = screen.getByRole('button');
+      fireEvent.click(viewDetailsButton);
+      expect(mockOpenInInspector).toHaveBeenCalled();
+      expect(mockOnViewDetailsClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('multiple warnings', () => {
+    const request1MockOpenInInspector = jest.fn();
+    const request2MockOpenInInspector = jest.fn();
+    const warnings = [
+      {
+        type: 'incomplete',
+        requestName: 'My first request',
+        clusters: {
+          remote1: {
+            status: 'partial',
+            indices: '',
+            timed_out: false,
+          },
+        },
+        openInInspector: request1MockOpenInInspector,
+      } as SearchResponseWarning,
+      {
+        type: 'incomplete',
+        requestName: 'My second request',
+        clusters: {
+          remote1: {
+            status: 'partial',
+            indices: '',
+            timed_out: false,
+          },
+        },
+        openInInspector: request2MockOpenInInspector,
+      } as SearchResponseWarning,
+    ];
+
+    beforeEach(() => {
+      request1MockOpenInInspector.mockReset();
+      request2MockOpenInInspector.mockReset();
+    });
+
+    test('Clicking "view details" should open content panel with button to view details for each warning', () => {
+      const mockOnViewDetailsClick = jest.fn();
+      render(
+        <SearchResponseWarningsBadgePopoverContent
+          onViewDetailsClick={mockOnViewDetailsClick}
+          warnings={warnings}
+        />
+      );
+      const viewDetailsButton = screen.getByRole('button');
+      fireEvent.click(viewDetailsButton);
+      expect(request1MockOpenInInspector).not.toHaveBeenCalled();
+      expect(request2MockOpenInInspector).not.toHaveBeenCalled();
+      expect(mockOnViewDetailsClick).not.toHaveBeenCalled();
+
+      const openRequest1Button = screen.getByRole('button', { name: 'My first request' });
+      fireEvent.click(openRequest1Button);
+      expect(request1MockOpenInInspector).toHaveBeenCalled();
+      expect(mockOnViewDetailsClick).toHaveBeenCalled();
+      expect(request2MockOpenInInspector).not.toHaveBeenCalled();
+    });
+
+    test('Should ensure unique request names by numbering duplicate request names', () => {
+      const warningsWithDuplicateRequestNames = warnings.map((warning) => {
+        return {
+          ...warning,
+          requestName: 'Request',
+        };
+      });
+      render(
+        <SearchResponseWarningsBadgePopoverContent warnings={warningsWithDuplicateRequestNames} />
+      );
+      const viewDetailsButton = screen.getByRole('button');
+      fireEvent.click(viewDetailsButton);
+
+      screen.getByRole('button', { name: 'Request' });
+      screen.getByRole('button', { name: 'Request (2)' });
+    });
+  });
+});