fix pin icon show

RocketChat · Apr 9, 2024 · 2317c29 · 2317c29
1 parent ac9e900
commit 2317c29
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -155,29 +155,44 @@ const ChatHeader = ({
     setShowSearch(false);
   }, [setShowMentions, setShowSearch]);
 
+  const authenticatedUserRoles = useUserStore((state) => state.roles);
+  const setCanPinMsg = useUserStore((state) => state.setCanPinMsg);
+
   useEffect(() => {
     const getMessageLimit = async () => {
       const messageLimitObj = await RCInstance.getMessageLimit();
       setMessageLimit(messageLimitObj?.value);
     };
 
-    const setMessageAllowed = async () => {
+    const setMsgAndPinAllowed = async (ro) => {
       const permissionRes = await RCInstance.permissionInfo();
       const channelRolesRes = await RCInstance.getChannelRoles(
         isChannelPrivate
       );
 
       if (permissionRes.success && channelRolesRes.success) {
+        const pinMsgRoles = permissionRes.update[146]?.roles || [];
         const postMsgRoles = permissionRes.update[140]?.roles || [];
 
-        const userRoles = channelRolesRes.roles
+        const channelMemberRoles = channelRolesRes.roles
           .filter((chRole) => chRole.u?._id === authenticatedUserId)
           .flatMap((chRole) => chRole.roles);
 
-        const canSendMsg =
-          userRoles.length > 0 &&
-          postMsgRoles.some((role) => userRoles.includes(role));
-        setCanSendMsg(canSendMsg);
+        const concatenatedRoles = channelMemberRoles.concat(
+          authenticatedUserRoles
+        );
+
+        if (ro) {
+          const canSendMsg =
+            channelMemberRoles.length > 0 &&
+            postMsgRoles.some((role) => channelMemberRoles.includes(role));
+          setCanSendMsg(canSendMsg);
+        }
+
+        const canPinMsg =
+          concatenatedRoles.length > 0 &&
+          pinMsgRoles.some((role) => concatenatedRoles.includes(role));
+        setCanPinMsg(canPinMsg);
       }
     };
 
@@ -186,7 +201,7 @@ const ChatHeader = ({
       if (res.success) {
         setChannelInfo(res.room);
         if (res.room.t === 'p') setIsChannelPrivate(true);
-        if (res.room.ro) setMessageAllowed();
+        setMsgAndPinAllowed(res.room.ro);
       } else if (
         'errorType' in res &&
         res.errorType === 'error-room-not-found'
@@ -221,7 +236,9 @@ const ChatHeader = ({
     toastPosition,
     isChannelPrivate,
     setCanSendMsg,
+    setCanPinMsg,
     authenticatedUserId,
+    authenticatedUserRoles,
     setMessageLimit,
   ]);
 

diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js
@@ -235,6 +235,7 @@ const Message = ({
           {!message.t && showToolbox ? (
             <MessageToolbox
               message={message}
+              RCInstance={RCInstance}
               isEditing={editMessage._id === message._id}
               authenticatedUserId={authenticatedUserId}
               handleOpenThread={handleOpenThread}

diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { css } from '@emotion/react';
 import Popup from 'reactjs-popup';
 import useComponentOverrides from '../../theme/useComponentOverrides';
@@ -11,6 +11,7 @@ import { Icon } from '../Icon';
 import { Button } from '../Button';
 import { parseEmoji } from '../../lib/emoji';
 import { Tooltip } from '../Tooltip';
+import { useUserStore } from '../../store';
 
 const MessageToolboxWrapperCss = css`
   display: none;
@@ -48,6 +49,7 @@ const popupStyle = {
 export const MessageToolbox = ({
   className = '',
   message,
+  RCInstance,
   style = {},
   isThreadMessage = false,
   authenticatedUserId,
@@ -79,6 +81,8 @@ export const MessageToolbox = ({
     setShowDeleteModal(true);
   };
 
+  const canPinMsg = useUserStore((state) => state.canPinMsg);
+
   return (
     <>
       <Box css={MessageToolboxWrapperCss}>
@@ -141,7 +145,7 @@ export const MessageToolbox = ({
               }}
             />
           </Popup>
-          {!isThreadMessage && (
+          {!isThreadMessage && canPinMsg && (
             <Tooltip text={message.pinned ? 'Unpin' : 'Pin'} position="top">
               <ActionButton
                 ghost

diff --git a/packages/react/src/store/userStore.js b/packages/react/src/store/userStore.js
@@ -20,9 +20,11 @@ const useUserStore = create((set) => ({
     })),
   isUserAuthenticated: false,
   canSendMsg: true,
+  canPinMsg: true,
   setIsUserAuthenticated: (isUserAuthenticated) =>
     set(() => ({ isUserAuthenticated })),
   setCanSendMsg: (canSendMsg) => set(() => ({ canSendMsg })),
+  setCanPinMsg: (canPinMsg) => set(() => ({ canPinMsg })),
   password: null,
   setPassword: (password) => set(() => ({ password })),
   emailoruser: null,