mirror of
https://github.com/discourse/discourse.git
synced 2024-12-12 02:43:44 +08:00
0623ac684a
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension. --- This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit": - menu - tooltip - toast ## Tooltips ### Component Simple cases can be express with an API similar to DButton: ```hbs <DTooltip @label={{i18n "foo.bar"}} @icon="check" @content="Something" /> ``` More complex cases can use blocks: ```hbs <DTooltip> <:trigger> {{d-icon "check"}} <span>{{i18n "foo.bar"}}</span> </:trigger> <:content> Something </:content> </DTooltip> ``` ### Service You can manually show a tooltip using the `tooltip` service: ```javascript const tooltipInstance = await this.tooltip.show( document.querySelector(".my-span"), options ) // and later manual close or destroy it tooltipInstance.close(); tooltipInstance.destroy(); // you can also just close any open tooltip through the service this.tooltip.close(); ``` The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service: ```javascript const tooltipInstance = this.tooltip.register( document.querySelector(".my-span"), options ) // when done you can destroy the instance to remove the listeners tooltipInstance.destroy(); ``` Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args: ```javascript const tooltipInstance = await this.tooltip.show( document.querySelector(".my-span"), { component: MyComponent, data: { foo: 1 } } ) ``` ## Menus Menus are very similar to tooltips and provide the same kind of APIs: ### Component ```hbs <DMenu @icon="plus" @label={{i18n "foo.bar"}}> <ul> <li>Foo</li> <li>Bat</li> <li>Baz</li> </ul> </DMenu> ``` They also support blocks: ```hbs <DMenu> <:trigger> {{d-icon "plus"}} <span>{{i18n "foo.bar"}}</span> </:trigger> <:content> <ul> <li>Foo</li> <li>Bat</li> <li>Baz</li> </ul> </:content> </DMenu> ``` ### Service You can manually show a menu using the `menu` service: ```javascript const menuInstance = await this.menu.show( document.querySelector(".my-span"), options ) // and later manual close or destroy it menuInstance.close(); menuInstance.destroy(); // you can also just close any open tooltip through the service this.menu.close(); ``` The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service: ```javascript const menuInstance = this.menu.register( document.querySelector(".my-span"), options ) // when done you can destroy the instance to remove the listeners menuInstance.destroy(); ``` Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args: ```javascript const menuInstance = await this.menu.show( document.querySelector(".my-span"), { component: MyComponent, data: { foo: 1 } } ) ``` ## Toasts Interacting with toasts is made only through the `toasts` service. A default component is provided (DDefaultToast) and can be used through dedicated service methods: - this.toasts.success({ ... }); - this.toasts.warning({ ... }); - this.toasts.info({ ... }); - this.toasts.error({ ... }); - this.toasts.default({ ... }); ```javascript this.toasts.success({ data: { title: "Foo", message: "Bar", actions: [ { label: "Ok", class: "btn-primary", action: (componentArgs) => { // eslint-disable-next-line no-alert alert("Closing toast:" + componentArgs.data.title); componentArgs.close(); }, } ] }, }); ``` You can also provide your own component: ```javascript this.toasts.show(MyComponent, { autoClose: false, class: "foo", data: { baz: 1 }, }) ``` Co-authored-by: Martin Brennan <mjrbrennan@gmail.com> Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com> Co-authored-by: David Taylor <david@taylorhq.com> Co-authored-by: Jarek Radosz <jradosz@gmail.com>
185 lines
7.5 KiB
Ruby
185 lines
7.5 KiB
Ruby
# frozen_string_literal: true
|
|
|
|
describe "Local dates", type: :system do
|
|
fab!(:topic) { Fabricate(:topic) }
|
|
fab!(:current_user) { Fabricate(:user) }
|
|
let(:year) { Time.zone.now.year + 1 }
|
|
let(:month) { Time.zone.now.month }
|
|
let(:bookmark_modal) { PageObjects::Modals::Bookmark.new }
|
|
let(:composer) { PageObjects::Components::Composer.new }
|
|
let(:insert_datetime_modal) { PageObjects::Modals::InsertDateTime.new }
|
|
|
|
before do
|
|
create_post(user: current_user, topic: topic, title: "Date range test post", raw: <<~RAW)
|
|
First option: [date=#{year}-12-15 time=14:19:00 timezone="Asia/Singapore"]
|
|
Second option: [date=#{year}-12-15 time=01:20:00 timezone="Asia/Singapore"], or [date=#{year}-12-15 time=02:40:00 timezone="Asia/Singapore"]
|
|
Third option: [date-range from=#{year}-12-15T11:25:00 to=#{year}-12-16T00:26:00 timezone="Asia/Singapore"] or [date-range from=#{year}-12-22T11:57:00 to=#{year}-12-23T11:58:00 timezone="Asia/Singapore"]
|
|
RAW
|
|
end
|
|
|
|
let(:topic_page) { PageObjects::Pages::Topic.new }
|
|
|
|
def formatted_date_for_year(month, day)
|
|
Date.parse("#{year}-#{month}-#{day}").strftime("%A, %B %-d, %Y")
|
|
end
|
|
|
|
it "renders local dates and date ranges correctly" do
|
|
using_browser_timezone("Asia/Singapore") do
|
|
sign_in current_user
|
|
|
|
topic_page.visit_topic(topic)
|
|
|
|
expect(topic_page).to have_content(topic.title)
|
|
|
|
# Single date in a paragraph.
|
|
#
|
|
find("span[data-date]:nth-of-type(1)").click
|
|
expect(page.find("[data-content] .current .date-time")).to have_text(
|
|
"#{formatted_date_for_year(12, 15)}\n2:19 PM",
|
|
exact: true,
|
|
)
|
|
page.send_keys(:escape)
|
|
|
|
# Two single dates in the same paragraph.
|
|
#
|
|
find("span[data-date]:nth-of-type(2)").click
|
|
expect(page.find("[data-content] .current .date-time")).to have_text(
|
|
"#{formatted_date_for_year(12, 15)}\n1:20 AM",
|
|
exact: true,
|
|
)
|
|
page.send_keys(:escape)
|
|
|
|
find("span[data-date]:nth-of-type(3)").click
|
|
expect(page.find("[data-content] .current .date-time")).to have_text(
|
|
"#{formatted_date_for_year(12, 15)}\n2:40 AM",
|
|
exact: true,
|
|
)
|
|
page.send_keys(:escape)
|
|
|
|
# Two date ranges in the same paragraph.
|
|
#
|
|
find("span[data-date]:nth-of-type(4)").click
|
|
expect(page.find("[data-content] .current .date-time")).to have_text(
|
|
"#{formatted_date_for_year(12, 15)}\n11:25 AM → 12:26 AM",
|
|
exact: true,
|
|
)
|
|
page.send_keys(:escape)
|
|
|
|
find("span[data-date]:nth-of-type(6)").click
|
|
expect(page.find("[data-content] .current .date-time")).to have_text(
|
|
"#{formatted_date_for_year(12, 22)} 11:57 AM → #{formatted_date_for_year(12, 23)} 11:58 AM",
|
|
exact: true,
|
|
)
|
|
page.send_keys(:escape)
|
|
end
|
|
end
|
|
|
|
describe "insert modal" do
|
|
let(:timezone) { "Australia/Brisbane" }
|
|
|
|
before do
|
|
current_user.user_option.update!(timezone: timezone)
|
|
sign_in(current_user)
|
|
end
|
|
|
|
it "allows selecting a date without a time and inserts into the post" do
|
|
topic_page.visit_topic_and_open_composer(topic)
|
|
expect(topic_page).to have_expanded_composer
|
|
composer.click_toolbar_button("local-dates")
|
|
expect(insert_datetime_modal).to be_open
|
|
insert_datetime_modal.calendar_date_time_picker.select_year(year)
|
|
insert_datetime_modal.calendar_date_time_picker.select_day(16)
|
|
insert_datetime_modal.click_primary_button
|
|
expect(composer.composer_input.value).to have_content(
|
|
"[date=#{Date.parse("#{year}-#{month}-16").strftime("%Y-%m-%d")} timezone=\"#{timezone}\"]",
|
|
)
|
|
end
|
|
|
|
it "allows selecting a date with a time and inserts into the post" do
|
|
topic_page.visit_topic_and_open_composer(topic)
|
|
expect(topic_page).to have_expanded_composer
|
|
composer.click_toolbar_button("local-dates")
|
|
expect(insert_datetime_modal).to be_open
|
|
insert_datetime_modal.calendar_date_time_picker.select_year(year)
|
|
insert_datetime_modal.calendar_date_time_picker.select_day(16)
|
|
insert_datetime_modal.calendar_date_time_picker.fill_time("11:45am")
|
|
insert_datetime_modal.click_primary_button
|
|
|
|
expect(composer.composer_input.value).to have_content(
|
|
"[date=#{Date.parse("#{year}-#{month}-16").strftime("%Y-%m-%d")} time=11:45:00 timezone=\"#{timezone}\"]",
|
|
)
|
|
end
|
|
|
|
it "allows selecting a start date and time and an end date and time" do
|
|
topic_page.visit_topic_and_open_composer(topic)
|
|
expect(topic_page).to have_expanded_composer
|
|
composer.click_toolbar_button("local-dates")
|
|
expect(insert_datetime_modal).to be_open
|
|
insert_datetime_modal.calendar_date_time_picker.select_year(year)
|
|
insert_datetime_modal.calendar_date_time_picker.select_day(16)
|
|
insert_datetime_modal.calendar_date_time_picker.fill_time("11:45am")
|
|
insert_datetime_modal.select_to
|
|
|
|
insert_datetime_modal.calendar_date_time_picker.select_year(year)
|
|
insert_datetime_modal.calendar_date_time_picker.select_day(23)
|
|
insert_datetime_modal.calendar_date_time_picker.fill_time("12:45pm")
|
|
|
|
insert_datetime_modal.click_primary_button
|
|
expect(composer.composer_input.value).to have_content(
|
|
"[date-range from=#{Date.parse("#{year}-#{month}-16").strftime("%Y-%m-%d")}T11:45:00 to=#{Date.parse("#{year}-#{month}-23").strftime("%Y-%m-%d")}T12:45:00 timezone=\"#{timezone}\"]",
|
|
)
|
|
end
|
|
|
|
it "allows clearing the end date and time" do
|
|
topic_page.visit_topic_and_open_composer(topic)
|
|
expect(topic_page).to have_expanded_composer
|
|
composer.click_toolbar_button("local-dates")
|
|
expect(insert_datetime_modal).to be_open
|
|
|
|
insert_datetime_modal.calendar_date_time_picker.select_year(year)
|
|
insert_datetime_modal.calendar_date_time_picker.select_day(16)
|
|
insert_datetime_modal.calendar_date_time_picker.fill_time("11:45am")
|
|
insert_datetime_modal.select_to
|
|
|
|
insert_datetime_modal.calendar_date_time_picker.select_year(year)
|
|
insert_datetime_modal.calendar_date_time_picker.select_day(23)
|
|
insert_datetime_modal.calendar_date_time_picker.fill_time("12:45pm")
|
|
insert_datetime_modal.delete_to
|
|
|
|
insert_datetime_modal.click_primary_button
|
|
expect(composer.composer_input.value).to have_content(
|
|
"[date=#{Date.parse("#{year}-#{month}-16").strftime("%Y-%m-%d")} time=11:45:00 timezone=\"#{timezone}\"]",
|
|
)
|
|
end
|
|
end
|
|
|
|
describe "bookmarks" do
|
|
before do
|
|
current_user.user_option.update!(timezone: "Asia/Singapore")
|
|
sign_in(current_user)
|
|
end
|
|
|
|
it "can use the post local date for a bookmark preset" do
|
|
topic_page.visit_topic(topic)
|
|
topic_page.expand_post_actions(topic.first_post)
|
|
topic_page.click_post_action_button(topic.first_post, :bookmark)
|
|
bookmark_modal.select_preset_reminder(:post_local_date)
|
|
expect(topic_page).to have_post_bookmarked(topic.first_post)
|
|
bookmark = Bookmark.find_by(bookmarkable: topic.first_post, user: current_user)
|
|
expect(bookmark.reminder_at.to_s).to eq("#{year}-12-15 06:19:00 UTC")
|
|
end
|
|
|
|
it "does not allow using post dates in the past for a bookmark preset" do
|
|
topic.first_post.update!(
|
|
raw: 'First option: [date=1999-12-15 time=14:19:00 timezone="Asia/Singapore"]',
|
|
)
|
|
topic.first_post.rebake!
|
|
topic_page.visit_topic(topic)
|
|
topic_page.expand_post_actions(topic.first_post)
|
|
topic_page.click_post_action_button(topic.first_post, :bookmark)
|
|
expect(bookmark_modal).to be_open
|
|
expect(bookmark_modal).to have_no_preset(:post_local_date)
|
|
end
|
|
end
|
|
end
|