[resultsdbpy] Pasting a list of tests will populate them in the incor…

…rect order.

https://bugs.webkit.org/show_bug.cgi?id=269401

Reviewed by Jonathan Bedard.

When pasting a list of tests into the results database search box, the tests will populate in the incorrect order.
Make the search bar can have different mode for adding new test view, for user pick from the search bar, it will always prepend
for user paste list, it will append each list item

* Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/js/search.js:
* Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/templates/search.html:

Canonical link: https://commits.webkit.org/274750@main

Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/js/search.js

@@ -48,7 +48,7 @@ function SearchBar(callback, suites) {
                                 };
                                 element.onmouseout = () => {mouseCount = mouseCount > 0 ? mouseCount - 1 : 0};
                                 element.onclick = () => {
-                                    callback({suite: key, test: test});
+                                    callback([{suite: key, test: test}], false);
                                     closeSearch();
                                 }
                             }
@@ -187,7 +187,7 @@ function SearchBar(callback, suites) {
 
                 } else if (event.keyCode == 0x0D /* VK_RETURN */) {
                     if (candidatesRef.state.selected)
-                        callback(candidatesRef.state.selected);
+                        callback([candidatesRef.state.selected], false);
                     else {
                         let pairs = [];
                         Object.keys(candidates).forEach(suite => {
@@ -200,7 +200,7 @@ function SearchBar(callback, suites) {
                         });
                         if (!pairs.length)
                             return;
-                        callback(...pairs);
+                        callback(pairs, false);
                     }
                     closeSearch();
                 } else if (event.keyCode == 0x1B /* DOM_VK_ESCAPE */)
@@ -238,7 +238,7 @@ function SearchBar(callback, suites) {
                             });
                             outstanding -= 1;
                             if (outstanding <= 0) {
-                                callback(...pairs);
+                                callback(pairs, true);
                                 closeSearch();
                             }
                         });

Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/templates/search.html

@@ -50,7 +50,7 @@
         this.currentLimit = this.currentParams.limit ? parseInt(this.currentParams.limit[this.currentParams.limit.length - 1]) : DEFAULT_LIMIT;
         delete this.currentParams.limit;
 
-        let state = {children: [], prepending: []};
+        let state = {children: [], prepending: [], appending: []};
         if (this.currentParams.test && (!this.currentParams.suite || this.currentParams.test.length != this.currentParams.suite.length))
             state = {error: "Query Error", description: 'Must have the same number of suites and tests in query'};
         else if (this.currentParams.test) {
@@ -138,12 +138,21 @@
                 if (diff.prepending) {
                     diff.prepending.forEach(child => {
                         if (element.firstElementChild)
-                            DOM.after(element.firstElementChild, renderChild(child));
+                            DOM.before(element.firstElementChild, renderChild(child));
                         else
                             DOM.inject(element, renderChild(child));
                         this.ref.state.children.unshift(child);
                     });
-                } 
+                }
+                if (diff.appending) {
+                    diff.appending.forEach(child => {
+                        if (element.lastElementChild)
+                            DOM.after(element.lastElementChild, renderChild(child));
+                        else
+                            DOM.inject(element, renderChild(child));
+                        this.ref.state.children.push(child);
+                    });
+                }
             }
         });
     }
@@ -263,33 +272,40 @@
                     viewport = element;
                 }
             })}>
-            ${SearchBar(function () {
+            ${SearchBar(function (pairs, append) {
                 const splitURL = document.URL.split('?');
                 let params = queryToParams(splitURL[1]);
                 if (!params.suite)
                     params.suite = [];
                 if (!params.test)
                     params.test = [];
 
-                for (let i = 0; i < arguments.length; i++) {
+                for (let i = 0; i < pairs.length; i++) {
                     let needToAdd = true;
                     if (!needToAdd)
                         continue;
 
                     let child = {
-                        suite: arguments[i].suite,
-                        test: arguments[i].test,
-                        timeline: new TimelineFromEndpoint(`api/results/${arguments[i].suite}/${arguments[i].test}`, {
-                            suite: arguments[i].suite, 
-                            test: arguments[i].test, 
+                        suite: pairs[i].suite,
+                        test: pairs[i].test,
+                        timeline: new TimelineFromEndpoint(`api/results/${pairs[i].suite}/${pairs[i].test}`, {
+                            suite: pairs[i].suite, 
+                            test: pairs[i].test, 
                             searchEvent: onCommitSearch,
                             viewport,
                         }),
                     }
 
-                    view.ref.setState({prepending: [child]});
-                    params.suite.push(child.suite);
-                    params.test.push(child.test);
+                    if (append) {
+                        view.ref.setState({appending: [child]});
+                        params.suite.push(child.suite);
+                        params.test.push(child.test);
+                    } else {
+                        view.ref.setState({prepending: [child]});
+                        params.suite.unshift(child.suite);
+                        params.test.unshift(child.test);
+                    }
+                    
                 }
                 const queryString = paramsToQuery(params);
                 window.history.pushState(queryString, '', splitURL[0] + '?' + queryString);