[8.x] [Cloud Security] 3P callout displayed in tables (elastic#196335) (

elastic#196421)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Cloud Security] 3P callout displayed in tables
(elastic#196335)](elastic#196335)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Jordan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-15T18:01:02Z","message":"[Cloud
Security] 3P callout displayed in tables
(elastic#196335)","sha":"9c2a0418f51bb87f130c3ac7d139bad4d1aa7cc5","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor"],"title":"[Cloud Security] 3P callout
displayed in
tables","number":196335,"url":"https://github.com/elastic/kibana/pull/196335","mergeCommit":{"message":"[Cloud
Security] 3P callout displayed in tables
(elastic#196335)","sha":"9c2a0418f51bb87f130c3ac7d139bad4d1aa7cc5"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196335","number":196335,"mergeCommit":{"message":"[Cloud
Security] 3P callout displayed in tables
(elastic#196335)","sha":"9c2a0418f51bb87f130c3ac7d139bad4d1aa7cc5"}}]}]
BACKPORT-->

Co-authored-by: Jordan <[email protected]>

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

@@ -12,6 +12,8 @@ import { useCspSetupStatusApi } from '@kbn/cloud-security-posture/src/hooks/use_
 import { CDR_MISCONFIGURATIONS_DATA_VIEW_ID_PREFIX } from '@kbn/cloud-security-posture-common';
 import { findingsNavigation } from '@kbn/cloud-security-posture';
 import { useDataView } from '@kbn/cloud-security-posture/src/hooks/use_data_view';
+import { EuiSpacer } from '@elastic/eui';
+import { ThirdPartyIntegrationsCallout } from '../findings/third_party_integrations_callout';
 import { NoFindingsStates } from '../../components/no_findings_states';
 import { CloudPosturePage, defaultLoadingRenderer } from '../../components/cloud_posture_page';
 import { cloudPosturePages } from '../../common/navigation/constants';
@@ -45,6 +47,8 @@ export const Configurations = () => {
 
   return (
     <CloudPosturePage query={dataViewQuery}>
+      <EuiSpacer />
+      <ThirdPartyIntegrationsCallout />
       <Routes>
         <Route
           exact

x-pack/plugins/cloud_security_posture/public/pages/findings/findings.tsx

@@ -6,20 +6,15 @@
  */
 import React from 'react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { EuiSpacer, EuiTab, EuiTabs, EuiTitle, EuiCallOut, EuiButton } from '@elastic/eui';
+import { EuiSpacer, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { Redirect, useHistory, useLocation, matchPath } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { findingsNavigation } from '@kbn/cloud-security-posture';
 import { useCspSetupStatusApi } from '@kbn/cloud-security-posture/src/hooks/use_csp_setup_status_api';
-import { i18n } from '@kbn/i18n';
-import { useAdd3PIntegrationRoute } from '../../common/api/use_wiz_integration_route';
 import { Configurations } from '../configurations';
 import { cloudPosturePages } from '../../common/navigation/constants';
-import {
-  LOCAL_STORAGE_3P_INTEGRATIONS_CALLOUT_KEY,
-  LOCAL_STORAGE_FINDINGS_LAST_SELECTED_TAB_KEY,
-} from '../../common/constants';
+import { LOCAL_STORAGE_FINDINGS_LAST_SELECTED_TAB_KEY } from '../../common/constants';
 import { VULNERABILITIES_INDEX_NAME, FINDINGS_INDEX_NAME } from '../../../common/constants';
 import { getStatusForIndexName } from '../../../common/utils/helpers';
 import { Vulnerabilities } from '../vulnerabilities';
@@ -64,10 +59,7 @@ const FindingsTabRedirecter = ({ lastTabSelected }: { lastTabSelected?: Findings
 export const Findings = () => {
   const history = useHistory();
   const location = useLocation();
-  const wizAddIntegrationLink = useAdd3PIntegrationRoute('wiz');
-  const [userHasDismissedCallout, setUserHasDismissedCallout] = useLocalStorage(
-    LOCAL_STORAGE_3P_INTEGRATIONS_CALLOUT_KEY
-  );
+
   // restore the users most recent tab selection
   const [lastTabSelected, setLastTabSelected] = useLocalStorage<FindingsTabKey>(
     LOCAL_STORAGE_FINDINGS_LAST_SELECTED_TAB_KEY
@@ -109,26 +101,6 @@ export const Findings = () => {
             </h1>
           </EuiTitle>
           <EuiSpacer />
-          {!userHasDismissedCallout && (
-            <>
-              <EuiCallOut
-                title={i18n.translate('xpack.csp.findings.3pIntegrationsCallout.title', {
-                  defaultMessage:
-                    "New! Ingest your cloud security product's data into Elastic for centralized analytics, hunting, investigations, visualizations, and more",
-                })}
-                iconType="cheer"
-                onDismiss={() => setUserHasDismissedCallout(true)}
-              >
-                <EuiButton href={wizAddIntegrationLink}>
-                  <FormattedMessage
-                    id="xpack.csp.findings.3pIntegrationsCallout.buttonTitle"
-                    defaultMessage="Integrate Wiz"
-                  />
-                </EuiButton>
-              </EuiCallOut>
-              <EuiSpacer />
-            </>
-          )}
           <EuiTabs size="l">
             <EuiTab
               key="configurations"

x-pack/plugins/cloud_security_posture/public/pages/findings/third_party_integrations_callout.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { EuiButton, EuiCallOut } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useAdd3PIntegrationRoute } from '../../common/api/use_wiz_integration_route';
+import { LOCAL_STORAGE_3P_INTEGRATIONS_CALLOUT_KEY } from '../../common/constants';
+
+export const ThirdPartyIntegrationsCallout = () => {
+  const wizAddIntegrationLink = useAdd3PIntegrationRoute('wiz');
+  const [userHasDismissedCallout, setUserHasDismissedCallout] = useLocalStorage(
+    LOCAL_STORAGE_3P_INTEGRATIONS_CALLOUT_KEY
+  );
+
+  if (userHasDismissedCallout) return null;
+
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.csp.findings.3pIntegrationsCallout.title', {
+        defaultMessage:
+          "New! Ingest your cloud security product's data into Elastic for centralized analytics, hunting, investigations, visualizations, and more",
+      })}
+      iconType="cheer"
+      onDismiss={() => setUserHasDismissedCallout(true)}
+    >
+      <EuiButton href={wizAddIntegrationLink}>
+        <FormattedMessage
+          id="xpack.csp.findings.3pIntegrationsCallout.buttonTitle"
+          defaultMessage="Integrate Wiz"
+        />
+      </EuiButton>
+    </EuiCallOut>
+  );
+};

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities.tsx

@@ -9,6 +9,8 @@ import { Routes, Route } from '@kbn/shared-ux-router';
 import { findingsNavigation } from '@kbn/cloud-security-posture';
 import { useCspSetupStatusApi } from '@kbn/cloud-security-posture/src/hooks/use_csp_setup_status_api';
 import { useDataView } from '@kbn/cloud-security-posture/src/hooks/use_data_view';
+import { EuiSpacer } from '@elastic/eui';
+import { ThirdPartyIntegrationsCallout } from '../findings/third_party_integrations_callout';
 import { VULNERABILITIES_PAGE } from './test_subjects';
 import { CDR_VULNERABILITIES_DATA_VIEW_ID_PREFIX } from '../../../common/constants';
 import { NoVulnerabilitiesStates } from '../../components/no_vulnerabilities_states';
@@ -34,6 +36,8 @@ export const Vulnerabilities = () => {
 
   return (
     <CloudPosturePage query={dataViewQuery}>
+      <EuiSpacer />
+      <ThirdPartyIntegrationsCallout />
       <div data-test-subj={VULNERABILITIES_PAGE}>
         <Routes>
           <Route