From 160381908a2904a1ee4ea03f8ed18ebb59f0b8a6 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Mon, 27 May 2024 16:34:18 +0200
Subject: [PATCH] V2Wizard: Add "clear" to package search

This adds a "clear" button to the package search input. The button appears only when there is already a searchTerm in the input.
---
 .../steps/Packages/Packages.tsx                  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx b/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
index e1e8f760..c7983a9a 100644
--- a/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
+++ b/src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx
@@ -34,6 +34,7 @@ import {
   HelpIcon,
   OptimizeIcon,
   SearchIcon,
+  TimesIcon,
 } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useDispatch } from 'react-redux';
@@ -613,6 +614,10 @@ const Packages = () => {
     setSearchTerm(selection);
   };
 
+  const handleClear = async () => {
+    setSearchTerm('');
+  };
+
   const handleSelect = (
     pkg: IBPackageWithRepositoryInfo,
     _: number,
@@ -886,6 +891,17 @@ const Packages = () => {
                     onChange={handleSearch}
                   />
                 </InputGroupItem>
+                {searchTerm && (
+                  <InputGroupItem>
+                    <Button
+                      variant="control"
+                      aria-label="clear-package-search"
+                      onClick={handleClear}
+                      icon={<TimesIcon />}
+                      ouiaId="clear-package-search-button"
+                    />
+                  </InputGroupItem>
+                )}
               </InputGroup>
             </ToolbarItem>
             <ToolbarItem>