fix: promote experimental components to stable

src/components/Channel/Channel.tsx

@@ -105,7 +105,6 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'Avatar'
   | 'BaseImage'
   | 'CooldownTimer'
-  | 'CustomMessageActionsList'
   | 'DateSeparator'
   | 'EditMessageInput'
   | 'EditMessageModal'
@@ -128,7 +127,6 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'MessageListNotifications'
   | 'MessageListMainPanel'
   | 'MessageNotification'
-  | 'MessageOptions'
   | 'MessageRepliesCountButton'
   | 'MessageStatus'
   | 'MessageSystem'
@@ -1216,7 +1214,6 @@ const ChannelInner = (
       Avatar: props.Avatar,
       BaseImage: props.BaseImage,
       CooldownTimer: props.CooldownTimer,
-      CustomMessageActionsList: props.CustomMessageActionsList,
       DateSeparator: props.DateSeparator,
       EditMessageInput: props.EditMessageInput,
       EditMessageModal: props.EditMessageModal,
@@ -1238,7 +1235,6 @@ const ChannelInner = (
         props.MessageIsThreadReplyInChannelButtonIndicator,
       MessageListNotifications: props.MessageListNotifications,
       MessageNotification: props.MessageNotification,
-      MessageOptions: props.MessageOptions,
       MessageRepliesCountButton: props.MessageRepliesCountButton,
       MessageStatus: props.MessageStatus,
       MessageSystem: props.MessageSystem,
@@ -1286,7 +1282,6 @@ const ChannelInner = (
       props.Avatar,
       props.BaseImage,
       props.CooldownTimer,
-      props.CustomMessageActionsList,
       props.DateSeparator,
       props.EditMessageInput,
       props.EditMessageModal,
@@ -1307,7 +1302,6 @@ const ChannelInner = (
       props.MessageIsThreadReplyInChannelButtonIndicator,
       props.MessageListNotifications,
       props.MessageNotification,
-      props.MessageOptions,
       props.MessageRepliesCountButton,
       props.MessageStatus,
       props.MessageSystem,

src/components/Channel/__tests__/Channel.test.js

@@ -29,8 +29,8 @@
 } from '../../../mock-builders';
 import { MessageList } from '../../MessageList';
 import { Thread } from '../../Thread';
 import { MessageProvider } from '../../../context';
 import { MessageActionsBox } from '../../MessageActions';
 import { DEFAULT_THREAD_PAGE_SIZE } from '../../../constants/limits';
 import { generateMessageDraft } from '../../../mock-builders/generator/messageDraft';
 
@@ -2273,32 +2273,4 @@
       );
     });
   });
-
-  describe('Custom Components', () => {
-    it('should render CustomMessageActionsList if provided', async () => {
-      const CustomMessageActionsList = jest
-        .fn()
-        .mockImplementation(() => 'CustomMessageActionsList');
-
-      const messageContextValue = {
-        message: generateMessage(),
-        messageListRect: {},
-      };
-
-      await renderComponent({
-        channel,
-        chatClient,
-        children: (
-          <MessageProvider value={{ ...messageContextValue }}>
-            <MessageActionsBox getMessageActions={jest.fn(() => [])} />
-          </MessageProvider>
-        ),
-        CustomMessageActionsList,
-      });
-
-      await waitFor(() => {
-        expect(CustomMessageActionsList).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
 });

src/components/Message/FixedHeightMessage.tsx

@@ -1,9 +1,8 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
-import { useDeleteHandler, useUserRole } from './hooks';
+import { useUserRole } from './hooks';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
 import { MessageTimestamp } from './MessageTimestamp';
-import { getMessageActions } from './utils';
 
 import { Avatar } from '../Avatar';
 import { Gallery } from '../Gallery';
@@ -55,7 +54,6 @@ const UnMemoizedFixedHeightMessage = (props: FixedHeightMessageProps) => {
     propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
   const message = propMessage || contextMessage;
 
-  const handleDelete = useDeleteHandler(message);
   const role = useUserRole(message);
 
   const messageTextToRender =
@@ -70,11 +68,6 @@ const UnMemoizedFixedHeightMessage = (props: FixedHeightMessageProps) => {
   const userId = message.user?.id || '';
   const userColor = useMemo(() => getUserColor(theme, userId), [userId, theme]);
 
-  const messageActionsHandler = useCallback(
-    () => getMessageActions(['delete'], { canDelete: role.canDelete }),
-    [role],
-  );
-
   const images = message?.attachments?.filter(({ type }) => type === 'image');
 
   return (
@@ -105,13 +98,7 @@ const UnMemoizedFixedHeightMessage = (props: FixedHeightMessageProps) => {
             <div className='str-chat__virtual-message__text' data-testid='msg-text'>
               {renderedText}
               <div className='str-chat__virtual-message__data'>
-                <MessageActions
-                  customWrapperClass='str-chat__virtual-message__actions'
-                  getMessageActions={messageActionsHandler}
-                  handleDelete={handleDelete}
-                  message={message}
-                  mine={() => role.isMyMessage}
-                />
+                <MessageActions />
                 <span className='str-chat__virtual-message__date'>
                   <MessageTimestamp
                     customClass='str-chat__message-simple-timestamp'

src/components/Message/Message.tsx

@@ -268,7 +268,6 @@ export const Message = (props: MessageProps) => {
       autoscrollToBottom={props.autoscrollToBottom}
       canPin={canPin}
       closeReactionSelectorOnClick={closeReactionSelectorOnClick}
-      customMessageActions={props.customMessageActions}
       deliveredTo={props.deliveredTo}
       disableQuotedMessages={props.disableQuotedMessages}
       endOfGroup={props.endOfGroup}

src/components/Message/MessageSimple.tsx

@@ -5,7 +5,7 @@ import { MessageErrorIcon } from './icons';
 import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
 import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
-import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
+import { MessageActions as DefaultMessageActions } from '../MessageActions';
 import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
 import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
 import { MessageText } from './MessageText';
@@ -70,21 +70,18 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
     Attachment = DefaultAttachment,
     Avatar = DefaultAvatar,
     EditMessageModal = DefaultEditMessageModal,
-    MessageOptions = DefaultMessageOptions,
-    // TODO: remove this "passthrough" in the next
-    // major release and use the new default instead
-    MessageActions = MessageOptions,
+    MessageActions = DefaultMessageActions,
     MessageBlocked = DefaultMessageBlocked,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
     MessageDeleted = DefaultMessageDeleted,
     MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator,
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
+    PinIndicator,
     ReactionsList = DefaultReactionList,
     ReminderNotification = DefaultReminderNotification,
     StreamedMessageText = DefaultStreamedMessageText,
-    PinIndicator,
   } = useComponentContext('MessageSimple');
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);

src/components/Message/__tests__/FixedHeightMessage.test.js

@@ -7,7 +7,6 @@ import { FixedHeightMessage } from '../FixedHeightMessage';
 import { Avatar as AvatarMock } from '../../Avatar';
 import { Gallery as GalleryMock } from '../../Gallery';
 import { Message } from '../Message';
-import { MessageActions as MessageActionsMock } from '../../MessageActions';
 
 import { ChannelActionProvider } from '../../../context/ChannelActionContext';
 import { ChannelStateProvider } from '../../../context/ChannelStateContext';
@@ -20,17 +19,13 @@ import {
   generateUser,
   getTestClientWithUser,
 } from '../../../mock-builders';
-import { ComponentProvider } from '../../../context';
+import { ComponentProvider, DialogManagerProvider } from '../../../context';
 
 jest.mock('../../Avatar', () => ({ Avatar: jest.fn(() => <div />) }));
 jest.mock('../../Gallery', () => ({ Gallery: jest.fn(() => <div />) }));
-jest.mock('../../MessageActions', () => ({
-  MessageActions: jest.fn((props) => props.getMessageActions()),
-}));
 
 const aliceProfile = { image: 'alice-avatar.jpg', name: 'alice' };
 const alice = generateUser(aliceProfile);
-const bob = generateUser({ name: 'bob' });
 
 async function renderMsg(message) {
   const channel = generateChannel({ state: { membership: {} } });
@@ -57,7 +52,9 @@ async function renderMsg(message) {
             }}
           >
             <ComponentProvider value={{}}>
-              <Message message={message} Message={FixedHeightMessage} />
+              <DialogManagerProvider id='dialog-manager-id'>
+                <Message message={message} Message={FixedHeightMessage} />
+              </DialogManagerProvider>
             </ComponentProvider>
           </ChannelActionProvider>
         </ChannelStateProvider>
@@ -93,22 +90,6 @@ describe('<FixedHeightMessage />', () => {
     );
   });
 
-  it('should render message action for owner', async () => {
-    const message = generateMessage({ user: alice });
-    await renderMsg(message);
-    expect(MessageActionsMock).toHaveBeenCalledWith(
-      expect.objectContaining({ message }),
-      undefined,
-    );
-    expect(MessageActionsMock).toHaveReturnedWith(['delete']);
-  });
-
-  it('should not render message action for others', async () => {
-    const message = generateMessage({ user: bob });
-    await renderMsg(message);
-    expect(MessageActionsMock).toHaveReturnedWith([]);
-  });
-
   it('should display text in users set language', async () => {
     const message = generateMessage({
       i18n: { en_text: 'hello', fr_text: 'bonjour', language: 'fr' },