[Rules migration] Add comments tab in the details flyout (#11385) (#204084)

## Summary

[Internal link](https://github.com/elastic/security-team/issues/10820)
to the feature details

These changes add a "Summary" tab within the migration rule details
flyout which will show the AI assistant comments about the translation
process of the rule.

## Screenshot

<img width="1675" alt="Screenshot 2024-12-12 at 17 39 30"
src="https://github.com/user-attachments/assets/213c3e80-70df-482a-8dfd-09fc1e2e54c8"
/>

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/index.tsx

@@ -41,7 +41,7 @@ import {
   DEFAULT_DESCRIPTION_LIST_COLUMN_WIDTHS,
   LARGE_DESCRIPTION_LIST_COLUMN_WIDTHS,
 } from './constants';
-import { TranslationTab } from './translation_tab';
+import { SummaryTab, TranslationTab } from './tabs';
 import {
   convertMigrationCustomRuleToSecurityRulePayload,
   isMigrationCustomRule,
@@ -174,9 +174,22 @@ export const MigrationRuleDetailsFlyout: React.FC<MigrationRuleDetailsFlyoutProp
       [ruleDetailsToOverview, size, expandedOverviewSections, toggleOverviewSection]
     );
 
+    const summaryTab: EuiTabbedContentTab = useMemo(
+      () => ({
+        id: 'summary',
+        name: i18n.SUMMARY_TAB_LABEL,
+        content: (
+          <TabContentPadding>
+            <SummaryTab ruleMigration={ruleMigration} />
+          </TabContentPadding>
+        ),
+      }),
+      [ruleMigration]
+    );
+
     const tabs = useMemo(() => {
-      return [...extraTabs, translationTab, overviewTab];
-    }, [extraTabs, translationTab, overviewTab]);
+      return [...extraTabs, translationTab, overviewTab, summaryTab];
+    }, [extraTabs, translationTab, overviewTab, summaryTab]);
 
     const [selectedTabId, setSelectedTabId] = useState<string>(tabs[0].id);
     const selectedTab = tabs.find((tab) => tab.id === selectedTabId) ?? tabs[0];

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export * from './summary';
+export * from './translation';

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/summary/index.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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, { useMemo } from 'react';
+import type { EuiCommentProps } from '@elastic/eui';
+import { EuiAvatar, EuiCommentList, EuiMarkdownFormat, EuiSpacer } from '@elastic/eui';
+import moment from 'moment';
+import { AssistantAvatar } from '@kbn/elastic-assistant';
+import {
+  RuleMigrationStatusEnum,
+  type RuleMigration,
+} from '../../../../../../../common/siem_migrations/model/rule_migration.gen';
+import * as i18n from './translations';
+
+interface SummaryTabProps {
+  ruleMigration: RuleMigration;
+}
+
+export const SummaryTab: React.FC<SummaryTabProps> = React.memo(({ ruleMigration }) => {
+  const timestamp = useMemo(
+    // Date formats https://momentjs.com/docs/#/displaying/format/
+    () => moment(ruleMigration['@timestamp']).format('ll'),
+    [ruleMigration]
+  );
+  const comments: EuiCommentProps[] | undefined = useMemo(() => {
+    return ruleMigration.comments?.map((comment) => {
+      return {
+        username: i18n.ASSISTANT_USERNAME,
+        timelineAvatarAriaLabel: i18n.ASSISTANT_USERNAME,
+        timelineAvatar: (
+          <EuiAvatar name="machine" size="l" color="subdued" iconType={AssistantAvatar} />
+        ),
+        event:
+          ruleMigration.status === RuleMigrationStatusEnum.failed
+            ? i18n.COMMENT_EVENT_FAILED
+            : i18n.COMMENT_EVENT_TRANSLATED,
+        timestamp,
+        children: <EuiMarkdownFormat textSize="s">{comment}</EuiMarkdownFormat>,
+      };
+    });
+  }, [ruleMigration, timestamp]);
+
+  return (
+    <>
+      <EuiSpacer size="m" />
+      <EuiCommentList comments={comments} aria-label={i18n.ASSISTANT_COMMENTS} />
+    </>
+  );
+});
+SummaryTab.displayName = 'SummaryTab';

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/summary/translations.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 ASSISTANT_USERNAME = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.translationDetails.summaryTab.assistantUsername',
+  {
+    defaultMessage: 'Assistant',
+  }
+);
+
+export const ASSISTANT_COMMENTS = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.translationDetails.summaryTab.commentsLabel',
+  {
+    defaultMessage: 'Assistant comments',
+  }
+);
+
+export const COMMENT_EVENT_TRANSLATED = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.translationDetails.summaryTab.commentEvent.translatedLabel',
+  {
+    defaultMessage: 'created a final translation',
+  }
+);
+
+export const COMMENT_EVENT_FAILED = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.translationDetails.summaryTab.commentEvent.failedLabel',
+  {
+    defaultMessage: 'failed to translate',
+  }
+);

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/translation/callout.tsx

@@ -12,7 +12,7 @@ import { EuiCallOut } from '@elastic/eui';
 import {
   RuleMigrationTranslationResultEnum,
   type RuleMigrationTranslationResult,
-} from '../../../../../../common/siem_migrations/model/rule_migration.gen';
+} from '../../../../../../../common/siem_migrations/model/rule_migration.gen';
 import * as i18n from './translations';
 
 const getCallOutInfo = (

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/translation/index.tsx

@@ -18,15 +18,15 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { RuleResponse } from '../../../../../../common/api/detection_engine';
-import type { RuleMigration } from '../../../../../../common/siem_migrations/model/rule_migration.gen';
+import type { RuleResponse } from '../../../../../../../common/api/detection_engine';
+import type { RuleMigration } from '../../../../../../../common/siem_migrations/model/rule_migration.gen';
 import { TranslationTabHeader } from './header';
 import { MigrationRuleQuery } from './migration_rule_query';
 import * as i18n from './translations';
 import {
   convertTranslationResultIntoColor,
   convertTranslationResultIntoText,
-} from '../../../utils/helpers';
+} from '../../../../utils/helpers';
 import { TranslationCallOut } from './callout';
 
 interface TranslationTabProps {

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/translation/migration_rule_query.tsx

@@ -17,10 +17,10 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { VALIDATION_WARNING_CODES } from '../../../../../detection_engine/rule_creation/constants/validation_warning_codes';
-import { useFormWithWarnings } from '../../../../../common/hooks/use_form_with_warnings';
-import { EsqlQueryEdit } from '../../../../../detection_engine/rule_creation/components/esql_query_edit';
-import { Field, Form, getUseField } from '../../../../../shared_imports';
+import { VALIDATION_WARNING_CODES } from '../../../../../../detection_engine/rule_creation/constants/validation_warning_codes';
+import { useFormWithWarnings } from '../../../../../../common/hooks/use_form_with_warnings';
+import { EsqlQueryEdit } from '../../../../../../detection_engine/rule_creation/components/esql_query_edit';
+import { Field, Form, getUseField } from '../../../../../../shared_imports';
 import type { RuleTranslationSchema } from './types';
 import { schema } from './schema';
 import * as i18n from './translations';

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/tabs/translation/schema.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import { queryRequiredValidatorFactory } from '../../../../../detection_engine/rule_creation_ui/validators/query_required_validator_factory';
-import { FIELD_TYPES, fieldValidators, type FormSchema } from '../../../../../shared_imports';
+import { queryRequiredValidatorFactory } from '../../../../../../detection_engine/rule_creation_ui/validators/query_required_validator_factory';
+import { FIELD_TYPES, fieldValidators, type FormSchema } from '../../../../../../shared_imports';
 import type { RuleTranslationSchema } from './types';
 import * as i18n from './translations';
 

x-pack/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/translations.ts

@@ -21,6 +21,13 @@ export const OVERVIEW_TAB_LABEL = i18n.translate(
   }
 );
 
+export const SUMMARY_TAB_LABEL = i18n.translate(
+  'xpack.securitySolution.siemMigrations.rules.translationDetails.summaryTabLabel',
+  {
+    defaultMessage: 'Summary',
+  }
+);
+
 export const TRANSLATION_TAB_LABEL = i18n.translate(
   'xpack.securitySolution.siemMigrations.rules.translationDetails.translationTabLabel',
   {