Warn user when an alert is deleted

x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiCommentProps } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiCommentProps, EuiIconTip } from '@elastic/eui';
 
 import {
   CaseFullExternalService,
@@ -214,12 +214,20 @@ export const getAlertComment = ({
           <UserActionCopyLink id={action.actionId} />
         </EuiFlexItem>
         <EuiFlexItem>
-          {alert != null && (
+          {alert != null ? (
             <UserActionShowAlert
               id={action.actionId}
               alert={alert}
               onShowAlertDetails={onShowAlertDetails}
             />
+          ) : (
+            <EuiIconTip
+              aria-label={i18n.ALERT_NOT_FOUND_TOOLTIP}
+              size="l"
+              type="alert"
+              color="danger"
+              content={i18n.ALERT_NOT_FOUND_TOOLTIP}
+            />
           )}
         </EuiFlexItem>
       </EuiFlexGroup>

x-pack/plugins/security_solution/public/cases/components/user_action_tree/translations.ts

@@ -41,9 +41,23 @@ export const ALERT_COMMENT_LABEL_TITLE = i18n.translate(
   }
 );
 
+export const ALERT_RULE_DELETED_COMMENT_LABEL = i18n.translate(
+  'xpack.securitySolution.case.caseView.alertRuleDeletedLabelTitle',
+  {
+    defaultMessage: 'added an alert',
+  }
+);
+
 export const SHOW_ALERT_TOOLTIP = i18n.translate(
   'xpack.securitySolution.case.caseView.showAlertTooltip',
   {
     defaultMessage: 'Show alert details',
   }
 );
+
+export const ALERT_NOT_FOUND_TOOLTIP = i18n.translate(
+  'xpack.securitySolution.case.caseView.showAlertDeletedTooltip',
+  {
+    defaultMessage: 'Alert not found',
+  }
+);

x-pack/plugins/security_solution/public/cases/components/user_action_tree/user_action_alert_comment_event.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { memo, useCallback } from 'react';
+import { EuiLink } from '@elastic/eui';
+
+import { APP_ID } from '../../../../common/constants';
+import { useKibana } from '../../../common/lib/kibana';
+import { getRuleDetailsUrl, useFormatUrl } from '../../../common/components/link_to';
+import { SecurityPageName } from '../../../app/types';
+
+import { Alert } from '../case_view';
+import * as i18n from './translations';
+
+interface Props {
+  alert: Alert | undefined;
+}
+
+const AlertCommentEventComponent: React.FC<Props> = ({ alert }) => {
+  const ruleName = alert?.rule?.name ?? null;
+  const ruleId = alert?.rule?.id ?? null;
+  const { navigateToApp } = useKibana().services.application;
+  const { formatUrl } = useFormatUrl(SecurityPageName.detections);
+
+  const onLinkClick = useCallback(
+    (ev: { preventDefault: () => void }) => {
+      ev.preventDefault();
+      navigateToApp(`${APP_ID}:${SecurityPageName.detections}`, {
+        path: formatUrl(getRuleDetailsUrl(ruleId ?? '')),
+      });
+    },
+    [ruleId, formatUrl, navigateToApp]
+  );
+
+  return ruleId != null && ruleName != null ? (
+    <>
+      {`${i18n.ALERT_COMMENT_LABEL_TITLE} `}
+      <EuiLink onClick={onLinkClick}>{ruleName}</EuiLink>
+    </>
+  ) : (
+    <>{i18n.ALERT_RULE_DELETED_COMMENT_LABEL}</>
+  );
+};
+
+export const AlertCommentEvent = memo(AlertCommentEventComponent);