[Cloud Security] Add description list to findings flyout and copy buttons

x-pack/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx

@@ -6,12 +6,41 @@
  */
 
 import React from 'react';
-import { EuiDescriptionList, useEuiTheme, type EuiDescriptionListProps } from '@elastic/eui';
+import { EuiDescriptionList, useEuiTheme, EuiIcon, EuiCopy } from '@elastic/eui';
+import type { EuiDescriptionListProps } from '@elastic/eui';
+import { css } from '@emotion/react';
 
-const getModifiedTitlesListItems = (listItems: EuiDescriptionListProps['listItems']) =>
+const CopyButton = ({ copyText }: { copyText: string }) => (
+  <EuiCopy textToCopy={copyText}>
+    {(copy) => (
+      <EuiIcon
+        css={css`
+          :hover {
+            cursor: pointer;
+          }
+        `}
+        onClick={copy}
+        type="copy"
+      />
+    )}
+  </EuiCopy>
+);
+
+const getModifiedTitlesListItems = (listItems?: EuiDescriptionListProps['listItems']) =>
   listItems
     ?.filter((item) => !!item?.title && !!item?.description)
-    .map((item) => ({ ...item, title: `${item.title}:` }));
+    .map((item) => ({
+      ...item,
+      title: `${item.title}:`,
+      description:
+        typeof item.description === 'string' ? (
+          <span>
+            {item.description} <CopyButton copyText={item.description} />
+          </span>
+        ) : (
+          item.description
+        ),
+    }));
 
 // eui size m is 12px which is too small, and next after it is base which is 16px which is too big
 const fontSize = '1rem';

x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx

@@ -23,11 +23,15 @@ import {
   EuiPagination,
   EuiFlyoutFooter,
   EuiToolTip,
+  EuiDescriptionListProps,
 } from '@elastic/eui';
 import { assertNever } from '@kbn/std';
 import { i18n } from '@kbn/i18n';
 import type { HttpSetup } from '@kbn/core/public';
 import { generatePath } from 'react-router-dom';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { truthy } from '../../../../common/utils/helpers';
 import { benchmarksNavigation } from '../../../common/navigation/constants';
 import cisLogoIcon from '../../../assets/icons/cis_logo.svg';
 import { CspFinding } from '../../../../common/schemas/csp_finding';
@@ -40,9 +44,10 @@ import { RuleTab } from './rule_tab';
 import type { BenchmarkId } from '../../../../common/types_old';
 import { CISBenchmarkIcon } from '../../../components/cis_benchmark_icon';
 import { BenchmarkName } from '../../../../common/types_old';
-import { FINDINGS_FLYOUT } from '../test_subjects';
+import { FINDINGS_FLYOUT, FINDINGS_MISCONFIGS_FLYOUT_DESCRIPTION_LIST } from '../test_subjects';
 import { useKibana } from '../../../common/hooks/use_kibana';
 import { createDetectionRuleFromBenchmarkRule } from '../utils/create_detection_rule_from_benchmark';
+import { CspInlineDescriptionList } from '../../../components/csp_inline_description_list';
 
 const tabs = [
   {
@@ -112,6 +117,23 @@ export const CisKubernetesIcons = ({
   </EuiFlexGroup>
 );
 
+const getFlyoutDescriptionList = (finding: CspFinding): EuiDescriptionListProps['listItems'] =>
+  [
+    finding.resource?.id && {
+      title: i18n.translate('xpack.csp.findings.findingsFlyout.flyoutDescriptionList.resourceId', {
+        defaultMessage: 'Resource ID',
+      }),
+      description: finding.resource.id,
+    },
+    finding.resource?.name && {
+      title: i18n.translate(
+        'xpack.csp.findings.findingsFlyout.flyoutDescriptionList.resourceName',
+        { defaultMessage: 'Resource Name' }
+      ),
+      description: finding.resource.name,
+    },
+  ].filter(truthy);
+
 const FindingsTab = ({ tab, findings }: { findings: CspFinding; tab: FindingsTab }) => {
   const { application } = useKibana().services;
 
@@ -164,6 +186,17 @@ export const FindingsRuleFlyout = ({
             </EuiTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
+        <div
+          css={css`
+            line-height: 20px;
+            margin-top: ${euiThemeVars.euiSizeM};
+          `}
+        >
+          <CspInlineDescriptionList
+            testId={FINDINGS_MISCONFIGS_FLYOUT_DESCRIPTION_LIST}
+            listItems={getFlyoutDescriptionList(findings)}
+          />
+        </div>
         <EuiSpacer />
         <EuiTabs>
           {tabs.map((v) => (

x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/overview_tab.tsx

@@ -77,18 +77,6 @@ const getDetailsList = (data: CspFinding, ruleFlyoutLink: string, discoverIndexL
     }),
     description: moment(data['@timestamp']).format(CSP_MOMENT_FORMAT),
   },
-  {
-    title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.resourceIdTitle', {
-      defaultMessage: 'Resource ID',
-    }),
-    description: data.resource.id,
-  },
-  {
-    title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.resourceNameTitle', {
-      defaultMessage: 'Resource Name',
-    }),
-    description: data.resource.name,
-  },
   {
     title: i18n.translate('xpack.csp.findings.findingsFlyout.overviewTab.frameworkSourcesTitle', {
       defaultMessage: 'Framework Sources',

x-pack/plugins/cloud_security_posture/public/pages/configurations/test_subjects.ts

@@ -33,3 +33,6 @@ export const RESOURCES_FINDINGS_CONTAINER = 'resources_findings_container';
 export const RESOURCES_FINDINGS_TABLE = 'resource_findings_table';
 export const getResourceFindingsTableRowTestId = (id: string) =>
   `resource_findings_table_row_${id}`;
+
+export const FINDINGS_MISCONFIGS_FLYOUT_DESCRIPTION_LIST =
+  'misconfigs-findings-flyout-description-list';