From 357aa58163a3d8d3172e1429f05a619c84a95dcc Mon Sep 17 00:00:00 2001
From: Julien Tant <785518+JulienTant@users.noreply.github.com>
Date: Thu, 10 Apr 2025 23:30:08 -0700
Subject: [PATCH] [MM-63597] Fix `From:` autocompletion (#30673)

---
 .../search/search_box_suggestions.spec.ts     | 30 +++++++++++++++++++
 .../src/components/new_search/search_box.tsx  |  5 ++--
 .../suggestion/search_user_provider.tsx       |  5 ++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/e2e-tests/playwright/specs/functional/channels/search/search_box_suggestions.spec.ts b/e2e-tests/playwright/specs/functional/channels/search/search_box_suggestions.spec.ts
index 3d22a373bf..190b5c183f 100644
--- a/e2e-tests/playwright/specs/functional/channels/search/search_box_suggestions.spec.ts
+++ b/e2e-tests/playwright/specs/functional/channels/search/search_box_suggestions.spec.ts
@@ -57,3 +57,33 @@ test('Search box suggestion must be case insensitive', async ({pw}) => {
     // * The search box should contain the selected suggestion
     await expect(channelsPage.globalHeader.searchBox.getByText(searchOutput, {exact: true})).toBeVisible();
 });
+
+test('remove extra whitespace when selecting a user', async ({pw}) => {
+    // # Set up test with two users
+    const {user, adminUser: admin} = await pw.initSetup();
+
+    // # Log in as the test user
+    const {channelsPage} = await pw.testBrowser.login(user);
+
+    // # Visit a default channel page
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Open the search UI
+    await channelsPage.globalHeader.openSearch();
+
+    // # Type "from:" followed by multiple spaces
+    const {searchInput} = channelsPage.searchPopover;
+    await searchInput.pressSequentially(`from:    ${admin.username}`);
+
+    // * The suggestion should be visible
+    await expect(channelsPage.searchPopover.selectedSuggestion).toBeVisible();
+    await expect(channelsPage.searchPopover.selectedSuggestion).toHaveText(`@` + admin.username);
+
+    // # Press enter to validate the selection
+    await searchInput.press('Enter');
+
+    // * Verify the search box shows "from:username" without extra spaces
+    const expectedText = `from:${admin.username} `;
+    await expect(searchInput).toHaveValue(expectedText);
+});
diff --git a/webapp/channels/src/components/new_search/search_box.tsx b/webapp/channels/src/components/new_search/search_box.tsx
index a24847e1e6..e588f4c360 100644
--- a/webapp/channels/src/components/new_search/search_box.tsx
+++ b/webapp/channels/src/components/new_search/search_box.tsx
@@ -170,7 +170,7 @@ const SearchBox = forwardRef(
                 }
 
                 setSearchTerms(
-                    searchTerms.slice(0, caretPosition).replace(new RegExp(escapedMatchedPretext + '$', 'i'), '') +
+                    searchTerms.slice(0, caretPosition).replace(new RegExp(escapedMatchedPretext + '$', 'i'), '').trimEnd() +
                     val +
                     extraSpace +
                     searchTerms.slice(caretPosition),
@@ -228,7 +228,8 @@ const SearchBox = forwardRef(
         const changeSearchTeam = (selectedTeam: string) => {
             const newTerms = searchTerms.
                 replace(/\bin:[^\s]*/gi, '').replace(/\s{2,}/g, ' ').
-                replace(/\bfrom:[^\s]*/gi, '').replace(/\s{2,}/g, ' ');
+                replace(/\bfrom:[^\s]*/gi, '').replace(/\s{2,}/g, ' ').
+                trim();
 
             if (newTerms !== searchTerms) {
                 clearTimeout(filterResetTimeout.current);
diff --git a/webapp/channels/src/components/suggestion/search_user_provider.tsx b/webapp/channels/src/components/suggestion/search_user_provider.tsx
index 043cbbe040..ea8822250d 100644
--- a/webapp/channels/src/components/suggestion/search_user_provider.tsx
+++ b/webapp/channels/src/components/suggestion/search_user_provider.tsx
@@ -71,6 +71,11 @@ export default class SearchUserProvider extends Provider {
     }
 
     handlePretextChanged(pretext: string, resultsCallback: ResultsCallback<UserProfile>, teamId: string) {
+        // no autocomplete on All teams
+        if (teamId === '') {
+            return false;
+        }
+
         const captured = (/\bfrom:\s*(\S*)$/i).exec(pretext.toLowerCase());
 
         this.doAutocomplete(captured, teamId, resultsCallback);