fix: display bio, nickname, and statusText in User Info modal; resolv…

…e permission issues for viewing full user info (#756)
RocketChat · Jan 1, 2025 · 21d6f2d · 21d6f2d
1 parent 94e0faf
commit 21d6f2d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js
@@ -20,6 +20,9 @@ const useFetchChatData = (showRoles) => {
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
+  const setViewUserInfoPermissions = useUserStore(
+    (state) => state.setViewUserInfoPermissions
+  );
 
   const getMessagesAndRoles = useCallback(
     async (anonymousMode) => {
@@ -68,6 +71,9 @@ const useFetchChatData = (showRoles) => {
 
           setMemberRoles(rolesObj);
         }
+
+        const permissions = await RCInstance.permissionInfo();
+        setViewUserInfoPermissions(permissions.update[70]);
       } catch (e) {
         console.error(e);
       }

diff --git a/packages/react/src/store/userStore.js b/packages/react/src/store/userStore.js
@@ -32,6 +32,9 @@ const useUserStore = create((set) => ({
   userPinPermissions: {},
   setUserPinPermissions: (userPinPermissions) =>
     set((state) => ({ ...state, userPinPermissions })),
+  viewUserInfoPermissions: {},
+  setViewUserInfoPermissions: (viewUserInfoPermissions) =>
+    set((state) => ({ ...state, viewUserInfoPermissions })),
   showCurrentUserInfo: false,
   setShowCurrentUserInfo: (showCurrentUserInfo) =>
     set(() => ({ showCurrentUserInfo })),

diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js
@@ -28,9 +28,15 @@ const UserInformation = () => {
   const [currentUserInfo, setCurrentUserInfo] = useState({});
   const [isUserInfoFetched, setIsUserInfoFetched] = useState(false);
   const currentUser = useUserStore((state) => state.currentUser);
-  const authenticatedUserRoles = useUserStore((state) => state.roles);
+  const currentUserRoles = useUserStore((state) => state.roles);
+  const viewUserFullInfoRoles = useUserStore(
+    (state) => state.viewUserInfoPermissions.roles
+  );
   const authenticatedUserId = useUserStore((state) => state.userId);
-  const isAdmin = authenticatedUserRoles?.includes('admin');
+  const viewInfoRoles = new Set(viewUserFullInfoRoles);
+  const isAllowedToViewFullInfo = currentUserRoles.some((role) =>
+    viewInfoRoles.has(role)
+  );
   const getUserAvatarUrl = (username) => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${username}`;
@@ -96,6 +102,24 @@ const UserInformation = () => {
               />
               {currentUserInfo?.username}
             </Box>
+            {currentUserInfo?.statusText && (
+              <Box
+                css={css`
+                  margin-bottom: 20px;
+                `}
+              >
+                {currentUserInfo?.statusText}
+              </Box>
+            )}
+            {currentUserInfo?.nickname && (
+              <UserInfoField
+                label="Nickname"
+                value={currentUserInfo?.nickname}
+                isAdmin={isAllowedToViewFullInfo}
+                authenticatedUserId={authenticatedUserId}
+                currentUserInfo={currentUserInfo}
+              />
+            )}
             {currentUserInfo?.roles?.length && (
               <UserInfoField
                 label="Roles"
@@ -113,15 +137,15 @@ const UserInformation = () => {
                     ))}
                   </Box>
                 }
-                isAdmin={isAdmin}
+                isAdmin={isAllowedToViewFullInfo}
                 authenticatedUserId={authenticatedUserId}
                 currentUserInfo={currentUserInfo}
               />
             )}
             <UserInfoField
               label="Username"
               value={currentUserInfo?.username}
-              isAdmin={isAdmin}
+              isAdmin
               authenticatedUserId={authenticatedUserId}
               currentUserInfo={currentUserInfo}
             />
@@ -132,17 +156,26 @@ const UserInformation = () => {
                   ? 'Never'
                   : formatTimestamp(currentUserInfo.lastLogin)
               }
-              isAdmin={isAdmin}
+              isAdmin={isAllowedToViewFullInfo}
               authenticatedUserId={authenticatedUserId}
               currentUserInfo={currentUserInfo}
             />
             <UserInfoField
               label="Full Name"
               value={currentUserInfo.name}
-              isAdmin={isAdmin}
+              isAdmin={isAllowedToViewFullInfo}
               authenticatedUserId={authenticatedUserId}
               currentUserInfo={currentUserInfo}
             />
+            {currentUserInfo?.bio && (
+              <UserInfoField
+                label="Bio"
+                value={currentUserInfo?.bio}
+                isAdmin={isAllowedToViewFullInfo}
+                authenticatedUserId={authenticatedUserId}
+                currentUserInfo={currentUserInfo}
+              />
+            )}
             <UserInfoField
               label="Email"
               value={currentUserInfo.emails?.map((email, index) => (
@@ -158,14 +191,14 @@ const UserInformation = () => {
                   </Box>
                 </Box>
               ))}
-              isAdmin={isAdmin}
+              isAdmin={isAllowedToViewFullInfo}
               authenticatedUserId={authenticatedUserId}
               currentUserInfo={currentUserInfo}
             />
             <UserInfoField
               label="Created at"
               value={formatTimestamp(currentUserInfo.createdAt)}
-              isAdmin={isAdmin}
+              isAdmin={isAllowedToViewFullInfo}
               authenticatedUserId={authenticatedUserId}
               currentUserInfo={currentUserInfo}
             />