MM-60604 Hide pinned icon in channel header when no pinned posts (#28276)

webapp/channels/src/components/channel_header/__snapshots__/channel_header.test.tsx.snap

@@ -71,18 +71,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
           <div
             className="channel-header__icons"
           >
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -362,18 +350,6 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
           <div
             className="channel-header__icons"
           >
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -604,18 +580,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs  channel-header__icon--active"
               buttonId="channelHeaderFilesButton"
@@ -841,18 +805,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -1078,18 +1030,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -1315,18 +1255,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs channel-header__icon--active"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -1552,18 +1480,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -1810,18 +1726,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -2047,18 +1951,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs channel-header__icon--active"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -2306,18 +2198,6 @@ exports[`components/ChannelHeader should render properly when custom status is e
           <div
             className="channel-header__icons"
           >
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -2595,18 +2475,6 @@ exports[`components/ChannelHeader should render properly when custom status is s
           <div
             className="channel-header__icons"
           >
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -2882,18 +2750,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -3119,18 +2975,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -3356,18 +3200,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"
@@ -3619,18 +3451,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
               onClick={[Function]}
               tooltip="Members"
             />
-            <HeaderIconWrapper
-              buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs"
-              buttonId="channelHeaderPinButton"
-              iconComponent={
-                <i
-                  aria-hidden="true"
-                  className="icon icon-pin-outline channel-header__pin"
-                />
-              }
-              onClick={[Function]}
-              tooltip="Pinned messages"
-            />
             <HeaderIconWrapper
               buttonClass="channel-header__icon channel-header__icon--left btn btn-icon btn-xs "
               buttonId="channelHeaderFilesButton"

webapp/channels/src/components/channel_header/channel_header.tsx

@@ -374,6 +374,18 @@ class ChannelHeader extends React.PureComponent<Props, State> {
             />
         );
 
+        const pinnedButton = this.props.pinnedPostsCount ? (
+            <HeaderIconWrapper
+                iconComponent={pinnedIcon}
+                buttonClass={pinnedIconClass}
+                buttonId={'channelHeaderPinButton'}
+                onClick={this.showPinnedPosts}
+                tooltip={this.props.intl.formatMessage({id: 'channel_header.pinnedPosts', defaultMessage: 'Pinned messages'})}
+            />
+        ) : (
+            null
+        );
+
         let memberListButton = null;
         if (!isDirect) {
             const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--wide channel-header__icon--left btn btn-icon btn-xs', {
@@ -599,13 +611,7 @@ class ChannelHeader extends React.PureComponent<Props, State> {
                                 >
                                     {muteTrigger}
                                     {memberListButton}
-                                    <HeaderIconWrapper
+                                    {pinnedButton}
-                                        iconComponent={pinnedIcon}
-                                        buttonClass={pinnedIconClass}
-                                        buttonId={'channelHeaderPinButton'}
-                                        onClick={this.showPinnedPosts}
-                                        tooltip={this.props.intl.formatMessage({id: 'channel_header.pinnedPosts', defaultMessage: 'Pinned messages'})}
-                                    />
                                     {this.props.isFileAttachmentsEnabled &&
                                         <HeaderIconWrapper
                                             iconComponent={channelFilesIcon}