MM-63411 Don't focus thread textbox automatically when it has a draft (#31250)

* MM-63411 Don't focus thread textbox automatically when it has a draft

* Add E2E test

* Add test files forgotten in previous commit

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/playwright/lib/src/browser_context.ts

@@ -34,10 +34,11 @@ export class TestBrowser {
         const systemConsolePage = new pages.SystemConsolePage(page);
         const scheduledPostsPage = new pages.ScheduledPostsPage(page);
         const draftsPage = new pages.DraftsPage(page);
+        const threadsPage = new pages.ThreadsPage(page);
 
         this.context = context;
 
-        return {context, page, channelsPage, systemConsolePage, scheduledPostsPage, draftsPage};
+        return {context, page, channelsPage, systemConsolePage, scheduledPostsPage, draftsPage, threadsPage};
     }
 
     async close() {

e2e-tests/playwright/lib/src/ui/pages/index.ts

@@ -9,6 +9,7 @@ import SignupPage from './signup';
 import SystemConsolePage from './system_console';
 import ScheduledPostsPage from './scheduled_posts';
 import DraftsPage from './drafts';
+import ThreadsPage from './threads';
 
 const pages = {
     ChannelsPage,
@@ -19,6 +20,7 @@ const pages = {
     ScheduledPostsPage,
     SystemConsolePage,
     DraftsPage,
+    ThreadsPage,
 };
 
 export {

e2e-tests/playwright/lib/src/ui/pages/threads.ts

@@ -0,0 +1,46 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Page, expect} from '@playwright/test';
+
+import {ChannelsPost} from '@/ui/components';
+
+export default class ThreadsPage {
+    readonly page: Page;
+
+    readonly threadsList;
+
+    readonly noThreadSelected;
+
+    constructor(page: Page) {
+        this.page = page;
+
+        this.threadsList = page.locator('#threads-list');
+
+        this.noThreadSelected = page.locator('.no-results__title', {
+            hasText: /Looks like you’re all caught up|Catch up on your threads/,
+        });
+    }
+
+    async goto(teamName: string) {
+        await this.page.goto(`/${teamName}/threads`);
+    }
+
+    async toBeVisible() {
+        await expect(this.threadsList).toBeVisible();
+    }
+
+    async toHaveThreadSelected() {
+        await expect(this.noThreadSelected).not.toBeAttached();
+    }
+
+    async toNotHaveThreadSelected() {
+        await expect(this.noThreadSelected).toBeVisible();
+    }
+
+    async getLastPost() {
+        const lastPost = this.page.getByTestId('rhsPostView').last();
+        await lastPost.waitFor();
+        return new ChannelsPost(lastPost);
+    }
+}

e2e-tests/playwright/specs/functional/channels/threads/threads_list.spec.ts

@@ -0,0 +1,76 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {test} from '@mattermost/playwright-lib';
+
+test('Should be able to change threads with arrow keys', async ({pw}, testInfo) => {
+    test.skip(testInfo.project.name === 'ipad');
+
+    const {team, user} = await pw.initSetup();
+
+    const {channelsPage, page, threadsPage} = await pw.testBrowser.login(user);
+
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Start some threads, and leave a draft in one of them
+    await channelsPage.centerView.postCreate.postMessage('aaa');
+    await (await channelsPage.getLastPost()).openAThread();
+    await channelsPage.sidebarRight.postMessage('aaa reply');
+
+    await channelsPage.centerView.postCreate.postMessage('bbb');
+    await (await channelsPage.getLastPost()).openAThread();
+    await channelsPage.sidebarRight.postMessage('bbb reply');
+    await channelsPage.sidebarRight.postCreate.writeMessage('bbb second reply');
+
+    await channelsPage.centerView.postCreate.postMessage('ccc');
+    await (await channelsPage.getLastPost()).openAThread();
+    await channelsPage.sidebarRight.postMessage('ccc reply');
+
+    // * Ensure that there's a draft
+    await channelsPage.sidebarLeft.draftsVisible();
+
+    // # Switch to the threads list
+    await threadsPage.goto(team.name);
+    await threadsPage.toBeVisible();
+
+    // * Ensure no thread starts selected
+    await threadsPage.toNotHaveThreadSelected();
+
+    // # Press the down arrow to select a thread
+    await page.keyboard.press('ArrowDown');
+
+    // * Ensure the latest thread was selected
+    await threadsPage.toHaveThreadSelected();
+    (await threadsPage.getLastPost()).toContainText('ccc reply');
+
+    // # Press the down arrow again
+    await page.keyboard.press('ArrowDown');
+
+    // * Ensure the latest thread was selected
+    await threadsPage.toHaveThreadSelected();
+    (await threadsPage.getLastPost()).toContainText('bbb reply');
+
+    await threadsPage.threadsList.focus();
+
+    // # Press the down arrow again
+    await page.keyboard.press('ArrowDown');
+
+    // * Ensure the latest thread was selected
+    await threadsPage.toHaveThreadSelected();
+    (await threadsPage.getLastPost()).toContainText('aaa reply');
+
+    // # Press the up arrow
+    await page.keyboard.press('ArrowUp');
+
+    // * Ensure the latest thread was selected
+    await threadsPage.toHaveThreadSelected();
+    (await threadsPage.getLastPost()).toContainText('bbb reply');
+
+    // # Press the up arrow
+    await page.keyboard.press('ArrowUp');
+
+    // * Ensure the latest thread was selected
+    await threadsPage.toHaveThreadSelected();
+    (await threadsPage.getLastPost()).toContainText('ccc reply');
+});