From deb13ef6115ac9b34519d2f12c4812aaff68919f Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Wed, 31 May 2023 11:47:17 +0200
Subject: [PATCH] Alerting: Add more context to delete modals (#69244)

---
 .../unified/components/rules/RuleActionsButtons.tsx    | 10 +++++++++-
 .../alerting/unified/components/rules/RulesGroup.tsx   | 10 +++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
index d7cdcc1c05f..3044a988851 100644
--- a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
@@ -154,7 +154,15 @@ export const RuleActionsButtons = ({ rule, rulesSource }: Props) => {
           <ConfirmModal
             isOpen={true}
             title="Delete rule"
-            body="Deleting this rule will permanently remove it from your alert rule list. Are you sure you want to delete this rule?"
+            body={
+              <div>
+                <p>
+                  Deleting &quot;<strong>{ruleToDelete.name}</strong>&quot; will permanently remove it from your alert
+                  rule list.
+                </p>
+                <p>Are you sure you want to delete this rule?</p>
+              </div>
+            }
             confirmText="Yes, delete"
             icon="exclamation-triangle"
             onConfirm={deleteRule}
diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
index 7c1a5c8f3b8..cb5af530f0e 100644
--- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
@@ -261,11 +261,11 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
         title="Delete group"
         body={
           <div>
-            Deleting this group will permanently remove the group
-            <br />
-            and {group.rules.length} alert {pluralize('rule', group.rules.length)} belonging to it.
-            <br />
-            Are you sure you want to delete this group?
+            <p>
+              Deleting &quot;<strong>{group.name}</strong>&quot; will permanently remove the group and{' '}
+              {group.rules.length} alert {pluralize('rule', group.rules.length)} belonging to it.
+            </p>
+            <p>Are you sure you want to delete this group?</p>
           </div>
         }
         onConfirm={deleteGroup}