Merge pull request #1614 from GetStream/develop

v9.1.0

Author: MartinCupela

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: 'bug:'
-labels: bug
+labels: 'bug, status: unconfirmed'
 assignees: ''
 
 ---

.github/workflows/ci.yml

@@ -54,7 +54,7 @@ jobs:
           E2E_APP_SECRET: ${{ secrets.E2E_APP_SECRET }}
           E2E_TEST_USER_1_TOKEN: ${{ secrets.E2E_TEST_USER_1_TOKEN }}
           E2E_TEST_USER_2_TOKEN: ${{ secrets.E2E_TEST_USER_2_TOKEN }}
-          E2E_ADDITIONAL_CHANNELS: mr-channel-1, mr-channel-2
+          E2E_ADDITIONAL_CHANNELS: mr-channel-1, mr-channel-2, edit-message-channel
           E2E_LONG_MESSAGE_LISTS_CHANNEL: navigate-long-message-lists
 
       - name: 🎥 Upload Artifacts

CHANGELOG.md

@@ -1,16 +1,19 @@
-# [9.0.0](https://github.com/GetStream/stream-chat-react/compare/v8.2.0...v9.0.0) (2022-05-17)
+## [9.0.0](https://github.com/GetStream/stream-chat-react/compare/v8.2.0...v9.0.0) (2022-05-17)
 
+### Bug Fixes
 
-### Features
+* display textarea defaultValue in MessageInput ([#1570](https://github.com/GetStream/stream-chat-react/issues/1570)) ([516a56b](https://github.com/GetStream/stream-chat-react/commit/516a56b8b8a24739f66c0d7b47c159d6bca7d3be))
 
-* **MessageInput:** add shouldSubmit, remove keycodeSubmitKeys ([9e69c0b](https://github.com/GetStream/stream-chat-react/commit/9e69c0b5d6169a221c2e478b42bf4c29154b05f9)), closes [#1530](https://github.com/GetStream/stream-chat-react/issues/1530)
+### Features
 
+* **MessageInput:** add shouldSubmit, remove keycodeSubmitKeys ([8e2cddd](https://github.com/GetStream/stream-chat-react/pull/1534/commits/8e2cdddddd256ec1ab77ba2bc7d59a40cfba7b11)), closes [#1530](https://github.com/GetStream/stream-chat-react/issues/1530)
+* add support for React 18 ([#1534](https://github.com/GetStream/stream-chat-react/issues/1534)) ([39cedcb](https://github.com/GetStream/stream-chat-react/commit/39cedcb8d0821e4bb6e8061349ae52132aa32c45))
 
 ### BREAKING CHANGES
 
 * **MessageInput:** property  has been fully removed and replaced by the  property
 which should handle custom submit "trigger" functionality.
-Both  and usage of key codes were outdated and caused unnecessary issues.
+Both `listener.js` and usage of key codes were outdated and caused unnecessary issues.
 
 # [8.2.0](https://github.com/GetStream/stream-chat-react/compare/v8.1.3...v8.2.0) (2022-05-17)
 
@@ -39,7 +42,6 @@ Both  and usage of key codes were outdated and caused unnecessary issues.
 
 * display overlay "X more" on Gallery only if more images uploaded than displayed ([#1526](https://github.com/GetStream/stream-chat-react/issues/1526)) ([ed47cd1](https://github.com/GetStream/stream-chat-react/commit/ed47cd1e0d2df6b2af72ae33e5c1b2efffec1591))
 
-# Changelog
 
 ## [8.1.1](https://github.com/GetStream/stream-chat-react/compare/v8.1.0...v8.1.1) (2022-04-18)
 

docusaurus/docs/React/core-components/channel-list.mdx

@@ -64,6 +64,24 @@ const CustomListItem = (props) => {
 </Chat>;
 ```
 
+In cases where the customizations provided by `Preview` are not enough, e.g. grouping channels under sections based on some
+dynamic channel data, the `renderChannels` may be a good fit as all loaded channels are passed as an argument to the function.
+
+```jsx
+const renderChannels = (loadedChannels, ChannelPreview) => {
+  const groups = groupBy(loadedChannels, 'some_custom_channel_data');
+  return renderGroups(groups); // inside renderGroups you have have headings, etc...
+}
+
+<Chat client={client}>
+  <ChannelList {/* other props */} renderChannels={renderChannels} />
+  <Channel>
+    <MessageList />
+    <MessageInput />
+  </Channel>
+</Chat>;
+```
+
 ## Event Listeners
 
 In order to handle the requisite, dynamic nature of the `ChannelList`, a variety of
@@ -329,6 +347,14 @@ Custom UI component to display the channel preview in the list.
 | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
 | component | [ChannelPreviewMessenger](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelPreview/ChannelPreviewMessenger.tsx) |
 
+### renderChannels
+
+Function to override the default behavior when rendering channels, so this function is called instead of rendering the Preview directly.
+
+| Type     |
+| -------- |
+| function |
+
 ### sendChannelsToList
 
 If true, sends the list's currently loaded channels to the `List` component as the `loadedChannels` prop.

e2e/add-message.test.ts

@@ -1,123 +1,132 @@
+/* eslint-disable jest/expect-expect */
 /* eslint-disable jest/no-done-callback */
 /* eslint-disable jest/require-top-level-describe */
 import selectors from './user/selectors';
 import { test } from './user/test';
 
+import ChannelPreview from './user/components/ChannelPreview';
+import MessageList from './user/components/MessageList/MessageList';
+import MessageActions from './user/components/MessageActions/MessageActions';
+import Thread from './user/components/Thread/Thread';
+import MessageInput from './user/components/MessageInput';
+
 const CHANNEL_NAME = 'add-message' as const;
 const ADDED_MESSAGE_MAIN_LIST = 'Hello world!' as const;
 const ADDED_MESSAGE_THREAD = 'Hello world back!' as const;
 
 test.describe('add text message', () => {
-
-  test.beforeEach(async ({controller, user}) => {
+  test.beforeEach(async ({ controller, user }) => {
     await controller.openStory('add-message--user1', selectors.channelPreviewButton);
-    await user.clicks.ChannelPreview.text(CHANNEL_NAME);
+    await user.clicks(ChannelPreview).text(CHANNEL_NAME);
   });
 
-  test('message list and preview button should be clear', async ({controller, user}) => {
-    await controller.clearChannel()
-    await user.sees.MessageList.empty();
-    await user.sees.ChannelPreview(CHANNEL_NAME).empty();
+  test('message list and preview button should be clear', async ({ controller, user }) => {
+    await controller.clearChannel();
+    await user.sees(MessageList).empty();
+    await user.sees(ChannelPreview)(CHANNEL_NAME).empty();
   });
 
-  test('message list should update for current user', async ({controller, user}) => {
+  test('message list should update for current user', async ({ controller, user }) => {
     await controller.sendMessage();
 
-    await user.sees.MessageList.not.empty();
-    await user.sees.MessageList.contains.nthMessage(ADDED_MESSAGE_MAIN_LIST);
-    await user.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_MAIN_LIST);
+    await user.sees(MessageList).not.empty();
+    await user.sees(MessageList).contains.nthMessage(ADDED_MESSAGE_MAIN_LIST);
+    await user.sees(ChannelPreview)(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_MAIN_LIST);
   });
 });
 
 test.describe('receive a message', () => {
-
-  test.beforeEach(async ({controller, user}) => {
+  test.beforeEach(async ({ controller, user }) => {
     await controller.openStory('add-message--user1', selectors.channelPreviewButton);
 
-    await user.clicks.ChannelPreview.text(CHANNEL_NAME);
+    await user.clicks(ChannelPreview).text(CHANNEL_NAME);
 
     await controller.sendMessage();
 
     await controller.openStory('add-message--user2', selectors.channelPreviewButton);
   });
 
-  test('channel list should update for channel members and show unread', async ({user}) => {
-    await user.sees.ChannelPreview(CHANNEL_NAME).not.read();
-    await user.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_MAIN_LIST);
+  test('channel list should update for channel members and show unread', async ({ user }) => {
+    await user.sees(ChannelPreview)(CHANNEL_NAME).not.read();
+    await user.sees(ChannelPreview)(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_MAIN_LIST);
   });
 
-  test('message list should update for different users on the channel', async ({user, page}) => {
+  test('message list should update for different users on the channel', async ({ page, user }) => {
     await Promise.all([
       page.waitForResponse((r) => r.url().includes('/read') && r.ok()),
-      user.clicks.ChannelPreview.text(CHANNEL_NAME)
+      user.clicks(ChannelPreview).text(CHANNEL_NAME),
     ]);
-    await user.sees.MessageList.not.empty();
-    await user.sees.ChannelPreview(CHANNEL_NAME).read();
-    await user.sees.MessageList.contains.nthMessage(ADDED_MESSAGE_MAIN_LIST);
+    await user.sees(MessageList).not.empty();
+    await user.sees(ChannelPreview)(CHANNEL_NAME).read();
+    await user.sees(MessageList).contains.nthMessage(ADDED_MESSAGE_MAIN_LIST);
   });
 });
 
-
 test.describe('reply to a message', () => {
-  test.beforeEach(async ({controller, user}) => {
+  test.beforeEach(async ({ controller, user }) => {
     await controller.openStory('add-message--user1', selectors.channelPreviewButton);
-    await user.clicks.ChannelPreview.text(CHANNEL_NAME);
+    await user.clicks(ChannelPreview).text(CHANNEL_NAME);
   });
 
-  test.afterEach(async ({user}) => {
-    await user.clicks.Thread.close();
-  })
+  test.afterEach(async ({ user }) => {
+    await user.clicks(Thread).close();
+  });
 
-  test('thread with no replies contains only parent message', async ({controller, user}) => {
+  test('thread with no replies contains only parent message', async ({ controller, user }) => {
     await controller.clearChannel();
     await controller.sendMessage();
-    await user.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST);
-    await user.sees.Thread.empty();
+    await user.clicks(MessageActions).reply(ADDED_MESSAGE_MAIN_LIST);
+    await user.sees(Thread).empty();
   });
 
-  test('reply to a message should appear at the bottom of the thread and in channel preview', async ({ user}) => {
-    await user.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST);
-    await user.submits.MessageInput.reply(ADDED_MESSAGE_THREAD);
-    await user.sees.Thread.not.empty();
-    await user.sees.Thread.inViewport.nthMessage(ADDED_MESSAGE_THREAD, -1);
+  test('reply to a message should appear at the bottom of the thread and in channel preview', async ({
+    user,
+  }) => {
+    await user.clicks(MessageActions).reply(ADDED_MESSAGE_MAIN_LIST);
+    await user.submits(MessageInput).reply(ADDED_MESSAGE_THREAD);
+    await user.sees(Thread).not.empty();
+    await user.sees(Thread).inViewport.nthMessage(ADDED_MESSAGE_THREAD, -1);
     // todo: channel preview does not reflect new messages from thread
-    // await user.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_THREAD);
+    // await user.sees(ChannelPreview(CHANNEL_NAME)).contains.lastMessage(ADDED_MESSAGE_THREAD);
   });
-})
+});
 
 test.describe('receive the reply', () => {
-  test.beforeEach(async ({controller, user: user1, page}) => {
+  test.beforeEach(async ({ controller, page, user: user1 }) => {
     await controller.openStory('add-message--user1', selectors.channelPreviewButton);
-    await user1.clicks.ChannelPreview.text(CHANNEL_NAME);
+    await user1.clicks(ChannelPreview).text(CHANNEL_NAME);
     await controller.clearChannel();
     await controller.sendMessage();
-    await user1.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST);
+    await user1.clicks(MessageActions).reply(ADDED_MESSAGE_MAIN_LIST);
     await Promise.all([
       page.waitForResponse((r) => r.url().includes('/message') && r.ok()),
-      user1.submits.MessageInput.reply(ADDED_MESSAGE_THREAD)
-    ])
+      user1.submits(MessageInput).reply(ADDED_MESSAGE_THREAD),
+    ]);
     await controller.openStory('add-message--user2', selectors.channelPreviewButton);
   });
 
   // todo: channel preview does not reflect new messages from thread
   // test('for the other user channel preview displays correct last message showed unread', async ({user: user2}) => {
-  //   await user2.sees.ChannelPreview(CHANNEL_NAME).not.read();
-  //   await user2.sees.ChannelPreview(CHANNEL_NAME).contains.lastMessage(ADDED_MESSAGE_THREAD);
+  //   await user2.sees(ChannelPreview(CHANNEL_NAME)).not.read();
+  //   await user2.sees(ChannelPreview(CHANNEL_NAME)).contains.lastMessage(ADDED_MESSAGE_THREAD);
   // });
 
-  test('the other user sees that reply to a message appeared at the bottom of the thread and in channel preview', async ({user: user2, page}) => {
+  test('the other user sees that reply to a message appeared at the bottom of the thread and in channel preview', async ({
+    page,
+    user: user2,
+  }) => {
     await Promise.all([
       page.waitForResponse((r) => r.url().includes('/read') && r.ok()),
-      user2.clicks.ChannelPreview.text(CHANNEL_NAME)
+      user2.clicks(ChannelPreview).text(CHANNEL_NAME),
     ]);
 
     await Promise.all([
       page.waitForResponse((r) => r.url().includes('/replies') && r.ok()),
-      user2.clicks.MessageActions.reply(ADDED_MESSAGE_MAIN_LIST),
+      user2.clicks(MessageActions).reply(ADDED_MESSAGE_MAIN_LIST),
     ]);
 
-    await user2.sees.Thread.not.empty();
-    await user2.sees.ChannelPreview(CHANNEL_NAME).read();
-    await user2.sees.Thread.inViewport.nthMessage(ADDED_MESSAGE_THREAD, -1);
+    await user2.sees(Thread).not.empty();
+    await user2.sees(ChannelPreview)(CHANNEL_NAME).read();
+    await user2.sees(Thread).inViewport.nthMessage(ADDED_MESSAGE_THREAD, -1);
   });
 });

e2e/autocomplete-mention.test.ts

@@ -2,21 +2,24 @@
 /* eslint-disable jest/require-top-level-describe */
 import { expect } from '@playwright/test';
 
-import {test} from './user/test';
+import { test } from './user/test';
 import { getMessageInput } from './user/components/MessageInput';
 import selectors from './user/selectors';
 
+import AutocompleteSuggestionItem from './user/components/AutocompleteSuggestionList';
+import MessageInput from './user/components/MessageInput';
+
 const MENTION_TRIGGER = '@';
 
 test.describe('autocomplete a mention', () => {
-  test('should fill in textarea with username', async ({ controller, user, page }) => {
-    await controller.openStory('hello--basic-setup', selectors.messageInput );
+  test('should fill in textarea with username', async ({ controller, page, user }) => {
+    await controller.openStory('hello--basic-setup', selectors.messageInput);
 
-    await user.typesTo.MessageInput.text(MENTION_TRIGGER);
+    await user.typesTo(MessageInput).text(MENTION_TRIGGER);
 
-    const autocompleteSuggestionItem = await user.clicks.AutocompleteSuggestionItem.nth(1)
+    const autocompleteSuggestionItem = await user.clicks(AutocompleteSuggestionItem).nth(1);
     const textContent = await autocompleteSuggestionItem.textContent();
 
     await expect(getMessageInput(page)).toContainText(`${MENTION_TRIGGER}${textContent}`);
   });
-})
+});