Joffrey JAFFEUX 2a10ea0e3f
DEV: FloatKit (#23650)
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>
2023-09-26 13:39:52 +02:00

198 lines
4.9 KiB
Ruby

# frozen_string_literal: true
module PageObjects
module Pages
class Topic < PageObjects::Pages::Base
def initialize
@composer_component = PageObjects::Components::Composer.new
@fast_edit_component = PageObjects::Components::FastEditor.new
end
def visit_topic(topic, post_number: nil)
url = "/t/#{topic.id}"
url += "/#{post_number}" if post_number
page.visit url
self
end
def open_new_topic
page.visit "/new-topic"
self
end
def open_new_message
page.visit "/new-message"
self
end
def visit_topic_and_open_composer(topic)
visit_topic(topic)
click_reply_button
self
end
def current_topic_id
find("h1[data-topic-id]")["data-topic-id"]
end
def current_topic
::Topic.find(current_topic_id)
end
def has_topic_title?(text)
has_css?("h1 .fancy-title", text: text)
end
def has_post_content?(post)
post_by_number(post).has_content? post.raw
end
def has_post_number?(number)
has_css?("#post_#{number}")
end
def post_by_number(post_or_number, wait: Capybara.default_max_wait_time)
post_or_number = post_or_number.is_a?(Post) ? post_or_number.post_number : post_or_number
find(".topic-post:not(.staged) #post_#{post_or_number}", wait: wait)
end
def post_by_number_selector(post_number)
".topic-post:not(.staged) #post_#{post_number}"
end
def has_post_more_actions?(post)
within post_by_number(post) do
has_css?(".show-more-actions")
end
end
def has_post_bookmarked?(post)
is_post_bookmarked(post, bookmarked: true)
end
def has_no_post_bookmarked?(post)
is_post_bookmarked(post, bookmarked: false)
end
def expand_post_actions(post)
post_by_number(post).find(".show-more-actions").click
end
def click_post_action_button(post, button)
case button
when :bookmark
post_by_number(post).find(".bookmark.with-reminder").click
when :reply
post_by_number(post).find(".post-controls .reply").click
end
end
def expand_post_admin_actions(post)
post_by_number(post).find(".show-post-admin-menu").click
end
def click_post_admin_action_button(post, button)
element_klass = "[data-content][data-identifier='admin-post-menu']"
case button
when :grant_badge
element_klass += " .grant-badge"
end
find(element_klass).click
end
def click_topic_footer_button(button)
find_topic_footer_button(button).click
end
def has_topic_bookmarked?
has_css?("#{topic_footer_button_id("bookmark")}.bookmarked", text: "Edit Bookmark")
end
def has_no_bookmarks?
has_no_css?("#{topic_footer_button_id("bookmark")}.bookmarked")
end
def find_topic_footer_button(button)
find(topic_footer_button_id(button))
end
def click_reply_button
find(".topic-footer-main-buttons > .create").click
has_expanded_composer?
end
def has_expanded_composer?
has_css?("#reply-control.open")
end
def type_in_composer(input)
@composer_component.type_content(input)
end
def fill_in_composer(input)
@composer_component.fill_content(input)
end
def clear_composer
@composer_component.clear_content
end
def has_composer_content?(content)
@composer_component.has_content?(content)
end
def has_composer_popup_content?(content)
@composer_component.has_popup_content?(content)
end
def send_reply(content = nil)
fill_in_composer(content) if content
find("#reply-control .save-or-cancel .create").click
end
def fill_in_composer_title(title)
@composer_component.fill_title(title)
end
def fast_edit_button
find(".quote-button .quote-edit-label")
end
def click_fast_edit_button
find(".quote-button .quote-edit-label").click
end
def fast_edit_input
@fast_edit_component.fast_edit_input
end
def click_mention(post, mention)
within post_by_number(post) do
find("a.mention-group", text: mention).click
end
end
def click_footer_reply
find("#topic-footer-buttons .btn-primary", text: "Reply").click
self
end
private
def topic_footer_button_id(button)
"#topic-footer-button-#{button}"
end
def is_post_bookmarked(post, bookmarked:)
within post_by_number(post) do
page.public_send(
bookmarked ? :has_css? : :has_no_css?,
".bookmark.with-reminder.bookmarked",
)
end
end
end
end
end