elastic · PhilippeOberti · Jun 4, 2025 · Mar 20, 2025 · Mar 21, 2025 · Mar 21, 2025
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { waitFor, renderHook } from '@testing-library/react';
+import { renderHook, waitFor } from '@testing-library/react';
 import { MaintenanceWindowStatus } from '@kbn/alerting-plugin/common';
 import * as api from '../apis/bulk_get_maintenance_windows';
 import { coreMock } from '@kbn/core/public/mocks';
@@ -74,16 +74,17 @@ describe('useBulkGetMaintenanceWindowsQuery', () => {
   beforeEach(async () => {
     jest.clearAllMocks();
     addErrorMock = notifications.toasts.addError as jest.Mock;
+    useLicenseMock.mockReturnValue({ isAtLeastPlatinum: () => true });
+  });
+
+  it('calls the api when invoked with the correct parameters', async () => {
     application.capabilities = {
       ...application.capabilities,
       maintenanceWindow: {
         show: true,
       },
     };
-    useLicenseMock.mockReturnValue({ isAtLeastPlatinum: () => true });
-  });
 
-  it('calls the api when invoked with the correct parameters', async () => {
     const spy = jest.spyOn(api, 'bulkGetMaintenanceWindows');
     spy.mockResolvedValue(response);
 
@@ -110,6 +111,13 @@ describe('useBulkGetMaintenanceWindowsQuery', () => {
   });
 
   it('does not call the api if the canFetchMaintenanceWindows is false', async () => {
+    application.capabilities = {
+      ...application.capabilities,
+      maintenanceWindow: {
+        show: true,
+      },
+    };
+
     const spy = jest.spyOn(api, 'bulkGetMaintenanceWindows');
     spy.mockResolvedValue(response);
 
@@ -136,6 +144,13 @@ describe('useBulkGetMaintenanceWindowsQuery', () => {
   });
 
   it('does not call the api if license is not platinum', async () => {
+    application.capabilities = {
+      ...application.capabilities,
+      maintenanceWindow: {
+        show: true,
+      },
+    };
+
     useLicenseMock.mockReturnValue({ isAtLeastPlatinum: () => false });
 
     const spy = jest.spyOn(api, 'bulkGetMaintenanceWindows');
@@ -186,7 +201,35 @@ describe('useBulkGetMaintenanceWindowsQuery', () => {
     await waitFor(() => expect(spy).not.toHaveBeenCalled());
   });
 
+  it('does not call the api if the maintenanceWindow capability is disabled', async () => {
+    const spy = jest.spyOn(api, 'bulkGetMaintenanceWindows');
+    spy.mockResolvedValue(response);
+
+    renderHook(
+      () =>
+        useBulkGetMaintenanceWindowsQuery({
+          ids: ['test-id'],
+          http,
+          notifications,
+          application,
+          licensing,
+        }),
+      {
+        wrapper,
+      }
+    );
+
+    await waitFor(() => expect(spy).not.toHaveBeenCalled());
+  });
+
   it('shows a toast error when the api return an error', async () => {
+    application.capabilities = {
+      ...application.capabilities,
+      maintenanceWindow: {
+        show: true,
+      },
+    };
+
     const spy = jest
       .spyOn(api, 'bulkGetMaintenanceWindows')
       .mockRejectedValue(new Error('An error'));

@@ -55,11 +55,7 @@ export const useBulkGetMaintenanceWindowsQuery = (
     ids,
     http,
     notifications: { toasts },
-    application: {
-      capabilities: {
-        maintenanceWindow: { show },
-      },
-    },
+    application: { capabilities },
     licensing,
   }: UseBulkGetMaintenanceWindowsQueryParams,
   {
@@ -70,6 +66,9 @@ export const useBulkGetMaintenanceWindowsQuery = (
   const { isAtLeastPlatinum } = useLicense({ licensing });
   const hasLicense = isAtLeastPlatinum();
 
+  // In AI4DSOC (searchAiLake tier) the maintenanceWindow capability is disabled
+  const show = Boolean(capabilities.maintenanceWindow?.show);
+
   return useQuery({
     queryKey: queryKeys.maintenanceWindowsBulkGet(ids),
     queryFn: () => bulkGetMaintenanceWindows({ http, ids }),

@@ -54,6 +54,30 @@ describe('ContextPills', () => {
     });
   });
 
+  it('does not render item if description is empty', () => {
+    render(
+      <TestProviders>
+        <ContextPills
+          {...defaultProps}
+          promptContexts={{
+            ...mockPromptContexts,
+            context3: {
+              category: 'event',
+              description: '',
+              getPromptContext: () => Promise.resolve('Context 2 data'),
+              id: 'context3',
+              tooltip: 'Context 2 tooltip',
+            },
+          }}
+          selectedPromptContexts={{}}
+          setSelectedPromptContexts={jest.fn()}
+        />
+      </TestProviders>
+    );
+    expect(screen.getByTestId(`pillButton-context2`)).toBeInTheDocument();
+    expect(screen.queryByTestId(`pillButton-context3`)).not.toBeInTheDocument();
+  });
+
   it('invokes setSelectedPromptContexts() when the prompt is NOT already selected', async () => {
     const context = mockPromptContexts.context1;
     const setSelectedPromptContexts = jest.fn();

@@ -67,15 +67,15 @@ const ContextPillsComponent: React.FC<Props> = ({
             {description}
           </EuiButtonEmpty>
         );
-        return (
+        return description.length > 0 ? (
           <EuiFlexItem grow={false} key={id}>
             {selectedPromptContexts[id] != null ? (
               button
             ) : (
               <EuiToolTip content={tooltip}>{button}</EuiToolTip>
             )}
           </EuiFlexItem>
-        );
+        ) : null;
       })}
     </EuiFlexGroup>
   );

@@ -6,10 +6,10 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { NewChatByTitle } from '.';
+import { BUTTON_ICON_TEST_ID, BUTTON_TEST_ID, BUTTON_TEXT_TEST_ID, NewChatByTitle } from '.';
 
 const testProps = {
   showAssistantOverlay: jest.fn(),
@@ -20,60 +20,28 @@ describe('NewChatByTitle', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the default New Chat button with a discuss icon', () => {
-    render(<NewChatByTitle {...testProps} />);
+  it('should render icon only by default', () => {
+    const { getByTestId, queryByTestId } = render(<NewChatByTitle {...testProps} />);
 
-    const newChatButton = screen.getByTestId('newChatByTitle');
-
-    expect(newChatButton.querySelector('[data-euiicon-type="discuss"]')).toBeInTheDocument();
-  });
-
-  it('renders the default "New Chat" text when children are NOT provided', () => {
-    render(<NewChatByTitle {...testProps} />);
-
-    const newChatButton = screen.getByTestId('newChatByTitle');
-
-    expect(newChatButton.textContent).toContain('Chat');
+    expect(getByTestId(BUTTON_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(BUTTON_ICON_TEST_ID)).toBeInTheDocument();
+    expect(queryByTestId(BUTTON_TEXT_TEST_ID)).not.toBeInTheDocument();
   });
 
-  it('renders custom children', async () => {
-    render(<NewChatByTitle {...testProps}>{'🪄✨'}</NewChatByTitle>);
-
-    const newChatButton = screen.getByTestId('newChatByTitle');
-
-    expect(newChatButton.textContent).toContain('🪄✨');
-  });
-
-  it('renders custom icons', async () => {
-    render(<NewChatByTitle {...testProps} iconType="help" />);
-
-    const newChatButton = screen.getByTestId('newChatByTitle');
+  it('should render the button with icon and text', () => {
+    const { getByTestId } = render(<NewChatByTitle {...testProps} text={'Ask AI Assistant'} />);
 
-    expect(newChatButton.querySelector('[data-euiicon-type="help"]')).toBeInTheDocument();
-  });
-
-  it('does NOT render an icon when iconType is null', () => {
-    render(<NewChatByTitle {...testProps} iconType={null} />);
-
-    const newChatButton = screen.getByTestId('newChatByTitle');
-
-    expect(newChatButton.querySelector('.euiButtonContent__icon')).not.toBeInTheDocument();
-  });
-
-  it('renders button icon when iconOnly is true', async () => {
-    render(<NewChatByTitle {...testProps} iconOnly />);
-
-    const newChatButton = screen.getByTestId('newChatByTitle');
-
-    expect(newChatButton.querySelector('[data-euiicon-type="discuss"]')).toBeInTheDocument();
-    expect(newChatButton.textContent).not.toContain('Chat');
+    expect(getByTestId(BUTTON_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(BUTTON_ICON_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(BUTTON_TEXT_TEST_ID)).toHaveTextContent('Ask AI Assistant');
   });
 
   it('calls showAssistantOverlay on click', async () => {
-    render(<NewChatByTitle {...testProps} />);
-    const newChatButton = screen.getByTestId('newChatByTitle');
+    const { getByTestId } = render(<NewChatByTitle {...testProps} />);
+
+    const button = getByTestId(BUTTON_TEST_ID);
 
-    await userEvent.click(newChatButton);
+    await userEvent.click(button);
 
     expect(testProps.showAssistantOverlay).toHaveBeenCalledWith(true);
   });

@@ -5,76 +5,78 @@
  * 2.0.
  */
 
-import { EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
-
+import type { EuiButtonColor } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
+import { EuiButtonEmptySizes } from '@elastic/eui/src/components/button/button_empty/button_empty';
 import * as i18n from './translations';
 
-export interface Props {
-  children?: React.ReactNode;
-  /** Defaults to `discuss`. If null, the button will not have an icon */
-  iconType?: string | null;
+export const BUTTON_TEST_ID = 'newChatByTitle';
+export const BUTTON_ICON_TEST_ID = 'newChatByTitleIcon';
+export const BUTTON_TEXT_TEST_ID = 'newChatByTitleText';
+
+export interface NewChatByTitleComponentProps {
+  /**
+   * Optionally specify color of empty button.
+   * @default 'primary'
+   */
+  color?: EuiButtonColor;
+  /**
+   * Callback to display the assistant overlay
+   */
   showAssistantOverlay: (show: boolean) => void;
-  /** Defaults to false. If true, shows icon button without text */
-  iconOnly?: boolean;
+  /**
+   *
+   */
+  size?: EuiButtonEmptySizes;
+  /**
+   * Optionally specify the text to display.
+   */
+  text?: string;
 }
 
-const NewChatByTitleComponent: React.FC<Props> = ({
-  children = i18n.NEW_CHAT,
-  iconType,
+const NewChatByTitleComponent: React.FC<NewChatByTitleComponentProps> = ({
+  color = 'primary',
   showAssistantOverlay,
-  iconOnly = false,
+  size = 'm',
+  text,
 }) => {
-  const showOverlay = useCallback(() => {
-    showAssistantOverlay(true);
-  }, [showAssistantOverlay]);
-
-  const icon = useMemo(() => {
-    if (iconType === null) {
-      return undefined;
-    }
-
-    return iconType ?? 'discuss';
-  }, [iconType]);
+  const showOverlay = useCallback(() => showAssistantOverlay(true), [showAssistantOverlay]);
 
-  return useMemo(
-    () =>
-      iconOnly ? (
-        <EuiToolTip content={i18n.NEW_CHAT}>
-          <EuiButtonIcon
-            data-test-subj="newChatByTitle"
-            iconType={icon ?? 'discuss'}
-            onClick={showOverlay}
-            color={'text'}
-            aria-label={i18n.NEW_CHAT}
-          />
-        </EuiToolTip>
-      ) : (
-        <EuiButtonEmpty
-          data-test-subj="newChatByTitle"
-          iconType={icon}
-          onClick={showOverlay}
-          aria-label={i18n.NEW_CHAT}
-        >
-          {children}
-        </EuiButtonEmpty>
-      ),
-    [children, icon, showOverlay, iconOnly]
+  return (
+    <EuiButtonEmpty
+      aria-label={i18n.ASK_AI_ASSISTANT}
+      color={color}
+      data-test-subj={BUTTON_TEST_ID}
+      onClick={showOverlay}
+      size={size}
+    >
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <AssistantIcon data-test-subj={BUTTON_ICON_TEST_ID} size="m" />
+        </EuiFlexItem>
+        {text && (
+          <EuiFlexItem data-test-subj={BUTTON_TEXT_TEST_ID} grow={false}>
+            {text}
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </EuiButtonEmpty>
   );
 };
 
 NewChatByTitleComponent.displayName = 'NewChatByTitleComponent';
 
 /**
- * `NewChatByTitle` displays a _New chat_ icon button by providing only the `promptContextId`
+ * `NewChatByTitle` displays a button by providing only the `promptContextId`
  * of a context that was (already) registered by the `useAssistantOverlay` hook. You may
- * optionally style the button icon, or override the default _New chat_ text with custom
- * content, like {'🪄✨'}
+ * optionally override the default text.
  *
  * USE THIS WHEN: all the data necessary to start a new chat is NOT available
- * in the same part of the React tree as the _New chat_ button. When paired
- * with the `useAssistantOverlay` hook, this option enables context to be be
- * registered where the data is available, and then the _New chat_ button can be displayed
+ * in the same part of the React tree as the button. When paired
+ * with the `useAssistantOverlay` hook, this option enables context to be
+ * registered where the data is available, and then the button can be displayed
  * in another part of the tree.
  */
 export const NewChatByTitle = React.memo(NewChatByTitleComponent);
@@ -7,9 +7,9 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const NEW_CHAT = i18n.translate(
+export const ASK_AI_ASSISTANT = i18n.translate(
   'xpack.elasticAssistant.assistant.newChatByTitle.newChatByTitleButton',
   {
-    defaultMessage: 'Chat',
+    defaultMessage: 'Ask AI Assistant',
   }
 );