FIX: improvements after code review

app/assets/javascripts/admin/addon/components/admin-embedding-host-form.gjs

@@ -24,21 +24,23 @@ export default class AdminEmbeddingHostForm extends Component {
   }
 
   get header() {
-    return this.isUpdate
+    return this.isEditing
       ? "admin.embedding.host_form.edit_header"
       : "admin.embedding.host_form.add_header";
   }
 
   get formData() {
-    if (!this.editing) { return {} }
+    if (!this.isEditing) {
+      return {};
+    }
 
     return {
-        host: this.args.host.host,
+      host: this.args.host.host,
-        allowed_paths: this.args.host.allowed_paths,
+      allowed_paths: this.args.host.allowed_paths,
-        category: this.args.host.category_id,
+      category: this.args.host.category_id,
-        tags: this.args.host.tags,
+      tags: this.args.host.tags,
-        user: isEmpty(this.args.host.user) ? null : [this.args.host.user],
+      user: isEmpty(this.args.host.user) ? null : [this.args.host.user],
-      };
+    };
   }
 
   @action
@@ -51,7 +53,7 @@ export default class AdminEmbeddingHostForm extends Component {
         user: data.user?.at(0),
         category_id: data.category,
       });
-      if (!this.isUpdate) {
+      if (!this.isEditing) {
         this.adminEmbedding.embedding.embeddable_hosts.push(host);
       }
       this.router.transitionTo("adminEmbedding");

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

@@ -0,0 +1,76 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import categoryBadge from "discourse/helpers/category-badge";
+import Category from "discourse/models/category";
+import { i18n } from "discourse-i18n";
+
+export default class EmbeddableHost extends Component {
+  @service dialog;
+  @tracked category = null;
+  @tracked tags = null;
+  @tracked user = null;
+
+  constructor() {
+    super(...arguments);
+
+    this.host = this.args.host;
+    const categoryId =
+      this.host.category_id || this.site.uncategorized_category_id;
+    const category = Category.findById(categoryId);
+
+    this.category = category;
+    this.tags = (this.host.tags || []).join(", ");
+    this.user = this.host.user;
+  }
+
+  @action
+  delete() {
+    return this.dialog.confirm({
+      message: i18n("admin.embedding.confirm_delete"),
+      didConfirm: () => {
+        return this.host.destroyRecord().then(() => {
+          this.args.deleteHost(this.host);
+        });
+      },
+    });
+  }
+
+  <template>
+    <tr class="d-admin-row__content">
+      <td class="d-admin-row__detail">
+        {{this.host.host}}
+      </td>
+      <td class="d-admin-row__detail">
+        {{this.host.allowed_paths}}
+      </td>
+      <td class="d-admin-row__detail">
+        {{categoryBadge this.category allowUncategorized=true}}
+      </td>
+      <td class="d-admin-row__detail">
+        {{this.tags}}
+      </td>
+      <td class="d-admin-row__detail">
+        {{this.user}}
+      </td>
+
+      <td class="d-admin-row__controls">
+        <div class="d-admin-row__controls-options">
+          <DButton
+            class="btn-small admin-embeddable-host-item__edit"
+            @route="adminEmbedding.edit"
+            @routeModels={{this.host}}
+            @label="admin.embedding.edit"
+          />
+          <DButton
+            @action={{this.delete}}
+            @icon="trash-can"
+            class="btn-transparent admin-embeddable-host-item__delete"
+          />
+        </div>
+      </td>
+    </tr>
+  </template>
+}

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

@@ -1,45 +0,0 @@
-<td class="d-admin-row__detail">
-  {{this.host.host}}
-</td>
-<td class="d-admin-row__detail">
-  {{this.host.allowed_paths}}
-</td>
-<td class="d-admin-row__detail">
-  {{category-badge this.category allowUncategorized=true}}
-</td>
-<td class="d-admin-row__detail">
-  {{this.tags}}
-</td>
-<td class="d-admin-row__detail">
-  {{this.user}}
-</td>
-
-<td class="d-admin-row__controls">
-  <div class="d-admin-row__controls-options">
-    <DButton
-      class="btn-small admin-embeddable-host-item__edit"
-      @route="adminEmbedding.edit"
-      @routeModels={{this.host}}
-      @label="admin.embedding.edit"
-    />
-
-    <DMenu
-      @identifier="embedding-host-menu"
-      @title={{i18n "admin.embedding.more_options"}}
-      @icon="ellipsis-vertical"
-    >
-      <:content>
-        <DropdownMenu as |dropdown|>
-          <dropdown.item>
-            <DButton
-              @action={{this.delete}}
-              @icon="trash-can"
-              class="btn-transparent admin-embeddable-host-item__delete"
-              @label="admin.embedding.delete"
-            />
-          </dropdown.item>
-        </DropdownMenu>
-      </:content>
-    </DMenu>
-  </div>
-</td>

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

@@ -1,39 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { classNames, tagName } from "@ember-decorators/component";
-import Category from "discourse/models/category";
-import { i18n } from "discourse-i18n";
-
-@tagName("tr")
-@classNames("d-admin-row__content")
-export default class EmbeddableHost extends Component {
-  @service dialog;
-  category = null;
-  tags = null;
-  user = null;
-
-  init() {
-    super.init(...arguments);
-
-    const host = this.host;
-    const categoryId = host.category_id || this.site.uncategorized_category_id;
-    const category = Category.findById(categoryId);
-
-    this.set("category", category);
-    this.set("tags", (host.tags || []).join(", "));
-    this.set("user", host.user);
-  }
-
-  @action
-  delete() {
-    return this.dialog.confirm({
-      message: i18n("admin.embedding.confirm_delete"),
-      didConfirm: () => {
-        return this.host.destroyRecord().then(() => {
-          this.deleteHost(this.host);
-        });
-      },
-    });
-  }
-}

app/assets/javascripts/admin/addon/routes/admin-embedding-edit.js

@@ -4,7 +4,9 @@ import { i18n } from "discourse-i18n";
 export default class AdminEmbeddingEditRoute extends DiscourseRoute {
   async model(params) {
     const embedding = await this.store.find("embedding");
-    return embedding.embeddable_hosts.find((host) => host.id === parseInt(params.id, 10));
+    return embedding.embeddable_hosts.find(
+      (host) => host.id === parseInt(params.id, 10)
+    );
   }
 
   titleToken() {

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

@@ -903,9 +903,13 @@
   }
 
   .admin-embeddable-host-item__delete {
-    color: var(--danger);
+    &:hover {
+      svg.d-icon {
+        color: var(--primary-medium);
+      }
+    }
     svg.d-icon {
-      color: var(--danger);
+      color: var(--primary-low-mid);
     }
   }
 }

config/locales/client.en.yml

@@ -7314,7 +7314,7 @@ en:
         description: "Discourse has the ability to embed the comments from a topic in a remote site using a Javascript API that creates an IFRAME"
         host: "Allowed Hosts"
         allowed_paths: "Path Allowlist"
-        edit: "edit"
+        edit: "Edit"
         category: "Post to Category"
         tags: "Topic Tags"
         post_author: "Post Author - Defaults to %{author}"
@@ -7335,7 +7335,6 @@ en:
         posts_and_topics_settings_saved: "Posts and Topics settings saved"
         crawler_settings_saved: "Crawler settings saved."
         back: "Back to Embedding"
-        more_options: "More options"
         configuration_snippet: "Configuration snippet"
         host_form:
           add_header: "Add host"

config/site_settings.yml

@@ -1217,7 +1217,7 @@ posting:
     area: "embedding"
   allowed_embed_selectors:
     default: ""
-    hidden: true
+    area: "embedding"
   allowed_href_schemes:
     client: true
     default: ""

spec/system/admin_embeddable_hosts_spec.rb

@@ -54,7 +54,6 @@ RSpec.describe "Admin EmbeddableHost Management", type: :system do
     expect(page).to have_content("#{category_2.name}")
     expect(page).to have_content("#{author_2.username}")
 
-    admin_embedding_page.open_embedding_host_menu
     admin_embedding_page.click_delete
     admin_embedding_page.confirm_delete
 

spec/system/page_objects/pages/admin_embedding.rb

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