fix: prevent querying thread draft when drafts are disabled (#2767)

Author: MartinCupela

package.json

@@ -142,7 +142,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
-    "stream-chat": "^9.8.0"
+    "stream-chat": "^9.10.1"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -236,7 +236,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "^9.8.0",
+    "stream-chat": "^9.10.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"

src/components/MessageInput/MessageInput.tsx

@@ -111,7 +111,12 @@ const MessageInputProvider = (props: PropsWithChildren<MessageInputProps>) => {
 
   useEffect(() => {
     const threadId = messageComposer.threadId;
-    if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
+    if (
+      !threadId ||
+      !messageComposer.channel ||
+      !messageComposer.compositionIsEmpty ||
+      !messageComposer.config.drafts.enabled
+    )
       return;
     // get draft data for legacy thead composer
     messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {

src/components/MessageInput/__tests__/EditMessageForm.test.js

@@ -822,18 +822,6 @@ describe(`EditMessageForm`, () => {
   });
 
   describe('Submitting', () => {
-    it('should not submit the message if content not change', async () => {
-      const { customChannel, customClient } = await setup();
-      const { container, submit } = await renderComponent({
-        customChannel,
-        customClient,
-      });
-
-      await act(() => submit());
-
-      expect(editMock).not.toHaveBeenCalled();
-      await axeNoViolations(container);
-    });
     it('should submit the input value with text changed', async () => {
       const { customChannel, customClient } = await setup();
       const { container, submit } = await renderComponent({

src/components/MessageInput/__tests__/ThreadMessageInput.test.js

@@ -6,7 +6,7 @@ import {
   generateUser,
   initClientWithChannels,
 } from '../../../mock-builders';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatProvider, MessageProvider, useChannelActionContext } from '../../../context';
 import { Channel } from '../../Channel';
 import { MessageActionsBox } from '../../MessageActions';
@@ -78,7 +78,9 @@ const setup = async ({ channelData } = {}) => {
   const sendFileSpy = jest.spyOn(customChannel, 'sendFile').mockResolvedValueOnce({
     file: fileUploadUrl,
   });
-  const getDraftSpy = jest.spyOn(customChannel, 'getDraft').mockResolvedValue({});
+  const getDraftSpy = jest
+    .spyOn(customChannel, 'getDraft')
+    .mockResolvedValue({ draft: { message: { id: 'x' } } });
   customChannel.initialized = true;
   customClient.activeChannels[customChannel.cid] = customChannel;
   return { customChannel, customClient, getDraftSpy, sendFileSpy, sendImageSpy };
@@ -157,13 +159,68 @@ const renderComponent = async ({
 };
 
 describe('MessageInput in Thread', () => {
+  describe('draft', () => {
+    it('is queried when drafts are enabled', async () => {
+      const { customChannel, customClient, getDraftSpy } = await setup();
+      await act(() => {
+        customClient.setMessageComposerSetupFunction(({ composer }) => {
+          composer.updateConfig({ drafts: { enabled: true } });
+        });
+      });
+      await renderComponent({
+        customChannel,
+        customClient,
+      });
+      expect(getDraftSpy).toHaveBeenCalledTimes(1);
+    });
+    it('prevents querying if composition is not empty', async () => {
+      const { customChannel, customClient, getDraftSpy } = await setup();
+      await act(() => {
+        customClient.setMessageComposerSetupFunction(({ composer }) => {
+          composer.updateConfig({ drafts: { enabled: true } });
+          composer.textComposer.setText('abc');
+        });
+      });
+      await renderComponent({
+        customChannel,
+        customClient,
+      });
+      expect(getDraftSpy).not.toHaveBeenCalled();
+    });
+    it('prevents querying if not rendered inside a thread', async () => {
+      const { customChannel, customClient, getDraftSpy } = await setup();
+      await act(() => {
+        customClient.setMessageComposerSetupFunction(({ composer }) => {
+          composer.updateConfig({ drafts: { enabled: true } });
+          composer.compositionContext = customChannel;
+        });
+      });
+      await renderComponent({
+        customChannel,
+        customClient,
+      });
+      expect(getDraftSpy).not.toHaveBeenCalled();
+    });
+    it('prevents querying if drafts are disabled (default)', async () => {
+      const { customChannel, customClient, getDraftSpy } = await setup();
+      await renderComponent({
+        customChannel,
+        customClient,
+      });
+      expect(getDraftSpy).not.toHaveBeenCalled();
+    });
+  });
+
   it('renders in the thread context for direct messaging channel', async () => {
     const { customChannel, customClient } = await setup();
     await renderComponent({
       customChannel,
       customClient,
     });
-    expect(screen.getByLabelText('Also send as a direct message')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Also send as a direct message')).toBeInTheDocument();
+    });
   });
   it('renders in the thread context for non-direct messaging channel', async () => {
     const mainListMessage = generateMessage({ cid, user });

src/mock-builders/generator/channel.js src/mock-builders/generator/channel.tssrc/mock-builders/generator/channel.js renamed to src/mock-builders/generator/channel.ts

@@ -1,6 +1,12 @@
 import { nanoid } from 'nanoid';
+import type { ChannelConfigWithInfo, ChannelResponse } from 'stream-chat';
 
-export const generateChannel = (options = { channel: {} }) => {
+export const generateChannel = (
+  options: {
+    channel?: Partial<ChannelResponse>;
+    config?: Partial<ChannelConfigWithInfo>;
+  } = { channel: {}, config: {} },
+) => {
   const { channel: optionsChannel, config, ...optionsBesidesChannel } = options;
   const id = optionsChannel?.id ?? nanoid();
   const type = optionsChannel?.type ?? 'messaging';
@@ -43,7 +49,7 @@ export const generateChannel = (options = { channel: {} }) => {
         uploads: true,
         url_enrichment: true,
         ...config,
-      },
+      } as ChannelConfigWithInfo,
 
       created_at: '2020-04-28T11:20:48.578147Z',
 
@@ -56,11 +62,12 @@ export const generateChannel = (options = { channel: {} }) => {
         role: 'user',
         updated_at: '2020-04-28T11:21:08.357468Z',
       },
+      disabled: false,
       frozen: false,
       id,
       type,
       updated_at: '2020-04-28T11:20:48.578147Z',
       ...restOptionsChannel,
-    },
+    } as ChannelResponse,
   };
 };

src/mock-builders/generator/reminder.ts

@@ -1,7 +1,8 @@
 import type { ReminderResponse } from 'stream-chat';
+import { generateChannel } from './channel';
 
 const baseData = {
-  channel_cid: 'channel_cid',
+  channel_cid: 'messaging:id',
   message_id: 'message_id',
   user_id: 'user_id',
 } as const;
@@ -16,6 +17,7 @@ export const generateReminderResponse = ({
   const created_at = new Date().toISOString();
   const basePayload: ReminderResponse = {
     ...baseData,
+    channel: generateChannel({ channel: { cid: baseData.channel_cid } }).channel,
     created_at,
     message: { id: baseData.message_id, type: 'regular' },
     updated_at: created_at,

yarn.lock

@@ -12036,10 +12036,10 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-stream-chat@^9.8.0:
-  version "9.8.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.8.0.tgz#52782073a3923367fe97638fde39ce18e4eed28a"
-  integrity sha512-iKFVFOKWuW2/GTWBOps9YWZoQBlXdJ05FiOKXI/AnCMCGzOpmvEyaoCtsktvdeMaetmZojVPbw/5jomP36Qg0Q==
+stream-chat@^9.10.1:
+  version "9.10.1"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.10.1.tgz#d460faeacfc55159bce0caf16067d4dec344b474"
+  integrity sha512-JwiM/iqaU16SlyG90eAezayKGnVmhNjrPfRKATlriwvGEaO8kgZfCUg5It4hIqXgdIAHFbrwHF6OHexWVXpY8w==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"