Merge branch 'rm/340218' into 'master'

Add channel header to channel preview See merge request kchat/webapp!844
Infomaniak · Nov 7, 2024 · f97a203 · f97a203
2 parents 1eca2eb + f9e4eb6
commit f97a203
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 41 deletions.
diff --git a/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap b/webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap
@@ -594,6 +594,7 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -832,6 +833,7 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -1070,6 +1072,7 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -1308,6 +1311,7 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -1546,6 +1550,7 @@ exports[`components/ChannelHeader should render archived view 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -1816,6 +1821,7 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -2054,6 +2060,7 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -2902,6 +2909,7 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -3140,6 +3148,7 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -3378,6 +3387,7 @@ exports[`components/ChannelHeader should render properly when populated with cha
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -3642,6 +3652,7 @@ exports[`components/ChannelHeader should render shared view 1`] = `
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i
@@ -3882,6 +3893,7 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
             ariaLabel={true}
             buttonClass="member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide"
             buttonId="member_rhs"
+            disabled={false}
             iconComponent={
               <React.Fragment>
                 <i

diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx
@@ -277,7 +277,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
         } = this.props;
         const {formatMessage} = this.props.intl;
         const ariaLabelChannelHeader = this.props.intl.formatMessage({id: 'accessibility.sections.channelHeader', defaultMessage: 'channel header region'});
-        let showMeetBtn = true;
+        let showMeetBtn = !isEmptyObject(channelMember);
 
         let hasGuestsText: ReactNode = '';
         if (hasGuests) {
@@ -293,39 +293,13 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             );
         }
 
-        if (isEmptyObject(channelMember) && !isGuest(dmUser?.roles ?? '')) { // light header for the preview mode feature
-            return (
-                <div
-                    id='channel-header'
-                    aria-label={ariaLabelChannelHeader}
-                    role='banner'
-                    tabIndex={-1}
-                    data-channelid={`${channel.id}`}
-                    className='channel-header alt a11y__region'
-                    data-a11y-sort-order='8'
-                >
-                    <div
-                        className='flex-parent'
-                        style={{alignItems: 'center'}}
-                    >
-                        <strong
-                            role='heading'
-                            aria-level={2}
-                            id='channelHeaderTitle'
-                            className='heading'
-                        >
-                            <span>
-                                {channel.name}
-                            </span>
-                        </strong>
-                    </div>
-                </div>
-            );
-        }
         const channelIsArchived = channel.delete_at !== 0;
-        if (isEmptyObject(channel) ||
-            isEmptyObject(channelMember) ||
-            isEmptyObject(currentUser) ||
+
+        // Infomaniak: skip for channel previews
+        // isEmptyObject(channel) ||
+        // isEmptyObject(channelMember) ||
+        // isEmptyObject(currentUser) ||
+        if (
             (!dmUser && channel.type === Constants.DM_CHANNEL)
         ) {
             // Use an empty div to make sure the header's height stays constant
@@ -426,6 +400,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
         if (!isDirect) {
             const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide', {
                 'channel-header__icon--active': rhsState === RHSStates.CHANNEL_MEMBERS,
+                disabled: isEmptyObject(channelMember),
             });
             const membersIcon = this.props.memberCount ? (
                 <>
@@ -457,11 +432,12 @@ class ChannelHeader extends React.PureComponent<Props, State> {
 
             memberListButton = (
                 <HeaderIconWrapper
+                    disabled={isEmptyObject(channelMember)}
                     iconComponent={membersIcon}
                     ariaLabel={true}
                     buttonClass={membersIconClass}
                     buttonId={'member_rhs'}
-                    onClick={this.toggleChannelMembersRHS}
+                    onClick={isEmptyObject(channelMember) ? () => {} : this.toggleChannelMembersRHS}
                     tooltipKey={'channelMembers'}
                 />
             );
@@ -562,7 +538,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             );
         } else {
             let editMessage;
-            if (!isReadOnly && !channelIsArchived) {
+            if (!isReadOnly && !channelIsArchived && !isEmptyObject(channelMember)) {
                 if (isDirect || isGroup) {
                     if (!isDirect || !dmUser?.is_bot) {
                         editMessage = (
@@ -703,7 +679,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                         channelMember={channelMember}
                     />
                     {showMeetBtn && <MeetButton/>}
-                    <ChannelInfoButton channel={channel}/>
+                    {!isEmptyObject(channelMember) && <ChannelInfoButton channel={channel}/>}
                 </div>
             </div>
         );

diff --git a/webapp/channels/src/components/channel_header/channel_header_title.tsx b/webapp/channels/src/components/channel_header/channel_header_title.tsx
@@ -9,7 +9,7 @@ import {useSelector} from 'react-redux';
 
 import type {UserProfile} from '@mattermost/types/users';
 
-import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentChannel, getMyCurrentChannelMembership} from 'mattermost-redux/selectors/entities/channels';
 
 import {ChannelHeaderDropdown} from 'components/channel_header_dropdown';
 import SharedChannelIndicator from 'components/shared_channel_indicator';
@@ -18,6 +18,7 @@ import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import BotTag from 'components/widgets/tag/bot_tag';
 
 import {Constants} from 'utils/constants';
+import {isEmptyObject} from 'utils/utils';
 
 import ChannelHeaderTitleDirect from './channel_header_title_direct';
 import ChannelHeaderTitleFavorite from './channel_header_title_favorite';
@@ -35,6 +36,7 @@ const ChannelHeaderTitle = ({
     const [titleMenuOpen, setTitleMenuOpen] = useState(false);
     const intl = useIntl();
     const channel = useSelector(getCurrentChannel);
+    const channelMember = useSelector(getMyCurrentChannelMembership);
 
     if (!channel) {
         return null;
@@ -67,6 +69,29 @@ const ChannelHeaderTitle = ({
         channelTitle = <ChannelHeaderTitleGroup gmMembers={gmMembers}/>;
     }
 
+    // title without menu for channel preview
+    if (isEmptyObject(channelMember)) {
+        return (
+            <div
+                id='channelHeaderDropdownButton'
+                className='channel-header__top channel-header__bot'
+            >
+                <strong
+                    role='heading'
+                    aria-level={2}
+                    id='channelHeaderTitle'
+                    className='heading'
+                >
+                    <span>
+                        {archivedIcon}
+                        {channelTitle}
+                    </span>
+                </strong>
+                <ChannelHeaderTitleFavorite/>
+            </div>
+        );
+    }
+
     if (isDirect && dmUser?.is_bot) {
         return (
             <div

diff --git a/.../src/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap b/.../src/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
   >
     <button
       className="channel_files_class"
+      disabled={false}
       id="button_id"
       onClick={[Function]}
     >
@@ -72,6 +73,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
   >
     <button
       className="button_class"
+      disabled={false}
       id="button_id"
       onClick={[Function]}
     >
@@ -135,6 +137,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
   >
     <button
       className="button_class"
+      disabled={false}
       id="button_id"
       onClick={[Function]}
     >
@@ -182,6 +185,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
   >
     <button
       className="pinned_posts_class"
+      disabled={false}
       id="button_id"
       onClick={[Function]}
     >
@@ -228,6 +232,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
   >
     <button
       className="button_class"
+      disabled={false}
       id="button_id"
       onClick={[Function]}
     >
@@ -301,6 +306,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna
   >
     <button
       className="search_class"
+      disabled={false}
       id="button_id"
       onClick={[Function]}
     >

diff --git a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx
@@ -27,6 +27,9 @@ type Props = {
     tooltipText?: React.ReactNode;
     isRhsOpen?: boolean;
     pluginId?: string;
+
+    // Infomaniak: for disabling actions in channel preview mode
+    disabled?: boolean;
 }
 
 type TooltipInfo = {
@@ -48,6 +51,9 @@ const HeaderIconWrapper = (props: Props) => {
         tooltipText,
         isRhsOpen,
         pluginId,
+
+        // Infomaniak: for disabling actions in channel preview mode
+        disabled = false,
     } = props;
 
     const toolTips: Record<string, TooltipInfo> = {
@@ -159,6 +165,9 @@ const HeaderIconWrapper = (props: Props) => {
                 >
                     <button
                         id={buttonId}
+
+                        // Infomaniak: for disabling actions in channel preview mode
+                        disabled={disabled}
                         aria-label={ariaLabelText}
                         className={buttonClass || 'channel-header__icon'}
                         onClick={onClick}