[MM-61539] Removed duplicate draft icons when no scheduled posts exis…

…t and updated draft icon (mattermost#29218) * Removed duplicate draft icons * Added tooltip * Restored drafts count icon
catalintomai · Nov 15, 2024 · 11ac1f4 · 11ac1f4
1 parent 679e8c1
commit 11ac1f4
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 19 deletions.
diff --git a/webapp/channels/src/components/drafts/drafts_link/drafts_link.tsx b/webapp/channels/src/components/drafts/drafts_link/drafts_link.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {memo, useEffect, useRef} from 'react';
+import React, {memo, useEffect, useMemo, useRef} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useSelector, useDispatch} from 'react-redux';
 import {NavLink, useRouteMatch} from 'react-router-dom';
@@ -19,6 +19,7 @@ import {makeGetDraftsCount} from 'selectors/drafts';
 
 import DraftsTourTip from 'components/drafts/drafts_link/drafts_tour_tip/drafts_tour_tip';
 import ChannelMentionBadge from 'components/sidebar/sidebar_channel/channel_mention_badge';
+import WithTooltip from 'components/with_tooltip';
 
 import {SCHEDULED_POST_URL_SUFFIX} from 'utils/constants';
 
@@ -81,6 +82,30 @@ function DraftsLink() {
         initialScheduledPostsLoaded.current = true;
     }, [dispatch, isScheduledPostEnabled, teamId]);
 
+    const showScheduledPostCount = isScheduledPostEnabled && teamScheduledPostCount > 0;
+
+    const tooltipText = useMemo(() => {
+        const lineBreaks = (x: React.ReactNode) => {
+            if (draftCount > 0 && teamScheduledPostCount > 0) {
+                return (<><br/>{x}</>);
+            }
+
+            return null;
+        };
+
+        return (
+            <FormattedMessage
+                id='drafts.tooltipText'
+                defaultMessage=''
+                values={{
+                    draftCount,
+                    scheduledPostCount: teamScheduledPostCount,
+                    br: lineBreaks,
+                }}
+            />
+        );
+    }, [draftCount, teamScheduledPostCount]);
+
     if (!itemsExist && !urlMatches) {
         return null;
     }
@@ -100,7 +125,10 @@ function DraftsLink() {
                     className='SidebarLink sidebar-item'
                     tabIndex={0}
                 >
-                    {pencilIcon}
+                    <i
+                        data-testid='sendPostIcon'
+                        className='icon icon-send-post icon-send'
+                    />
                     <div className='SidebarChannelLinkLabel_wrapper'>
                         <span className='SidebarChannelLinkLabel sidebar-item__name'>
                             <FormattedMessage
@@ -109,23 +137,31 @@ function DraftsLink() {
                             />
                         </span>
                     </div>
-                    {
-                        draftCount > 0 &&
-                        <ChannelMentionBadge
-                            unreadMentions={draftCount}
-                            icon={pencilIcon}
-                        />
-                    }
-
-                    {
-                        isScheduledPostEnabled && teamScheduledPostCount > 0 &&
-                        <ChannelMentionBadge
-                            unreadMentions={teamScheduledPostCount}
-                            icon={scheduleIcon}
-                            className={classNames('scheduledPostBadge', {persistent: scheduledPostsHasError})}
-                            hasUrgent={scheduledPostsHasError}
-                        />
-                    }
+                    <WithTooltip
+                        placement='right'
+                        id='draft-scheduled-post-tooltip'
+                        title={tooltipText}
+                    >
+                        <div>
+                            {
+                                draftCount > 0 &&
+                                <ChannelMentionBadge
+                                    unreadMentions={draftCount}
+                                    icon={pencilIcon}
+                                />
+                            }
+
+                            {
+                                showScheduledPostCount &&
+                                <ChannelMentionBadge
+                                    unreadMentions={teamScheduledPostCount}
+                                    icon={scheduleIcon}
+                                    className={classNames('scheduledPostBadge', {persistent: scheduledPostsHasError})}
+                                    hasUrgent={scheduledPostsHasError}
+                                />
+                            }
+                        </div>
+                    </WithTooltip>
                 </NavLink>
                 <DraftsTourTip/>
             </li>

diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
@@ -3612,6 +3612,7 @@
   "drafts.sidebarLink": "Drafts",
   "drafts.subtitle": "Any messages you've started will show here",
   "drafts.title": "{prefix}Drafts - {displayName} {siteName}",
+  "drafts.tooltipText": "{draftCount, plural, =0 {} =1 {1 Draft} other {{draftCount} Drafts}} <br></br> {scheduledPostCount, plural, =0 {} other {{scheduledPostCount} Scheduled}}",
   "drafts.tutorial_tip.notNow": "Not now",
   "drafts.tutorial_tip.viewDrafts": "View drafts",
   "drafts.tutorialTip.description": "With the new Drafts view, all of your unfinished messages are collected in one place. Return here to read, edit, or send draft messages.",