[8.x] [Security Assistant] V2 Knowledge Base Settings feedback and fixes (#194354)

x-pack/packages/kbn-elastic-assistant-common/impl/schemas/knowledge_base/entries/common_attributes.gen.ts

@@ -106,7 +106,11 @@ export type BaseCreateProps = z.infer<typeof BaseCreateProps>;
 export const BaseCreateProps = BaseRequiredFields.merge(BaseDefaultableFields);
 
 export type BaseUpdateProps = z.infer<typeof BaseUpdateProps>;
-export const BaseUpdateProps = BaseCreateProps.partial();
+export const BaseUpdateProps = BaseCreateProps.partial().merge(
+  z.object({
+    id: NonEmptyString,
+  })
+);
 
 export type BaseResponseProps = z.infer<typeof BaseResponseProps>;
 export const BaseResponseProps = BaseRequiredFields.merge(BaseDefaultableFields.required());

x-pack/packages/kbn-elastic-assistant-common/impl/schemas/knowledge_base/entries/common_attributes.schema.yaml

@@ -112,6 +112,12 @@ components:
       allOf:
         - $ref: "#/components/schemas/BaseCreateProps"
           x-modify: partial
+        - type: object
+          properties:
+            id:
+              $ref: "../../common_attributes.schema.yaml#/components/schemas/NonEmptyString"
+          required:
+            - id
 
     BaseResponseProps:
       x-inline: true

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx

@@ -5,16 +5,13 @@
  * 2.0.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPopover,
-  EuiContextMenu,
   EuiButtonIcon,
   EuiPanel,
-  EuiConfirmModal,
   EuiToolTip,
   EuiSkeletonTitle,
 } from '@elastic/eui';
@@ -29,6 +26,7 @@ import { FlyoutNavigation } from '../assistant_overlay/flyout_navigation';
 import { AssistantSettingsButton } from '../settings/assistant_settings_button';
 import * as i18n from './translations';
 import { AIConnector } from '../../connectorland/connector_selector';
+import { SettingsContextMenu } from '../settings/settings_context_menu/settings_context_menu';
 
 interface OwnProps {
   selectedConversation: Conversation | undefined;
@@ -94,21 +92,6 @@ export const AssistantHeader: React.FC<Props> = ({
     [selectedConversation?.apiConfig?.connectorId]
   );
 
-  const [isPopoverOpen, setPopover] = useState(false);
-
-  const onButtonClick = useCallback(() => {
-    setPopover(!isPopoverOpen);
-  }, [isPopoverOpen]);
-
-  const closePopover = useCallback(() => {
-    setPopover(false);
-  }, []);
-
-  const [isResetConversationModalVisible, setIsResetConversationModalVisible] = useState(false);
-
-  const closeDestroyModal = useCallback(() => setIsResetConversationModalVisible(false), []);
-  const showDestroyModal = useCallback(() => setIsResetConversationModalVisible(true), []);
-
   const onConversationChange = useCallback(
     (updatedConversation: Conversation) => {
       onConversationSelected({
@@ -119,32 +102,6 @@ export const AssistantHeader: React.FC<Props> = ({
     [onConversationSelected]
   );
 
-  const panels = useMemo(
-    () => [
-      {
-        id: 0,
-        items: [
-          {
-            name: i18n.RESET_CONVERSATION,
-            css: css`
-              color: ${euiThemeVars.euiColorDanger};
-            `,
-            onClick: showDestroyModal,
-            icon: 'refresh',
-            'data-test-subj': 'clear-chat',
-          },
-        ],
-      },
-    ],
-    [showDestroyModal]
-  );
-
-  const handleReset = useCallback(() => {
-    onChatCleared();
-    closeDestroyModal();
-    closePopover();
-  }, [onChatCleared, closeDestroyModal, closePopover]);
-
   return (
     <>
       <FlyoutNavigation
@@ -246,42 +203,12 @@ export const AssistantHeader: React.FC<Props> = ({
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiPopover
-                  button={
-                    <EuiButtonIcon
-                      aria-label="test"
-                      isDisabled={isDisabled}
-                      iconType="boxesVertical"
-                      onClick={onButtonClick}
-                      data-test-subj="chat-context-menu"
-                    />
-                  }
-                  isOpen={isPopoverOpen}
-                  closePopover={closePopover}
-                  panelPaddingSize="none"
-                  anchorPosition="downLeft"
-                >
-                  <EuiContextMenu initialPanelId={0} panels={panels} />
-                </EuiPopover>
+                <SettingsContextMenu isDisabled={isDisabled} onChatCleared={onChatCleared} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>
-      {isResetConversationModalVisible && (
-        <EuiConfirmModal
-          title={i18n.RESET_CONVERSATION}
-          onCancel={closeDestroyModal}
-          onConfirm={handleReset}
-          cancelButtonText={i18n.CANCEL_BUTTON_TEXT}
-          confirmButtonText={i18n.RESET_BUTTON_TEXT}
-          buttonColor="danger"
-          defaultFocusedButton="confirm"
-          data-test-subj="reset-conversation-modal"
-        >
-          <p>{i18n.CLEAR_CHAT_CONFIRMATION}</p>
-        </EuiConfirmModal>
-      )}
     </>
   );
 };

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/translations.ts

@@ -7,6 +7,34 @@
 
 import { i18n } from '@kbn/i18n';
 
+export const AI_ASSISTANT_SETTINGS = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.aiAssistantSettings',
+  {
+    defaultMessage: 'AI Assistant settings',
+  }
+);
+
+export const ANONYMIZATION = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.anonymization',
+  {
+    defaultMessage: 'Anonymization',
+  }
+);
+
+export const KNOWLEDGE_BASE = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.knowledgeBase',
+  {
+    defaultMessage: 'Knowledge Base',
+  }
+);
+
+export const ALERTS_TO_ANALYZE = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.alertsToAnalyze',
+  {
+    defaultMessage: 'Alerts to analyze',
+  }
+);
+
 export const RESET_CONVERSATION = i18n.translate(
   'xpack.elasticAssistant.assistant.settings.resetConversation',
   {

x-pack/packages/kbn-elastic-assistant/impl/alerts/settings/alerts_settings.test.tsx → x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.test.tsx

@@ -9,8 +9,8 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 
 import { AlertsSettings } from './alerts_settings';
-import { KnowledgeBaseConfig } from '../../assistant/types';
-import { DEFAULT_LATEST_ALERTS } from '../../assistant_context/constants';
+import { KnowledgeBaseConfig } from '../../types';
+import { DEFAULT_LATEST_ALERTS } from '../../../assistant_context/constants';
 
 describe('AlertsSettings', () => {
   beforeEach(() => {

x-pack/packages/kbn-elastic-assistant/impl/alerts/settings/alerts_settings.tsx → x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx

@@ -9,9 +9,9 @@ import { EuiFlexGroup, EuiFormRow, EuiFlexItem, EuiSpacer, EuiText } from '@elas
 import { css } from '@emotion/react';
 import React from 'react';
 
-import { KnowledgeBaseConfig } from '../../assistant/types';
-import { AlertsRange } from '../../knowledge_base/alerts_range';
-import * as i18n from '../../knowledge_base/translations';
+import { KnowledgeBaseConfig } from '../../types';
+import { AlertsRange } from '../../../knowledge_base/alerts_range';
+import * as i18n from '../../../knowledge_base/translations';
 
 export const MIN_LATEST_ALERTS = 10;
 export const MAX_LATEST_ALERTS = 100;

x-pack/packages/kbn-elastic-assistant/impl/alerts/settings/alerts_settings_management.tsx → x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings_management.tsx

@@ -7,19 +7,24 @@
 
 import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import React from 'react';
-import { KnowledgeBaseConfig } from '../../assistant/types';
-import { AlertsRange } from '../../knowledge_base/alerts_range';
-import * as i18n from '../../knowledge_base/translations';
+import { KnowledgeBaseConfig } from '../../types';
+import { AlertsRange } from '../../../knowledge_base/alerts_range';
+import * as i18n from '../../../knowledge_base/translations';
 
 interface Props {
   knowledgeBase: KnowledgeBaseConfig;
   setUpdatedKnowledgeBaseSettings: React.Dispatch<React.SetStateAction<KnowledgeBaseConfig>>;
+  hasBorder?: boolean;
 }
 
+/**
+ * Replaces the AlertsSettings component used in the existing settings modal. Once the modal is
+ * fully removed we can delete that component in favor of this one.
+ */
 export const AlertsSettingsManagement: React.FC<Props> = React.memo(
-  ({ knowledgeBase, setUpdatedKnowledgeBaseSettings }) => {
+  ({ knowledgeBase, setUpdatedKnowledgeBaseSettings, hasBorder = true }) => {
     return (
-      <EuiPanel hasShadow={false} hasBorder paddingSize="l" title={i18n.ALERTS_LABEL}>
+      <EuiPanel hasShadow={false} hasBorder={hasBorder} paddingSize="l" title={i18n.ALERTS_LABEL}>
         <EuiTitle size="m">
           <h3>{i18n.ALERTS_LABEL}</h3>
         </EuiTitle>

x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.test.tsx

@@ -25,6 +25,7 @@ import {
   SYSTEM_PROMPTS_TAB,
 } from './const';
 import { mockSystemPrompts } from '../../mock/system_prompt';
+import { DataViewsContract } from '@kbn/data-views-plugin/public';
 
 const mockConversations = {
   [alertConvo.title]: alertConvo,
@@ -53,8 +54,13 @@ const mockContext = {
   },
 };
 
+const mockDataViews = {
+  getIndices: jest.fn(),
+} as unknown as DataViewsContract;
+
 const testProps = {
   selectedConversation: welcomeConvo,
+  dataViews: mockDataViews,
 };
 jest.mock('../../assistant_context');
 

x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useMemo } from 'react';
 import { EuiAvatar, EuiPageTemplate, EuiTitle, useEuiShadow, useEuiTheme } from '@elastic/eui';
 
 import { css } from '@emotion/react';
+import { DataViewsContract } from '@kbn/data-views-plugin/public';
 import { Conversation } from '../../..';
 import * as i18n from './translations';
 import { useAssistantContext } from '../../assistant_context';
@@ -33,6 +34,7 @@ import { KnowledgeBaseSettingsManagement } from '../../knowledge_base/knowledge_
 import { EvaluationSettings } from '.';
 
 interface Props {
+  dataViews: DataViewsContract;
   selectedConversation: Conversation;
 }
 
@@ -41,7 +43,7 @@ interface Props {
  * anonymization, knowledge base, and evaluation via the `isModelEvaluationEnabled` feature flag.
  */
 export const AssistantSettingsManagement: React.FC<Props> = React.memo(
-  ({ selectedConversation: defaultSelectedConversation }) => {
+  ({ dataViews, selectedConversation: defaultSelectedConversation }) => {
     const {
       assistantFeatures: { assistantModelEvaluation: modelEvaluatorEnabled },
       http,
@@ -158,7 +160,9 @@ export const AssistantSettingsManagement: React.FC<Props> = React.memo(
           )}
           {selectedSettingsTab === QUICK_PROMPTS_TAB && <QuickPromptSettingsManagement />}
           {selectedSettingsTab === ANONYMIZATION_TAB && <AnonymizationSettingsManagement />}
-          {selectedSettingsTab === KNOWLEDGE_BASE_TAB && <KnowledgeBaseSettingsManagement />}
+          {selectedSettingsTab === KNOWLEDGE_BASE_TAB && (
+            <KnowledgeBaseSettingsManagement dataViews={dataViews} />
+          )}
           {selectedSettingsTab === EVALUATION_TAB && <EvaluationSettings />}
         </EuiPageTemplate.Section>
       </>