Searching for space

src/apps/search-result/search-result-not-valid-search.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { FC } from "react";
+import { useText } from "../../core/utils/text";
+
+export interface SearchResultInvalidSearchProps {
+  dataCy?: string;
+}
+
+const SearchResultInvalidSearch: FC<SearchResultInvalidSearchProps> = ({
+  dataCy = "search-result-not-valid-search"
+}) => {
+  const t = useText();
+
+  return (
+    <div className="card-list-page" data-cy={dataCy}>
+      <h1
+        className="text-header-h2 search-result-title my-112"
+        data-cy="search-result-zero-hits"
+      >
+        {t("invalidSearchText")}
+      </h1>
+      <p className="text-body-medium-regular">
+        {t("invalidSearchDescriptionText")}
+      </p>
+    </div>
+  );
+};
+
+export default SearchResultInvalidSearch;

src/apps/search-result/search-result.dev.tsx

@@ -209,6 +209,17 @@ export default {
       name: "Loading",
       defaultValue: "Loading",
       control: { type: "text" }
+    },
+    invalidSearchText: {
+      name: "Invalid search headline",
+      defaultValue: "Invalid search",
+      control: { type: "text" }
+    },
+    invalidSearchDescriptionText: {
+      name: "Invalid search description",
+      defaultValue:
+        "Your search is invalid. Please try again. In order to perform a valid search, you need to include at least three letters.",
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof SearchResultEntry>;

src/apps/search-result/search-result.entry.tsx

@@ -38,6 +38,8 @@ interface SearchResultEntryTextProps {
   noSearchResultText: string;
   showMoreText: string;
   showResultsText: string;
+  invalidSearchText: string;
+  invalidSearchDescriptionText: string;
 }
 
 interface SearchResultEntryConfigProps {
@@ -75,7 +77,8 @@ const SearchResultEntry: React.FC<SearchResultEntryProps> = ({
 
   return (
     <div>
-      {searchQuery && (
+      {/* We still want to render the app, even if the search query is an empty string */}
+      {(searchQuery || searchQuery === "") && (
         <GuardedApp app="search-result">
           <SearchResult q={searchQuery} pageSize={pageSize} />
         </GuardedApp>

src/apps/search-result/search-result.tsx

@@ -29,6 +29,7 @@ import useGetCleanBranches from "../../core/utils/branches";
 import useFilterHandler from "./useFilterHandler";
 import SearchResultSkeleton from "./search-result-skeleton";
 import SearchResultZeroHits from "./search-result-zero-hits";
+import SearchResultInvalidSearch from "./search-result-not-valid-search";
 
 interface SearchResultProps {
   q: string;
@@ -51,6 +52,7 @@ const SearchResult: React.FC<SearchResultProps> = ({ q, pageSize }) => {
     null
   );
   const { facets: campaignFacets } = useGetFacets(q, filters);
+  const minimalQueryLength = 3;
 
   // If q changes (eg. in Storybook context)
   // then make sure that we reset the entire result set.
@@ -95,12 +97,15 @@ const SearchResult: React.FC<SearchResultProps> = ({ q, pageSize }) => {
     addFilterFromUrlParamListener(FacetField.WorkTypes);
   }, [addFilterFromUrlParamListener]);
 
-  const { data, isLoading } = useSearchWithPaginationQuery({
-    q: { all: q },
-    offset: page * pageSize,
-    limit: pageSize,
-    filters: createFilters(filters, cleanBranches)
-  });
+  const { data, isLoading } = useSearchWithPaginationQuery(
+    {
+      q: { all: q },
+      offset: page * pageSize,
+      limit: pageSize,
+      filters: createFilters(filters, cleanBranches)
+    },
+    { enabled: q.length >= minimalQueryLength }
+  );
 
   useEffect(() => {
     if (!data) {
@@ -163,6 +168,10 @@ const SearchResult: React.FC<SearchResultProps> = ({ q, pageSize }) => {
     if (filtersUrlParam !== "usePersistedFilters") clearFilter();
   }, [clearFilter]);
 
+  if (!q || q.length < minimalQueryLength) {
+    return <SearchResultInvalidSearch />;
+  }
+
   if (isLoading) {
     return <SearchResultSkeleton q={q} />;
   }
@@ -171,6 +180,10 @@ const SearchResult: React.FC<SearchResultProps> = ({ q, pageSize }) => {
     return <SearchResultZeroHits />;
   }
 
+  if (q === "") {
+    return <SearchResultZeroHits />;
+  }
+
   return (
     <div className="card-list-page">
       <SearchResultHeader hitcount={hitcount} q={q} />

src/core/utils/helpers/general.ts

@@ -167,9 +167,10 @@ export const convertPostIdsToFaustIds = (postIds: Pid[]) => {
 export const getParams = (props: Record<string, string | undefined>) =>
   Object.entries(props).reduce<Record<string, string>>(
     (acc, [property, value]) => {
+      const paramValue = value || getUrlQueryParam(property);
       return {
         ...acc,
-        [property]: String(value || getUrlQueryParam(property))
+        [property]: paramValue ? String(paramValue) : ""
       };
     },
     {}