From f08e5c897e962db86d4bb4ffa794b5584d7745e5 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Thu, 16 Nov 2023 08:52:07 -0500 Subject: [PATCH] UX: Apply decorators to small action posts (#24397) --- .../app/widgets/post-small-action.js | 25 +++---- .../spec/system/post_small_action_spec.rb | 24 +++++++ spec/system/post_small_action_spec.rb | 69 +++++++++++++++++++ 3 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 plugins/discourse-local-dates/spec/system/post_small_action_spec.rb create mode 100644 spec/system/post_small_action_spec.rb diff --git a/app/assets/javascripts/discourse/app/widgets/post-small-action.js b/app/assets/javascripts/discourse/app/widgets/post-small-action.js index a7f2725fd96..c9ec30955e2 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-small-action.js +++ b/app/assets/javascripts/discourse/app/widgets/post-small-action.js @@ -2,9 +2,10 @@ import { computed } from "@ember/object"; import { htmlSafe } from "@ember/template"; import { h } from "virtual-dom"; import { autoUpdatingRelativeAge } from "discourse/lib/formatter"; -import { decorateHashtags } from "discourse/lib/hashtag-autocomplete"; import { userPath } from "discourse/lib/url"; +import DecoratorHelper from "discourse/widgets/decorator-helper"; import { avatarFor } from "discourse/widgets/post"; +import PostCooked from "discourse/widgets/post-cooked"; import RawHtml from "discourse/widgets/raw-html"; import { createWidget } from "discourse/widgets/widget"; import { iconNode } from "discourse-common/lib/icon-library"; @@ -133,7 +134,6 @@ export default createWidget("post-small-action", { html(attrs) { const contents = []; const buttons = []; - const customMessage = []; contents.push( avatarFor.call(this, "small", { @@ -189,17 +189,6 @@ export default createWidget("post-small-action", { ); } - if (!attrs.actionDescriptionWidget && attrs.cooked) { - const fragment = document.createElement("div"); - fragment.innerHTML = attrs.cooked; - decorateHashtags(fragment, this.site); - customMessage.push( - new RawHtml({ - html: `
${fragment.innerHTML}
`, - }) - ); - } - return [ h("span.tabLoc", { attributes: { "aria-hidden": true, tabindex: -1 }, @@ -208,7 +197,15 @@ export default createWidget("post-small-action", { h("div.small-action-desc", [ h("div.small-action-contents", contents), h("div.small-action-buttons", buttons), - customMessage, + !attrs.actionDescriptionWidget && attrs.cooked + ? h("div.small-action-custom-message", [ + new PostCooked( + attrs, + new DecoratorHelper(this), + this.currentUser + ), + ]) + : null, ]), ]; }, diff --git a/plugins/discourse-local-dates/spec/system/post_small_action_spec.rb b/plugins/discourse-local-dates/spec/system/post_small_action_spec.rb new file mode 100644 index 00000000000..32199b699c2 --- /dev/null +++ b/plugins/discourse-local-dates/spec/system/post_small_action_spec.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +describe "Post small actions", type: :system do + fab!(:current_user) { Fabricate(:user) } + fab!(:topic) { Fabricate(:topic) } + fab!(:post) { Fabricate(:post, topic: topic) } + let(:topic_page) { PageObjects::Pages::Topic.new } + + before { sign_in(current_user) } + + it "applies local date decorations" do + post = + Fabricate( + :small_action, + raw: "[date=2023-11-15 timezone=\"America/Los_Angeles\"] a date", + topic: topic, + ) + + topic_page.visit_topic(topic) + expect(topic_page).to have_post_number(post.post_number) + + expect(page).to have_css(".small-action-custom-message .discourse-local-date.cooked-date") + end +end diff --git a/spec/system/post_small_action_spec.rb b/spec/system/post_small_action_spec.rb new file mode 100644 index 00000000000..df6f39f51fe --- /dev/null +++ b/spec/system/post_small_action_spec.rb @@ -0,0 +1,69 @@ +# frozen_string_literal: true + +describe "Post small actions", type: :system do + fab!(:admin) { Fabricate(:admin) } + fab!(:topic) { Fabricate(:topic) } + fab!(:first_post) do + Fabricate(:post, topic: topic, raw: "This is a special post with special stuff") + end + let(:topic_page) { PageObjects::Pages::Topic.new } + let(:composer) { PageObjects::Components::Composer.new } + + before do + sign_in(admin) + Jobs.run_immediately! + end + + it "applies search highlight decorations" do + post = Fabricate(:small_action, raw: "This small post is also special", topic: topic) + + topic_page.visit_topic(topic) + expect(topic_page).to have_post_number(post.post_number) + + find(".search-dropdown").click + find("#search-term").fill_in(with: "special") + + find(".search-menu-assistant-item:nth-child(2)").click + + # has highlighting for the regular post + expect(page).to have_css(".topic-post.regular .highlighted") + + # has highlighting for the small action post + expect(page).to have_css(".small-action .highlighted") + end + + it "applies lightbox decorations" do + post = Fabricate(:small_action, raw: "Enjoy this", topic: topic, action_code: "closed.enabled") + + topic_page.visit_topic(topic) + expect(topic_page).to have_post_number(post.post_number) + + find(".small-action-buttons .small-action-edit").click + attach_file file_from_fixtures("2000x2000.png").path do + composer.click_toolbar_button("upload") + end + + expect(composer).to have_no_in_progress_uploads + composer.submit + + expect(page).to have_css(".small-action .lightbox", wait: 5) + end + + it "applies animated gif decorations" do + post = + Fabricate(:small_action, raw: "Enjoy this gif", topic: topic, action_code: "closed.enabled") + + topic_page.visit_topic(topic) + expect(topic_page).to have_post_number(post.post_number) + + find(".small-action-buttons .small-action-edit").click + attach_file file_from_fixtures("animated.gif").path do + composer.click_toolbar_button("upload") + end + + expect(composer).to have_no_in_progress_uploads + composer.submit + + expect(page).to have_css(".small-action .pausable-animated-image", wait: 5) + end +end