From dca10ce00c214312ece44ea4801655bc3f68f66e Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 14 Sep 2021 02:20:40 -0400
Subject: [PATCH] [Security Solution][Endpoint][Trusted Apps] TA delete modal
 shows # of policies it will impact (#111481) (#112048)

Co-authored-by: Candace Park <56409205+parkiino@users.noreply.github.com>
---
 .../trusted_app_deletion_dialog.test.tsx.snap | 156 ++++++++++++++----
 .../view/trusted_app_deletion_dialog.tsx      |  44 ++++-
 .../translations/translations/ja-JP.json      |   2 -
 .../translations/translations/zh-CN.json      |   2 -
 4 files changed, 159 insertions(+), 45 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap
index 0343ab62b9773..070f1b9eabe23 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap
@@ -42,7 +42,13 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion failed 1`] = `
             <div
               class="euiModalHeader__title"
             >
-              Remove trusted application
+              Delete "
+              <b
+                class="eui-textBreakWord"
+              >
+                trusted app 3
+              </b>
+              "
             </div>
           </div>
           <div
@@ -52,17 +58,41 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion failed 1`] = `
               class="euiModalBody__overflow"
             >
               <div
-                class="euiText euiText--medium"
+                class="euiCallOut euiCallOut--danger"
               >
-                <p>
-                  You are removing trusted application "
-                  <b
-                    class="eui-textBreakWord"
+                <div
+                  class="euiCallOutHeader"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiCallOutHeader__icon"
+                    color="inherit"
+                    data-euiicon-type="alert"
+                  />
+                  <span
+                    class="euiCallOutHeader__title"
                   >
-                    trusted app 3
-                  </b>
-                  ".
-                </p>
+                    Warning
+                  </span>
+                </div>
+                <div
+                  class="euiText euiText--small"
+                >
+                  <div
+                    class="euiTextColor euiTextColor--default"
+                  >
+                    <p>
+                      Deleting this entry will remove it from all associated policies.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <div
+                class="euiText euiText--medium"
+              >
                 <p>
                   This action cannot be undone. Are you sure you wish to continue?
                 </p>
@@ -98,7 +128,7 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion failed 1`] = `
                 <span
                   class="euiButton__text"
                 >
-                  Remove trusted application
+                  Delete
                 </span>
               </span>
             </button>
@@ -146,7 +176,13 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion is in progress
             <div
               class="euiModalHeader__title"
             >
-              Remove trusted application
+              Delete "
+              <b
+                class="eui-textBreakWord"
+              >
+                trusted app 3
+              </b>
+              "
             </div>
           </div>
           <div
@@ -156,17 +192,41 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion is in progress
               class="euiModalBody__overflow"
             >
               <div
-                class="euiText euiText--medium"
+                class="euiCallOut euiCallOut--danger"
               >
-                <p>
-                  You are removing trusted application "
-                  <b
-                    class="eui-textBreakWord"
+                <div
+                  class="euiCallOutHeader"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiCallOutHeader__icon"
+                    color="inherit"
+                    data-euiicon-type="alert"
+                  />
+                  <span
+                    class="euiCallOutHeader__title"
                   >
-                    trusted app 3
-                  </b>
-                  ".
-                </p>
+                    Warning
+                  </span>
+                </div>
+                <div
+                  class="euiText euiText--small"
+                >
+                  <div
+                    class="euiTextColor euiTextColor--default"
+                  >
+                    <p>
+                      Deleting this entry will remove it from all associated policies.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <div
+                class="euiText euiText--medium"
+              >
                 <p>
                   This action cannot be undone. Are you sure you wish to continue?
                 </p>
@@ -207,7 +267,7 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion is in progress
                 <span
                   class="euiButton__text"
                 >
-                  Remove trusted application
+                  Delete
                 </span>
               </span>
             </button>
@@ -255,7 +315,13 @@ exports[`TrustedAppDeletionDialog renders correctly when dialog started 1`] = `
             <div
               class="euiModalHeader__title"
             >
-              Remove trusted application
+              Delete "
+              <b
+                class="eui-textBreakWord"
+              >
+                trusted app 3
+              </b>
+              "
             </div>
           </div>
           <div
@@ -265,17 +331,41 @@ exports[`TrustedAppDeletionDialog renders correctly when dialog started 1`] = `
               class="euiModalBody__overflow"
             >
               <div
-                class="euiText euiText--medium"
+                class="euiCallOut euiCallOut--danger"
               >
-                <p>
-                  You are removing trusted application "
-                  <b
-                    class="eui-textBreakWord"
+                <div
+                  class="euiCallOutHeader"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiCallOutHeader__icon"
+                    color="inherit"
+                    data-euiicon-type="alert"
+                  />
+                  <span
+                    class="euiCallOutHeader__title"
                   >
-                    trusted app 3
-                  </b>
-                  ".
-                </p>
+                    Warning
+                  </span>
+                </div>
+                <div
+                  class="euiText euiText--small"
+                >
+                  <div
+                    class="euiTextColor euiTextColor--default"
+                  >
+                    <p>
+                      Deleting this entry will remove it from all associated policies.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <div
+                class="euiText euiText--medium"
+              >
                 <p>
                   This action cannot be undone. Are you sure you wish to continue?
                 </p>
@@ -311,7 +401,7 @@ exports[`TrustedAppDeletionDialog renders correctly when dialog started 1`] = `
                 <span
                   class="euiButton__text"
                 >
-                  Remove trusted application
+                  Delete
                 </span>
               </span>
             </button>
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
index 3afa2642eba12..9e76cfd001c97 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
@@ -14,6 +14,8 @@ import {
   EuiButtonEmpty,
   EuiButtonProps,
   PropsForButton,
+  EuiCallOut,
+  EuiSpacer,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -22,7 +24,13 @@ import {
   EuiText,
 } from '@elastic/eui';
 
-import { Immutable, TrustedApp } from '../../../../../common/endpoint/types';
+import {
+  Immutable,
+  ImmutableObject,
+  PolicyEffectScope,
+  GlobalEffectScope,
+  TrustedApp,
+} from '../../../../../common/endpoint/types';
 import { AppAction } from '../../../../common/store/actions';
 import { useTrustedAppsSelector } from './hooks';
 import {
@@ -33,19 +41,36 @@ import {
 
 const CANCEL_SUBJ = 'trustedAppDeletionCancel';
 const CONFIRM_SUBJ = 'trustedAppDeletionConfirm';
+const isTrustedAppByPolicy = (
+  trustedApp: ImmutableObject<GlobalEffectScope | PolicyEffectScope>
+): trustedApp is ImmutableObject<PolicyEffectScope> => {
+  return (trustedApp as ImmutableObject<PolicyEffectScope>).policies !== undefined;
+};
 
 const getTranslations = (entry: Immutable<TrustedApp> | undefined) => ({
   title: (
     <FormattedMessage
       id="xpack.securitySolution.trustedapps.deletionDialog.title"
-      defaultMessage="Remove trusted application"
+      defaultMessage='Delete "{name}"'
+      values={{ name: <b className="eui-textBreakWord">{entry?.name}</b> }}
     />
   ),
-  mainMessage: (
+  calloutTitle: (
     <FormattedMessage
-      id="xpack.securitySolution.trustedapps.deletionDialog.mainMessage"
-      defaultMessage='You are removing trusted application "{name}".'
-      values={{ name: <b className="eui-textBreakWord">{entry?.name}</b> }}
+      id="xpack.securitySolution.trustedapps.deletionDialog.calloutTitle"
+      defaultMessage="Warning"
+    />
+  ),
+  calloutMessage: (
+    <FormattedMessage
+      id="xpack.securitySolution.trustedapps.deletionDialog.calloutMessage"
+      defaultMessage="Deleting this entry will remove it from {count} associated {count, plural, one {policy} other {policies}}."
+      values={{
+        count:
+          entry && isTrustedAppByPolicy(entry.effectScope)
+            ? entry.effectScope.policies.length
+            : 'all',
+      }}
     />
   ),
   subMessage: (
@@ -63,7 +88,7 @@ const getTranslations = (entry: Immutable<TrustedApp> | undefined) => ({
   confirmButton: (
     <FormattedMessage
       id="xpack.securitySolution.trustedapps.deletionDialog.confirmButton"
-      defaultMessage="Remove trusted application"
+      defaultMessage="Delete"
     />
   ),
 });
@@ -105,8 +130,11 @@ export const TrustedAppDeletionDialog = memo(() => {
         </EuiModalHeader>
 
         <EuiModalBody>
+          <EuiCallOut title={translations.calloutTitle} color="danger" iconType="alert">
+            <p>{translations.calloutMessage}</p>
+          </EuiCallOut>
+          <EuiSpacer size="m" />
           <EuiText>
-            <p>{translations.mainMessage}</p>
             <p>{translations.subMessage}</p>
           </EuiText>
         </EuiModalBody>
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 336b04392c636..217a6a8bb8d57 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -23514,9 +23514,7 @@
     "xpack.securitySolution.trustedapps.creationSuccess.title": "成功！",
     "xpack.securitySolution.trustedapps.deletionDialog.cancelButton": "キャンセル",
     "xpack.securitySolution.trustedapps.deletionDialog.confirmButton": "信頼できるアプリケーションを削除",
-    "xpack.securitySolution.trustedapps.deletionDialog.mainMessage": "信頼できるアプリケーション「{name}」を削除しています。",
     "xpack.securitySolution.trustedapps.deletionDialog.subMessage": "この操作は元に戻すことができません。続行していいですか？",
-    "xpack.securitySolution.trustedapps.deletionDialog.title": "信頼できるアプリケーションを削除",
     "xpack.securitySolution.trustedapps.deletionError.text": "信頼できるアプリケーションリストから「{name}」を削除できません。理由：{message}",
     "xpack.securitySolution.trustedapps.deletionError.title": "削除失敗",
     "xpack.securitySolution.trustedapps.deletionSuccess.text": "「{name}」は信頼できるアプリケーションリストから削除されました。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index bf43dd5b2e282..8f14b4b22b0f7 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -23896,9 +23896,7 @@
     "xpack.securitySolution.trustedapps.creationSuccess.title": "成功！",
     "xpack.securitySolution.trustedapps.deletionDialog.cancelButton": "取消",
     "xpack.securitySolution.trustedapps.deletionDialog.confirmButton": "移除受信任的应用程序",
-    "xpack.securitySolution.trustedapps.deletionDialog.mainMessage": "您正在移除受信任的应用程序“{name}”。",
     "xpack.securitySolution.trustedapps.deletionDialog.subMessage": "此操作无法撤消。是否确定要继续？",
-    "xpack.securitySolution.trustedapps.deletionDialog.title": "移除受信任的应用程序",
     "xpack.securitySolution.trustedapps.deletionError.text": "无法从受信任的应用程序列表中移除“{name}”。原因：{message}",
     "xpack.securitySolution.trustedapps.deletionError.title": "移除失败",
     "xpack.securitySolution.trustedapps.deletionSuccess.text": "“{name}”已从受信任的应用程序列表中移除。",