From 13793a3d8eac36a7805c8f5225d799f655267c95 Mon Sep 17 00:00:00 2001 From: Jarek Radosz Date: Thu, 5 Dec 2024 23:58:43 +0100 Subject: [PATCH] DEV: Convert bookmark-icon to gjs/glimmer (#30136) --- .../app/components/bookmark-icon.gjs | 35 ++++++++++++++++ .../app/components/bookmark-icon.hbs | 1 - .../discourse/app/components/bookmark-icon.js | 42 ------------------- ...rk-icon-test.js => bookmark-icon-test.gjs} | 40 +++++++----------- 4 files changed, 51 insertions(+), 67 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/bookmark-icon.gjs delete mode 100644 app/assets/javascripts/discourse/app/components/bookmark-icon.hbs delete mode 100644 app/assets/javascripts/discourse/app/components/bookmark-icon.js rename app/assets/javascripts/discourse/tests/integration/components/{bookmark-icon-test.js => bookmark-icon-test.gjs} (62%) diff --git a/app/assets/javascripts/discourse/app/components/bookmark-icon.gjs b/app/assets/javascripts/discourse/app/components/bookmark-icon.gjs new file mode 100644 index 00000000000..a1facfcbb73 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/bookmark-icon.gjs @@ -0,0 +1,35 @@ +import Component from "@glimmer/component"; +import { + NO_REMINDER_ICON, + WITH_REMINDER_ICON, +} from "discourse/models/bookmark"; +import icon from "discourse-common/helpers/d-icon"; +import { i18n } from "discourse-i18n"; + +export default class BookmarkIcon extends Component { + get icon() { + if (this.args.bookmark?.get("reminder_at")) { + return WITH_REMINDER_ICON; + } + + return NO_REMINDER_ICON; + } + + get cssClasses() { + return this.args.bookmark + ? "bookmark-icon bookmark-icon__bookmarked" + : "bookmark-icon"; + } + + get title() { + if (!this.args.bookmark) { + return i18n("bookmarks.create"); + } + + return this.args.bookmark.get("reminderTitle"); + } + + +} diff --git a/app/assets/javascripts/discourse/app/components/bookmark-icon.hbs b/app/assets/javascripts/discourse/app/components/bookmark-icon.hbs deleted file mode 100644 index fb00ea5f2b7..00000000000 --- a/app/assets/javascripts/discourse/app/components/bookmark-icon.hbs +++ /dev/null @@ -1 +0,0 @@ -{{d-icon this.icon translatedTitle=this.title class=this.cssClasses}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/bookmark-icon.js b/app/assets/javascripts/discourse/app/components/bookmark-icon.js deleted file mode 100644 index 11389c548ad..00000000000 --- a/app/assets/javascripts/discourse/app/components/bookmark-icon.js +++ /dev/null @@ -1,42 +0,0 @@ -import Component from "@ember/component"; -import { computed } from "@ember/object"; -import { isEmpty } from "@ember/utils"; -import { - NO_REMINDER_ICON, - WITH_REMINDER_ICON, -} from "discourse/models/bookmark"; -import { i18n } from "discourse-i18n"; - -export default class BookmarkIcon extends Component { - tagName = ""; - bookmark = null; - - @computed("bookmark.reminder_at") - get icon() { - if (!this.bookmark) { - return NO_REMINDER_ICON; - } - - if (!isEmpty(this.bookmark.reminder_at)) { - return WITH_REMINDER_ICON; - } - - return NO_REMINDER_ICON; - } - - @computed("bookmark") - get cssClasses() { - return this.bookmark - ? "bookmark-icon bookmark-icon__bookmarked" - : "bookmark-icon"; - } - - @computed("bookmark.title") - get title() { - if (!this.bookmark) { - return i18n("bookmarks.create"); - } - - return this.bookmark.reminderTitle; - } -} diff --git a/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js b/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.gjs similarity index 62% rename from app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js rename to app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.gjs index a712ca557f5..1471d302126 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/bookmark-icon-test.gjs @@ -1,9 +1,8 @@ import { render } from "@ember/test-helpers"; -import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; +import BookmarkIcon from "discourse/components/bookmark-icon"; import { formattedReminderTime } from "discourse/lib/bookmark"; import { tomorrow } from "discourse/lib/time-utils"; -import Bookmark from "discourse/models/bookmark"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; import { i18n } from "discourse-i18n"; @@ -11,15 +10,14 @@ module("Integration | Component | bookmark-icon", function (hooks) { setupRenderingTest(hooks); test("with reminder", async function (assert) { - this.setProperties({ - bookmark: Bookmark.create({ - reminder_at: tomorrow(this.currentUser.user_option.timezone), - name: "some name", - currentUser: this.currentUser, - }), + const store = this.owner.lookup("service:store"); + const bookmark = store.createRecord("bookmark", { + reminder_at: tomorrow(this.currentUser.user_option.timezone), + name: "some name", + currentUser: this.currentUser, }); - await render(hbs``); + await render(); assert .dom(".d-icon-discourse-bookmark-clock.bookmark-icon__bookmarked") @@ -28,7 +26,7 @@ module("Integration | Component | bookmark-icon", function (hooks) { "title", i18n("bookmarks.created_with_reminder_generic", { date: formattedReminderTime( - this.bookmark.reminder_at, + bookmark.reminder_at, this.currentUser.user_option.timezone ), name: "some name", @@ -37,15 +35,13 @@ module("Integration | Component | bookmark-icon", function (hooks) { }); test("no reminder", async function (assert) { - this.set( - "bookmark", - Bookmark.create({ - name: "some name", - currentUser: this.currentUser, - }) - ); + const store = this.owner.lookup("service:store"); + const bookmark = store.createRecord("bookmark", { + name: "some name", + currentUser: this.currentUser, + }); - await render(hbs``); + await render(); assert.dom(".d-icon-bookmark.bookmark-icon__bookmarked").exists(); assert.dom(".svg-icon-title").hasAttribute( @@ -56,12 +52,8 @@ module("Integration | Component | bookmark-icon", function (hooks) { ); }); - test("null bookmark", async function (assert) { - this.setProperties({ - bookmark: null, - }); - - await render(hbs``); + test("no bookmark", async function (assert) { + await render(); assert.dom(".d-icon-bookmark.bookmark-icon").exists(); assert