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

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>
+              <SearchInput
-                <InputGroupItem isFill>
+                data-ouia-component-id="packages-search-input"
-                  <InputGroupText id="search-icon">
+                type="text"
-                    <SearchIcon />
+                placeholder="Type to search"
-                  </InputGroupText>
+                aria-label="Search packages"
-                  <TextInput
+                data-testid="packages-search-input"
-                    data-ouia-component-id="packages-search-input"
+                value={searchTerm}
-                    type="text"
+                onChange={handleSearch}
-                    validated={
+                onClear={() => handleClear()}
-                      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>
             </ToolbarItem>
             <ToolbarItem>
               <ToggleGroup>