fix(permissions): ensure admin-granted edit message permissions apply…

… in EmbeddedChat (#702)
RocketChat · Dec 22, 2024 · 3d6700c · 3d6700c
1 parent 9a3b7ac
commit 3d6700c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 deletions.
diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js
@@ -1,7 +1,12 @@
 import { useContext } from 'react';
 import { useToastBarDispatch } from '@embeddedchat/ui-elements';
 import RCContext from '../context/RCInstance';
-import { useUserStore, totpModalStore, useLoginStore } from '../store';
+import {
+  useUserStore,
+  totpModalStore,
+  useLoginStore,
+  useMessageStore,
+} from '../store';
 
 export const useRCAuth = () => {
   const { RCInstance } = useContext(RCContext);
@@ -23,6 +28,9 @@ export const useRCAuth = () => {
   const setUserPinPermissions = useUserStore(
     (state) => state.setUserPinPermissions
   );
+  const setEditMessagePermissions = useMessageStore(
+    (state) => state.setEditMessagePermissions
+  );
   const dispatchToastMessage = useToastBarDispatch();
 
   const handleLogin = async (userOrEmail, password, code) => {
@@ -61,6 +69,7 @@ export const useRCAuth = () => {
           setEmailorUser(null);
           setPassword(null);
           setUserPinPermissions(permissions.update[150]);
+          setEditMessagePermissions(permissions.update[28]);
           dispatchToastMessage({
             type: 'success',
             message: 'Successfully logged in',

diff --git a/packages/react/src/store/messageStore.js b/packages/react/src/store/messageStore.js
@@ -71,6 +71,9 @@ const useMessageStore = create((set, get) => ({
     }
   },
   setEditMessage: (editMessage) => set(() => ({ editMessage })),
+  editMessagePermissions: {},
+  setEditMessagePermissions: (editMessagePermissions) =>
+    set((state) => ({ ...state, editMessagePermissions })),
   addQuoteMessage: (quoteMessage) =>
     set((state) => ({ quoteMessage: [...state.quoteMessage, quoteMessage] })),
   removeQuoteMessage: (quoteMessage) =>

diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js
@@ -18,7 +18,7 @@ import {
 import { ChatLayout } from './ChatLayout';
 import { ChatHeader } from './ChatHeader';
 import { RCInstanceProvider } from '../context/RCInstance';
-import { useUserStore, useLoginStore } from '../store';
+import { useUserStore, useLoginStore, useMessageStore } from '../store';
 import DefaultTheme from '../theme/DefaultTheme';
 import { getTokenStorage } from '../lib/auth';
 import { styles } from './EmbeddedChat.styles';
@@ -87,6 +87,9 @@ const EmbeddedChat = (props) => {
     (state) => state.setUserPinPermissions
   );
 
+  const setEditMessagePermissions = useMessageStore(
+    (state) => state.setEditMessagePermissions
+  );
   if (isClosable && !setClosableState) {
     throw Error(
       'Please provide a setClosableState to props when isClosable = true'
@@ -130,6 +133,7 @@ const EmbeddedChat = (props) => {
         await RCInstance.autoLogin(auth);
         const permissions = await RCInstance.permissionInfo();
         setUserPinPermissions(permissions.update[150]);
+        setEditMessagePermissions(permissions.update[28]);
       } catch (error) {
         console.error(error);
       } finally {

diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
@@ -56,6 +56,9 @@ const Message = ({
   const pinPermissions = useUserStore(
     (state) => state.userPinPermissions.roles
   );
+  const editMessagePermissions = useMessageStore(
+    (state) => state.editMessagePermissions.roles
+  );
   const [setMessageToReport, toggleShowReportMessage] = useMessageStore(
     (state) => [state.setMessageToReport, state.toggleShowReportMessage]
   );
@@ -73,6 +76,7 @@ const Message = ({
   const styles = getMessageStyles(theme);
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
+  const editMessageRoles = new Set(editMessagePermissions);
 
   const variantStyles =
     !isInSidebar && variantOverrides === 'bubble' ? bubbleStyles : {};
@@ -210,6 +214,7 @@ const Message = ({
                     authenticatedUserId={authenticatedUserId}
                     userRoles={userRoles}
                     pinRoles={pinRoles}
+                    editMessageRoles={editMessageRoles}
                     handleOpenThread={handleOpenThread}
                     handleDeleteMessage={handleDeleteMessage}
                     handleStarMessage={handleStarMessage}

diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
@@ -23,6 +23,7 @@ export const MessageToolbox = ({
   authenticatedUserId,
   userRoles,
   pinRoles,
+  editMessageRoles,
   handleOpenThread,
   handleEmojiClick,
   handlePinMessage,
@@ -70,6 +71,11 @@ export const MessageToolbox = ({
   };
 
   const isAllowedToPin = userRoles.some((role) => pinRoles.has(role));
+  const isAllowedToEditMessage = userRoles.some((role) =>
+    editMessageRoles.has(role)
+  )
+    ? true
+    : message.u._id === authenticatedUserId;
   const options = useMemo(
     () => ({
       reply: {
@@ -120,7 +126,7 @@ export const MessageToolbox = ({
         id: 'edit',
         onClick: () => handleEditMessage(message),
         iconName: 'edit',
-        visible: message.u._id === authenticatedUserId,
+        visible: isAllowedToEditMessage,
         color: isEditing ? 'secondary' : 'default',
         ghost: !isEditing,
       },