From 4002d67b42dc58c67b304a1b9008388ef022c637 Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Thu, 16 Jan 2025 12:04:29 +0100
Subject: [PATCH] fix(alerts-table): add clear button to input search

---
 src/components/Dashboard.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index b74c878b..7000c799 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -9,9 +9,11 @@ import {
   SearchField,
   Table,
   TableBody,
+  FieldGroup,
   TableHeader,
+  SearchFieldClearButton,
+  Badge,
 } from "@stacklok/ui-kit";
-import { Badge } from "@stacklok/ui-kit";
 import { useCallback, useEffect } from "react";
 import { BarChart } from "@/viz/BarChart";
 import { LineChart } from "@/viz/LineChart";
@@ -170,7 +172,15 @@ export function Dashboard() {
             value={search}
             onChange={(value) => handleSearch(value.toLowerCase().trim())}
           >
-            <Input type="search" placeholder="Search..." icon={<Search />} />
+            <FieldGroup>
+              <Input
+                type="search"
+                placeholder="Search..."
+                isBorderless
+                icon={<Search />}
+              />
+              <SearchFieldClearButton />
+            </FieldGroup>
           </SearchField>
         </div>
       </div>