FIX: consistent delete button for admin panel (#30592)

Move the delete button to more options to follow guide https://meta.discourse.org/t/creating-consistent-admin-interfaces/326780#p-1605522-h-5d-table-26

app/assets/javascripts/admin/addon/components/admin-flag-item.gjs

@@ -188,7 +188,7 @@ export default class AdminFlagItem extends Component {
                     <DButton
                       @label="admin.config_areas.flags.delete"
                       @icon="trash-can"
-                      class="btn-transparent admin-flag-item__delete"
+                      class="btn-transparent btn-danger admin-flag-item__delete"
                       @action={{this.delete}}
                       @disabled={{not this.canEdit}}
                       @title={{this.deleteTitle}}

app/assets/javascripts/admin/addon/components/admin-user-field-item.gjs

@@ -120,7 +120,7 @@ export default class AdminUserFieldItem extends Component {
                   <DButton
                     @label="admin.config_areas.user_fields.delete"
                     @icon="trash-can"
-                    class="btn-transparent admin-user_field-item__delete"
+                    class="btn-transparent btn-danger admin-user_field-item__delete"
                     @action={{this.destroy}}
                   />
                 </dropdown.item>

app/assets/javascripts/admin/addon/components/embeddable-host.gjs

@@ -3,9 +3,11 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
 import categoryBadge from "discourse/helpers/category-badge";
 import Category from "discourse/models/category";
 import { i18n } from "discourse-i18n";
+import DMenu from "float-kit/components/d-menu";
 
 export default class EmbeddableHost extends Component {
   @service dialog;
@@ -64,11 +66,25 @@ export default class EmbeddableHost extends Component {
             @routeModels={{this.host}}
             @label="admin.embedding.edit"
           />
-          <DButton
-            @action={{this.delete}}
-            @label="admin.embedding.delete"
-            class="btn-default btn-small admin-embeddable-host-item__delete"
-          />
+          <DMenu
+            @identifier="embedding-host-menu"
+            @title={{i18n "admin.embedding.more_options.title"}}
+            @icon="ellipsis-vertical"
+            @onRegisterApi={{this.onRegisterApi}}
+          >
+            <:content>
+              <DropdownMenu as |dropdown|>
+                <dropdown.item>
+                  <DButton
+                    @action={{this.delete}}
+                    @label="admin.embedding.delete"
+                    @icon="trash-can"
+                    class="btn-transparent btn-danger admin-embeddable-host-item__delete"
+                  />
+                </dropdown.item>
+              </DropdownMenu>
+            </:content>
+          </DMenu>
         </div>
       </td>
     </tr>

app/assets/javascripts/admin/addon/templates/backups-index.hbs

@@ -69,16 +69,6 @@
             >
               <:content>
                 <DropdownMenu as |dropdown|>
-                  <dropdown.item>
-                    <DButton
-                      @icon="trash-can"
-                      @action={{fn (route-action "destroyBackup") backup}}
-                      @disabled={{this.status.isOperationRunning}}
-                      @title={{this.deleteTitle}}
-                      @label="admin.backups.operations.destroy.title"
-                      class="btn-transparent btn-danger backup-item-row__delete"
-                    />
-                  </dropdown.item>
                   <dropdown.item>
                     <DButton
                       @icon="play"
@@ -89,6 +79,16 @@
                       class="btn-transparent backup-item-row__restore"
                     />
                   </dropdown.item>
+                  <dropdown.item>
+                    <DButton
+                      @icon="trash-can"
+                      @action={{fn (route-action "destroyBackup") backup}}
+                      @disabled={{this.status.isOperationRunning}}
+                      @title={{this.deleteTitle}}
+                      @label="admin.backups.operations.destroy.title"
+                      class="btn-transparent btn-danger backup-item-row__delete"
+                    />
+                  </dropdown.item>
                 </DropdownMenu>
               </:content>
             </DMenu>

app/assets/javascripts/admin/addon/templates/permalinks-index.hbs

@@ -73,7 +73,7 @@
 
                   <DMenu
                     @identifier="permalink-menu"
-                    @title={{i18n "admin.permalinks.more_options"}}
+                    @title={{i18n "admin.permalink.more_options"}}
                     @icon="ellipsis-vertical"
                     @onRegisterApi={{this.onRegisterApi}}
                   >
@@ -83,7 +83,7 @@
                           <DButton
                             @action={{fn this.destroyRecord pl}}
                             @icon="trash-can"
-                            class="btn-transparent admin-permalink-item__delete"
+                            class="btn-transparent btn-danger admin-permalink-item__delete"
                             @label="admin.config_areas.permalinks.delete"
                           />
                         </dropdown.item>

app/assets/stylesheets/common/admin/admin_base.scss

@@ -1137,7 +1137,6 @@ a.inline-editable-field {
 @import "common/admin/badges";
 @import "common/admin/emails";
 @import "common/admin/flags";
-@import "common/admin/user_fields";
 @import "common/admin/json_schema_editor";
 @import "common/admin/schema_field";
 @import "common/admin/staff_logs";

app/assets/stylesheets/common/admin/customize.scss

@@ -817,14 +817,12 @@
   padding-left: 18px;
 }
 
-.admin-permalink-item {
+.admin-user_field-item,
+.backup-item-row,
+.admin-flag-item {
   &__delete.btn,
   &__delete.btn:hover {
     border-top: 1px solid var(--primary-low);
-    color: var(--danger);
-    svg {
-      color: var(--danger);
-    }
   }
 }
 

app/assets/stylesheets/common/admin/flags.scss

@@ -1,14 +1,3 @@
-.admin-flag-item {
-  &__delete.btn,
-  &__delete.btn:hover {
-    border-top: 1px solid var(--primary-low);
-    color: var(--danger);
-    svg {
-      color: var(--danger);
-    }
-  }
-}
-
 .admin-flags__header {
   display: flex;
   justify-content: space-between;

app/assets/stylesheets/common/admin/user_fields.scss

@@ -1,10 +0,0 @@
-.admin-user_field-item {
-  &__delete.btn,
-  &__delete.btn:hover {
-    border-top: 1px solid var(--primary-low);
-    color: var(--danger);
-    svg {
-      color: var(--danger);
-    }
-  }
-}

config/locales/client.en.yml

@@ -5793,6 +5793,8 @@ en:
         embeddable_host:
           edit: "Edit"
           delete: "Delete"
+          more_options:
+            title: "More options"
         look_and_feel:
           title: "Look and feel"
           description: "Customize and brand your Discourse site, giving it a distinctive style."
@@ -5907,7 +5909,7 @@ en:
             title: "Send email with download link"
             alert: "A link to download this backup has been emailed to you"
           destroy:
-            title: "Remove the backup"
+            title: "Delete"
             confirm: "Are you sure you want to destroy this backup?"
           restore:
             is_disabled: "Restore is currently disabled. To enable it, visit the <a href='%{url}'>site settings</a>."

spec/system/page_objects/pages/admin_embedding.rb

@@ -26,7 +26,13 @@ module PageObjects
         self
       end
 
+      def open_embedding_host_menu
+        find(".embedding-host-menu-trigger").click
+        self
+      end
+
       def click_delete
+        open_embedding_host_menu
         find(".admin-embeddable-host-item__delete").click
         self
       end