[Cloud Security] 3P callout displayed in tables (#196335)

elastic · Oct 15, 2024 · 9c2a041 · 9c2a041
1 parent 302ac0d
commit 9c2a041
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 31 deletions.
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/configurations.tsx b/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

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings.tsx b/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"

diff --git a/...plugins/cloud_security_posture/public/pages/findings/third_party_integrations_callout.tsx b/...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>
+  );
+};
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities.tsx b/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