Alerting: Add more context to delete modals (#69244)

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}

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
+            <p>
-            <br />
+              Deleting &quot;<strong>{group.name}</strong>&quot; will permanently remove the group and{' '}
-            and {group.rules.length} alert {pluralize('rule', group.rules.length)} belonging to it.
+              {group.rules.length} alert {pluralize('rule', group.rules.length)} belonging to it.
-            <br />
+            </p>
-            Are you sure you want to delete this group?
+            <p>Are you sure you want to delete this group?</p>
           </div>
         }
         onConfirm={deleteGroup}