From c7dd274298ce4b36a7c3eb3f6dd12e8971a68a7a Mon Sep 17 00:00:00 2001
From: Simon Steinbeiss <simon.steinbeiss@redhat.com>
Date: Wed, 23 Apr 2025 15:47:15 +0200
Subject: [PATCH] Wizard: Use SearchInput component for packages

As a small simplification and also to make the UX more consistent, let's
use a SearchInput widget over the custom InputGroup structure.
The only aspect lost in the process is the `validation` property that
doesn't exist in the SearchInput widget. It however only affects the CSS
styling of the searchbox and renders the 'error' state when there's only
a single character in the box. This may not even be desirable, given
that it's not really an error and that we show a note right below the
input box about this anyway.

This means the search boxes will also be consistent between the
repository and package search pages.
Fixes #3133
---
 .../steps/Packages/Packages.tsx               | 49 +++++--------------
 1 file changed, 11 insertions(+), 38 deletions(-)

diff --git a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
index c98fed2c..9b83ade0 100644
--- a/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
+++ b/src/Components/CreateImageWizard/steps/Packages/Packages.tsx
@@ -15,19 +15,16 @@ import {
   EmptyStateIcon,
   EmptyStateVariant,
   Icon,
-  InputGroup,
-  InputGroupItem,
-  InputGroupText,
   Pagination,
   PaginationVariant,
   Popover,
+  SearchInput,
   Spinner,
   Stack,
   Tab,
   Tabs,
   TabTitleText,
   Text,
-  TextInput,
   ToggleGroup,
   ToggleGroupItem,
   Toolbar,
@@ -40,7 +37,6 @@ import {
   HelpIcon,
   OptimizeIcon,
   SearchIcon,
-  TimesIcon,
 } from '@patternfly/react-icons';
 import {
   ExpandableRowContent,
@@ -1248,39 +1244,16 @@ const Packages = () => {
         <Stack>
           <ToolbarContent>
             <ToolbarItem variant="search-filter">
-              <InputGroup>
-                <InputGroupItem isFill>
-                  <InputGroupText id="search-icon">
-                    <SearchIcon />
-                  </InputGroupText>
-                  <TextInput
-                    data-ouia-component-id="packages-search-input"
-                    type="text"
-                    validated={
-                      debouncedSearchTermLengthOf1 &&
-                      !debouncedSearchTermIsGroup
-                        ? 'error'
-                        : 'default'
-                    }
-                    placeholder="Type to search"
-                    aria-label="Search packages"
-                    data-testid="packages-search-input"
-                    value={searchTerm}
-                    onChange={handleSearch}
-                  />
-                </InputGroupItem>
-                {searchTerm && (
-                  <InputGroupItem>
-                    <Button
-                      variant="control"
-                      aria-label="clear-package-search"
-                      onClick={handleClear}
-                      icon={<TimesIcon />}
-                      ouiaId="clear-package-search-button"
-                    />
-                  </InputGroupItem>
-                )}
-              </InputGroup>
+              <SearchInput
+                data-ouia-component-id="packages-search-input"
+                type="text"
+                placeholder="Type to search"
+                aria-label="Search packages"
+                data-testid="packages-search-input"
+                value={searchTerm}
+                onChange={handleSearch}
+                onClear={() => handleClear()}
+              />
             </ToolbarItem>
             <ToolbarItem>
               <ToggleGroup>