chore: remove disable if frozen channel (#2841)

* chore: write tests for disallowed sending messages (#2839)

* chore: write tests for disallowed sending messages

* fix: make test name more concise

* chore: remove redundant assertion

* chore: add test for the editing state as well

* fix: only disable message input ui when capabilities change (#2836)

* chore: remove disableIfFrozenChannel prop

* fix: lint issues

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
@@ -371,10 +371,6 @@ export type ChannelPropsWithContext<
      * Additional props passed to keyboard avoiding view
      */
     additionalKeyboardAvoidingViewProps?: Partial<KeyboardAvoidingViewProps>;
-    /**
-     * Disables the channel UI if the channel is frozen
-     */
-    disableIfFrozenChannel?: boolean;
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
@@ -503,7 +499,6 @@ const ChannelWithContext = <
     CreatePollContent,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
-    disableIfFrozenChannel = true,
     disableKeyboardCompatibleView = false,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch = true,
@@ -1596,19 +1591,14 @@ const ChannelWithContext = <
     }
   };
 
-  const disabledValue = useMemo(
-    () => !!channel?.data?.frozen && disableIfFrozenChannel,
-    [channel.data?.frozen, disableIfFrozenChannel],
-  );
-
   const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
     channel,
     overrideCapabilities: overrideOwnCapabilities,
   });
 
   const channelContext = useCreateChannelContext({
     channel,
-    disabled: disabledValue,
+    disabled: !!channel?.data?.frozen,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
     enforceUniqueReaction,

package/src/components/MessageInput/MessageInput.tsx

@@ -1102,7 +1102,7 @@ export const MessageInput = <
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { disabled, members, threadList, watchers } = useChannelContext<StreamChatGenerics>();
+  const { members, threadList, watchers } = useChannelContext<StreamChatGenerics>();
 
   const {
     additionalTextInputProps,
@@ -1181,7 +1181,7 @@ export const MessageInput = <
    * Disable the message input if the channel is frozen, or the user doesn't have the capability to send a message.
    * Enable it in frozen mode, if it the input has editing state.
    */
-  if ((disabled || !ownCapabilities.sendMessage) && !editing && SendMessageDisallowedIndicator) {
+  if (!ownCapabilities.sendMessage && !editing && SendMessageDisallowedIndicator) {
     return <SendMessageDisallowedIndicator />;
   }
 

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Alert } from 'react-native';
 
-import { cleanup, fireEvent, render, userEvent, waitFor } from '@testing-library/react-native';
+import { act, cleanup, fireEvent, render, userEvent, waitFor } from '@testing-library/react-native';
 
+import { useMessagesContext } from '../../../contexts';
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
@@ -188,4 +189,117 @@ describe('MessageInput', () => {
       expect(Alert.alert).toHaveBeenCalledWith('Hold to start recording.');
     });
   });
+
+  it('should render the SendMessageDisallowedIndicator if the send-message capability is not present', async () => {
+    await initializeChannel(generateChannelResponse());
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <MessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+
+    act(() => {
+      chatClient.dispatchEvent({
+        cid: channel.data.cid,
+        own_capabilities: channel.data.own_capabilities.filter(
+          (capability) => capability !== 'send-message',
+        ),
+        type: 'capabilities.changed',
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeTruthy();
+    });
+  });
+
+  it('should not render the SendMessageDisallowedIndicator if the channel is frozen and the send-message capability is present', async () => {
+    await initializeChannel(generateChannelResponse({ channel: { frozen: true } }));
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <MessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+  });
+
+  it('should render the SendMessageDisallowedIndicator in a frozen channel only if the send-message capability is not present', async () => {
+    await initializeChannel(generateChannelResponse({ channel: { frozen: true } }));
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <MessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    act(() => {
+      chatClient.dispatchEvent({
+        channel: {
+          ...channel.data,
+          own_capabilities: channel.data.own_capabilities.filter(
+            (capability) => capability !== 'send-message',
+          ),
+        },
+        cid: channel.data.cid,
+        type: 'channel.updated',
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeTruthy();
+    });
+  });
+
+  const EditingStateMessageInput = () => {
+    const { setEditingState } = useMessagesContext();
+    useEffect(() => {
+      setEditingState({ id: 'some-message-id' });
+    }, []);
+    return <MessageInput />;
+  };
+
+  it('should not render the SendMessageDisallowedIndicator if we are editing a message, regardless of capabilities', async () => {
+    await initializeChannel(generateChannelResponse());
+
+    const { queryByTestId } = render(
+      <Chat client={chatClient}>
+        <Channel audioRecordingEnabled channel={channel}>
+          <EditingStateMessageInput />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+
+    act(() => {
+      chatClient.dispatchEvent({
+        cid: channel.data.cid,
+        own_capabilities: channel.data.own_capabilities.filter(
+          (capability) => capability !== 'send-message',
+        ),
+        type: 'capabilities.changed',
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
+    });
+  });
 });