added window title for scheduled post tab and fixed draft alignment (#30179)

* added window title for scheduled post tab and fixed draft alignment

* i18n fix

webapp/channels/src/components/drafts/drafts.scss

@@ -14,6 +14,7 @@
 
     &__main {
         position: absolute;
+        top: 56px;
         display: flex;
         overflow: auto;
         width: 100%;
@@ -68,6 +69,10 @@
                 position: relative;
                 height: 100%;
             }
+
+            .DraftList.Drafts__main {
+                top: 0;
+            }
         }
     }
 

webapp/channels/src/components/unreads_status_handler/index.ts

@@ -31,6 +31,7 @@ function mapStateToProps(state: GlobalState, {location: {pathname}}: Props) {
         unreadStatus: getUnreadStatus(state),
         inGlobalThreads: matchPath(pathname, {path: '/:team/threads/:threadIdentifier?'}) != null,
         inDrafts: matchPath(pathname, {path: '/:team/drafts'}) != null,
+        inScheduledPosts: matchPath(pathname, {path: '/:team/scheduled_posts'}) != null,
     };
 }
 

webapp/channels/src/components/unreads_status_handler/unreads_status_handler.test.tsx

@@ -47,6 +47,7 @@ describe('components/UnreadsStatusHandler', () => {
         currentTeammate: null,
         inGlobalThreads: false,
         inDrafts: false,
+        inScheduledPosts: false,
     };
 
     test('set correctly the title when needed', () => {
@@ -83,6 +84,38 @@ describe('components/UnreadsStatusHandler', () => {
             currentTeammate: {} as Props['currentTeammate']});
         instance.updateTitle();
         expect(document.title).toBe('Mattermost - Join a team');
+
+        wrapper.setProps({
+            inDrafts: false,
+            inScheduledPosts: true,
+            unreadStatus: 0,
+        });
+        instance.updateTitle();
+        expect(document.title).toBe('Scheduled - Test team display name');
+
+        wrapper.setProps({
+            inDrafts: false,
+            inScheduledPosts: true,
+            unreadStatus: 10,
+        });
+        instance.updateTitle();
+        expect(document.title).toBe('(10) Scheduled - Test team display name');
+
+        wrapper.setProps({
+            inDrafts: true,
+            inScheduledPosts: false,
+            unreadStatus: 0,
+        });
+        instance.updateTitle();
+        expect(document.title).toBe('Drafts - Test team display name');
+
+        wrapper.setProps({
+            inDrafts: true,
+            inScheduledPosts: false,
+            unreadStatus: 10,
+        });
+        instance.updateTitle();
+        expect(document.title).toBe('(10) Drafts - Test team display name');
     });
 
     test('should set correct title on mentions on safari', () => {
@@ -149,4 +182,18 @@ describe('components/UnreadsStatusHandler', () => {
 
         expect(document.title).toBe('Drafts - Test team display name');
     });
+
+    test('should display correct title when in scheduled posts tab', () => {
+        const wrapper = shallowWithIntl(
+            <UnreadsStatusHandler
+                {...defaultProps}
+                inScheduledPosts={true}
+                currentChannel={undefined}
+                siteName={undefined}
+            />,
+        ) as unknown as ShallowWrapper<Props, any, UnreadsStatusHandlerClass>;
+        wrapper.instance().updateTitle();
+
+        expect(document.title).toBe('Scheduled - Test team display name');
+    });
 });

webapp/channels/src/components/unreads_status_handler/unreads_status_handler.tsx

@@ -46,6 +46,7 @@ type Props = {
     currentTeammate: Channel | null;
     inGlobalThreads: boolean;
     inDrafts: boolean;
+    inScheduledPosts: boolean;
 };
 
 export class UnreadsStatusHandlerClass extends React.PureComponent<Props> {
@@ -90,6 +91,7 @@ export class UnreadsStatusHandlerClass extends React.PureComponent<Props> {
             unreadStatus,
             inGlobalThreads,
             inDrafts,
+            inScheduledPosts,
         } = this.props;
         const {formatMessage} = this.props.intl;
 
@@ -126,6 +128,15 @@ export class UnreadsStatusHandlerClass extends React.PureComponent<Props> {
                 displayName: currentTeam.display_name,
                 siteName: currentSiteName,
             });
+        } else if (currentTeam && inScheduledPosts) {
+            document.title = formatMessage({
+                id: 'scheduledPosts.title',
+                defaultMessage: '{prefix}Scheduled - {displayName} {siteName}',
+            }, {
+                prefix: `${mentionTitle}${unreadTitle}`,
+                displayName: currentTeam.display_name,
+                siteName: currentSiteName,
+            });
         } else {
             document.title = formatMessage({id: 'sidebar.team_select', defaultMessage: '{siteName} - Join a team'}, {siteName: currentSiteName || 'Mattermost'});
         }

webapp/channels/src/i18n/en.json

@@ -4934,6 +4934,7 @@
   "scheduled_posts.row_title_channel.placeholder": "In: {icon} No Destination",
   "scheduled_posts.row_title_thread.placeholder": "Thread to: {icon} No Destination",
   "scheduled_posts.row_title_thread.placeholder_tooltip": "The channel either doesn’t exist or you do not have access to it.",
+  "scheduledPosts.title": "{prefix}Scheduled - {displayName} {siteName}",
   "search_bar.channels": "Channels",
   "search_bar.clear": "Clear",
   "search_bar.file_types": "File types",