From e48deb8d1dcb2bbb76379ede172e95e9dbd27190 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Fri, 5 Aug 2022 14:56:31 +0200
Subject: [PATCH] Improve omnisearch

---
 scm-ui/ui-webapp/public/locales/de/commons.json |  3 ++-
 scm-ui/ui-webapp/public/locales/en/commons.json |  3 ++-
 scm-ui/ui-webapp/src/containers/OmniSearch.tsx  | 13 ++++++++-----
 scm-ui/ui-webapp/src/search/Search.tsx          | 15 +++++++++++----
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/scm-ui/ui-webapp/public/locales/de/commons.json b/scm-ui/ui-webapp/public/locales/de/commons.json
index cb2efd17ce..75766e368c 100644
--- a/scm-ui/ui-webapp/public/locales/de/commons.json
+++ b/scm-ui/ui-webapp/public/locales/de/commons.json
@@ -201,11 +201,12 @@
     "placeholder": "Suche...",
     "title": "Suche",
     "subtitle": "{{type}} Ergebnisse für \"{{query}}\"",
+    "subtitleWithContext": "{{type}} Ergebnisse für \"{{query}}\" in \"{{context}}\"",
     "types": "Ergebnisse",
     "noHits": "Die Suche ergab keine Treffer",
     "syntaxHelp": "Finden Sie bessere Ergebnisse durch die Nutzung der vollen <0>Such-Syntax</0>",
     "quickSearch": {
-      "resultHeading": "Top Ergebnisse",
+      "resultHeading": "Hilfe beim Suchen?",
       "parseError": "Der Suchstring is ungültig.",
       "parseErrorHelp": "Hinweise zu ihrer Suche",
       "hintsIcon": "Suchtipps",
diff --git a/scm-ui/ui-webapp/public/locales/en/commons.json b/scm-ui/ui-webapp/public/locales/en/commons.json
index e0e7b84836..c9cffe71ee 100644
--- a/scm-ui/ui-webapp/public/locales/en/commons.json
+++ b/scm-ui/ui-webapp/public/locales/en/commons.json
@@ -202,11 +202,12 @@
     "placeholder": "Search...",
     "title": "Search",
     "subtitle": "{{type}} results for \"{{query}}\"",
+    "subtitleWithContext": "{{type}} results for \"{{query}}\" in \"{{context}}\"",
     "types": "Results",
     "noHits": "No results found",
     "syntaxHelp": "Find better results by using the full <0>search syntax</0>",
     "quickSearch": {
-      "resultHeading": "Quick results",
+      "resultHeading": "Need help?",
       "parseError": "Failed to parse query.",
       "parseErrorHelp": "Hints for your Search",
       "hintsIcon": "Search Hints",
diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
index 544ec2a46c..1566173a5e 100644
--- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
+++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
@@ -70,7 +70,7 @@ type HitsProps = {
 const QuickSearchNotification: FC = ({ children }) => <div className="dropdown-content p-4">{children}</div>;
 
 const ResultHeading = styled.h3`
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid lightgray;
 `;
 
 const DropdownMenu = styled.div`
@@ -153,8 +153,9 @@ const Hits: FC<HitsProps> = ({ entries, hits, showHelp, ...rest }) => {
 
   return (
     <>
-      <div className="dropdown-content">
+      <div className="dropdown-content p-0">
         <ScreenReaderHitSummary hits={hits} />
+        <HitsList entries={entries} {...rest} />
         <ResultHeading
           className={classNames(
             "dropdown-item",
@@ -164,13 +165,13 @@ const Hits: FC<HitsProps> = ({ entries, hits, showHelp, ...rest }) => {
             "mx-2",
             "px-2",
             "py-1",
+            "mt-1",
             "has-text-weight-bold"
           )}
         >
           <span>{t("search.quickSearch.resultHeading")}</span>
           <SyntaxHelp onClick={showHelp} />
         </ResultHeading>
-        <HitsList entries={entries} {...rest} />
       </div>
     </>
   );
@@ -191,14 +192,16 @@ const useKeyBoardNavigation = (
     // https://caniuse.com/keyboardevent-code
     switch (e.which) {
       case 40: // e.code: ArrowDown
+        e.preventDefault();
         setIndex((idx) => {
-          if (idx < entries.length) {
+          if (idx < entries.length - 1) {
             return idx + 1;
           }
           return idx;
         });
         break;
       case 38: // e.code: ArrowUp
+        e.preventDefault();
         setIndex((idx) => {
           if (idx > 0) {
             return idx - 1;
@@ -211,7 +214,7 @@ const useKeyBoardNavigation = (
           history.push(defaultLink);
         } else {
           const entry = entries[index];
-          if (entry.props.link) {
+          if (entry?.props.link) {
             history.push(entry.props.link);
           }
         }
diff --git a/scm-ui/ui-webapp/src/search/Search.tsx b/scm-ui/ui-webapp/src/search/Search.tsx
index 706b4cb822..97a9d901fa 100644
--- a/scm-ui/ui-webapp/src/search/Search.tsx
+++ b/scm-ui/ui-webapp/src/search/Search.tsx
@@ -102,12 +102,19 @@ const SyntaxHelpLink: FC = ({ children }) => <Link to="/help/search-syntax">{chi
 
 const SearchSubTitle: FC<Props> = ({ selectedType, query }) => {
   const [t] = useTranslation("commons");
+  const context = useNamespaceAndNameContext();
   return (
     <>
-      {t("search.subtitle", {
-        query,
-        type: t(`plugins:search.types.${selectedType}.subtitle`, selectedType),
-      })}
+      {context.namespace
+        ? t("search.subtitleWithContext", {
+            query,
+            type: t(`plugins:search.types.${selectedType}.subtitle`, selectedType),
+            context: `${context.namespace}${context.name ? `/${context.name}` : ""}`,
+          })
+        : t("search.subtitle", {
+            query,
+            type: t(`plugins:search.types.${selectedType}.subtitle`, selectedType),
+          })}
       <br />
       <Trans i18nKey="search.syntaxHelp" components={[<SyntaxHelpLink />]} />
     </>