[8.16] [Security Assistant] Move security AI assistant button into gl…

…obal nav bar (#203060) (#205886) # Backport This will backport the following commits from `main` to `8.16`: - [[Security Assistant] Move security AI assistant button into global nav bar (#203060)](#203060)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jan 9, 2025 · 56aebad · 56aebad
1 parent 1b08f7a
commit 56aebad
Show file tree

Hide file tree

Showing 24 changed files with 400 additions and 163 deletions.
diff --git a/.../packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx b/.../packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx
@@ -15,6 +15,8 @@ import { DEFAULT_CONVERSATION_TITLE } from '../../use_conversation/translations'
 import { TestProviders } from '../../../mock/test_providers/test_providers';
 import { WELCOME_CONVERSATION } from '../../use_conversation/sample_conversations';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { of } from 'rxjs';
 
 const BASE_CONVERSATION: Conversation = {
   ...WELCOME_CONVERSATION,
@@ -36,6 +38,13 @@ const mockUseAssistantContext = {
   setConversations: jest.fn(),
   setAllSystemPrompts: jest.fn(),
   allSystemPrompts: mockSystemPrompts,
+  chrome: {
+    getChromeStyle$: jest.fn(() => of('classic')),
+    navControls: chromeServiceMock.createStartContract().navControls,
+  },
+  assistantAvailability: {
+    hasAssistantPrivilege: true,
+  },
 };
 
 jest.mock('../../../assistant_context', () => {

diff --git a/...sistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_settings.test.tsx b/...sistant/impl/assistant/quick_prompts/quick_prompt_settings/quick_prompt_settings.test.tsx
@@ -11,6 +11,8 @@ import { QuickPromptSettings } from './quick_prompt_settings';
 import { TestProviders } from '../../../mock/test_providers/test_providers';
 import { MOCK_QUICK_PROMPTS } from '../../../mock/quick_prompt';
 import { mockPromptContexts } from '../../../mock/prompt_context';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { of } from 'rxjs';
 
 const onSelectedQuickPromptChange = jest.fn();
 const setPromptsBulkActions = jest.fn();
@@ -28,6 +30,13 @@ const testProps = {
 };
 const mockContext = {
   basePromptContexts: MOCK_QUICK_PROMPTS,
+  chrome: {
+    getChromeStyle$: jest.fn(() => of('classic')),
+    navControls: chromeServiceMock.createStartContract().navControls,
+  },
+  assistantAvailability: {
+    hasAssistantPrivilege: true,
+  },
 };
 
 jest.mock('../../../assistant_context', () => ({

diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.test.tsx
@@ -11,6 +11,8 @@ import { TestProviders } from '../../mock/test_providers/test_providers';
 import { MOCK_QUICK_PROMPTS } from '../../mock/quick_prompt';
 import { QUICK_PROMPTS_TAB } from '../settings/const';
 import { QuickPrompts } from './quick_prompts';
+import { of } from 'rxjs';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
 
 const setInput = jest.fn();
 const setIsSettingsModalVisible = jest.fn();
@@ -26,6 +28,13 @@ const mockUseAssistantContext = {
   setSelectedSettingsTab,
   promptContexts: {},
   allQuickPrompts: MOCK_QUICK_PROMPTS,
+  chrome: {
+    getChromeStyle$: jest.fn(() => of('classic')),
+    navControls: chromeServiceMock.createStartContract().navControls,
+  },
+  assistantAvailability: {
+    hasAssistantPrivilege: true,
+  },
 };
 
 const testTitle = 'SPL_QUERY_CONVERSION_TITLE';

diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/assistant_nav_link.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/assistant_nav_link.test.tsx
@@ -0,0 +1,162 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { AssistantNavLink } from './assistant_nav_link';
+import { chromeServiceMock } from '@kbn/core-chrome-browser-mocks';
+import { ChromeNavControl } from '@kbn/core/public';
+import { createHtmlPortalNode, OutPortal } from 'react-reverse-portal';
+import { of } from 'rxjs';
+import { useAssistantContext } from '.';
+
+const MockNavigationBar = OutPortal;
+
+const mockShowAssistantOverlay = jest.fn();
+const mockNavControls = chromeServiceMock.createStartContract().navControls;
+const mockGetChromeStyle = jest.fn();
+
+const mockAssistantContext = {
+  chrome: {
+    getChromeStyle$: mockGetChromeStyle,
+    navControls: mockNavControls,
+  },
+  showAssistantOverlay: mockShowAssistantOverlay,
+  assistantAvailability: {
+    hasAssistantPrivilege: true,
+  },
+};
+
+jest.mock('.', () => {
+  return {
+    ...jest.requireActual('.'),
+    useAssistantContext: jest.fn(),
+  };
+});
+
+describe('AssistantNavLink', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetChromeStyle.mockReturnValue(of('classic'));
+    (useAssistantContext as jest.Mock).mockReturnValue({
+      ...mockAssistantContext,
+    });
+  });
+
+  it('should register link in nav bar', () => {
+    render(<AssistantNavLink />);
+    expect(mockNavControls.registerRight).toHaveBeenCalledTimes(1);
+  });
+
+  it('button has transparent background in project navigation', () => {
+    const { result: portalNode } = renderHook(() =>
+      React.useMemo(() => createHtmlPortalNode(), [])
+    );
+
+    mockGetChromeStyle.mockReturnValue(of('project'));
+
+    mockNavControls.registerRight.mockImplementation((chromeNavControl: ChromeNavControl) => {
+      chromeNavControl.mount(portalNode.current.element);
+    });
+
+    const { queryByTestId } = render(
+      <>
+        <MockNavigationBar node={portalNode.current} />
+        <AssistantNavLink />
+      </>
+    );
+    expect(queryByTestId('assistantNavLink')).not.toHaveStyle(
+      'background-color: rgb(204, 228, 245)'
+    );
+  });
+
+  it('button has opaque background in classic navigation', () => {
+    const { result: portalNode } = renderHook(() =>
+      React.useMemo(() => createHtmlPortalNode(), [])
+    );
+
+    mockGetChromeStyle.mockReturnValue(of('classic'));
+
+    mockNavControls.registerRight.mockImplementation((chromeNavControl: ChromeNavControl) => {
+      chromeNavControl.mount(portalNode.current.element);
+    });
+
+    const { queryByTestId } = render(
+      <>
+        <MockNavigationBar node={portalNode.current} />
+        <AssistantNavLink />
+      </>
+    );
+    expect(queryByTestId('assistantNavLink')).toHaveStyle('background-color: rgb(204, 228, 245)');
+  });
+
+  it('should render the header link text', () => {
+    const { result: portalNode } = renderHook(() =>
+      React.useMemo(() => createHtmlPortalNode(), [])
+    );
+
+    mockNavControls.registerRight.mockImplementation((chromeNavControl: ChromeNavControl) => {
+      chromeNavControl.mount(portalNode.current.element);
+    });
+
+    const { queryByText, queryByTestId } = render(
+      <>
+        <MockNavigationBar node={portalNode.current} />
+        <AssistantNavLink />
+      </>
+    );
+    expect(queryByTestId('assistantNavLink')).toBeInTheDocument();
+    expect(queryByText('AI Assistant')).toBeInTheDocument();
+  });
+
+  it('should not render the header link if not authorized', () => {
+    const { result: portalNode } = renderHook(() =>
+      React.useMemo(() => createHtmlPortalNode(), [])
+    );
+
+    mockNavControls.registerRight.mockImplementation((chromeNavControl: ChromeNavControl) => {
+      chromeNavControl.mount(portalNode.current.element);
+    });
+
+    (useAssistantContext as jest.Mock).mockReturnValue({
+      ...mockAssistantContext,
+      assistantAvailability: {
+        hasAssistantPrivilege: false,
+      },
+    });
+
+    const { queryByText, queryByTestId } = render(
+      <>
+        <MockNavigationBar node={portalNode.current} />
+        <AssistantNavLink />
+      </>
+    );
+    expect(queryByTestId('assistantNavLink')).not.toBeInTheDocument();
+    expect(queryByText('AI Assistant')).not.toBeInTheDocument();
+  });
+
+  it('should call the assistant overlay to show on click', () => {
+    const { result: portalNode } = renderHook(() =>
+      React.useMemo(() => createHtmlPortalNode(), [])
+    );
+
+    mockNavControls.registerRight.mockImplementation((chromeNavControl: ChromeNavControl) => {
+      chromeNavControl.mount(portalNode.current.element);
+    });
+
+    const { queryByTestId } = render(
+      <>
+        <MockNavigationBar node={portalNode.current} />
+        <AssistantNavLink />
+      </>
+    );
+    queryByTestId('assistantNavLink')?.click();
+    expect(mockShowAssistantOverlay).toHaveBeenCalledTimes(1);
+    expect(mockShowAssistantOverlay).toHaveBeenCalledWith({ showOverlay: true });
+  });
+});
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/assistant_nav_link.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/assistant_nav_link.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 { FC } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { createHtmlPortalNode, OutPortal, InPortal } from 'react-reverse-portal';
+import { EuiToolTip, EuiButton, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ChromeStyle } from '@kbn/core-chrome-browser';
+import { useAssistantContext } from '.';
+import { AssistantAvatar } from '../assistant/assistant_avatar/assistant_avatar';
+
+const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
+
+const TOOLTIP_CONTENT = i18n.translate(
+  'xpack.elasticAssistant.assistantContext.assistantNavLinkShortcutTooltip',
+  {
+    values: { keyboardShortcut: isMac ? '⌘ ;' : 'Ctrl ;' },
+    defaultMessage: 'Keyboard shortcut {keyboardShortcut}',
+  }
+);
+const LINK_LABEL = i18n.translate('xpack.elasticAssistant.assistantContext.assistantNavLink', {
+  defaultMessage: 'AI Assistant',
+});
+
+export const AssistantNavLink: FC = () => {
+  const { chrome, showAssistantOverlay, assistantAvailability, currentAppId } =
+    useAssistantContext();
+  const portalNode = React.useMemo(() => createHtmlPortalNode(), []);
+  const [chromeStyle, setChromeStyle] = useState<ChromeStyle | undefined>(undefined);
+
+  // useObserverable would change the order of re-renders that are tested against closely.
+  useEffect(() => {
+    const s = chrome.getChromeStyle$().subscribe(setChromeStyle);
+    return () => s.unsubscribe();
+  }, [chrome]);
+
+  useEffect(() => {
+    const registerPortalNode = () => {
+      chrome.navControls.registerRight({
+        mount: (element: HTMLElement) => {
+          ReactDOM.render(<OutPortal node={portalNode} />, element);
+          return () => ReactDOM.unmountComponentAtNode(element);
+        },
+        // right before the user profile
+        order: 1001,
+      });
+    };
+
+    if (
+      assistantAvailability.hasAssistantPrivilege &&
+      chromeStyle &&
+      currentAppId !== 'management'
+    ) {
+      registerPortalNode();
+    }
+  }, [chrome, portalNode, assistantAvailability.hasAssistantPrivilege, chromeStyle, currentAppId]);
+
+  const showOverlay = useCallback(
+    () => showAssistantOverlay({ showOverlay: true }),
+    [showAssistantOverlay]
+  );
+
+  if (!assistantAvailability.hasAssistantPrivilege || !chromeStyle) {
+    return null;
+  }
+
+  const EuiButtonBasicOrEmpty = chromeStyle === 'project' ? EuiButtonEmpty : EuiButton;
+
+  return (
+    <InPortal node={portalNode}>
+      <EuiToolTip content={TOOLTIP_CONTENT}>
+        <EuiButtonBasicOrEmpty
+          onClick={showOverlay}
+          color="primary"
+          size="s"
+          data-test-subj="assistantNavLink"
+        >
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <AssistantAvatar size="xs" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{LINK_LABEL}</EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiButtonBasicOrEmpty>
+      </EuiToolTip>
+    </InPortal>
+  );
+};
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx
@@ -13,7 +13,7 @@ import { ActionTypeRegistryContract } from '@kbn/triggers-actions-ui-plugin/publ
 import { useLocalStorage, useSessionStorage } from 'react-use';
 import type { DocLinksStart } from '@kbn/core-doc-links-browser';
 import { AssistantFeatures, defaultAssistantFeatures } from '@kbn/elastic-assistant-common';
-import { NavigateToAppOptions, UserProfileService } from '@kbn/core/public';
+import { ChromeStart, NavigateToAppOptions, UserProfileService } from '@kbn/core/public';
 import { useQuery } from '@tanstack/react-query';
 import { updatePromptContexts } from './helpers';
 import type {
@@ -42,6 +42,7 @@ import {
 import { useCapabilities } from '../assistant/api/capabilities/use_capabilities';
 import { WELCOME_CONVERSATION_TITLE } from '../assistant/use_conversation/translations';
 import { SettingsTabs } from '../assistant/settings/types';
+import { AssistantNavLink } from './assistant_nav_link';
 
 export interface ShowAssistantOverlayProps {
   showOverlay: boolean;
@@ -76,6 +77,7 @@ export interface AssistantProviderProps {
   toasts?: IToasts;
   currentAppId: string;
   userProfileService: UserProfileService;
+  chrome: ChromeStart;
 }
 
 export interface UserAvatar {
@@ -127,6 +129,7 @@ export interface UseAssistantContext {
   currentAppId: string;
   codeBlockRef: React.MutableRefObject<(codeBlock: string) => void>;
   userProfileService: UserProfileService;
+  chrome: ChromeStart;
 }
 
 const AssistantContext = React.createContext<UseAssistantContext | undefined>(undefined);
@@ -150,6 +153,7 @@ export const AssistantProvider: React.FC<AssistantProviderProps> = ({
   toasts,
   currentAppId,
   userProfileService,
+  chrome,
 }) => {
   /**
    * Session storage for traceOptions, including APM URL and LangSmith Project/API Key
@@ -302,6 +306,7 @@ export const AssistantProvider: React.FC<AssistantProviderProps> = ({
       currentAppId,
       codeBlockRef,
       userProfileService,
+      chrome,
     }),
     [
       actionTypeRegistry,
@@ -337,10 +342,16 @@ export const AssistantProvider: React.FC<AssistantProviderProps> = ({
       currentAppId,
       codeBlockRef,
       userProfileService,
+      chrome,
     ]
   );
 
-  return <AssistantContext.Provider value={value}>{children}</AssistantContext.Provider>;
+  return (
+    <AssistantContext.Provider value={value}>
+      <AssistantNavLink />
+      {children}
+    </AssistantContext.Provider>
+  );
 };
 
 export const useAssistantContext = () => {