UX: Display a tooltip when trying to delete an automatic group. (#12493)

app/assets/javascripts/discourse/app/controllers/group.js

@@ -21,6 +21,7 @@ export default Controller.extend({
   counts: null,
   showing: "members",
   destroying: null,
+  showTooltip: false,
 
   @discourseComputed(
     "showMessages",
@@ -169,6 +170,11 @@ export default Controller.extend({
     );
   },
 
+  @action
+  toggleDeleteTooltip() {
+    this.toggleProperty("showTooltip");
+  },
+
   actions: {
     destroy() {
       deprecated("Use `destroyGroup` action instead of `destroy`.", {

app/assets/javascripts/discourse/app/templates/group.hbs

@@ -1,6 +1,12 @@
 {{plugin-outlet name="before-group-container" args=(hash group=model)}}
 
 <div class="container group {{model.name}}">
+  {{#if showTooltip}}
+    <div class="group-delete-tooltip">
+      <p>{{i18n "admin.groups.delete_automatic_group"}}</p>
+    </div>
+  {{/if}}
+
   <div class="group-details-container">
     <div class="group-info">
       {{#if model.flair_url}}
@@ -37,13 +43,22 @@
         {{/if}}
 
         {{#if currentUser.admin}}
-          {{d-button
-            action=(action "destroy")
-            disabled=destroying
-            icon="trash-alt"
-            class="btn-danger"
-            label="admin.groups.delete"
-          }}
+          {{#if model.automatic}}
+            {{d-button
+              action=(action "toggleDeleteTooltip")
+              class="btn-default"
+              icon="question-circle"
+              label="admin.groups.delete"
+            }}
+          {{else}}
+            {{d-button
+              action=(action "destroy")
+              disabled=destroying
+              icon="trash-alt"
+              class="btn-danger"
+              label="admin.groups.delete"
+            }}
+          {{/if}}
         {{/if}}
       </div>
 

app/assets/stylesheets/common/base/group.scss

@@ -13,6 +13,12 @@ span.mention-group {
   position: relative;
 }
 
+.group-delete-tooltip {
+  background-color: var(--tertiary-low);
+  padding: 0.1em 2.5em 0.1em 1em;
+  margin-bottom: 10px;
+}
+
 .group-outlet {
   position: relative;
 }

config/locales/client.en.yml

@@ -3875,6 +3875,7 @@ en:
           one: "Deleting this group will cause %{count} message to be orphaned, group members will no longer have access to it.<br><br>Are you sure?"
           other: "Deleting this group will cause %{count} messages to be orphaned, group members will no longer have access to them.<br><br>Are you sure?"
         delete_failed: "Unable to delete group. If this is an automatic group, it cannot be destroyed."
+        delete_automatic_group: This is an automatic group and cannot be deleted.
         delete_owner_confirm: "Remove owner privilege for '%{username}'?"
         add: "Add"
         custom: "Custom"