Fix:Fix: Restrict pin icon visibility based on user permissions

RocketChat · Nov 30, 2024 · cc9afe1 · cc9afe1
1 parent 8ba15a5
commit cc9afe1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js
@@ -20,11 +20,13 @@ export const useRCAuth = () => {
   );
   const setPassword = useUserStore((state) => state.setPassword);
   const setEmailorUser = useUserStore((state) => state.setEmailorUser);
+  const setUserPermissions = useUserStore((state) => state.setUserPermissions);
   const dispatchToastMessage = useToastBarDispatch();
 
   const handleLogin = async (userOrEmail, password, code) => {
     try {
       const res = await RCInstance.login(userOrEmail, password, code);
+      const permissions = await RCInstance.permissionInfo();
       if (res.error === 'Unauthorized' || res.error === 403) {
         dispatchToastMessage({
           type: 'error',
@@ -56,6 +58,7 @@ export const useRCAuth = () => {
           setIsTotpModalOpen(false);
           setEmailorUser(null);
           setPassword(null);
+          setUserPermissions(permissions);
           dispatchToastMessage({
             type: 'success',
             message: 'Successfully logged in',

diff --git a/packages/react/src/store/userStore.js b/packages/react/src/store/userStore.js
@@ -29,6 +29,9 @@ const useUserStore = create((set) => ({
   setEmailorUser: (emailoruser) => set(() => ({ emailoruser })),
   roles: {},
   setRoles: (roles) => set((state) => ({ ...state, roles })),
+  userPermissions: {},
+  setUserPermissions: (userPermissions) =>
+    set((state) => ({ ...state, userPermissions })),
   showCurrentUserInfo: false,
   setShowCurrentUserInfo: (showCurrentUserInfo) =>
     set(() => ({ showCurrentUserInfo })),

diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
@@ -51,6 +51,10 @@ const Message = ({
 
   const authenticatedUserId = useUserStore((state) => state.userId);
   const authenticatedUserUsername = useUserStore((state) => state.username);
+  const userRoles = useUserStore((state) => state.roles);
+  const pinPermissions = useUserStore(
+    (state) => state.userPermissions.update[150].roles
+  );
   const [setMessageToReport, toggleShowReportMessage] = useMessageStore(
     (state) => [state.setMessageToReport, state.toggleShowReportMessage]
   );
@@ -67,6 +71,8 @@ const Message = ({
   const theme = useTheme();
   const styles = getMessageStyles(theme);
   const bubbleStyles = useBubbleStyles(isMe);
+  const pinRoles = new Set(pinPermissions);
+  const isAllowedToPin = userRoles.some((role) => pinRoles.has(role));
 
   const variantStyles =
     !isInSidebar && variantOverrides === 'bubble' ? bubbleStyles : {};
@@ -200,6 +206,7 @@ const Message = ({
                     message={message}
                     isEditing={editMessage._id === message._id}
                     authenticatedUserId={authenticatedUserId}
+                    isAllowedToPin={isAllowedToPin}
                     handleOpenThread={handleOpenThread}
                     handleDeleteMessage={handleDeleteMessage}
                     handleStarMessage={handleStarMessage}

diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
@@ -21,6 +21,7 @@ export const MessageToolbox = ({
   style = {},
   isThreadMessage = false,
   authenticatedUserId,
+  isAllowedToPin,
   handleOpenThread,
   handleEmojiClick,
   handlePinMessage,
@@ -110,7 +111,7 @@ export const MessageToolbox = ({
         id: 'pin',
         onClick: () => handlePinMessage(message),
         iconName: message.pinned ? 'pin-filled' : 'pin',
-        visible: !isThreadMessage,
+        visible: !isThreadMessage && isAllowedToPin,
       },
       edit: {
         label: 'Edit',