Add dataId to the every menu items: MenuItem and ReactionButton

sendbird · May 26, 2023 · 2545d74 · 2545d74
1 parent 87b923a
commit 2545d74
Show file tree

Hide file tree

Showing 31 changed files with 79 additions and 5 deletions.
diff --git a/src/modules/ChannelList/components/ChannelPreviewAction.jsx b/src/modules/ChannelList/components/ChannelPreviewAction.jsx
@@ -60,6 +60,7 @@ export default function ChannelPreviewAction({
                 setShowModal(true);
                 closeDropdown();
               }}
+              dataId="leave_channel"
             >
               {stringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE}
             </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx
@@ -93,6 +93,7 @@ export const BannedMemberList = (): ReactElement => {
                             refreshList();
                           });
                         }}
+                        dataId="unban"
                       >
                         {stringSet.CHANNEL_SETTING__MODERATION__UNBAN}
                       </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx
@@ -98,6 +98,7 @@ export default function BannedUsersModal({
                             }));
                           });
                         }}
+                        dataId="ban"
                       >
                         {stringSet.CHANNEL_SETTING__MODERATION__BAN}
                       </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx
@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useContext,
 } from 'react';
+import type { Member } from '@sendbird/chat/groupChannel';
 
 import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';
 import IconButton from '../../../../ui/IconButton';
@@ -20,7 +21,7 @@ import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import uuidv4 from '../../../../utils/uuid';
 
 export const MemberList = (): ReactElement => {
-  const [members, setMembers] = useState([]);
+  const [members, setMembers] = useState<Array<Member>>([]);
   const [hasNext, setHasNext] = useState(false);
   const [showAllMembers, setShowAllMembers] = useState(false);
   const [showInviteUsers, setShowInviteUsers] = useState(false);
@@ -109,6 +110,10 @@ export const MemberList = (): ReactElement => {
                               });
                             }
                           }}
+                          dataId={
+                            member.role !== 'operator'
+                              ? 'register_as_operator' : 'unregister_operator'
+                          }
                         >
                           {
                             member.role !== 'operator'
@@ -133,6 +138,7 @@ export const MemberList = (): ReactElement => {
                                   });
                                 }
                               }}
+                              dataId={member.isMuted ? 'unmute' : 'mute'}
                             >
                               {
                                 member.isMuted
@@ -149,6 +155,7 @@ export const MemberList = (): ReactElement => {
                               closeDropdown();
                             });
                           }}
+                          dataId="ban"
                         >
                           {stringSet.CHANNEL_SETTING__MODERATION__BAN}
                         </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx
@@ -130,6 +130,10 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
                                   });
                                 }
                               }}
+                              dataId={
+                                member.role !== 'operator'
+                                  ? 'register_as_operator' : 'unregister_operator'
+                              }
                             >
                               {
                                 member.role !== 'operator'
@@ -170,6 +174,7 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
                                       });
                                     }
                                   }}
+                                  dataId={member.isMuted ? 'unmute' : 'mute'}
                                 >
                                   {
                                     member.isMuted
@@ -187,6 +192,7 @@ export default function MembersModal({ onCancel }: Props): ReactElement {
                                   }));
                                 });
                               }}
+                              dataId="ban"
                             >
                               {stringSet.CHANNEL_SETTING__MODERATION__BAN}
                             </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx
@@ -103,10 +103,9 @@ export const MutedMemberList = (): ReactElement => {
                             closeDropdown();
                           });
                         }}
+                        dataId="unmute"
                       >
-                        <>
-                          {stringSet?.CHANNEL_SETTING__UNMUTE || stringSet.CHANNEL_SETTING__MODERATION__UNMUTE}
-                        </>
+                        {stringSet?.CHANNEL_SETTING__UNMUTE || stringSet.CHANNEL_SETTING__MODERATION__UNMUTE}
                       </MenuItem>
                     </MenuItems>
                   )}

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
@@ -106,6 +106,7 @@ export default function MutedMembersModal({
                             }));
                           });
                         }}
+                        dataId="unmute"
                       >
                         {stringSet.CHANNEL_SETTING__MODERATION__UNMUTE}
                       </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx
@@ -106,6 +106,7 @@ export const OperatorList = (): ReactElement => {
                           });
                           closeDropdown();
                         }}
+                        dataId="unregister_operator"
                       >
                         {stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR}
                       </MenuItem>

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx
@@ -101,6 +101,7 @@ export default function OperatorsModal({ onCancel }: Props): ReactElement {
                             });
                             closeDropdown();
                           }}
+                          dataId="unregister_operator"
                         >
                           {stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR}
                         </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUserList.tsx
@@ -91,6 +91,7 @@ export const BannedUserList = (): ReactElement => {
                               refreshList();
                             });
                           }}
+                          dataId="unban"
                         >
                           {stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNBAN}
                         </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/BannedUsersModal.tsx
@@ -104,6 +104,7 @@ export default function BannedUsersModal({
                                   }));
                                 });
                               }}
+                              dataId="unban"
                             >
                               {stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNBAN}
                             </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantList.tsx
@@ -96,6 +96,7 @@ export const MutedParticipantList = (): ReactElement => {
                               closeDropdown();
                             });
                           }}
+                          dataId="unmute"
                         >
                           {stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE}
                         </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/MutedParticipantsModal.tsx
@@ -107,6 +107,7 @@ export default function MutedParticipantsModal({
                                   }));
                                 });
                               }}
+                              dataId="unmute"
                             >
                               {stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE}
                             </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorList.tsx
@@ -60,6 +60,7 @@ const OperatorList = (): ReactElement => {
                               closeDropdown();
                             });
                           }}
+                          dataId="unregister_operator"
                         >
                           {stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR}
                         </MenuItem>
@@ -75,6 +76,7 @@ const OperatorList = (): ReactElement => {
                               });
                             }
                           }}
+                          dataId={operator.isMuted ? 'unmute' : 'mute'}
                         >
                           {
                             operator.isMuted
@@ -88,6 +90,7 @@ const OperatorList = (): ReactElement => {
                               closeDropdown();
                             });
                           }}
+                          dataId="ban"
                         >
                           {stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN}
                         </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx b/src/modules/OpenChannelSettings/components/OperatorUI/OperatorsModal.tsx
@@ -103,6 +103,7 @@ export default function OperatorListModal({ onCancel }: Props): ReactElement {
                                 });
                                 closeDropdown();
                               }}
+                              dataId="unregister_operator"
                             >
                               {stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR}
                             </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/ParticipantsModal.tsx
@@ -116,6 +116,7 @@ export default function ParticipantsModal({
                                     });
                                   }
                                 }}
+                                dataId={isOperator ? 'unregister_operator' : 'register_as_operator'}
                               >
                                 {
                                   isOperator
@@ -135,6 +136,7 @@ export default function ParticipantsModal({
                                     });
                                   }
                                 }}
+                                dataId={p.isMuted ? 'unmute' : 'mute'}
                               >
                                 {
                                   p.isMuted
@@ -148,6 +150,7 @@ export default function ParticipantsModal({
                                     closeDropdown();
                                   });
                                 }}
+                                dataId="ban"
                               >
                                 {stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN}
                               </MenuItem>

diff --git a/src/modules/OpenChannelSettings/components/ParticipantUI/index.tsx b/src/modules/OpenChannelSettings/components/ParticipantUI/index.tsx
@@ -123,6 +123,7 @@ export default function ParticipantList({
                                   });
                                 }
                               }}
+                              dataId={isOperator ? 'unregister_operator' : 'register_as_operator'}
                             >
                               {
                                 isOperator
@@ -144,6 +145,7 @@ export default function ParticipantList({
                                   });
                                 }
                               }}
+                              dataId={p.isMuted ? 'unmute' : 'mute'}
                             >
                               {
                                 p.isMuted
@@ -158,6 +160,7 @@ export default function ParticipantList({
                                   refreshList();
                                 });
                               }}
+                              dataId="ban"
                             >
                               {stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN}
                             </MenuItem>

diff --git a/src/ui/ContextMenu/index.tsx b/src/ui/ContextMenu/index.tsx
@@ -17,12 +17,14 @@ export interface MenuItemProps {
   children: ReactElement | ReactElement[] | ReactNode;
   onClick?: (e: MouseEvent<HTMLLIElement>) => void;
   disable?: boolean;
+  dataId?: string;
 }
 export const MenuItem = ({
   className = '',
   children,
   onClick,
   disable = false,
+  dataId = '',
 }: MenuItemProps): ReactElement => {
   const handleClickEvent = (e) => {
     if (!disable && onClick) {
@@ -37,6 +39,7 @@ export const MenuItem = ({
       onClick={handleClickEvent}
       onKeyPress={(e) => { if (e.keyCode === ENTER_KEY) handleClickEvent(e); }}
       tabIndex={0}
+      data-sendbird-id={`message_context_menu${dataId ? `_${dataId}` : ''}`}
     >
       <Label
         className="sendbird-dropdown__menu-item__text"

diff --git a/src/ui/EmojiReactions/index.tsx b/src/ui/EmojiReactions/index.tsx
@@ -110,6 +110,7 @@ const EmojiReactions = ({
                       toggleReaction?.(message, emoji.key, isReacted);
                       e?.stopPropagation();
                     }}
+                    dataId={emoji.key}
                   >
                     <ImageRenderer
                       url={emoji?.url || ''}

diff --git a/src/ui/MessageItemMenu/index.tsx b/src/ui/MessageItemMenu/index.tsx
@@ -135,6 +135,7 @@ export default function MessageItemMenu({
                     copyToClipboard((message as UserMessage)?.message);
                     closeDropdown();
                   }}
+                  dataId="copy"
                 >
                   {stringSet.MESSAGE_MENU__COPY}
                 </MenuItem>
@@ -147,6 +148,7 @@ export default function MessageItemMenu({
                     closeDropdown();
                   }}
                   disable={message?.parentMessageId > 0}
+                  dataId="reply"
                 >
                   {stringSet.MESSAGE_MENU__REPLY}
                 </MenuItem>
@@ -158,6 +160,7 @@ export default function MessageItemMenu({
                     onReplyInThread?.({ message });
                     closeDropdown();
                   }}
+                  dataId="thread"
                 >
                   {stringSet.MESSAGE_MENU__THREAD}
                 </MenuItem>
@@ -169,6 +172,7 @@ export default function MessageItemMenu({
                     onMoveToParentMessage?.();
                     closeDropdown();
                   }}
+                  dataId="open_in_channel"
                 >
                   {stringSet.MESSAGE_MENU__OPEN_IN_CHANNEL}
                 </MenuItem>
@@ -182,6 +186,7 @@ export default function MessageItemMenu({
                       closeDropdown();
                     }
                   }}
+                  dataId="edit"
                 >
                   {stringSet.MESSAGE_MENU__EDIT}
                 </MenuItem>
@@ -195,6 +200,7 @@ export default function MessageItemMenu({
                       closeDropdown();
                     }
                   }}
+                  dataId="resend"
                 >
                   {stringSet.MESSAGE_MENU__RESEND}
                 </MenuItem>
@@ -213,6 +219,7 @@ export default function MessageItemMenu({
                       ? disableDeleteMessage
                       : message?.threadInfo?.replyCount > 0
                   }
+                  dataId="delete"
                 >
                   {stringSet.MESSAGE_MENU__DELETE}
                 </MenuItem>

diff --git a/src/ui/MessageItemReactionMenu/index.tsx b/src/ui/MessageItemReactionMenu/index.tsx
@@ -92,6 +92,7 @@ export default function MessageItemReactionMenu({
                       closeDropdown();
                       toggleReaction(message, emoji.key, isReacted);
                     }}
+                    dataId={emoji.key}
                   >
                     <ImageRenderer
                       url={emoji.url}

diff --git a/src/ui/MobileMenu/MobileBottomSheet.tsx b/src/ui/MobileMenu/MobileBottomSheet.tsx
@@ -101,6 +101,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                           hideMenu();
                           toggleReaction(message, emoji.key, isReacted);
                         }}
+                        dataId={emoji.key}
                       >
                         <ImageRenderer
                           url={emoji?.url || ''}
@@ -129,6 +130,7 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                         onClick={(): void => {
                           setShowEmojisOnly(true);
                         }}
+                        dataId="add-emoji"
                       >
                         <ImageRenderer
                           url={''}