Joffrey JAFFEUX bf886662df
UX: improves composer and thread panel (#21210)
This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step.

### New features included in this PR

- A resizable side panel
- A clear dropzone area for uploads
- A simplified design for image uploads, this is only a first step towards more redesign of this area in the future

### Notable fixes in this PR

- Correct placeholder in thread panel
- Allows to edit the last message of a thread with arrow up
- Correctly focus composer when replying to a message
- The reply indicator is added instantly in the channel when starting a thread
- Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content

### Technical notes

To achieve this PR, three important changes have been made:

- `<ChatComposer>` has been fully rewritten and is now a glimmer component
- The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage`
- `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>`

Note ".chat-live-pane" has been renamed ".chat-channel"

Design for upload dropzone is from @chapoi
2023-04-25 10:23:03 +02:00

77 lines
2.1 KiB
Ruby
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# frozen_string_literal: true
RSpec.describe "Shortcuts | drawer", type: :system, js: true do
fab!(:user_1) { Fabricate(:admin) }
fab!(:channel_1) { Fabricate(:chat_channel) }
fab!(:channel_2) { Fabricate(:chat_channel) }
let(:chat_page) { PageObjects::Pages::Chat.new }
let(:drawer) { PageObjects::Pages::ChatDrawer.new }
before do
chat_system_bootstrap(user_1, [channel_1, channel_2])
sign_in(user_1)
end
context "when drawer is closed" do
before { visit("/") }
context "when pressing dash" do
it "opens the drawer" do
find("body").send_keys("-")
expect(page).to have_css(".chat-drawer.is-expanded")
end
end
end
context "when drawer is opened" do
before do
visit("/")
chat_page.open_from_header
end
context "when pressing escape" do
it "closes the drawer" do
expect(page).to have_css(".chat-drawer.is-expanded")
drawer.open_channel(channel_1)
find(".chat-composer__input").send_keys(:escape)
expect(page).to have_no_css(".chat-drawer.is-expanded")
end
end
context "when pressing a letter" do
it "doesnt intercept the event" do
drawer.open_channel(channel_1)
find(".header-sidebar-toggle").click # simple way to ensure composer is not focused
page.send_keys("e")
expect(find(".chat-composer__input").value).to eq("")
end
end
context "when using Up/Down arrows" do
it "navigates through the channels" do
drawer.open_channel(channel_1)
expect(page).to have_selector(".chat-drawer[data-chat-channel-id=\"#{channel_1.id}\"]")
find(".chat-composer__input").send_keys(%i[alt arrow_down])
expect(page).to have_selector(".chat-drawer[data-chat-channel-id=\"#{channel_2.id}\"]")
find(".chat-composer__input").send_keys(%i[alt arrow_down])
expect(page).to have_selector(".chat-drawer[data-chat-channel-id=\"#{channel_1.id}\"]")
find(".chat-composer__input").send_keys(%i[alt arrow_up])
expect(page).to have_selector(".chat-drawer[data-chat-channel-id=\"#{channel_2.id}\"]")
end
end
end
end