[Security Solution][AVC banner] Add AVC results banner to elastic def…

…end home page and integrations (elastic#186942)

## Summary

- [x] Shows a banner with the 2024 AVC results blog link in 2 places:
the Security homepage and the Elastic Defend integration page info
- [x] Banner will not show again once dismissed
- [x] Unit Tests 

TODO in another pr: have code to remove the avc banner code at the end
of the year

## Screenshots
<img width="1724" alt="image"
src="https://github.com/elastic/kibana/assets/56409205/9ac2ca14-525b-44bc-b357-e87f10856f33">

<img width="1383" alt="image"
src="https://github.com/elastic/kibana/assets/56409205/24ef70fe-dfa7-4fc1-bcba-8405aaf4f9ce">

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Paul Tavares <[email protected]>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -462,6 +462,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
     },
     securitySolution: {
       artifactControl: `${SECURITY_SOLUTION_DOCS}artifact-control.html`,
+      avcResults: `${ELASTIC_WEBSITE_URL}blog/elastic-security-malware-protection-test-av-comparatives`,
       trustedApps: `${SECURITY_SOLUTION_DOCS}trusted-apps-ov.html`,
       eventFilters: `${SECURITY_SOLUTION_DOCS}event-filters.html`,
       blocklist: `${SECURITY_SOLUTION_DOCS}blocklist.html`,

packages/kbn-doc-links/src/types.ts

@@ -334,6 +334,7 @@ export interface DocLinks {
   };
   readonly securitySolution: {
     readonly artifactControl: string;
+    readonly avcResults: string;
     readonly trustedApps: string;
     readonly eventFilters: string;
     readonly blocklist: string;

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/avc_banner/avc_results_banner_2024.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { css } from '@emotion/css';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiCallOut, EuiSpacer, useEuiTheme } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+
+import avcBannerBackground from './avc_banner_background.svg';
+
+export const AVCResultsBanner2024: React.FC<{ onDismiss: () => void }> = ({ onDismiss }) => {
+  const { docLinks } = useKibana().services;
+  const { euiTheme } = useEuiTheme();
+  const bannerTitle = i18n.translate(
+    'xpack.fleet.integrations.epm.elasticDefend.avcResultsBanner.title',
+    {
+      defaultMessage: '100% protection with zero false positives.',
+    }
+  );
+
+  const calloutStyles = css({
+    paddingLeft: `${euiTheme.size.xl}`,
+    backgroundImage: `url(${avcBannerBackground})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPositionX: 'right',
+    backgroundPositionY: 'bottom',
+  });
+
+  return (
+    <EuiCallOut
+      title={bannerTitle}
+      color="success"
+      iconType="cheer"
+      onDismiss={onDismiss}
+      className={calloutStyles}
+    >
+      <FormattedMessage
+        id="xpack.fleet.integrations.epm.elasticDefend.avcResultsBanner.title.avcResultsBanner.body"
+        defaultMessage="Elastic Security shines in Malware Protection Test by AV-Comparatives"
+      />
+      <EuiSpacer size="s" />
+      <EuiButton size="s" color="success" href={docLinks?.links.securitySolution.avcResults}>
+        <FormattedMessage
+          id="xpack.fleet.integrations.epm.elasticDefend.avcResultsBanner.title.avcResultsBanner.readTheBlog.link"
+          defaultMessage="Read the blog"
+        />
+      </EuiButton>
+    </EuiCallOut>
+  );
+};

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/overview.tsx

@@ -20,6 +20,8 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+
 import {
   isIntegrationPolicyTemplate,
   isPackagePrerelease,
@@ -36,6 +38,10 @@ import { isPackageUnverified } from '../../../../../../../services';
 import type { PackageInfo, RegistryPolicyTemplate } from '../../../../../types';
 import { SideBarColumn } from '../../../components/side_bar_column';
 
+import type { FleetStartServices } from '../../../../../../../plugin';
+
+import { AVCResultsBanner2024 } from './avc_banner/avc_results_banner_2024';
+
 import { Screenshots } from './screenshots';
 import { Readme } from './readme';
 import { Details } from './details';
@@ -159,9 +165,11 @@ export const OverviewPage: React.FC<Props> = memo(
       () => integrationInfo?.screenshots || packageInfo.screenshots || [],
       [integrationInfo, packageInfo.screenshots]
     );
+    const { storage } = useKibana<FleetStartServices>().services;
     const { packageVerificationKeyId } = useGetPackageVerificationKeyId();
     const isUnverified = isPackageUnverified(packageInfo, packageVerificationKeyId);
     const isPrerelease = isPackagePrerelease(packageInfo.version);
+    const isElasticDefend = packageInfo.name === 'endpoint';
     const [markdown, setMarkdown] = useState<string | undefined>(undefined);
     const [selectedItemId, setSelectedItem] = useState<string | undefined>(undefined);
     const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
@@ -283,6 +291,14 @@ export const OverviewPage: React.FC<Props> = memo(
 
     const requireAgentRootPrivileges = isRootPrivilegesRequired(packageInfo);
 
+    const [showAVCBanner, setShowAVCBanner] = useState(
+      storage.get('securitySolution.showAvcBanner') ?? true
+    );
+    const onBannerDismiss = useCallback(() => {
+      setShowAVCBanner(false);
+      storage.set('securitySolution.showAvcBanner', false);
+    }, [storage]);
+
     return (
       <EuiFlexGroup alignItems="flexStart" data-test-subj="epm.OverviewPage">
         <SideBar grow={2}>
@@ -297,6 +313,12 @@ export const OverviewPage: React.FC<Props> = memo(
         </SideBar>
         <EuiFlexItem grow={9} className="eui-textBreakWord">
           {isUnverified && <UnverifiedCallout />}
+          {isElasticDefend && showAVCBanner && (
+            <>
+              <AVCResultsBanner2024 onDismiss={onBannerDismiss} />
+              <EuiSpacer size="s" />
+            </>
+          )}
           {isPrerelease && (
             <PrereleaseCallout
               packageName={packageInfo.name}