Initial version of the new search interface (#27301)

* Initial version of the new search interface

* Fixing CI

* style tweaks

* tweaks to date picker in search

* change search input to button

* Addressing a lot of small problems

* Addressing current search visualization

* Fixing problem on filter autocompletion

* Adding some more fixes

* Tiny style ajustment

* Removing unnecessary slice call

* Adding search extensibility

* Improving the extensibility

* Fixing and refactoring a bit

* On clear click, clear the current search

* splitting components for simplicity

* tweaks to file ext search

* Addressing PR review comments and adding color to the extensions search icons

* Improving a bit the extension search

* Fixing CI

* Fixing some bugs

* Keep the focus on search input whenever we change the search type

* Adding SearchHint tests

* Adding search_box_type_selector tests

* Adding tests for the SearchBox component

* Adding tests for search box suggestions

* Adding SearchBoxInput tests

* Splitting extension suggestion component and provider

* ExtensionSuggestion tests

* Removing unneeded property

* Adding SearchBoxhints tests

* Adding tests for NewSearch component

* Adding tests for the extension suggestion provider

* Fixing linter errors

* Fixing tests

* Fixing linter errors

* Fixing linter errors

* Adding license check for plugins

* Addressing PR review comments

* Addressing PR review comments

* Addressing PR review comments

* Fixing tests

* Fixing some cypress tests

* More work around cypress tests for search

* Some accessibility changes

* more work on cypress tests

* fixing more cypress tests

* Fixing linter errors

* Fixing tests

* Fixing ctrl+f6 switching

* Fixing scrolling on small windows wheneve you are searching

* Improve editing in the middle of the search text

* Addressing some PR review comments

* Addressing some PR review comments

* Addressing some PR review comments

* Addressing some PR review comments

* Fixing tests and linter errors

* Fixingls tests and linter errors

* Fix type checks

* Clearer logic to render plugin or builtin suggestion

* Addressing PR review changes

* Addressing PR review changes

* Using selectors for plugin components

* Changing uppercase to lowercase on lists of components

* Updating tests

* Updating snapshots

* minor css tweaks

* minor css tweak

* Adding the search type and the clear button

* Fixing problem with the filetype selector

* fixing linter errors

* Some fixes

* More linter fixes

* Reverting prettier auto-formating

* Fixing CI

* Fixing CI

* Fixing chrome problem

* Fixing CI

* Addressing PR review comments

---------

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>
Co-authored-by: Christopher Speller <crspeller@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_reaction_spec.ts

@@ -64,7 +64,8 @@ describe('Archived channels', () => {
 
             // # Search for "Test archive reaction"
             cy.get('body').type('{esc}');
-            cy.get('#searchBox').should('be.visible').type(messageText).type('{enter}');
+            cy.uiGetSearchContainer().click();
+            cy.uiGetSearchBox().find('input').should('be.visible').type(messageText).type('{enter}');
 
             // # Click on post dot menu so we can check for reaction icon
             cy.clickPostDotMenu(postId, 'SEARCH');

e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_search_spec.ts

@@ -60,7 +60,8 @@ describe('archive tests while preventing viewing archived channels', () => {
                 cy.postMessage(getRandomId());
 
                 // # Search for the post from step 1')
-                cy.get('#searchBox').click().clear().type(`${messageText}{enter}`);
+                cy.uiGetSearchContainer().click();
+                cy.uiGetSearchBox().find('input').clear().type(`${messageText}{enter}`);
 
                 // * Post is returned by search, since it's not archived anymore
                 cy.get('#searchContainer').should('be.visible');
@@ -94,7 +95,8 @@ describe('archive tests while preventing viewing archived channels', () => {
         cy.uiArchiveChannel();
 
         // # Archive dialogue message reads "This will archive the channel from the team and make its contents inaccessible for all users" (Mobile dialogue makes no mention of the data will be accessible)
-        cy.get('#searchBox').click().clear().type(`${testArchivedMessage}{enter}`);
+        cy.uiGetSearchContainer().click();
+        cy.uiGetSearchBox().find('input').clear().type(`${testArchivedMessage}{enter}`);
 
         // * Post is not returned by search
         cy.get('#searchContainer').should('be.visible');
@@ -109,7 +111,8 @@ describe('archive tests while preventing viewing archived channels', () => {
             cy.postMessage(messageText);
 
             // # Search for the string of text from step 1
-            cy.get('#searchBox').click().clear().type(`${messageText}{enter}`);
+            cy.uiGetSearchContainer().click();
+            cy.uiGetSearchBox().find('input').clear().type(`${messageText}{enter}`);
 
             // * Post is returned by search, since it's not archived anymore
             cy.get('#searchContainer').should('be.visible');
@@ -127,7 +130,8 @@ describe('archive tests while preventing viewing archived channels', () => {
     it('MM-T1710 archived channels are not listed on the "in:" autocomplete', () => {
         // # Archive a channel and make a mental note of the channel name
         // # Type "in:" and note the list of channels that appear
-        cy.get('#searchBox').click().clear().type(`in:${testChannel.name}`);
+        cy.uiGetSearchContainer().click();
+        cy.uiGetSearchBox().find('input').clear().type(`in:${testChannel.name}`);
         cy.findByTestId(testChannel.name).should('not.exist');
     });
 });

e2e-tests/cypress/tests/integration/channels/archived_channel/archived_channel_spec.ts

@@ -41,10 +41,11 @@ describe('Leave an archived channel', () => {
             cy.get('#channelInfoModalLabel span.icon__archive').should('not.exist');
 
             // # Search for a post in an archived channel
-            cy.get('#searchBox').click().clear().type(`${testArchivedMessage}{enter}`);
+            cy.uiGetSearchContainer().click();
+            cy.uiGetSearchBox().find('input').clear().type(`${testArchivedMessage}{enter}`);
 
             // # Open the archived channel by selecting Jump from search results and then selecting the link to move to the most recent posts in the channel
-            cy.get('#searchContainer').should('be.visible');
+            cy.uiGetSearchContainer().should('be.visible');
 
             cy.get('a.search-item__jump').first().click();
 
@@ -111,10 +112,11 @@ describe('Leave an archived channel', () => {
         const messageList = Array.from({length: 40}, (_, i) => `${i}. any - ${getRandomId()}`);
         createArchivedChannel({prefix: 'archived-search-for'}, messageList).then(({name}) => {
             // # Locate the post in a search
-            cy.get('#searchBox').click().clear().type(`${messageList[1]}{enter}`);
+            cy.uiGetSearchContainer().click();
+            cy.uiGetSearchBox().find('input').clear().type(`${messageList[1]}{enter}`);
 
             // # Click jump to open an archive post in permalink view
-            cy.get('#searchContainer').should('be.visible');
+            cy.uiGetSearchContainer().should('be.visible');
             cy.get('a.search-item__jump').first().click();
 
             // * Archived channel is opened in permalink view

e2e-tests/cypress/tests/integration/channels/archived_channel/archived_leave_channel_spec.ts

@@ -96,7 +96,8 @@ describe('Leave an archived channel', () => {
                 cy.visit(previousChannel);
 
                 // # Search for content from an archived channel
-                cy.get('#searchBox').click().clear().type(`${messageD}{enter}`);
+                cy.uiGetSearchContainer().click();
+                cy.uiGetSearchBox().find('input').clear().type(`${messageD}{enter}`);
 
                 // # Open the channel from search results
                 cy.get('#searchContainer').should('be.visible');
@@ -107,7 +108,8 @@ describe('Leave an archived channel', () => {
                 cy.url().should('contain', `${testTeam.name}/channels/${archivedChannelD.name}`);
 
                 // # Search for content from a different archived channel
-                cy.get('#searchBox').click().clear().type(`${messageC}{enter}`);
+                cy.uiGetSearchContainer().click();
+                cy.uiGetSearchBox().find('input').clear().type(`${messageC}{enter}`);
 
                 // # Open the channel from search result by clicking Jump
                 cy.get('#searchContainer').should('be.visible').findByText('Jump').click().wait(TIMEOUTS.ONE_SEC);