DEV: Remove 'htmlSafe' string prototype extensions (#16766)

Context: https://deprecations.emberjs.com/v3.x/#toc_ember-string-prototype_extensions
2022-05-13 14:58:26 -05:00 · 2022-05-13 14:58:26 -05:00 · 85ceafb4dc
parent 9eadabe9fc
commit 85ceafb4dc
33 changed files with 179 additions and 110 deletions
--- a/app/assets/javascripts/admin/addon/components/admin-web-hook-status.js
+++ b/app/assets/javascripts/admin/addon/components/admin-web-hook-status.js
@ -2,6 +2,7 @@ import Component from "@ember/component";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  classes: ["text-muted", "text-danger", "text-successful", "text-muted"],
@ -28,7 +29,7 @@ export default Component.extend({
    this._super(...arguments);
    this.set(
      "circleIcon",
-      iconHTML(this.icon, { class: this.class }).htmlSafe()
+      htmlSafe(iconHTML(this.icon, { class: this.class }))
    );
    this.set(
      "deliveryStatus",
--- a/app/assets/javascripts/admin/addon/helpers/disposition-icon.js
+++ b/app/assets/javascripts/admin/addon/helpers/disposition-icon.js
@ -1,5 +1,6 @@
 import Helper from "@ember/component/helper";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { htmlSafe } from "@ember/template";

 export default Helper.extend({
  compute([disposition]) {
@ -22,6 +23,6 @@ export default Helper.extend({
        break;
      }
    }
-    return iconHTML(icon, { title }).htmlSafe();
+    return htmlSafe(iconHTML(icon, { title }));
  },
 });
--- a/app/assets/javascripts/discourse/app/components/color-picker-choice.js
+++ b/app/assets/javascripts/discourse/app/components/color-picker-choice.js
@ -1,6 +1,7 @@
 import Component from "@ember/component";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  tagName: "button",
@ -19,7 +20,7 @@ export default Component.extend({

  @discourseComputed("color")
  style(color) {
-    return `background-color: #${color};`.htmlSafe();
+    return htmlSafe(`background-color: #${color};`);
  },

  click(e) {
--- a/app/assets/javascripts/discourse/app/components/composer-action-title.js
+++ b/app/assets/javascripts/discourse/app/components/composer-action-title.js
@ -11,6 +11,7 @@ import I18n from "I18n";
 import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { htmlSafe } from "@ember/template";

 const TITLES = {
  [PRIVATE_MESSAGE]: "topic.private_message",
@ -71,17 +72,19 @@ export default Component.extend({
      `;
    }

-    return editTitle.htmlSafe();
+    return htmlSafe(editTitle);
  },

  _formatReplyToTopic(link) {
-    return `<a class="topic-link" href="${link.href}" data-topic-id="${this.get(
-      "model.topic.id"
-    )}">${link.anchor}</a>`.htmlSafe();
+    return htmlSafe(
+      `<a class="topic-link" href="${link.href}" data-topic-id="${this.get(
+        "model.topic.id"
+      )}">${link.anchor}</a>`
+    );
  },

  _formatReplyToUserPost(avatar, link) {
    const htmlLink = `<a class="user-link" href="${link.href}">${link.anchor}</a>`;
-    return `${avatar}${htmlLink}`.htmlSafe();
+    return htmlSafe(`${avatar}${htmlLink}`);
  },
 });
--- a/app/assets/javascripts/discourse/app/components/count-i18n.js
+++ b/app/assets/javascripts/discourse/app/components/count-i18n.js
@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import I18n from "I18n";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  tagName: "span",
@ -10,7 +11,7 @@ export default Component.extend({
    this._super(...arguments);
    this.set(
      "i18nCount",
-      I18n.t(this.key + (this.suffix || ""), { count: this.count }).htmlSafe()
+      htmlSafe(I18n.t(this.key + (this.suffix || ""), { count: this.count }))
    );
  },
 });
--- a/app/assets/javascripts/discourse/app/components/input-tip.js
+++ b/app/assets/javascripts/discourse/app/components/input-tip.js
@ -1,6 +1,7 @@
 import { alias, not } from "@ember/object/computed";
 import Component from "@ember/component";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  classNameBindings: [":tip", "good", "bad"],
@ -12,7 +13,7 @@ export default Component.extend({

  tipIconHTML() {
    let icon = iconHTML(this.good ? "check" : "times");
-    return `${icon}`.htmlSafe();
+    return htmlSafe(`${icon}`);
  },

  didReceiveAttrs() {
--- a/app/assets/javascripts/discourse/app/components/nav-item.js
+++ b/app/assets/javascripts/discourse/app/components/nav-item.js
@ -4,6 +4,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 /* You might be looking for navigation-item. */
 import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  tagName: "li",
@ -14,7 +15,7 @@ export default Component.extend({
  contents(label, i18nLabel, icon) {
    let text = i18nLabel || I18n.t(label);
    if (icon) {
-      return `${iconHTML(icon)} ${text}`.htmlSafe();
+      return htmlSafe(`${iconHTML(icon)} ${text}`);
    }
    return text;
  },
--- a/app/assets/javascripts/discourse/app/components/popup-input-tip.js
+++ b/app/assets/javascripts/discourse/app/components/popup-input-tip.js
@ -2,6 +2,7 @@ import { not, or, reads } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { getOwner } from "discourse-common/lib/get-owner";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
@ -34,7 +35,7 @@ export default Component.extend({
    this._super(...arguments);
    let reason = this.get("validation.reason");
    if (reason) {
-      this.set("tipReason", `${reason}`.htmlSafe());
+      this.set("tipReason", htmlSafe(`${reason}`));
    } else {
      this.set("tipReason", null);
    }
--- a/app/assets/javascripts/discourse/app/components/table-header-toggle.js
+++ b/app/assets/javascripts/discourse/app/components/table-header-toggle.js
@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  tagName: "th",
@ -22,7 +23,7 @@ export default Component.extend({
  toggleChevron() {
    if (this.order === this.field) {
      let chevron = iconHTML(this.asc ? "chevron-up" : "chevron-down");
-      this.set("chevronIcon", `${chevron}`.htmlSafe());
+      this.set("chevronIcon", htmlSafe(`${chevron}`));
    } else {
      this.set("chevronIcon", null);
    }
--- a/app/assets/javascripts/discourse/app/components/time-input.js
+++ b/app/assets/javascripts/discourse/app/components/time-input.js
@ -1,6 +1,7 @@
 import { action, computed } from "@ember/object";
 import Component from "@ember/component";
 import { isPresent } from "@ember/utils";
+import { htmlSafe } from "@ember/template";

 function convertMinutes(num) {
  return { hours: Math.floor(num / 60), minutes: num % 60 };
@ -117,9 +118,9 @@ export default Component.extend({

      if (this.minimumTime) {
        const diff = option - this.minimumTime;
-        label = `${name} <small>(${convertMinutesToDurationString(
-          diff
-        )})</small>`.htmlSafe();
+        label = htmlSafe(
+          `${name} <small>(${convertMinutesToDurationString(diff)})</small>`
+        );
      }

      return {
--- a/app/assets/javascripts/discourse/app/components/topic-list-item.js
+++ b/app/assets/javascripts/discourse/app/components/topic-list-item.js
@ -12,6 +12,7 @@ import { on } from "@ember/object/evented";
 import { schedule } from "@ember/runloop";
 import { topicTitleDecorators } from "discourse/components/topic-title";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
+import { htmlSafe } from "@ember/template";

 export function showEntrance(e) {
  let target = $(e.target);
@ -55,7 +56,7 @@ export default Component.extend({
    if (template) {
      this.set(
        "topicListItemContents",
-        template(this, RUNTIME_OPTIONS).htmlSafe()
+        htmlSafe(template(this, RUNTIME_OPTIONS))
      );
      schedule("afterRender", () => {
        if (this.selected && this.selected.includes(this.topic)) {
--- a/app/assets/javascripts/discourse/app/components/topic-status.js
+++ b/app/assets/javascripts/discourse/app/components/topic-status.js
@ -2,6 +2,7 @@ import Component from "@ember/component";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  disableActions: false,
@ -79,7 +80,7 @@ export default Component.extend({
  },

  _set(name, icon, key, iconArgs = null) {
-    this.set(`${name}Icon`, iconHTML(`${icon}`, iconArgs).htmlSafe());
+    this.set(`${name}Icon`, htmlSafe(iconHTML(`${icon}`, iconArgs)));
    this.set(`${name}Title`, I18n.t(`topic_statuses.${key}.help`));
    return true;
  },
--- a/app/assets/javascripts/discourse/app/components/topic-timer-info.js
+++ b/app/assets/javascripts/discourse/app/components/topic-timer-info.js
@ -6,11 +6,12 @@ import I18n from "I18n";
 import discourseComputed, { on } from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { isTesting } from "discourse-common/config/environment";
+import { htmlSafe } from "@ember/template";

 export default Component.extend({
  classNames: ["topic-timer-info"],
  _delayedRerender: null,
-  clockIcon: `${iconHTML("far-clock")}`.htmlSafe(),
+  clockIcon: htmlSafe(`${iconHTML("far-clock")}`),
  trashLabel: I18n.t("post.controls.remove_timer"),
  title: null,
  notice: null,
@ -104,8 +105,8 @@ export default Component.extend({

      options = Object.assign(options, this.additionalOpts());
      this.setProperties({
-        title: `${moment(this.executeAt).format("LLLL")}`.htmlSafe(),
-        notice: `${I18n.t(this._noticeKey(), options)}`.htmlSafe(),
+        title: htmlSafe(`${moment(this.executeAt).format("LLLL")}`),
+        notice: htmlSafe(`${I18n.t(this._noticeKey(), options)}`),
        showTopicTimer: true,
      });

--- a/app/assets/javascripts/discourse/app/components/uppy-image-uploader.js
+++ b/app/assets/javascripts/discourse/app/components/uppy-image-uploader.js
@ -6,6 +6,7 @@ import { getURLWithCDN } from "discourse-common/lib/get-url";
 import { isEmpty } from "@ember/utils";
 import lightbox from "discourse/lib/lightbox";
 import { next } from "@ember/runloop";
+import { htmlSafe } from "@ember/template";

 export default Component.extend(UppyUploadMixin, {
  classNames: ["image-uploader"],
@ -19,15 +20,15 @@ export default Component.extend(UppyUploadMixin, {
  @discourseComputed("placeholderUrl")
  placeholderStyle(url) {
    if (isEmpty(url)) {
-      return "".htmlSafe();
+      return htmlSafe("");
    }
-    return `background-image: url(${url})`.htmlSafe();
+    return htmlSafe(`background-image: url(${url})`);
  },

  @discourseComputed("imageUrl")
  imageCDNURL(url) {
    if (isEmpty(url)) {
-      return "".htmlSafe();
+      return htmlSafe("");
    }

    return getURLWithCDN(url);
@ -35,7 +36,7 @@ export default Component.extend(UppyUploadMixin, {

  @discourseComputed("imageCDNURL")
  backgroundStyle(url) {
-    return `background-image: url(${url})`.htmlSafe();
+    return htmlSafe(`background-image: url(${url})`);
  },

  @discourseComputed("imageUrl")
--- a/app/assets/javascripts/discourse/app/controllers/user-activity-bookmarks.js
+++ b/app/assets/javascripts/discourse/app/controllers/user-activity-bookmarks.js
@ -7,6 +7,7 @@ import { ajax } from "discourse/lib/ajax";
 import Bookmark from "discourse/models/bookmark";
 import I18n from "I18n";
 import { Promise } from "rsvp";
+import { htmlSafe } from "@ember/template";

 export default Controller.extend({
  queryParams: ["q"],
@ -31,9 +32,11 @@ export default Controller.extend({

  @discourseComputed()
  emptyStateBody() {
-    return I18n.t("user.no_bookmarks_body", {
-      icon: iconHTML("bookmark"),
-    }).htmlSafe();
+    return htmlSafe(
+      I18n.t("user.no_bookmarks_body", {
+        icon: iconHTML("bookmark"),
+      })
+    );
  },

  @discourseComputed("inSearchMode", "noContent")
--- a/app/assets/javascripts/discourse/app/controllers/user-notifications.js
+++ b/app/assets/javascripts/discourse/app/controllers/user-notifications.js
@ -5,6 +5,7 @@ import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
 import showModal from "discourse/lib/show-modal";
 import I18n from "I18n";
+import { htmlSafe } from "@ember/template";

 export default Controller.extend({
  application: controller(),
@ -40,10 +41,12 @@ export default Controller.extend({

  @discourseComputed()
  emptyStateBody() {
-    return I18n.t("user.no_notifications_page_body", {
-      preferencesUrl: getURL("/my/preferences/notifications"),
-      icon: iconHTML("bell"),
-    }).htmlSafe();
+    return htmlSafe(
+      I18n.t("user.no_notifications_page_body", {
+        preferencesUrl: getURL("/my/preferences/notifications"),
+        icon: iconHTML("bell"),
+      })
+    );
  },

  markRead() {
--- a/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js
@ -3,6 +3,7 @@ import UserActivityStreamRoute from "discourse/routes/user-activity-stream";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
 import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";

 export default UserActivityStreamRoute.extend({
  userActionType: UserAction.TYPES["likes_given"],
@ -10,9 +11,11 @@ export default UserActivityStreamRoute.extend({

  emptyState() {
    const title = I18n.t("user_activity.no_likes_title");
-    const body = I18n.t("user_activity.no_likes_body", {
-      heartIcon: iconHTML("heart"),
-    }).htmlSafe();
+    const body = htmlSafe(
+      I18n.t("user_activity.no_likes_body", {
+        heartIcon: iconHTML("heart"),
+      })
+    );

    return { title, body };
  },
--- a/app/assets/javascripts/discourse/app/routes/user-activity-read.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-read.js
@ -4,6 +4,7 @@ import { action } from "@ember/object";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import getURL from "discourse-common/lib/get-url";
 import I18n from "I18n";
+import { htmlSafe } from "@ember/template";

 export default UserTopicListRoute.extend({
  userActionType: UserAction.TYPES.topics,
@ -31,11 +32,13 @@ export default UserTopicListRoute.extend({

  emptyState() {
    const title = I18n.t("user_activity.no_read_topics_title");
-    const body = I18n.t("user_activity.no_read_topics_body", {
-      topUrl: getURL("/top"),
-      categoriesUrl: getURL("/categories"),
-      searchIcon: iconHTML("search"),
-    }).htmlSafe();
+    const body = htmlSafe(
+      I18n.t("user_activity.no_read_topics_body", {
+        topUrl: getURL("/top"),
+        categoriesUrl: getURL("/categories"),
+        searchIcon: iconHTML("search"),
+      })
+    );
    return { title, body };
  },

--- a/app/assets/javascripts/discourse/app/widgets/post-small-action.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
@ -7,6 +7,7 @@ import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { userPath } from "discourse/lib/url";
+import { htmlSafe } from "@ember/template";

 export function actionDescriptionHtml(actionCode, createdAt, username, path) {
  const dt = new Date(createdAt);
@ -22,7 +23,7 @@ export function actionDescriptionHtml(actionCode, createdAt, username, path) {
      who = `<a class="mention" href="${userPath(username)}">@${username}</a>`;
    }
  }
-  return I18n.t(`action_codes.${actionCode}`, { who, when, path }).htmlSafe();
+  return htmlSafe(I18n.t(`action_codes.${actionCode}`, { who, when, path }));
 }

 export function actionDescription(actionCode, createdAt, username) {
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-bookmarks.js
@ -6,6 +6,7 @@ import { createWidget, createWidgetFrom } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
 import { postUrl } from "discourse/lib/utilities";
 import I18n from "I18n";
+import { htmlSafe } from "@ember/template";

 const ICON = "bookmark";

@ -18,9 +19,11 @@ createWidget("no-quick-access-bookmarks", {
        new RawHtml({
          html:
            "<p>" +
-            I18n.t("user.no_bookmarks_body", {
-              icon: iconHTML(ICON),
-            }).htmlSafe() +
+            htmlSafe(
+              I18n.t("user.no_bookmarks_body", {
+                icon: iconHTML(ICON),
+              })
+            ) +
            "</p>",
        })
      ),
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
@ -6,6 +6,7 @@ import { createWidget, createWidgetFrom } from "discourse/widgets/widget";
 import { postUrl } from "discourse/lib/utilities";
 import getURL from "discourse-common/lib/get-url";
 import I18n from "I18n";
+import { htmlSafe } from "@ember/template";

 const ICON = "notification.private_message";

@ -34,10 +35,12 @@ createWidget("no-quick-access-messages", {
        new RawHtml({
          html:
            "<p>" +
-            I18n.t("user.no_messages_body", {
-              aboutUrl: getURL("/about"),
-              icon: iconHTML("envelope"),
-            }).htmlSafe() +
+            htmlSafe(
+              I18n.t("user.no_messages_body", {
+                aboutUrl: getURL("/about"),
+                icon: iconHTML("envelope"),
+              })
+            ) +
            "</p>",
        })
      ),
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js
+++ b/app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js
@ -7,6 +7,7 @@ import { createWidget, createWidgetFrom } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
 import I18n from "I18n";
 import { dasherize } from "@ember/string";
+import { htmlSafe } from "@ember/template";

 const ICON = "bell";

@ -19,10 +20,12 @@ createWidget("no-quick-access-notifications", {
        new RawHtml({
          html:
            "<p>" +
-            I18n.t("user.no_notifications_body", {
-              preferencesUrl: getURL("/my/preferences/notifications"),
-              icon: iconHTML(ICON),
-            }).htmlSafe() +
+            htmlSafe(
+              I18n.t("user.no_notifications_body", {
+                preferencesUrl: getURL("/my/preferences/notifications"),
+                icon: iconHTML(ICON),
+              })
+            ) +
            "</p>",
        })
      ),
--- a/app/assets/javascripts/select-kit/addon/components/category-chooser.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-chooser.js
@ -6,6 +6,7 @@ import PermissionType from "discourse/models/permission-type";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { isNone } from "@ember/utils";
 import { setting } from "discourse/lib/computed";
+import { htmlSafe } from "@ember/template";

 export default ComboBoxComponent.extend({
  pluginApiIdentifiers: ["category-chooser"],
@ -33,9 +34,9 @@ export default ComboBoxComponent.extend({
      const isString = typeof none === "string";
      return this.defaultItem(
        null,
-        I18n.t(
-          isString ? this.selectKit.options.none : "category.none"
-        ).htmlSafe()
+        htmlSafe(
+          I18n.t(isString ? this.selectKit.options.none : "category.none")
+        )
      );
    } else if (
      this.allowUncategorizedTopics ||
@ -43,7 +44,7 @@ export default ComboBoxComponent.extend({
    ) {
      return Category.findUncategorized();
    } else {
-      return this.defaultItem(null, I18n.t("category.choose").htmlSafe());
+      return this.defaultItem(null, htmlSafe(I18n.t("category.choose")));
    }
  },

@ -54,12 +55,14 @@ export default ComboBoxComponent.extend({
      set(
        content,
        "label",
-        categoryBadgeHTML(category, {
-          link: false,
-          hideParent: category ? !!category.parent_category_id : true,
-          allowUncategorized: true,
-          recursive: true,
-        }).htmlSafe()
+        htmlSafe(
+          categoryBadgeHTML(category, {
+            link: false,
+            hideParent: category ? !!category.parent_category_id : true,
+            allowUncategorized: true,
+            recursive: true,
+          })
+        )
      );
    }

--- a/app/assets/javascripts/select-kit/addon/components/category-drop.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-drop.js
@ -8,6 +8,7 @@ import I18n from "I18n";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { computed } from "@ember/object";
 import { readOnly } from "@ember/object/computed";
+import { htmlSafe } from "@ember/template";

 export const NO_CATEGORIES_ID = "no-categories";
 export const ALL_CATEGORIES_ID = "all-categories";
@ -100,11 +101,13 @@ export default ComboBoxComponent.extend({
    if (this.value) {
      const category = Category.findById(this.value);
      content.title = category.title;
-      content.label = categoryBadgeHTML(category, {
-        link: false,
-        allowUncategorized: true,
-        hideParent: true,
-      }).htmlSafe();
+      content.label = htmlSafe(
+        categoryBadgeHTML(category, {
+          link: false,
+          allowUncategorized: true,
+          hideParent: true,
+        })
+      );
    }

    return content;
--- a/app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js
@ -3,6 +3,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import layout from "select-kit/templates/components/category-drop/category-drop-header";
 import { readOnly } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
+import { htmlSafe } from "@ember/template";

 export default ComboBoxSelectBoxHeaderComponent.extend({
  layout,
@ -43,7 +44,7 @@ export default ComboBoxSelectBoxHeaderComponent.extend({
            }
          }
        }
-        return style.htmlSafe();
+        return htmlSafe(style);
      }
    }
  },
--- a/app/assets/javascripts/select-kit/addon/components/category-row.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-row.js
@ -6,6 +6,7 @@ import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { computed } from "@ember/object";
 import layout from "select-kit/templates/components/category-row";
 import { setting } from "discourse/lib/computed";
+import { htmlSafe } from "@ember/template";

 export default SelectKitRowComponent.extend({
  layout,
@ -49,22 +50,26 @@ export default SelectKitRowComponent.extend({
  }),

  badgeForCategory: computed("category", "parentCategory", function () {
-    return categoryBadgeHTML(this.category, {
-      link: this.categoryLink,
-      allowUncategorized:
-        this.allowUncategorizedTopics || this.allowUncategorized,
-      hideParent: !!this.parentCategory,
-      topicCount: this.topicCount,
-    }).htmlSafe();
+    return htmlSafe(
+      categoryBadgeHTML(this.category, {
+        link: this.categoryLink,
+        allowUncategorized:
+          this.allowUncategorizedTopics || this.allowUncategorized,
+        hideParent: !!this.parentCategory,
+        topicCount: this.topicCount,
+      })
+    );
  }),

  badgeForParentCategory: computed("parentCategory", function () {
-    return categoryBadgeHTML(this.parentCategory, {
-      link: this.categoryLink,
-      allowUncategorized:
-        this.allowUncategorizedTopics || this.allowUncategorized,
-      recursive: true,
-    }).htmlSafe();
+    return htmlSafe(
+      categoryBadgeHTML(this.parentCategory, {
+        link: this.categoryLink,
+        allowUncategorized:
+          this.allowUncategorizedTopics || this.allowUncategorized,
+        recursive: true,
+      })
+    );
  }),

  parentCategory: computed("parentCategoryId", function () {
--- a/app/assets/javascripts/select-kit/addon/components/category-selector.js
+++ b/app/assets/javascripts/select-kit/addon/components/category-selector.js
@ -5,6 +5,7 @@ import MultiSelectComponent from "select-kit/components/multi-select";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { makeArray } from "discourse-common/lib/helpers";
 import { mapBy } from "@ember/object/computed";
+import { htmlSafe } from "@ember/template";

 export default MultiSelectComponent.extend({
  pluginApiIdentifiers: ["category-selector"],
@ -70,11 +71,13 @@ export default MultiSelectComponent.extend({
              name: result[0].name,
              count: subcategoryIds.size - 1,
            }),
-            label: categoryBadgeHTML(result[0], {
-              link: false,
-              recursive: true,
-              plusSubcategories: subcategoryIds.size - 1,
-            }).htmlSafe(),
+            label: htmlSafe(
+              categoryBadgeHTML(result[0], {
+                link: false,
+                recursive: true,
+                plusSubcategories: subcategoryIds.size - 1,
+              })
+            ),
          })
        );
      }
--- a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.js
+++ b/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.js
@ -1,27 +1,30 @@
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 import { computed } from "@ember/object";
 import layout from "select-kit/templates/components/color-palettes/color-palettes-row";
+import { htmlSafe } from "@ember/template";

 export default SelectKitRowComponent.extend({
  classNames: ["color-palettes-row"],
  layout,

  palettes: computed("item.colors.[]", function () {
-    return (this.item.colors || [])
-      .filter((color) => color.name !== "secondary")
-      .map((color) => `#${escape(color.hex)}`)
-      .map(
-        (hex) => `<span class="palette" style="background-color:${hex}"></span>`
-      )
-      .join("")
-      .htmlSafe();
+    return htmlSafe(
+      (this.item.colors || [])
+        .filter((color) => color.name !== "secondary")
+        .map((color) => `#${escape(color.hex)}`)
+        .map(
+          (hex) =>
+            `<span class="palette" style="background-color:${hex}"></span>`
+        )
+        .join("")
+    );
  }),

  backgroundColor: computed("item.colors.[]", function () {
    const secondary = (this.item.colors || []).findBy("name", "secondary");

    if (secondary && secondary.hex) {
-      return `background-color:#${escape(secondary.hex)}`.htmlSafe();
+      return htmlSafe(`background-color:#${escape(secondary.hex)}`);
    } else {
      return "";
    }
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.js
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.js
@ -2,15 +2,18 @@ import SelectedNameComponent from "select-kit/components/selected-name";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { computed } from "@ember/object";
 import layout from "select-kit/templates/components/multi-select/selected-category";
+import { htmlSafe } from "@ember/template";

 export default SelectedNameComponent.extend({
  classNames: ["selected-category"],
  layout,

  badge: computed("item", function () {
-    return categoryBadgeHTML(this.item, {
-      allowUncategorized: true,
-      link: false,
-    }).htmlSafe();
+    return htmlSafe(
+      categoryBadgeHTML(this.item, {
+        allowUncategorized: true,
+        link: false,
+      })
+    );
  }),
 });
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-color.js
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-color.js
@ -1,11 +1,14 @@
 import SelectedNameComponent from "select-kit/components/selected-name";
 import discourseComputed from "discourse-common/utils/decorators";
+import { htmlSafe } from "@ember/template";

 export default SelectedNameComponent.extend({
  classNames: ["select-kit-selected-color"],

  @discourseComputed("name")
  footerContent(name) {
-    return `<span class="color-preview" style="background:#${name}"></span>`.htmlSafe();
+    return htmlSafe(
+      `<span class="color-preview" style="background:#${name}"></span>`
+    );
  },
 });
--- a/app/assets/javascripts/select-kit/addon/components/none-category-row.js
+++ b/app/assets/javascripts/select-kit/addon/components/none-category-row.js
@ -2,6 +2,7 @@ import CategoryRowComponent from "select-kit/components/category-row";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import discourseComputed from "discourse-common/utils/decorators";
 import layout from "select-kit/templates/components/category-row";
+import { htmlSafe } from "@ember/template";

 export default CategoryRowComponent.extend({
  layout,
@ -9,10 +10,12 @@ export default CategoryRowComponent.extend({

  @discourseComputed("category")
  badgeForCategory(category) {
-    return categoryBadgeHTML(category, {
-      link: this.categoryLink,
-      allowUncategorized: true,
-      hideParent: true,
-    }).htmlSafe();
+    return htmlSafe(
+      categoryBadgeHTML(category, {
+        link: this.categoryLink,
+        allowUncategorized: true,
+        hideParent: true,
+      })
+    );
  },
 });
--- a/app/assets/javascripts/select-kit/addon/components/pinned-options.js
+++ b/app/assets/javascripts/select-kit/addon/components/pinned-options.js
@ -1,6 +1,7 @@
 import { action, computed } from "@ember/object";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
 import I18n from "I18n";
+import { htmlSafe } from "@ember/template";

 const UNPINNED = "unpinned";
 const PINNED = "pinned";
@ -20,7 +21,7 @@ export default DropdownSelectBoxComponent.extend({
    const state = pinned ? `pinned${globally}` : UNPINNED;
    const title = I18n.t(`topic_statuses.${state}.title`);

-    content.label = `<span>${title}</span>`.htmlSafe();
+    content.label = htmlSafe(`<span>${title}</span>`);
    content.title = title;
    content.name = state;
    content.icon = `thumbtack${state === UNPINNED ? " unpinned" : ""}`;
--- a/app/assets/javascripts/select-kit/addon/components/selected-choice-category.js
+++ b/app/assets/javascripts/select-kit/addon/components/selected-choice-category.js
@ -2,6 +2,7 @@ import layout from "select-kit/templates/components/selected-choice-category";
 import SelectedChoiceComponent from "select-kit/components/selected-choice";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { computed } from "@ember/object";
+import { htmlSafe } from "@ember/template";

 export default SelectedChoiceComponent.extend({
  tagName: "",
@ -9,9 +10,11 @@ export default SelectedChoiceComponent.extend({
  extraClass: "selected-choice-category",

  badge: computed("item", function () {
-    return categoryBadgeHTML(this.item, {
-      allowUncategorized: true,
-      link: false,
-    }).htmlSafe();
+    return htmlSafe(
+      categoryBadgeHTML(this.item, {
+        allowUncategorized: true,
+        link: false,
+      })
+    );
  }),
 });