Improve search UX

Signed-off-by: Damian Stasik <920747+damianstasik@users.noreply.github.com>
opentofu · Sep 4, 2024 · 17d513e · 17d513e
1 parent 13cc298
commit 17d513e
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/frontend/src/components/Search/index.tsx b/frontend/src/components/Search/index.tsx
@@ -17,6 +17,7 @@ import { SearchProviderResult } from "./ProviderResult";
 import { SearchOtherResult } from "./OtherResult";
 import { definitions } from "@/api";
 import clsx from "clsx";
+import { Paragraph } from "../Paragraph";
 
 function getSearchResultType(value: string) {
   switch (value) {
@@ -118,7 +119,7 @@ export function Search({
 }: SearchProps) {
   const [query, setQuery] = useState("");
   const deferredQuery = useDeferredValue(query);
-  const { data, isLoading } = useQuery(getSearchQuery(deferredQuery));
+  const { data, isFetching } = useQuery(getSearchQuery(deferredQuery));
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const navigate = useNavigate();
@@ -184,7 +185,6 @@ export function Search({
 
   return (
     <Combobox
-      onClose={() => setQuery("")}
       onChange={(v: SearchResult) => {
         if (!v) {
           return;
@@ -207,9 +207,7 @@ export function Search({
         />
         <ComboboxInput
           ref={inputRef}
-          displayValue={(result: SearchResult) =>
-            (result || {}).displayTitle || ""
-          }
+          value={query}
           onChange={(event) => onChange(event.target.value)}
           placeholder={placeholder}
           className={clsx(
@@ -218,7 +216,7 @@ export function Search({
           )}
         />
 
-        {isLoading && (
+        {isFetching && (
           <Icon
             path={spinner}
             className={clsx(
@@ -232,7 +230,7 @@ export function Search({
 
         <ComboboxOptions
           anchor="bottom start"
-          className="z-10 max-h-96 w-[var(--input-width)] divide-y divide-gray-300 bg-gray-200 [--anchor-max-height:theme(height.96)] [--anchor-padding:theme(padding.4)] empty:hidden dark:divide-gray-900 dark:bg-gray-800"
+          className="z-10 max-h-96 w-[var(--input-width)] divide-y divide-gray-300 bg-gray-200 [--anchor-max-height:theme(height.96)] [--anchor-padding:theme(padding.4)] dark:divide-gray-900 dark:bg-gray-800"
         >
           {filtered.map((item) => (
             <div key={item.type}>
@@ -260,6 +258,11 @@ export function Search({
               ))}
             </div>
           ))}
+          {filtered.length === 0 && !isFetching && query && (
+            <Paragraph className="px-4 py-2 text-sm">
+              No results found
+            </Paragraph>
+          )}
         </ComboboxOptions>
       </div>
     </Combobox>