From 89946aed15fbc1aae273b63944651c90b18940b6 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Tue, 29 Oct 2024 01:31:19 +1100
Subject: [PATCH] [PUI] Search tweak (#8381)

* Cleanup buttons and add Tooltip

* Clearer separation

* Link cleanup
---
 .../src/components/nav/SearchDrawer.tsx       | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index 4f69d37553..15180edf50 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -14,7 +14,8 @@ import {
   Space,
   Stack,
   Text,
-  TextInput
+  TextInput,
+  Tooltip
 } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import {
@@ -69,8 +70,8 @@ function QueryResultGroup({
 
   return (
     <Paper
+      withBorder
       shadow="sm"
-      radius="xs"
       p="md"
       key={`paper-${query.model}`}
       aria-label={`search-group-${query.model}`}
@@ -100,10 +101,11 @@ function QueryResultGroup({
         <Stack aria-label={`search-group-results-${query.model}`}>
           {query.results.results.map((result: any) => (
             <Anchor
+              underline="never"
               onClick={(event: any) =>
                 onResultClick(query.model, result.pk, event)
               }
-              key={result.pk}
+              key={`result-${query.model}-${result.pk}`}
             >
               <RenderInstance instance={result} model={query.model} />
             </Anchor>
@@ -376,7 +378,6 @@ export function SearchDrawer({
           <TextInput
             aria-label="global-search-input"
             placeholder={t`Enter search text`}
-            radius="xs"
             value={value}
             onChange={(event) => setValue(event.currentTarget.value)}
             leftSection={<IconSearch size="0.8rem" />}
@@ -387,19 +388,22 @@ export function SearchDrawer({
             }
             styles={{ root: { width: '100%' } }}
           />
-          <ActionIcon
-            size="lg"
-            variant="outline"
-            radius="xs"
-            onClick={() => searchQuery.refetch()}
-          >
-            <IconRefresh />
-          </ActionIcon>
+          <Tooltip label={t`Refresh search results`} position="bottom-end">
+            <ActionIcon
+              size="lg"
+              variant="transparent"
+              onClick={() => searchQuery.refetch()}
+            >
+              <IconRefresh />
+            </ActionIcon>
+          </Tooltip>
           <Menu>
             <Menu.Target>
-              <ActionIcon size="lg" variant="outline" radius="xs">
-                <IconSettings />
-              </ActionIcon>
+              <Tooltip label={t`Search Options`} position="bottom-end">
+                <ActionIcon size="lg" variant="transparent">
+                  <IconSettings />
+                </ActionIcon>
+              </Tooltip>
             </Menu.Target>
             <Menu.Dropdown>
               <Menu.Label>{t`Search Options`}</Menu.Label>
@@ -410,7 +414,6 @@ export function SearchDrawer({
                   onChange={(event) =>
                     setSearchRegex(event.currentTarget.checked)
                   }
-                  radius="sm"
                 />
               </Menu.Item>
               <Menu.Item>
@@ -420,7 +423,6 @@ export function SearchDrawer({
                   onChange={(event) =>
                     setSearchWhole(event.currentTarget.checked)
                   }
-                  radius="sm"
                 />
               </Menu.Item>
             </Menu.Dropdown>