feat : added icon to show Update ChannelHeader and RoomInfo UI for (C…

…hannels Converted to Teams). (#926) * feat : added icon to show channel is team now * Fixed prettier --------- Co-authored-by: Zishan Ahmad <[email protected]>
RocketChat · Jan 30, 2025 · 2004d44 · 2004d44
1 parent bde1a16
commit 2004d44
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 4 deletions.
diff --git a/packages/react/src/store/channelStore.js b/packages/react/src/store/channelStore.js
@@ -4,10 +4,12 @@ const useChannelStore = create((set) => ({
   showChannelinfo: false,
   isChannelPrivate: false,
   isChannelReadOnly: false,
+  isRoomTeam: false,
   setShowChannelinfo: (showChannelinfo) => set(() => ({ showChannelinfo })),
   channelInfo: {},
   setChannelInfo: (channelInfo) => set(() => ({ channelInfo })),
   setIsChannelPrivate: (isChannelPrivate) => set(() => ({ isChannelPrivate })),
+  setIsRoomTeam: (isRoomTeam) => set(() => ({ isRoomTeam })),
   setIsChannelReadOnly: (isChannelReadOnly) =>
     set(() => ({ isChannelReadOnly })),
 }));

diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js
@@ -73,6 +73,8 @@ const ChatHeader = ({
   const setIsChannelPrivate = useChannelStore(
     (state) => state.setIsChannelPrivate
   );
+  const isRoomTeam = useChannelStore((state) => state.isRoomTeam);
+  const setIsRoomTeam = useChannelStore((state) => state.setIsRoomTeam);
   const setIsChannelReadOnly = useChannelStore(
     (state) => state.setIsChannelReadOnly
   );
@@ -177,6 +179,7 @@ const ChatHeader = ({
       if (res.success) {
         setChannelInfo(res.room);
         if (res.room.t === 'p') setIsChannelPrivate(true);
+        if (res.room?.teamMain) setIsRoomTeam(true);
         if (res.room.ro) {
           setIsChannelReadOnly(true);
           setMessageAllowed();
@@ -377,7 +380,13 @@ const ChatHeader = ({
                       onClick={() => setExclusiveState(setShowChannelinfo)}
                     >
                       <Icon
-                        name={isChannelPrivate ? 'hash_lock' : 'hash'}
+                        name={
+                          isRoomTeam
+                            ? 'team'
+                            : isChannelPrivate
+                            ? 'hash_lock'
+                            : 'hash'
+                        }
                         size={fullScreen ? '1.25rem' : '1rem'}
                       />
                       <div

diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js
@@ -18,6 +18,7 @@ const Roominfo = () => {
   const styles = getRoomInformationStyles();
   const channelInfo = useChannelStore((state) => state.channelInfo);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
+  const isRoomTeam = useChannelStore((state) => state.isRoomTeam);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
   const setExclusiveState = useSetExclusiveState();
@@ -30,7 +31,7 @@ const Roominfo = () => {
 
   return (
     <ViewComponent
-      title="Room Information"
+      title={isRoomTeam ? 'Team Information' : 'Room Information'}
       iconName="info"
       onClose={() => setExclusiveState(null)}
       style={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }}
@@ -59,12 +60,13 @@ const Roominfo = () => {
         <Box css={styles.infoContainer}>
           <Box css={styles.infoHeader}>
             <Icon
-              name={isChannelPrivate ? 'lock' : 'hash'}
+              name={
+                isRoomTeam ? 'team' : isChannelPrivate ? 'hash_lock' : 'hash'
+              }
               size="1.25rem"
               css={css`
                 vertical-align: middle;
                 margin-right: 0.5rem;
-                margin-bottom: 0.25rem;
               `}
             />
             {channelInfo.name}

diff --git a/packages/ui-elements/src/components/Icon/icons/Team.js b/packages/ui-elements/src/components/Icon/icons/Team.js
diff --git a/packages/ui-elements/src/components/Icon/icons/index.js b/packages/ui-elements/src/components/Icon/icons/index.js
@@ -63,6 +63,7 @@ import Arc from './Arc';
 import Avatar from './Avatar';
 import FormatText from './FormatText';
 import Cog from './Cog';
+import Team from './Team';
 
 const icons = {
   file: File,
@@ -76,6 +77,7 @@ const icons = {
   computer: Computer,
   cross: Cross,
   copy: Copy,
+  team: Team,
   mic: Mic,
   'video-recorder': VideoRecorder,
   'disabled-recorder': DisabledRecorder,

diff --git a/packages/ui-elements/tools/icons-generator.js b/packages/ui-elements/tools/icons-generator.js
@@ -13,6 +13,7 @@ const iconsList = [
   'computer',
   'cross',
   'mic',
+  'team',
   'circle-cross',
   'circle-check',
   'send',