Add components for name, description and tags

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx

@@ -256,7 +256,7 @@ interface TagsProps {
   tags: string[];
 }
 
-const Tags = ({ tags }: TagsProps) => (
+export const Tags = ({ tags }: TagsProps) => (
   <BadgeList badges={tags} data-test-subj="tagsPropertyValue" />
 );
 

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/field_readonly.tsx

@@ -21,6 +21,9 @@ import { ThreatReadOnly } from './fields/threat/threat';
 import { ThreatIndexReadOnly } from './fields/threat_index/threat_index';
 import { ThreatIndicatorPathReadOnly } from './fields/threat_indicator_path/threat_indicator_path';
 import { ThreatQueryReadOnly } from './fields/threat_query/threat_query';
+import { NameReadOnly } from './fields/name/name';
+import { TagsReadOnly } from './fields/tags/tags';
+import { DescriptionReadOnly } from './fields/description/description';
 
 interface FieldReadOnlyProps {
   fieldName: keyof DiffableAllFields;
@@ -31,6 +34,8 @@ export function FieldReadOnly({ fieldName, finalDiffableRule }: FieldReadOnlyPro
   switch (fieldName) {
     case 'data_source':
       return <DataSourceReadOnly dataSource={finalDiffableRule.data_source} />;
+    case 'description':
+      return <DescriptionReadOnly description={finalDiffableRule.description} />;
     case 'eql_query':
       return (
         <EqlQueryReadOnly
@@ -54,6 +59,8 @@ export function FieldReadOnly({ fieldName, finalDiffableRule }: FieldReadOnlyPro
           machineLearningJobId={finalDiffableRule.machine_learning_job_id}
         />
       );
+    case 'name':
+      return <NameReadOnly name={finalDiffableRule.name} />;
     case 'related_integrations':
       return (
         <RelatedIntegrationsReadOnly relatedIntegrations={finalDiffableRule.related_integrations} />
@@ -64,6 +71,8 @@ export function FieldReadOnly({ fieldName, finalDiffableRule }: FieldReadOnlyPro
       return <RiskScoreMappingReadOnly riskScoreMapping={finalDiffableRule.risk_score_mapping} />;
     case 'severity_mapping':
       return <SeverityMappingReadOnly severityMapping={finalDiffableRule.severity_mapping} />;
+    case 'tags':
+      return <TagsReadOnly tags={finalDiffableRule.tags} />;
     case 'threat':
       return <ThreatReadOnly threat={finalDiffableRule.threat} />;
     case 'threat_index':

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 type { Story } from '@storybook/react';
+import { DescriptionReadOnly } from './description';
+import { FieldReadOnly } from '../../field_readonly';
+import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine';
+
+export default {
+  component: DescriptionReadOnly,
+  title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/description',
+};
+
+interface TemplateProps {
+  finalDiffableRule: Partial<DiffableAllFields>;
+}
+
+const Template: Story<TemplateProps> = (args) => {
+  return (
+    <FieldReadOnly
+      fieldName="description"
+      finalDiffableRule={args.finalDiffableRule as DiffableAllFields}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  finalDiffableRule: {
+    description:
+      "Identifies the occurrence of a security alert from the Google Workspace alerts center. Google Workspace's security alert center provides an overview of actionable alerts that may be affecting an organization's domain. An alert is a warning of a potential security issue that Google has detected.",
+  },
+};

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.tsx

@@ -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 React from 'react';
+import { EuiDescriptionList } from '@elastic/eui';
+import * as ruleDetailsI18n from '../../../../translations';
+import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine';
+
+interface RuleDescriptionProps {
+  description: DiffableAllFields['name'];
+}
+
+function RuleDescription({ description }: RuleDescriptionProps) {
+  return <>{description}</>;
+}
+
+interface DescriptionReadOnlyProps {
+  description: DiffableAllFields['description'];
+}
+
+export function DescriptionReadOnly({ description }: DescriptionReadOnlyProps) {
+  return (
+    <EuiDescriptionList
+      listItems={[
+        {
+          title: ruleDetailsI18n.DESCRIPTION_FIELD_LABEL,
+          description: <RuleDescription description={description} />,
+        },
+      ]}
+    />
+  );
+}

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.stories.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 type { Story } from '@storybook/react';
+import { NameReadOnly } from './name';
+import { FieldReadOnly } from '../../field_readonly';
+import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine';
+
+export default {
+  component: NameReadOnly,
+  title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/name',
+};
+
+interface TemplateProps {
+  finalDiffableRule: Partial<DiffableAllFields>;
+}
+
+const Template: Story<TemplateProps> = (args) => {
+  return (
+    <FieldReadOnly
+      fieldName="name"
+      finalDiffableRule={args.finalDiffableRule as DiffableAllFields}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  finalDiffableRule: {
+    name: 'Forwarded Google Workspace Security Alert',
+  },
+};

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.tsx

@@ -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 React from 'react';
+import { EuiDescriptionList } from '@elastic/eui';
+import * as ruleDetailsI18n from '../../../../translations';
+import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine';
+
+interface RuleNameProps {
+  name: DiffableAllFields['name'];
+}
+
+function RuleName({ name }: RuleNameProps) {
+  return <>{name}</>;
+}
+
+interface NameReadOnlyProps {
+  name: DiffableAllFields['name'];
+}
+
+export function NameReadOnly({ name }: NameReadOnlyProps) {
+  return (
+    <EuiDescriptionList
+      listItems={[
+        {
+          title: ruleDetailsI18n.NAME_FIELD_LABEL,
+          description: <RuleName name={name} />,
+        },
+      ]}
+    />
+  );
+}

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.stories.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 type { Story } from '@storybook/react';
+import { TagsReadOnly } from './tags';
+import { FieldReadOnly } from '../../field_readonly';
+import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine';
+
+export default {
+  component: TagsReadOnly,
+  title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/tags',
+};
+
+interface TemplateProps {
+  finalDiffableRule: Partial<DiffableAllFields>;
+}
+
+const Template: Story<TemplateProps> = (args) => {
+  return (
+    <FieldReadOnly
+      fieldName="tags"
+      finalDiffableRule={args.finalDiffableRule as DiffableAllFields}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  finalDiffableRule: {
+    tags: ['Elastic', 'Cloud', 'Google Workspace', 'Log Auditing', 'Threat Detection'],
+  },
+};

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.tsx

@@ -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 React from 'react';
+import { EuiDescriptionList } from '@elastic/eui';
+import * as ruleDetailsI18n from '../../../../translations';
+import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine';
+import { Tags } from '../../../../rule_about_section';
+
+interface TagsReadOnlyProps {
+  tags: DiffableAllFields['tags'];
+}
+
+export function TagsReadOnly({ tags }: TagsReadOnlyProps) {
+  return (
+    <EuiDescriptionList
+      listItems={[
+        {
+          title: ruleDetailsI18n.TAGS_FIELD_LABEL,
+          description: <Tags tags={tags} />,
+        },
+      ]}
+    />
+  );
+}