From 81bf45b0f24519382501638c58cc37a2c0a3059c Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj <31964049+isekovanic@users.noreply.github.com> Date: Wed, 11 Dec 2024 08:55:10 +0100 Subject: [PATCH 1/4] 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 --- .../__tests__/MessageInput.test.js | 118 +++++++++++++++++- 1 file changed, 116 insertions(+), 2 deletions(-) diff --git a/package/src/components/MessageInput/__tests__/MessageInput.test.js b/package/src/components/MessageInput/__tests__/MessageInput.test.js index 68b8c1681..c76e38fdf 100644 --- a/package/src/components/MessageInput/__tests__/MessageInput.test.js +++ b/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( + + + + + , + ); + + 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( + + + + + , + ); + + 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( + + + + + , + ); + + 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 ; + }; + + it('should not render the SendMessageDisallowedIndicator if we are editing a message, regardless of capabilities', async () => { + await initializeChannel(generateChannelResponse()); + + const { queryByTestId } = render( + + + + + , + ); + + 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(); + }); + }); }); From 7063a30bea354b356f3cf8af9f27fa8bb2625e11 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj <31964049+isekovanic@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:31:40 +0100 Subject: [PATCH 2/4] fix: only disable message input ui when capabilities change (#2836) --- package/src/components/MessageInput/MessageInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index 353504e79..63a6ff159 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/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(); + const { members, threadList, watchers } = useChannelContext(); 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 ; } From 35383053e8fae1226c086abd9f16aed5fd5c30d8 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 11 Dec 2024 09:39:55 +0100 Subject: [PATCH 3/4] chore: remove disableIfFrozenChannel prop --- package/src/components/Channel/Channel.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index 272f2e657..06d22b550 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/package/src/components/Channel/Channel.tsx @@ -371,10 +371,6 @@ export type ChannelPropsWithContext< * Additional props passed to keyboard avoiding view */ additionalKeyboardAvoidingViewProps?: Partial; - /** - * 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,11 +1591,6 @@ const ChannelWithContext = < } }; - const disabledValue = useMemo( - () => !!channel?.data?.frozen && disableIfFrozenChannel, - [channel.data?.frozen, disableIfFrozenChannel], - ); - const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({ channel, overrideCapabilities: overrideOwnCapabilities, @@ -1608,7 +1598,7 @@ const ChannelWithContext = < const channelContext = useCreateChannelContext({ channel, - disabled: disabledValue, + disabled: !!channel?.data?.frozen, EmptyStateIndicator, enableMessageGroupingByUser, enforceUniqueReaction, From c0bb2cfe47e34e7421829095152a82bdfcfe8140 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Wed, 11 Dec 2024 09:41:41 +0100 Subject: [PATCH 4/4] fix: lint issues --- package/src/components/Channel/Channel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index 06d22b550..27b4546d5 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/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';