Improve omnisearch

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",

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",

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);
           }
         }

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 />]} />
     </>