Fix encoding in global search (#2116)

Using plus symbol in global search led to a space in the query parameter of the URL. We now encode the query string properly in global search and additionally fixed the expert search documentation.

gradle/changelog/search_url_encoding.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Encoding in global search ([#2116](https://github.com/scm-manager/scm-manager/pull/2116))

scm-ui/ui-api/src/help/search/syntax.de.ts

@@ -87,34 +87,13 @@ Standardmäßig werden Repository-Namen um 1,5 und Namespace-Namen um 1,25 geboo
 
 Hinweis: Logische Operatoren müssen in Großbuchstaben eingegeben werden (z. B. „AND").
 
-<table>
+|Operator|Definition|Beispiel|
-  <tr>
+|--|--|--|
-    <th>Definition</th>
+|AND|Beide Terme müssen enthalten sein|Ultimate AND Repository – findet z.B. Ultimate Repository, Ultimate Special Repository|
-    <th>Beispiel</th>
+|OR|Mindestens einer der Terme muss enthalten sein|Ultimate OR Repository – findet z.B.. Ultimate Repository, Ultimate User, Special Repository|
-  </tr>
+|NOT|Der nachfolgende Term darf nicht enthalten sein, „!" kann alternativ verwendet werden|Ultimate NOT Repository – findet z.B.. Ultimate user, nicht jedoch z.B. Ultimate Repository|
-  <tr>
+|–|Schließt den folgenden Term von der Suche aus|Ultimate Repository -Special – findet z.B. Ultimate Repository, schließt z.B. Ultimate Special Repository aus|
-    <td>AND – beide Terme müssen enthalten sein</td>
+|+ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |Der folgende Term muss enthalten sein|Ultimate +Repository – findet z.B. my Repository, Ultimate Repository|  </tr>
-    <td>Ultimate AND Repository – findet z.B. Ultimate Repository, Ultimate Special Repository
- </td>
-  </tr>
-  <tr>
-    <td>OR – mindestens einer der Terme muss enthalten sein</td>
-    <td>Ultimate OR Repository – findet z.B.. Ultimate Repository, Ultimate User, Special Repository</td>
-  </tr>
-  <tr>
-    <td>NOT – der nachfolgende Term darf nicht enthalten sein. „!" kann alternativ verwendet werden.</td>
-    <td>Ultimate NOT Repository – findet z.B.. Ultimate user, nicht jedoch z.B. Ultimate Repository</td>
-  </tr>
-  <tr>
-    <td>– schließt den folgenden Term von der Suche aus</td>
-    <td>Ultimate Repository -Special – findet z.B. Ultimate Repository, schließt z.B. Ultimate Special Repository aus</td>
-  </tr>
-  <tr>
-    <td>– der folgende Term muss enthalten sein</td>
-    <td>Ultimate +Repository – findet z.B. my Repository, Ultimate Repository</td>
-  </tr>
-</table>
-
 
 ## Gruppieren
 

scm-ui/ui-api/src/help/search/syntax.en.ts

@@ -87,33 +87,13 @@ By default Repository names are boosted by 1.5, namespace by 1.25.
 
 Note: Logical Operators must be entered in upper case (e.g. "AND").
 
-<table>
+|Operator      |Definition|Example|
-  <tr>
+|------------|--|--|
-    <th>Definition</th>
+|AND|Both terms must be included|\`Ultimate AND Repository\` – finds e.g. Ultimate Repository, Ultimate Special Repository|
-    <th>Example</th>
+|OR            |At least one of the terms must be included|Ultimate OR Repository – finds e.g. Ultimate Repository, Ultimate User, Special Repository|
-  </tr>
+|NOT           |Following term may not be included, "!" may be used alternatively|Ultimate NOT Repository – finds e.g. Ultimate user, excludes e.g. Ultimate Repository|
-  <tr>
+|–             |Excludes following term from search|Ultimate Repository -Special – finds e.g. Ultimate Repository, excludes e.g. Ultimate Special Repository|
-    <td>AND – both terms must be included</td>
+|+ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |Following term must be included|Ultimate +Repository – finds e.g. my Repository, Ultimate Repository|
-    <td>Ultimate AND Repository – finds e.g. Ultimate Repository, Ultimate Special Repository</td>
-  </tr>
-  <tr>
-    <td>OR – at least one of the terms must be included</td>
-    <td>Ultimate OR Repository – finds e.g. Ultimate Repository, Ultimate User, Special Repository</td>
-  </tr>
-  <tr>
-    <td>NOT – following term may not be included, "!" may be used alternatively</td>
-    <td>Ultimate NOT Repository – finds e.g. Ultimate user, excludes e.g. Ultimate Repository</td>
-  </tr>
-  <tr>
-    <td>– excludes following term from search</td>
-    <td>Ultimate Repository -Special – finds e.g. Ultimate Repository, excludes e.g. Ultimate Special Repository</td>
-  </tr>
-  <tr>
-    <td>– following term must be included</td>
-    <td>Ultimate +Repository – finds e.g. my Repository, Ultimate Repository</td>
-  </tr>
-</table>
-
 
 ## Grouping
 

scm-ui/ui-api/src/urls.test.ts

@@ -98,6 +98,16 @@ describe("tests for getQueryStringFromLocation", () => {
     expect(getQueryStringFromLocation(location)).toBe("abc");
   });
 
+  it("should return the query string with a space instead of a plus symbol", () => {
+    const location = createLocation("?q=+(Test)");
+    expect(getQueryStringFromLocation(location)).toBe(" (Test)");
+  });
+
+  it("should return the query string with a plus symbol", () => {
+    const location = createLocation("?q=%2B(Test)");
+    expect(getQueryStringFromLocation(location)).toBe("+(Test)");
+  });
+
   it("should return query string from multiple parameters", () => {
     const location = createLocation("?x=a&y=b&q=abc&z=c");
     expect(getQueryStringFromLocation(location)).toBe("abc");

scm-ui/ui-webapp/src/containers/OmniSearch.tsx

@@ -366,7 +366,9 @@ const OmniSearch: FC = () => {
           selected={newEntries.length === index}
           clear={clearQuery}
           label={t("search.quickSearch.searchRepo")}
-          link={`/search/${searchTypes[0]}/?q=${query}&namespace=${context.namespace}&name=${context.name}`}
+          link={`/search/${searchTypes[0]}/?q=${encodeURIComponent(query)}&namespace=${context.namespace}&name=${
+            context.name
+          }`}
         />
       );
     }
@@ -377,7 +379,7 @@ const OmniSearch: FC = () => {
           selected={newEntries.length === index}
           clear={clearQuery}
           label={t("search.quickSearch.searchNamespace")}
-          link={`/search/repository/?q=${query}&namespace=${context.namespace}`}
+          link={`/search/repository/?q=${encodeURIComponent(query)}&namespace=${context.namespace}`}
         />
       );
     }
@@ -387,7 +389,7 @@ const OmniSearch: FC = () => {
         selected={newEntries.length === index}
         clear={clearQuery}
         label={t("search.quickSearch.searchEverywhere")}
-        link={`/search/repository/?q=${query}`}
+        link={`/search/repository/?q=${encodeURIComponent(query)}`}
       />
     );
     const length = newEntries.length;
@@ -406,7 +408,7 @@ const OmniSearch: FC = () => {
     return newEntries;
   }, [clearQuery, context.name, context.namespace, hits, id, index, query, searchTypes, t]);
 
-  const defaultLink = `/search/${searchType}/?q=${query}`;
+  const defaultLink = `/search/${searchType}/?q=${encodeURIComponent(query)}`;
   const { onKeyDown } = useKeyBoardNavigation(entries, clearQuery, hideResults, index, setIndex, defaultLink);
 
   return (

scm-ui/ui-webapp/src/search/Search.tsx

@@ -172,7 +172,9 @@ const Search: FC = () => {
     ...searchCounts,
   };
 
-  const contextQuery = `${query}${namespace ? "&namespace=" + namespace : ""}${name ? "&name=" + name : ""}`;
+  const contextQuery = `${encodeURIComponent(query)}${namespace ? "&namespace=" + namespace : ""}${
+    name ? "&name=" + name : ""
+  }`;
 
   return (
     <Page