From d5eff61476c0b6e2e506e35156dd21dbb5e71e21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20Kopyci=C5=84ski?= <contact@patrykkopycinski.com>
Date: Fri, 12 Jan 2024 03:27:08 +0100
Subject: [PATCH] [SentinelOne] Add technical preview badge to the Host
 isolation flyout (#174123)

## Summary

Add technical preview to the S1 Host isolation flyout

<img width="2056" alt="Zrzut ekranu 2024-01-2 o 21 02 35"
src="https://github.com/elastic/kibana/assets/5188868/813d3a1a-dbc0-4c36-9c43-55613e983306">

<img width="2056" alt="Zrzut ekranu 2024-01-2 o 21 17 58"
src="https://github.com/elastic/kibana/assets/5188868/a863f4dd-1d00-4708-8c4b-c7c8c4dbf0cb">

(cherry picked from commit 8a443a2d188a9e9292d84921d48d5137c5ec8490)
---
 .../flyout/back_to_alert_details_link.tsx     | 56 +++++++++++++------
 .../event_details/flyout/header.tsx           | 14 ++++-
 .../side_panel/event_details/translations.ts  | 15 +++++
 3 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx
index 2ce97cfbce32e..6ae4207a46f78 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/back_to_alert_details_link.tsx
@@ -5,34 +5,58 @@
  * 2.0.
  */
 
-import { EuiButtonEmpty, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiBetaBadge,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   ISOLATE_HOST,
   UNISOLATE_HOST,
 } from '../../../../../detections/components/host_isolation/translations';
-import { ALERT_DETAILS } from '../translations';
+import { ALERT_DETAILS, TECHNICAL_PREVIEW, TECHNICAL_PREVIEW_DESCRIPTION } from '../translations';
 
 const BackToAlertDetailsLinkComponent = ({
   showAlertDetails,
+  showExperimentalBadge,
   isolateAction,
 }: {
   showAlertDetails: () => void;
+  showExperimentalBadge?: boolean;
   isolateAction: 'isolateHost' | 'unisolateHost';
-}) => {
-  return (
-    <>
-      <EuiButtonEmpty iconType="arrowLeft" iconSide="left" flush="left" onClick={showAlertDetails}>
-        <EuiText size="xs">
-          <p>{ALERT_DETAILS}</p>
-        </EuiText>
-      </EuiButtonEmpty>
-      <EuiTitle>
-        <h2>{isolateAction === 'isolateHost' ? ISOLATE_HOST : UNISOLATE_HOST}</h2>
-      </EuiTitle>
-    </>
-  );
-};
+}) => (
+  <>
+    <EuiButtonEmpty iconType="arrowLeft" iconSide="left" flush="left" onClick={showAlertDetails}>
+      <EuiText size="xs">
+        <p>{ALERT_DETAILS}</p>
+      </EuiText>
+    </EuiButtonEmpty>
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiTitle>
+          <h2>{isolateAction === 'isolateHost' ? ISOLATE_HOST : UNISOLATE_HOST}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {showExperimentalBadge && (
+          <EuiBetaBadge
+            css={css`
+              display: inline-flex;
+            `}
+            label={TECHNICAL_PREVIEW}
+            size="s"
+            tooltipContent={TECHNICAL_PREVIEW_DESCRIPTION}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
 
 const BackToAlertDetailsLink = React.memo(BackToAlertDetailsLinkComponent);
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx
index d5df4304a0894..0d139449b1ca2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/flyout/header.tsx
@@ -6,8 +6,9 @@
  */
 
 import { EuiFlyoutHeader } from '@elastic/eui';
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { SENTINEL_ONE_AGENT_ID_FIELD } from '../../../../../common/utils/sentinelone_alert_check';
 import type { GetFieldsData } from '../../../../../common/hooks/use_get_fields_data';
 import { ExpandableEventTitle } from '../expandable_event';
 import { BackToAlertDetailsLink } from './back_to_alert_details_link';
@@ -43,10 +44,19 @@ const FlyoutHeaderContentComponent = ({
   refetchFlyoutData,
   getFieldsData,
 }: FlyoutHeaderComponentProps) => {
+  const isSentinelOneAlert = useMemo(
+    () => !!(isAlert && getFieldsData(SENTINEL_ONE_AGENT_ID_FIELD)?.length),
+    [getFieldsData, isAlert]
+  );
+
   return (
     <>
       {isHostIsolationPanelOpen ? (
-        <BackToAlertDetailsLink isolateAction={isolateAction} showAlertDetails={showAlertDetails} />
+        <BackToAlertDetailsLink
+          isolateAction={isolateAction}
+          showAlertDetails={showAlertDetails}
+          showExperimentalBadge={isSentinelOneAlert}
+        />
       ) : (
         <ExpandableEventTitle
           eventId={eventId}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts
index 3416636f71e17..87f8839adcf54 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/translations.ts
@@ -35,6 +35,21 @@ export const ALERT_DETAILS = i18n.translate(
   }
 );
 
+export const TECHNICAL_PREVIEW = i18n.translate(
+  'xpack.securitySolution.timeline.expandableEvent.technicalPreviewLabel',
+  {
+    defaultMessage: 'Technical Preview',
+  }
+);
+
+export const TECHNICAL_PREVIEW_DESCRIPTION = i18n.translate(
+  'xpack.securitySolution.timeline.expandableEvent.technicalPreviewDescription',
+  {
+    defaultMessage:
+      'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
+  }
+);
+
 export const SHARE_ALERT = i18n.translate(
   'xpack.securitySolution.timeline.expandableEvent.shareAlert',
   {