Commit Graph

695 Commits

Author SHA1 Message Date
Blake Erickson
2633674b6f
FIX: Update path for spoiler-alert plugin (#24064)
Spoiler-alert plugin is now part of core
2023-10-23 15:04:54 -06:00
Jarek Radosz
c84fe69e10
DEV: Use @discourse/lint-configs (#24038) 2023-10-23 12:08:35 +02:00
David Battersby
f1e22dfebd
FEATURE: add grace period for chat edits (#23800)
This change allows users to edit their chat messages based on the criteria added to Site Settings.

If the grace period conditions are met then there will be no (edited) text applied to the message.

The following site settings are added to chat:

chat editing grace period (seconds since message created)
chat editing grace period max diff for low trust levels (number of characters changed)
chat editing grace period max diff for high trust levels (number of characters changed)
2023-10-23 16:40:30 +08:00
Ty Correll
700c636d29
UX: unify ai representing icon (#24029)
This PR addresses the push to unify the icon representing AI throughout Discourse, by using the discourse-sparkles icon.

The icon is being moved to core to make changes with dependencies included in core that were using the "magic" icon instead.

In 2 places "magic" -> "discourse-sparkles,
1. topic summaries
2. (unreleased) chat summaries example
2023-10-19 17:30:27 -05:00
David Taylor
98cb14dd82
DEV: Modernize chat helper definitions (#24017)
These helpers are never used in raw-hbs. Exporting default functions is enough for them to be picked up by the ember resolver, and also makes it possible to use them in gjs files.
2023-10-19 15:51:38 +01:00
Martin Brennan
9ef3a18ce4
DEV: Add new experimental admin UI route and sidebar (#23952)
This commit adds a new admin UI under the route `/admin-revamp`, which is
only accessible if the user is in a group defined by the new `enable_experimental_admin_ui_groups` site setting. It
also adds a special `admin` sidebar panel that is shown instead of the `main`
forum one when the admin is in this area.

![image](https://github.com/discourse/discourse/assets/920448/fa0f25e1-e178-4d94-aa5f-472fd3efd787)

We also add an "Admin Revamp" sidebar link to the community section, which
will only appear if the user is in the setting group:

![image](https://github.com/discourse/discourse/assets/920448/ec05ca8b-5a54-442b-ba89-6af35695c104)

Within this there are subroutes defined like `/admin-revamp/config/:area`,
these areas could contain any UI imaginable, this is just laying down an
initial idea of the structure and how the sidebar will work. Sidebar links are
currently hardcoded.

Some other changes:

* Changed the `main` and `chat` panels sidebar panel keys to use exported const values for reuse
* Allowed custom sidebar sections to hide their headers with the `hideSectionHeader` option
* Add a `groupSettingArray` setting on `this.siteSettings` in JS, which accepts a group site setting name
  and splits it by `|` then converts the items in the array to integers, similar to the `_map` magic for ruby
  group site settings
* Adds a `hidden` option for sidebar panels which prevents them from showing in separated mode and prevents
  the switch button from being shown

---------

Co-authored-by: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
2023-10-19 14:23:41 +10:00
Godfrey Chan
c34f8b65cb
DEV: Rename I18n imports to discourse-i18n (#23915)
As of #23867 this is now a real package, so updating the imports to
use the real package name, rather than relying on the alias. The
name change in the package name is because `I18n` is not a valid
name as NPM packages must be all lowercase.

This commit also introduces an eslint rule to prevent importing from
the old I18n path.

For themes/plugins, the old 'i18n' name remains functional.
2023-10-18 11:07:09 +01:00
chapoi
9d1726fe2b
UX: better align user count (#23941) 2023-10-16 13:28:35 +02:00
chapoi
29beaff25b
FIX: revert (edited) layout in chat message (#23927)
* Revert "UX: place (edited) on same line (#23866)"

This reverts commit c1017a479b.

* Revert "UX: prevent (edited) and following from being copied (#23882)"

This reverts commit 563bff509a.
2023-10-13 13:01:56 +02:00
Joffrey JAFFEUX
c1abf8b35c
UX: improves reminder setting text (#23918)
The setting will change from "%{count} days" to "Chat settings have been set to retain channel messages for %{count} day."

This commit also:
- migrates `chat-retention-reminder` to gjs
- adds a "type" property to `chat-retention-reminder-text` to allow use a long or short text depending on where it's used.
2023-10-13 07:55:47 +02:00
Joffrey JAFFEUX
b77b0ee1c8
UX: opens thread on channel with unread threads (#23361)
When visiting a channel which has unread threads, we will now open the threads list panel.

Note that:

mobile
linking to message
linking to a thread

Won't open the threads list.
2023-10-11 12:19:30 +02:00
Joffrey JAFFEUX
f25388428e
FIX: ensures threads list button is not showing (#23895)
We were incorrectly showing it when the the panel is opened.
2023-10-11 11:46:00 +02:00
David Taylor
48193767bf DEV: Sort imports
Automatically generated by `eslint --fix` to satisfy the updated configuration
2023-10-10 21:46:54 +01:00
David Taylor
ee0fef489f DEV: Move gjs <template> to bottom of class definitions
To satisfy updated eslint configuration
2023-10-10 21:46:54 +01:00
chapoi
563bff509a
UX: prevent (edited) and following from being copied (#23882) 2023-10-10 20:16:57 +02:00
Jordan Vidrine
6d7c589740
FIX: Remove border-radius from thread list item (#23878) 2023-10-10 10:09:16 -05:00
David Taylor
c6aad63a37
DEV: Update admin-plugins-chat queryParams definition (#23868)
Controller queryParam configuration should be wrapped in an array. Omitting the array wrapper seems to work under Ember 3.28, but causes an error under Ember 5.
2023-10-10 11:06:03 +01:00
chapoi
c1017a479b
UX: place (edited) on same line (#23866)
Attempts to have the `(edited)` text on the same line than the content when possible. Impossible cases include: onebox, youtube video, ...
2023-10-10 11:00:16 +02:00
Joffrey JAFFEUX
a39ff830e8
UX: makes avatar non interactive in thread participants list (#23847)
It was slightly surprising to have a user card show when click on a thread item list.

More over this commit does:
- moves chat/user-avatar to chat-user-avatar and converts it to gjs
- moves chat/thread/participants to chat-thread-participants
- rewrite the `toggleCheckIfPossible` modifier to only be applied when selecting messages, it prevents the click event to collide with the click of avatars in regular messages
2023-10-09 21:12:50 +02:00
Joffrey JAFFEUX
245e9f30a4
FIX: minor chat styleguide fixes (#23849)
- makes message take full width
- allows to remove the thread state
- removes non-existing component (mention warning)
2023-10-09 18:25:57 +02:00
David Battersby
62c7a54f88
FIX: hide consolidated chat message notifications temporarily (#23846)
Consolidated chat notifications went live for a short amount of time then reverted the commit due to UX concerns.

The result of this is that there are a few users affected that will have notifications in a blank state.

As a workaround this PR will hide those notifications until the feature is ready to merge again.
2023-10-09 22:34:07 +08:00
Joffrey JAFFEUX
f13f2fecfe
FIX: correctly reset active message on destroy (#23844)
It should prevent any message action to still show after a transition while hovering a message (eg: link to channel settings from a message).
2023-10-09 15:16:42 +02:00
Joffrey JAFFEUX
2ac2c846bc
FIX: uses correct label on mobile view for members (#23845) 2023-10-09 15:15:42 +02:00
Joffrey JAFFEUX
42801c950f
UI: redesigned settings/members (#23804)
This PR is a first step towards private groups. It redesigns settings/members area of a channel and also drops the "about" page which is now mixed into settings.

This commit is also:
- introducing chat-form, a small DSL to create forms, ideally I would want something in core for this
- introducing a DToggleSwitch page object component to simplify testing toggles
- migrating various components to gjs
2023-10-09 14:11:16 +02:00
David Battersby
79ececd976
FIX: handle thread participants limit on the frontend (#23839)
Workaround for an issue we are experiencing on thread index frontend where thread loads participants correctly (up to 10), then refreshes the threads and then limits to 3 participants.

There is an issue with storing threads for the main channel view and the thread list in the same store so handling the max participants on the frontend is a workaround until channel.threadsManager is updated.

I've adjusted the tests to handle the additional data being returned from ThreadParticipantQuery.
2023-10-09 14:04:59 +08:00
chapoi
85c6914f80
UX: thread list fixes for alignment and more spacing on mobile (#23823)
* UX: fix padding on active touch
* UX: thread list header bigger + alignment
* UX: thread list alignment desktop
* UX: visual corrections to alignment
* UX: mobile alignment and padding
2023-10-07 11:06:16 +02:00
chapoi
cac5592251
UX: flat design for thread list (#23821)
* UX: thread list flat design

* UX: thread list mobile
2023-10-06 21:56:36 +02:00
chapoi
478e738bfd
UX: keep timestamp on single line (#23819) 2023-10-06 20:07:52 +02:00
chapoi
057c2012f0
UX: remove excerpt + style change to thread list item (#23776)
UX changes to thread item:

- drop "last reply" timestamp copy
- drop last reply excerpt
- show up 9+OP members

Co-authored-by: David Battersby <info@davidbattersby.com>
2023-10-06 15:11:04 +02:00
Joffrey JAFFEUX
9e5fc2e817
FIX: correctly checks user activation on use (#23793)
We can't have it computed only at start of the application as the state wouldn't most likely be false at this point in time.
2023-10-05 11:24:01 +02:00
Joffrey JAFFEUX
a1aedc9ce1
DEV: removes dead code (#23772) 2023-10-04 20:02:57 +02:00
Joffrey JAFFEUX
08df8fc1d1
UX: enhances chat copy features (#23770)
- Allows to copy quotes from mobile
- Allows to copy text of a message from mobile
- Allows to select messages by clicking on it when selection has started

Note this commit is also now using toasts to show a confirmation of copy, and refactors system specs helpers concerning secondary actions.

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-10-04 16:14:37 +02:00
Jarek Radosz
6adc67a7a8
FIX: Broken error reporting in modals (and other places) (#23680)
1. actually call `popupAjaxError`, thanks :P
2. don't close a modal on error
3. use `extractError()` instead of manually joining error messages
4. …or passing just the error object to `this.flash`
2023-09-27 17:11:44 +02:00
Joffrey JAFFEUX
db558dc3fc
FIX: correctly sort channels with null last message (#23672)
As per 92839dc722 lastMessage won't be null when a message is deleted. This would cause sorting issues when messages from a direct message channels are deleted as we would try to sort on last message and thought it would exist when actually it would be a null message.

I might rethink this design to not return any last_message in this case soon as checking on ID feels dirty and prone to error, so only fixing the issue for now.

This commit is also using `@cached` to avoid replaying the sort logic on each access.
2023-09-26 20:36:51 +02:00
David Taylor
a673004777
DEV: Modernize chat getOwner usage (#23671)
See 8958b4f76a for motivation
2023-09-26 18:05:34 +01: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
Kris
91c94f5aa6
DEV: update a couple button classes (#23127) 2023-09-25 16:45:57 -04:00
Joffrey JAFFEUX
c8fff19b99
DEV: removes the notion of staged thread (#23612)
While very fast and powerful staged threads forces a lot of gymnastic and edge cases. This patch adds a new service `Chat::CreateThread` and uses it to create a thread unconditionally when a user replies to a message in a threading enabled channel. If the user actually doesn’t send a message we will have a thread with no messages which has no important impact and could even be periodically cleaned if necessary.

Note that this commit also moves message actions to .gjs as it was the original goal of this PR to correctly check for staged thread to show the menu or not.
2023-09-15 18:09:45 +02:00
chapoi
8823b5e504
UX: fix overflow channel row + mobile remove styling tweak (#23611)
* UX: fix missing overflow ellipsis

* cleanup double declaration

* UX: add missing border-radius

*UX: delete icon animation tweak
2023-09-15 14:06:31 +02:00
David Battersby
e6c97ffece
FIX: message date is incorrect when replying as new thread (#23608)
When creating a new thread by clicking the reply button on a chat message, it shows an invalid date on the OP timestamp.
2023-09-15 16:22:49 +08:00
chapoi
02de223da8
UX: chat-channel-row alignment (#23607) 2023-09-15 10:09:50 +02:00
Kris
98c8dcecba
A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
Jarek Radosz
4a1621c677
DEV: Use the Store to create User records (#23584) 2023-09-14 23:26:51 +02:00
Joffrey JAFFEUX
ae27beb01a
UI: improves remove channel animation (#23585)
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-09-14 18:48:29 +02:00
David Taylor
8a57798419
DEV: Update discourse-local-dates to new Modal API (#23560) 2023-09-13 15:00:38 +01:00
David Battersby
7f7e7fe516
Revert "FEATURE: Add chat message notifications for personal chats (#23307)" (#23559)
This reverts commit 0a1a07fff8.
2023-09-13 19:33:22 +08:00
David Battersby
0a1a07fff8
FEATURE: Add chat message notifications for personal chats (#23307)
This feature adds notifications for chat messages that are sent within personal chats (1:1 and personal group chats).

To prevent notification spam we make use of consolidated notifications to combine updated message information in a meaningful way that allows the receiver to quickly jump into the chat to see what they missed.

This update respects muted channels, muted and blocked users. It will only create a new notification when the user has not muted the channel and the notified user is not muting or ignoring the message sender.
2023-09-13 17:15:11 +08: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
David Taylor
c3061d580c
DEV: Remove decorateCookedElement id parameters (#23544)
These are no longer required per https://github.com/discourse/discourse/pull/23543
2023-09-12 16:32:04 +01: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
Joffrey JAFFEUX
b8cc1072cc
Revert "DEV: FloatKit (#23312)" (#23540)
This reverts commit abcdd8d367.
2023-09-12 15:37:16 +02:00
Joffrey JAFFEUX
abcdd8d367
DEV: FloatKit (#23312)
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

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>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually 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 are very similar to tooltips and provide the same kind of APIs:

```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>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually 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 }
  }
)
```

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:06:51 +02:00
Jan Cernik
d9238fb01b
FIX: chat layout shift when loading videos (#23537) 2023-09-12 15:01:17 +02:00
Jan Cernik
d9a2595e7c
FIX: Prevent chat message actions to disappear on mouseleave (#23063) 2023-09-11 16:54:01 -03:00
Joffrey JAFFEUX
898c75a05c
FIX: ensures swipe works with scroll (#23508)
- do not prevent the event (it was a violation anyways as the touchstart is passive)
- waits for at least 25px horizontal move before showing the remove action, it avoids showing the remove while scrolling and moving a little bit horizontally
2023-09-11 15:39:54 +02:00
Joffrey JAFFEUX
b8d5f951f6
UX: implements swipe on row channel (#23436)
On mobile swiping a channel row will now show a "Remove" option. Holding this to the end will now remove this row from your list of followed direct message channels.

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-09-11 14:51:13 +02:00
David Battersby
e771382c1c
DEV: active record validations for maxlength on text columns (#23499)
Introduce max length on text columns for description and slug fields within chat.

At a later date we will probably want to convert these text columns to string/varchar through a migration, but for now this change introduces a limit within the active record model.
2023-09-11 17:05:02 +08:00
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
chapoi
cde5dea74f
UX: popping animation for adding users (#23459)
* UX:  popping animation for adding users

* accessibility wrapper
2023-09-07 15:42:49 +02:00
Andrei Prigorshnev
73781c8a96
FIX: Do not consider code-blocks when parsing mentions (#23280)
We have the max_mentions_per_chat_message site settings; when a user tries 
to mention more users than allowed, no one gets mentioned.

Chat messages may contain code-blocks with strings that look like mentions:

  def foo
    @bar + @baz
  end

The problem is that the parsing code considers these as real mentions and counts 
them when checking the limit. This commit fixes the problem.
2023-09-07 16:13:13 +04:00
chapoi
bf971b022d
UX: lower z-index (#23386)
* UX: lower z-index

* Update plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-04 22:30:51 +02:00
Andrei Prigorshnev
3ee77c29a5
DEV: no need to track status of a deleted user (#22836)
It is hard to catch and debug potential bugs related to live updates of user status 
(though, we haven't seen many such bugs so far). We have a `console.warn` 
statement that should help us to catch one class of such bugs.

Recently, we noticed that this warning gets printed when a user had a chat with 
a user that was then deleted.

This is not a bug, since there is nothing to track for a deleted user, but we don't 
want this noise on the console. This PR makes sure we don't print a warning in 
such cases.
2023-09-04 17:00:09 +04:00
Joffrey JAFFEUX
4f8d52bbcb
UX: hides header's unread indicator on full page (#23370)
The unread(s) will still show in the sidebar, outside of chat and when in drawer mode. This is to prevent the confusion to show an unread count for chat on a button which is going to take the user out of chat.
2023-09-02 12:06:40 +02:00
Mark VanLandingham
9c65e2140a
DEV: Use Notice API for mention warnings (#23238)
This PR swaps out the custom pathway to publishing and rendering mention warnings after a message is sent.

ChatPublisher#publish_notice is used, and expanded. Now, instead of only accepting text_content as an argument, component and component_args are accepted and there is a renderer for these components.

Translations moved to server, as notices expect text to be passed in unless a component is rendered

The warnings are rendered at the top now, outside of the scope of the single message that sent it.

I entirely removed the jit_messages_spec b/c it's duplicate testing of other parts of the app. IMO we don't need a backend test for a feature, a component test for the feature AND a system test (that is slow and potentially even flakey due to timing issues with wait) to test the same thing. So jit_messages_spec is gone.
2023-09-01 09:07:23 -05:00
Joffrey JAFFEUX
ed35ae4dcd
FIX: closes chat emoji picker on body scroll (#23362)
Prior to this fix we would scroll the emoji picker with the body of the page in drawer mode.

With this fix scrolling inside the drawer or the emoji picker will scroll the drawer or the emoji picker, but, scrolling body will close the chat emoji picker.
2023-09-01 09:17:48 +02:00
Jordan Vidrine
72f33d1d5d
FIX: Chat message button radius (#23358) 2023-08-31 15:00:39 -05:00
chapoi
c9c2a73441
UX: thread list design changes (#23348) 2023-08-31 18:09:41 +02:00
Joffrey JAFFEUX
d4322a69db
UX: hides original message user in thread participants (#23350)
Usage:

```hbs
<Chat::Thread::Participants
  @thread={{@thread}}
  @includeOriginalMessageUser={{false}}
/>
```
2023-08-31 14:46:37 +02:00
Jarek Radosz
1c87bb7fe9
DEV: Update DButton uses (#23333)
1. Use `this.` instead of `{{action}}` where applicable
2. Use `{{fn}}` instead of `@actionParam` where applicable
3. Use non-`@` versions of class/type/tabindex/aria-controls/aria-expanded
4. Remove `btn` class (it's added automatically to all DButtons)
5. Remove `type="button"` (it's the default)
6. Use `concat-class` helper
2023-08-31 11:49:35 +02:00
chapoi
a97dcd8564
UX: composer fixes (#23334)
* UX: fix disappearing separator

* UX: slightly smaller composer btns on non-mobile
2023-08-30 15:10:21 +02:00
Jarek Radosz
f6cd8e5968
DEV: Remove redundant braces (#23321) 2023-08-30 10:37:03 +02:00
Martin Brennan
bbd908ae09
FIX: Add hashtag placeholder when chat message sent (#23287)
This commit fixes an issue from 2ecc8291e8
where the user sees an ugly plain #hashtag when sending a chat
message. Now, we add a basic placeholder that looks like the
cooked hashtag with a grey square, which is then filled in
once the "sent" message bus event for the message comes back,
and we do decorateCooked on the message to fill in the proper
hashtag details.
2023-08-30 11:31:34 +10:00
Ted Johansson
7a4119846c
FIX: Include 'notify staff' separator in chat message flag modal (#23301)
When flagging a chat message, and options included both notifying user and notifying staff, the modal was missing the separating text. This was happening because the #staffFlagsAvailable method was based on post flags, and the model for chat flags is slightly different. This fixes that by delegating to the relevant flag target object.
2023-08-29 15:26:14 +08:00
Isaac Janzen
026cd3e532
DEV: Convert flag modal to component-based API (#23279)
# Topic Flag
<img width="587" alt="Screenshot 2023-08-28 at 10 53 12 AM" src="https://github.com/discourse/discourse/assets/50783505/6ffe4e47-05a6-406c-9d1b-899ff4d5c2c9">

# Post Flag
<img width="620" alt="Screenshot 2023-08-28 at 10 52 44 AM" src="https://github.com/discourse/discourse/assets/50783505/1f893916-b62f-4825-a337-4c0e0e4ce3af">

# Chat Flag
<img width="648" alt="Screenshot 2023-08-28 at 10 52 31 AM" src="https://github.com/discourse/discourse/assets/50783505/e79444e8-a8b1-4f05-9b47-03d425bc9085">
2023-08-28 16:51:58 -05:00
Jordan Vidrine
8ec1f6f404
Revert "UX: chat composer (#23267)" (#23273)
This reverts commit 3bcbb2444a.
2023-08-25 13:49:41 -05:00
Joffrey JAFFEUX
4ee0f4e5ba
FIX: ensures we update cached model last message bus id (#23271)
Channels and threads are cached as much as possible, as a result the `last_message_bus_id` can become stalled.

It was for example exhibited with the following actions:
- open a channel (A)
- send a message
- navigate to another channel (B)
- come back to channel (A), and you would actually get all the messages replayed since you opened (A) for the first time as the `last_message_bus_id` would only refresh on a full page reload

This was technically not causing known bugs ATM, but was probably the source of few hard to repro bugs and would for sure cause issues in the future.

Co-authored-by: Mark VanLandingham <markvanlan@gmail.com>
2023-08-25 19:17:48 +02:00
Joffrey JAFFEUX
311b28d485
FIX: incorrect chat message reaction text (#23260)
Prior to this fix the text would be incorrect when the current user reacted and number of reactions was above 2.

This commit fixes the bug and also makes the following changes:
- separates text computation in a standalone lib to make it easier to test
- increases the number of displayed usernames in reaction text (from 5 to 15)
- adds a full test suite for this new `getReactionText` function
- fixes a bug in reaction fabricator which would prevent to change the count to zero
2023-08-25 15:20:56 +02:00
chapoi
3bcbb2444a
UX: chat composer (#23267)
* UX: make composer buttons less wide

* UX: fix disappearing separator
2023-08-25 13:16:58 +02:00
Joffrey JAFFEUX
c5ac500181
UX: minor tweaks to thread list item (#23259)
- drop @
- prevents +X  (participants) to show on next line
- few spacing/fonts adjustments

Note that this commit is also stripping links from chat excerpts.
2023-08-25 11:20:03 +02:00
Joffrey JAFFEUX
39b598f304
UI: refines thread list item (#23207)
It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-24 18:45:20 +02:00
Joffrey JAFFEUX
fc93604b9e
FIX: correctly resets editing state when done (#23209)
Prior to this fix, attempting to reply to a recently edited message would show the edit icon instead of the reply icon.
2023-08-24 09:41:37 +02:00
Andrei Prigorshnev
9c0e50e1cc
FIX: hide tooltips when scrolling on mobile (#23098)
This fixes the problem reported in 
https://meta.discourse.org/t/custom-status-message-in-front-of-by-header-on-scroll/273320.

This problem can be reproduced with any tooltip created using the DTooltip 
component or the createDTooltip function.

The problem happens because the trigger for tooltip on mobile is click, and for tooltip 
to disappear the user has to click outside the tooltip. This is the default behavior 
of tippy.js – the library we use under the hood.

Note that this PR fixes the problem in topics, but not in chat. I'm going to investigate and 
address it in chat in a following PR.

To fix it for tooltips created with the createDTooltip function, I had to make a refactoring. 
We had a somewhat not ideal solution there, we were leaking an implementation detail 
by passing tippy instances to calling sides, so they could then destroy them. With this fix, 
I would have to make it more complex, because now we need to also remove onScrool 
handlers, and I would need to leak this implementation detail too. So, I firstly refactored 
the current solution in 5a4af05 and then added onScroll handlers in fb4aabe.

When refactoring this, I was running locally some temporarily skipped flaky tests. Turned out 
they got a bit outdated, so I fixed them. Note that I'm not unskipping them in this commit, 
we'll address them separately later.
2023-08-23 15:39:58 +04:00
Joffrey JAFFEUX
fef0225a22
FIX: correctly check chat tab is present (#23200)
Prior to this fix we would test by visiting the tab which could create a false positive, as the tab could not be present but we could still access the tab, the implementation and tests have been changed to correctly ensure this.
2023-08-23 13:06:29 +02:00
Joffrey JAFFEUX
a008f61f8f
FIX: correctly closes panel when exiting chat (#23201)
We don't use activate/deactivate as it would cause: close/open in short succession when going from threads to thread for example.
2023-08-23 13:05:15 +02:00
Mark VanLandingham
68eba53e09
FEATURE: Chat global mention warnings (pre-send & post-send) (#22764)
This is also fixes the issue of chat composer warnings persisting across channels. Currently if you try to mention more groups than is allowed for example, a mention warning pops up. When you change channels the mention warning will not disappear even if there is no text in the composer.

This adds a reset function to the chat-composer-warnings-tracker.js, which is called when the channel is changed and the message is empty. In the event that the message is not empty we call captureMentions to check the loaded drafts' mentions.

This PR would be nicer if the post-send notice used the new chat notices API to publish the mention warnings but we would have to change the existing ones and I thought that would be too much change for this PR. It'd be a good followup though.
2023-08-22 15:54:35 -05:00
Andrei Prigorshnev
2d16446078
FIX: revert previously removed mentions transformation on the client (#23084)
This partially reverts 2ecc829.

The problem is that if we don't transform mentions right away, 
there is a noticeable lag before a mention gets fully rendered, 
while with the transformation, everything is super smooth.

I'm reverting that change only for mentions. Another part was about 
category hashtags, but unfortunately they lag both with and without 
the transformation. We need to address them separately.
2023-08-22 20:36:38 +04:00
Joffrey JAFFEUX
0e00784218
UX: do not show user tab preference when disabled (#23188)
Prior to this fix we would only check if the user is allowed to chat and not if chat is enabled.
2023-08-22 18:22:25 +02:00
Joffrey JAFFEUX
2d8a38f883
DEV: removes deprecated code (#23183) 2023-08-22 15:53:37 +02:00
Joffrey JAFFEUX
0afddca0b9
FIX: displays popup error for any error (#23184)
In the past we were only intercepting 429 and 404; it's probably better to surface any error.

There are already tests for the 404 and 429, I consider them enough for now.
2023-08-22 15:53:22 +02:00
Joffrey JAFFEUX
89259205d6
FIX: do not delete empty message with uploads (#23177)
Prior to this fix when editing a message containing only upload, if we would save it, it would delete it by considering it empty.
2023-08-22 15:21:21 +02:00
Joffrey JAFFEUX
687c6c7515
FIX: correctly display max users message error (#23178) 2023-08-22 12:42:35 +02:00
Isaac Janzen
3eb8046dde
DEV: Update replaceWith on Route (#23153)
# Context
This PR was originally implemented in https://github.com/discourse/discourse/pull/22645 then reverted in https://github.com/discourse/discourse/pull/22693. We protect from aborted transition when _awaiting_ on `replaceWith` by utilizing [followRedirects()](https://api.emberjs.com/ember/5.1/classes/Transition/methods/followRedirects?anchor=followRedirects)

# Description
Per https://deprecations.emberjs.com/v3.x/#toc_routing-transition-methods

We are upgrading all `this.replaceWith` calls on routes to directly call the router service (`this.router.replaceWith`)
2023-08-21 16:53:54 -05:00
Joffrey JAFFEUX
3bb2f3a604
FIX: correctly recognizes URL with subfolder (#23173)
Prior to this fix minimizing a full page chat on a subfolder install would cause the drawer to not show.
2023-08-21 22:12:05 +02:00
Jarek Radosz
4a4c91b0a1
FIX: Resize-modifier event listener cleanup (#23166) 2023-08-21 14:14:52 +02:00
Joffrey JAFFEUX
b03c26ebf5
FIX: correctly handles mobile and default (#23152)
This commit ensures we have correct icon and title on mobile for the chat header icon.

It also fixes a bug where the site setting was not correctly used when the user has not yet set the user option.

Both cases are now correctly tested.
2023-08-18 22:32:43 +02:00
Joffrey JAFFEUX
3d86fc1391
FIX: sets sidebar state on load (#23150)
This commit was incorrectly removed of https://github.com/discourse/discourse/pull/23078 and would set the state only on entering (or exiting) chat route. The tests were already present in the previous PR.
2023-08-18 21:08:50 +02:00
Joffrey JAFFEUX
b2b84cc957
FEATURE: implements user based sidebar mode (#23078) 2023-08-18 20:33:07 +02:00
chapoi
a2f5b1b101
UX: improved animation (#23145) 2023-08-18 11:59:54 +02:00
Jan Cernik
b2dc2d1063
FIX: Allow mouse to resize chat drawer on touch devices (#23061) 2023-08-18 10:02:11 +02:00
Joffrey JAFFEUX
7358856ae7
FIX: chat styleguide modal import (#23062) 2023-08-10 15:55:28 +02:00