Commit Graph

109 Commits

Author SHA1 Message Date
Régis Hanol
f4acb43ee7 DEV: add watched words system spec 2024-04-30 19:16:47 +02:00
Krzysztof Kotlarek
e1d9fd479f
FEATURE: after wizard admin is redirected to the guide page (#26696)
After the wizard is completed, the admin should be redirected to the admin guide topic.

Also tooltip from "Getting started" button was removed.
2024-04-23 10:04:15 +10:00
Martin Brennan
2d2329095c
FEATURE: Use new bookmark menu in topic footer buttons (#26670)
Followup to 67a8080e33

This commit makes it so the topic footer button for bookmarks
uses the new BookmarkMenu component, and makes some tweaks to
that component to allow for a label and CSS class options.

Also introduces a TopicBookmarkManager to manage the saving/editing/
deleting of the topic level bookmarks and the reactivity that happens
in the topic UI afterward.

Next commit should rip out old bookmark associated code in the
topic controller as it will no longer be needed.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-04-18 11:06:12 +02:00
Krzysztof Kotlarek
df373d90fe
FEATURE: direct link to components for admin sidebar (#26644)
To add a components link to the sidebar refactoring was required to create unique URLs for themes and components. Before the query param was used. After changes, we have two URLs `/admin/customize/themes` and `/admin/customize/components`.
2024-04-17 11:45:59 +10:00
Joffrey JAFFEUX
bbe62d88d2
FIX: prevents showing discard modal on re-edit (#26639)
This commit will now change two behaviors:

- If composer is already opened on a specific post and we click on edit again for the same post, we will do nothing and not show the discard draft modal
- if composer is shrinked and we click on edit for the same currently edited post, we will just open the composer and not show the discard draft modal
2024-04-16 10:34:32 +02:00
Joffrey JAFFEUX
326da84373
FIX: deleting a groups was throwing an error (#26623) 2024-04-15 08:35:50 +02:00
Martin Brennan
d7f7915558
FIX: Bookmark clock icon not showing (#26572)
When choosing the "Custom..." option in the new bookmark
menu and then choosing a date + time in the modal for the
reminder, the bookmark icon on the post was not updating to
show the one with the clock to indicate the reminder.

This was just a data syncing issue between BookmarkFormData
and what the modal sets. Ideally all this would be refactored
because the data flow is messy...but hard to find time for
that right now.

Followup 67a8080e33
2024-04-09 16:14:59 +10:00
Martin Brennan
67a8080e33
FEATURE: Redesigned bookmark modal and menu (#23071)
Adds the new quick menu for bookmarking. When you bookmark
a post (chat message behaviour will come later) we show this new quick
menu and bookmark the item straight away.

You can then choose a reminder quick option, or choose Custom... to open
the old modal. If you click on an existing bookmark, we show the same quick menu
but with Edit and Delete options.

A later PR will introduce a new bookmark modal, but for now we
are using the old modal for Edit and Custom... options.
2024-04-05 09:25:30 +10:00
Alan Guo Xiang Tan
91f0c71720
UX: Improve validation error message when saving theme objects setting (#26455)
Why this change?

Before this change, the validation error message shown to the user when
saving a theme objects setting is very cryptic. This commit changes the
validation error messages to be displayed on top of the editor instead.

Note that I don't think this way of displaying is the ideal state we
want to get to but given the time we have this will do for now.
2024-04-02 11:55:51 +08:00
Alan Guo Xiang Tan
6dac187785
DEV: Support translations for property labels in objects schema editor (#26362)
Why this change?

In cdba864598, we added support for adding
a description which will be displayed under the input of each property
on the client side.

Currently this convention in the locale file is followed:

```
en:
  theme_metadata:
    settings:
      objects_setting:
        description: <description> for the setting
        schema:
          properties:
            name: <description for the name property>
            links:
              name: <description for the name property in link>
              url: <description for the url property in link>
```

Since we now want to allow the label to be translated as well, we will
be changing the convention to the following:

```
en:
  theme_metadata:
    settings:
      objects_setting:
        description: <description> for the setting
        schema:
          properties:
            name:
              label: <label for the name property>
              description: <description for the name property>
            links:
              name:
                label: <label for the name property>
                description: <description for the name property in link>
              url:
		label: <label for the url property>
                description: <description for the url property in link>
```

If the locale file does not provide a `label` key under the property's
name, the client side will just display the property's name as the
label for the input field.
2024-03-28 10:53:51 +08:00
Alan Guo Xiang Tan
ef99b97ea7
DEV: Load theme objects typed setting metadata when routing to editor (#26354)
Why this change?

Previously, we were preloading the necessary metadata for
`adminCustomizeThemes.show.schema` route in the
`adminCustomizeThemes.show` route. This is wasteful because we're
loading data upfront when the objects setting editor may not be used.

This change also lays the ground work for a future commit where we need
to be shipping down additional metadata which may further add to the
payload.
2024-03-26 14:02:05 +08:00
Alan Guo Xiang Tan
8de869630f
DEV: Add validation message to string fields in theme object editor (#26257)
Why this change?

In our schema, we support the `min_length` and `max_length` validation
rules like so:

```
some_objects_setting
  type: objects
  schema:
    name: some_object
    properties:
      title:
        type: string
        validations:
          min_length: 1
          max_length: 10
```

While the validations used to validate the objects on the server side,
we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
Kris
59217b8a18
UX: adjust objects editor styles for full page layout (#26265) 2024-03-20 15:55:52 -04:00
Alan Guo Xiang Tan
426c035b80
UX: First pass styling experimental objects typed setting editor (#26194)
Why this change?

This is a first pass at styling the editor for creating/editing/updating
an objects typed theme setting. Only the desktop view is being
considered at the current moment.

The objects typed theme setting is still behind a feature flag at this moment so there is no need for us to get the styling perfect. The purpose of this PR is to get us to a state which we can quickly iterate with a designer on.
2024-03-18 10:03:30 +08:00
Martin Brennan
78bafb331a
FEATURE: Allow site settings to be edited throughout admin UI (#26154)
This commit makes it so the site settings filter controls and
the list of settings input editors themselves can be used elsewhere
in the admin UI outside of /admin/site_settings

This allows us to provide more targeted groups of settings in different
UI areas where it makes sense to provide them, such as on plugin pages.
You could open a single page for a plugin where you can see information
about that plugin, change settings, and configure it with custom UIs
in the one place.

In future we will do this in "config areas" for other parts of the
admin UI.
2024-03-18 08:50:39 +10:00
Alan Guo Xiang Tan
cdba864598
DEV: Support description for properties in objects schema (#26172)
Why this change?

When editing a objects typed theme setting, the input fields which are
rendered should include a description so that the user knows the purpose
of the field which they are changing.

What does this change do?

This change adds support for adding description to each property in the
schema for an object by following a given convention in the locale file.

For a schema like this:

```
objects_setting:
  type: objects
  schema:
    name: section
    properties:
      name:
        type: string
        required: true
      links:
        type: objects
        schema:
          name: link
          properties:
            name:
              type: string
              required: true
              validations:
                max_length: 20
            url:
              type: string
```

Description for each property in the object can be added like so:

```
en:
  theme_metadata:
    settings:
      objects_setting:
        description: <description> for the setting
        schema:
          properties:
            name: <description for the name property>
            links:
              name: <description for the name property in link>
              url: <description for the url property in link>
```

If the a description is not present, the input field will simply not
have an description.

Also note that a description for a theme setting can now be added like
so:

```
en:
  theme_metadata:
    settings:
      some_other_setting: <This will be used as the description>
      objects_setting:
        description: <This will also be used as the description>
```
2024-03-15 07:47:42 +08:00
Alan Guo Xiang Tan
e7f539df10
UX: Display setting description for objects typed theme setting (#26152)
Why this change?

Prior to this change, there is no description being displayed for
objects typed theme setting because we were rendering a button instead
of the components for the various setting types which will render the
setting's description.

What does this change do?

1. Introduce `SiteSettings::Description` compoment to centralise the HTML
being rendered across all settings component.

2. Renders the `SiteSettings::Description` component after the edit
   button in `site_setting.hbs`.
2024-03-13 12:38:21 +08:00
Alan Guo Xiang Tan
5b8652965a
DEV: Add save button to editing typed objects theme setting route (#26133)
Why this change?

This is still a work in progress but allows objects type theme setting
to be saved.
2024-03-13 06:52:46 +08:00
Alan Guo Xiang Tan
8d4f405da4
DEV: Allow typed objects theme settings to be saved via settings editor (#26100)
Why this change?

On the `/admin/customize/themes/<:id>` route, we allow admins to edit
all settings via a settings editor. Prior to this change, trying to edit
and save a typed objects theme settings will result in an error on the
server.
2024-03-11 08:42:12 +08:00
Blake Erickson
f71e9aad60
FEATURE: Silence Close Notifications User Setting (#26072)
This change creates a user setting that they can toggle if
they don't want to receive unread notifications when someone closes a
topic they have read and are watching/tracking it.
2024-03-08 15:14:46 -07:00
Isaac Janzen
c7b2369bfa
FIX: In topic search for glimmer header (#26040)
- Fix cmd + f keyboard shortcut that opens up the search menu or browser search
2024-03-07 11:14:43 -07:00
Blake Erickson
0464ddcd9b
FEATURE: Bulk Silent Close Topics (#26043)
Using the new bulk select dropdown you can now choose to bulk close
topics silently.
2024-03-06 14:08:49 -07:00
Alan Guo Xiang Tan
94b09f3331
DEV: Open theme settings objects editor from admin customize theme page (#26006)
Why this change?

The `/admin/customize/themes/:id/schema/name` route is a work in
progress but we want to be able to start navigating to it from the
`/admin/customize/themes/:id` route.

What does this change do?

1. Move `adminCustomizeThemes.schema` to a child route of
   `adminCustomizeThemes.show`. This is because we need the model
   from the parent route and if it isn't a child route we end up
   having to load the theme model again from the server.

1. Add the `objects_schema` attribute to `ThemeSettingsSerializer`

1. Refactor `SiteSettingComponent` to be able to render a button
   so that we don't have to hardcode the button rendering into the
   `SiteSettings::String` component
2024-03-06 08:24:29 +08:00
Isaac Janzen
bf02657dbf
DEV: Add system test for soft loading topic search results (#25525)
Follow up to: https://github.com/discourse/discourse/pull/25504
2024-03-05 09:10:09 -07:00
Kelv
1a76c4e099
DEV: convert PrivateMessageMap widget to glimmer components (#25837)
* DEV: add map system test for private message map
* DEV: convert PrivateMessageMap to glimmer components
2024-03-04 10:24:25 +08:00
Keegan George
3b87a174e7
FIX: Customize form template view modal footer buttons (#25804) 2024-02-21 22:20:56 -08:00
Alan Guo Xiang Tan
31e44cfa82
DEV: Fix flaky "Changing email" system tests (#25805)
Why this change?

`current_url` does not rely on Capybara waiters so opt to use
`have_current_path` matcher instead. Also assert for email against
element displayed on the page instead of querying the database for it
which isn't really what system tests are meant for.
2024-02-22 10:46:37 +08:00
Kelv
f2e669a008
DEV: add system test for topic map (#25242)
* DEV: add system test for topic map
2024-01-17 19:25:18 +08:00
Renato Atilio
f5f3742166
FIX: respect creation date when paginating group activity posts (#24993)
* FIX: respect creation date when paginating group activity posts

There are scenarios where the chronological order of posts doesn't match the order of their IDs. For instance, when moving the first post from one topic or PM to another, a new post (with a higher ID) will be created, but it will retain the original creation time.

This PR changes the group activity page and endpoint to paginate posts using created_at instead of relying on ID ordering.
2024-01-11 13:37:27 -03:00
Martin Brennan
51016e56dd
FEATURE: Add copy quote button to post selection menu (#25139)
Merges the design experiment at
https://meta.discourse.org/t/post-quote-copy-to-clipboard-button-feedback/285376
into core.

This adds a new button by default to the menu that pops up when text is
selected in a post.

The normal Quote button that is shown when selecting text within a post
will open the composer with the quote markdown prefilled.

This new "Copy Quote" button copies the quote markdown directly to the
user’s clipboard. This is useful for when you want to copy the quote
elsewhere – to another topic or a chat message for instance – without
having to manually copy from the opened composer, which then has to be
dismissed afterwards. An example of quote markdown:

```
[quote="someuser, post:7, topic:285376"]
In this moment, I am euphoric.
[/quote]
```
2024-01-08 10:38:14 +10:00
Martin Brennan
b92993fcee
FIX: Post copy link not working (#25086)
Followup to c6cb319671,
the actionCallback function was double-wrapped with () => {}
which meant that copyClipboard did not return a promise.
2024-01-02 19:23:41 +10:00
Mark VanLandingham
c051bfc2fc
DEV: Plugin-api methods for user-notifications route customizations (#24873) 2023-12-13 15:15:42 -06:00
Mark VanLandingham
223e413a6c
DEV: Render glimmer notification items for user notification list (#24802)
This removes the widget notifications list and renders the glimmer user menu notification items instead.
2023-12-11 11:04:43 -06:00
Krzysztof Kotlarek
dc2a0854b0
UX: add gift emoji styling for new features (#24523)
When admin has unseen new feature, gift emoji is added to a link.

In addition, `/new-features` path was changed to `/whats-new`
2023-11-27 09:32:28 +11:00
Krzysztof Kotlarek
96c5a6c9ca
FEATURE: dedicated admin section for new features (#24292)
New tab in admin panel with list of new features. Presentation was enhanced by screenshot and markdown description.

Related PR https://github.com/discourse-org/discourse-new-features-feeds/pull/23
2023-11-20 09:59:04 +11:00
Kris
797da5870b
FEATURE: remove category badge style options, set bullet style as default (#24198) 2023-11-13 10:46:15 -05:00
Penar Musaraj
a1c1f7ce75
DEV: Standardize session confirmation prompt (#24212)
Switches to using a dialog to confirm a session (i.e. sudo mode for
account changes where we want to be extra sure the current user is who
they say they are) to match what we do with passkeys.
2023-11-07 11:26:10 -05:00
Kelv
4a21411de2
DEV: upgrade avatar-selector modal to glimmer component (#24192)
* DEV: upgrade avatar-selector modal

* DEV: add system test for avatar selection in account preferences
2023-11-07 21:02:19 +08:00
Martin Brennan
0a4b1b655d
FIX: Alter "Take Action" default behaviour to hide post (#24088)
This commit fixes an issue where clicking the default
"Take Action" option on a flag for a post doesn't always
end up with the post hidden.

This is because the "take_action" score bonus doesn’t take into account
the final score required to hide the post.

Especially with the `hide_post_sensitivity` site setting set to `low`
sensitivity, there is a likelihood the score needed to hide the post
won’t be reached.

Now, the default "Take Action" button has been changed to "Hide Post"
to reflect what is actually happening and the description has been
improved, and if "Take Action" is clicked we _always_ hide the post
regardless of score and sensitivity settings. This way the action reflects
expectations of the user.
2023-10-30 10:24:35 +10:00
Blake Erickson
1a78e8ec1b
FEATURE: Add keywords support for site_settings search (#24146)
* FEATURE: Add keywords support for site_settings search

This change allows for a new `keywords` field that can be added to site
settings in order to help with searching. Keywords are not visible in
the UI, but site settings matching one of the contained keywords will
appear when searching for that keyword.

Keywords can be added for site settings inside of the
`config/locales/server.en.yml` file under the new `keywords` key.

```
site_settings
  example_1: "fancy description"
  example_2: "another description"

  keywords:
    example_1: "capybara"
```

* Add keywords entry for a recently changed site setting and add system specs

* Use page.visit now that we have our own visit
2023-10-27 15:42:57 -06:00
Kelv
44c84413fb
DEV: upgrade reject reason reviewable modal to glimmer component (#24073)
* DEV: add system test for rejecting user from review page
* DEV: upgrade reject-reason-reviewable modal to glimmer & DModal
2023-10-24 17:44:43 +08:00
Martin Brennan
e91d8feab3
Revert "FEATURE: Count only approved flagged posts in user pages (#22799)" (#23962)
This reverts commit 5f0bc4557f.

Through extensive internal discussion we have decided to revert
this change, as it significantly impacted moderation flow for
some Discourse site moderators, especially around "something else"
flags. We need to re-approach how flags are counted holistically,
so to that end this change is being reverted.
2023-10-18 11:38:17 +10:00
David Taylor
aa4a5add70
DEV: Add system specs for dismiss new on tag routes (#23936) 2023-10-16 10:51:59 +01:00
Martin Brennan
9762e65758
FEATURE: Add Revise... option for queued post reviewable (#23454)
This commit adds a new Revise... action that can be taken
for queued post reviewables. This will open a modal where
the user can select a Reason from a preconfigured list
(or by choosing Other..., a custom reason) and provide feedback
to the user about their post.

The post will be rejected still, but a PM will also be sent to
the user so they have an opportunity to improve their post when
they resubmit it.
2023-10-13 11:28:31 +10:00
Krzysztof Kotlarek
e94b553e9a
FEATURE: delete multiple inactive themes/components (#23788)
Ability to select multiple inactive themes or components and delete them all together
2023-10-08 21:35:53 +00:00
Kelv
3f6adca2d7
DEV: convert change owner modal to glimmer component (#23668)
* DEV: convert change owner modal to glimmer component

* DEV: add system test for change owner modal
2023-09-29 11:46:31 +08:00
Natalie Tay
20a882389a
FIX: Correct error on add user modal (#23679) 2023-09-27 13:54:44 +08:00
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
Joffrey JAFFEUX
85fddf58bc
Revert "DEV: FloatKit (#23541)" (#23549)
This reverts commits

0623ac684a
408e71e437
a32fa3b947

User tips were running into some issues.
2023-09-12 13:55:12 -04:00
Joffrey JAFFEUX
0623ac684a
DEV: FloatKit (#23541)
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>
2023-09-12 15:50:26 +02:00