[Security Solution] AI settings

src/plugins/ai_assistant_management/selection/public/routes/components/ai_assistant_selection_page.tsx

@@ -9,6 +9,7 @@
 import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
+  EuiButton,
   EuiCallOut,
   EuiCard,
   EuiFlexGrid,
@@ -86,32 +87,48 @@ export function AiAssistantSelectionPage() {
                     <EuiSpacer size="s" />
                   </>
                 ) : null}
-                <EuiLink
-                  data-test-subj="pluginsAiAssistantSelectionPageDocumentationLink"
-                  external
-                  target="_blank"
-                  href="https://www.elastic.co/guide/en/observability/current/obs-ai-assistant.html"
+                <p>
+                  {i18n.translate(
+                    'aiAssistantManagementSelection.aiAssistantSelectionPage.obsAssistant.documentationLinkDescription',
+                    { defaultMessage: 'For more info, see our' }
+                  )}{' '}
+                  <EuiLink
+                    data-test-subj="pluginsAiAssistantSelectionPageDocumentationLink"
+                    external
+                    target="_blank"
+                    href="https://www.elastic.co/guide/en/observability/current/obs-ai-assistant.html"
+                  >
+                    {i18n.translate(
+                      'aiAssistantManagementSelection.aiAssistantSelectionPage.obsAssistant.documentationLinkLabel',
+                      { defaultMessage: 'documentation' }
+                    )}
+                  </EuiLink>
+                </p>
+                <EuiButton
+                  iconType="gear"
+                  data-test-subj="pluginsAiAssistantSelectionPageButton"
+                  onClick={() =>
+                    navigateToApp('management', {
+                      path: 'kibana/observabilityAiAssistantManagement',
+                    })
+                  }
                 >
                   {i18n.translate(
-                    'aiAssistantManagementSelection.aiAssistantSettingsPage.obsAssistant.documentationLinkLabel',
-                    { defaultMessage: 'Documentation' }
+                    'aiAssistantManagementSelection.aiAssistantSelectionPage.obsAssistant.manageSettingsButtonLabel',
+                    { defaultMessage: 'Manage Settings' }
                   )}
-                </EuiLink>
+                </EuiButton>
               </div>
             }
             display="plain"
             hasBorder
-            icon={<EuiIcon size="l" type="logoObservability" />}
+            icon={<EuiIcon size="xxl" type="logoObservability" />}
             isDisabled={!observabilityAIAssistantEnabled}
-            layout="horizontal"
             title={i18n.translate(
               'aiAssistantManagementSelection.aiAssistantSelectionPage.observabilityLabel',
               { defaultMessage: 'Elastic AI Assistant for Observability' }
             )}
             titleSize="xs"
-            onClick={() =>
-              navigateToApp('management', { path: 'kibana/observabilityAiAssistantManagement' })
-            }
           />
         </EuiFlexItem>
         <EuiFlexItem grow>
@@ -135,32 +152,46 @@ export function AiAssistantSelectionPage() {
                     <EuiSpacer size="s" />
                   </>
                 ) : null}
-                <EuiLink
-                  data-test-subj="securityAiAssistantSelectionPageDocumentationLink"
-                  external
-                  target="_blank"
-                  href="https://www.elastic.co/guide/en/security/current/security-assistant.html"
+                <p>
+                  {i18n.translate(
+                    'aiAssistantManagementSelection.aiAssistantSelectionPage.securityAssistant.documentationLinkDescription',
+                    { defaultMessage: 'For more info, see our' }
+                  )}{' '}
+                  <EuiLink
+                    data-test-subj="securityAiAssistantSelectionPageDocumentationLink"
+                    external
+                    target="_blank"
+                    href="https://www.elastic.co/guide/en/security/current/security-assistant.html"
+                  >
+                    {i18n.translate(
+                      'aiAssistantManagementSelection.aiAssistantSettingsPage.securityAssistant.documentationLinkLabel',
+                      { defaultMessage: 'documentation' }
+                    )}
+                  </EuiLink>
+                </p>
+                <EuiButton
+                  data-test-subj="pluginsAiAssistantSelectionPageButton"
+                  iconType="gear"
+                  onClick={() =>
+                    navigateToApp('management', { path: 'kibana/securityAiAssistantManagement' })
+                  }
                 >
                   {i18n.translate(
-                    'aiAssistantManagementSelection.aiAssistantSettingsPage.securityAssistant.documentationLinkLabel',
-                    { defaultMessage: 'Documentation' }
+                    'aiAssistantManagementSelection.aiAssistantSelectionPage.securityAssistant.manageSettingsButtonLabel',
+                    { defaultMessage: 'Manage Settings' }
                   )}
-                </EuiLink>
+                </EuiButton>
               </div>
             }
             display="plain"
             hasBorder
-            icon={<EuiIcon size="l" type="logoSecurity" />}
+            icon={<EuiIcon size="xxl" type="logoSecurity" />}
             isDisabled={!securityAIAssistantEnabled}
-            layout="horizontal"
             title={i18n.translate(
               'aiAssistantManagementSelection.aiAssistantSelectionPage.securityLabel',
               { defaultMessage: 'Elastic AI Assistant for Security' }
             )}
             titleSize="xs"
-            onClick={() =>
-              navigateToApp('management', { path: 'kibana/securityAiAssistantManagement' })
-            }
           />
         </EuiFlexItem>
       </EuiFlexGrid>

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

@@ -43,6 +43,7 @@ interface OwnProps {
   setChatHistoryVisible?: React.Dispatch<React.SetStateAction<boolean>>;
   onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void;
   conversations: Record<string, Conversation>;
+  conversationsLoaded: boolean;
   refetchConversationsState: () => Promise<void>;
   onConversationCreate: () => Promise<void>;
   isAssistantEnabled: boolean;
@@ -69,6 +70,7 @@ export const AssistantHeaderFlyout: React.FC<Props> = ({
   onCloseFlyout,
   onConversationSelected,
   conversations,
+  conversationsLoaded,
   refetchConversationsState,
   onConversationCreate,
   isAssistantEnabled,
@@ -158,6 +160,7 @@ export const AssistantHeaderFlyout: React.FC<Props> = ({
               setIsSettingsModalVisible={setIsSettingsModalVisible}
               onConversationSelected={onConversationSelected}
               conversations={conversations}
+              conversationsLoaded={conversationsLoaded}
               refetchConversationsState={refetchConversationsState}
               isFlyoutMode={true}
             />

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

@@ -19,6 +19,7 @@ const mockConversations = {
   [welcomeConvo.title]: welcomeConvo,
 };
 const testProps = {
+  conversationsLoaded: true,
   currentConversation: welcomeConvo,
   title: 'Test Title',
   docLinks: {

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

@@ -38,6 +38,7 @@ interface OwnProps {
   showAnonymizedValues: boolean;
   title: string;
   conversations: Record<string, Conversation>;
+  conversationsLoaded: boolean;
   refetchConversationsState: () => Promise<void>;
 }
 
@@ -61,6 +62,7 @@ export const AssistantHeader: React.FC<Props> = ({
   showAnonymizedValues,
   title,
   conversations,
+  conversationsLoaded,
   refetchConversationsState,
 }) => {
   const showAnonymizedValuesChecked = useMemo(
@@ -151,6 +153,7 @@ export const AssistantHeader: React.FC<Props> = ({
                   setIsSettingsModalVisible={setIsSettingsModalVisible}
                   onConversationSelected={onConversationSelected}
                   conversations={conversations}
+                  conversationsLoaded={conversationsLoaded}
                   refetchConversationsState={refetchConversationsState}
                   isFlyoutMode={false}
                 />

x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/badges/index.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+import React from 'react';
+
+export const BadgesColumn: React.FC<{ items: string[] | null | undefined; prefix: string }> =
+  React.memo(({ items, prefix }) =>
+    items && items.length > 0 ? (
+      <div>
+        {items.map((c, idx) => (
+          <EuiBadge key={`${prefix}-${idx}`} color="hollow">
+            {c}
+          </EuiBadge>
+        ))}
+      </div>
+    ) : null
+  );
+BadgesColumn.displayName = 'BadgesColumn';

x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/index.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiTitle,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import React from 'react';
+import * as i18n from './translations';
+
+interface Props {
+  children: React.ReactNode;
+  title: string;
+  flyoutVisible: boolean;
+  onClose: () => void;
+  onSaveCancelled: () => void;
+  onSaveConfirmed: () => void;
+}
+
+const FlyoutComponent: React.FC<Props> = ({
+  title,
+  flyoutVisible,
+  children,
+  onClose,
+  onSaveCancelled,
+  onSaveConfirmed,
+}) => {
+  return flyoutVisible ? (
+    <EuiFlyout
+      ownFocus
+      onClose={onClose}
+      css={css`
+        max-width: 656px;
+      `}
+    >
+      <EuiFlyoutHeader>
+        <EuiTitle size={'s'}>
+          <h2>{title}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>{children}</EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="m"
+              color="text"
+              iconType="cross"
+              data-test-subj="cancel-button"
+              onClick={onSaveCancelled}
+            >
+              {i18n.FLYOUT_CANCEL_BUTTON_TITLE}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              size="m"
+              type="submit"
+              data-test-subj="save-button"
+              onClick={onSaveConfirmed}
+              iconType="check"
+              fill
+            >
+              {i18n.FLYOUT_SAVE_BUTTON_TITLE}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  ) : null;
+};
+
+export const Flyout = React.memo(FlyoutComponent);

x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/translations.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const FLYOUT_SAVE_BUTTON_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.flyout.saveButtonTitle',
+  {
+    defaultMessage: 'Save',
+  }
+);
+
+export const FLYOUT_CANCEL_BUTTON_TITLE = i18n.translate(
+  'xpack.elasticAssistant.assistant.settings.flyout.cancelButtonTitle',
+  {
+    defaultMessage: 'Cancel',
+  }
+);

x-pack/packages/kbn-elastic-assistant/impl/assistant/common/components/assistant_settings_management/flyout/use_flyout_modal_visibility.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { useMemo, useState } from 'react';
+
+export const useFlyoutModalVisibility = () => {
+  const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
+
+  const openFlyout = () => {
+    setIsFlyoutOpen(true);
+  };
+
+  const closeFlyout = () => {
+    setIsFlyoutOpen(false);
+  };
+
+  return useMemo(
+    () => ({
+      isFlyoutOpen,
+      openFlyout,
+      closeFlyout,
+    }),
+    [isFlyoutOpen]
+  );
+};