From 51a444ab537604aa969a5d0f1925737697441d63 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Tue, 7 Jan 2025 14:05:45 +1100
Subject: [PATCH] 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
---
 .../addon/components/admin-flag-item.gjs      |  2 +-
 .../components/admin-user-field-item.gjs      |  2 +-
 .../addon/components/embeddable-host.gjs      | 26 +++++++++++++++----
 .../admin/addon/templates/backups-index.hbs   | 20 +++++++-------
 .../addon/templates/permalinks-index.hbs      |  4 +--
 .../stylesheets/common/admin/admin_base.scss  |  1 -
 .../stylesheets/common/admin/customize.scss   |  8 +++---
 .../stylesheets/common/admin/flags.scss       | 11 --------
 .../stylesheets/common/admin/user_fields.scss | 10 -------
 config/locales/client.en.yml                  |  4 ++-
 .../page_objects/pages/admin_embedding.rb     |  6 +++++
 11 files changed, 47 insertions(+), 47 deletions(-)
 delete mode 100644 app/assets/stylesheets/common/admin/user_fields.scss

diff --git a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs b/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
index 075c6eba78c..71a643d041c 100644
--- a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs
+++ b/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}}
diff --git a/app/assets/javascripts/admin/addon/components/admin-user-field-item.gjs b/app/assets/javascripts/admin/addon/components/admin-user-field-item.gjs
index 9097ffc4551..d7eb1273855 100644
--- a/app/assets/javascripts/admin/addon/components/admin-user-field-item.gjs
+++ b/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>
diff --git a/app/assets/javascripts/admin/addon/components/embeddable-host.gjs b/app/assets/javascripts/admin/addon/components/embeddable-host.gjs
index 1f24a765c0f..4d0eb329534 100644
--- a/app/assets/javascripts/admin/addon/components/embeddable-host.gjs
+++ b/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>
diff --git a/app/assets/javascripts/admin/addon/templates/backups-index.hbs b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
index faf2692b51b..817c78c915f 100644
--- a/app/assets/javascripts/admin/addon/templates/backups-index.hbs
+++ b/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>
diff --git a/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs b/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
index 9e6cb6c37c4..e9987727728 100644
--- a/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
+++ b/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>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 9e6cffca04d..e51bd3c4567 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/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";
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 20a7a97b629..9c437d6ea6f 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/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);
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/flags.scss b/app/assets/stylesheets/common/admin/flags.scss
index baa7c43b41c..9f6bfb7e8f7 100644
--- a/app/assets/stylesheets/common/admin/flags.scss
+++ b/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;
diff --git a/app/assets/stylesheets/common/admin/user_fields.scss b/app/assets/stylesheets/common/admin/user_fields.scss
deleted file mode 100644
index bb5da5f08d3..00000000000
--- a/app/assets/stylesheets/common/admin/user_fields.scss
+++ /dev/null
@@ -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);
-    }
-  }
-}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index fcc210adba2..d95b944f2f8 100644
--- a/config/locales/client.en.yml
+++ b/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>."
diff --git a/spec/system/page_objects/pages/admin_embedding.rb b/spec/system/page_objects/pages/admin_embedding.rb
index 50b358034c7..1fdec9a277a 100644
--- a/spec/system/page_objects/pages/admin_embedding.rb
+++ b/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