Wizard: Combine alert and empty state in Additional Packages step

This commit removes redundant info alert and moves search instructions into
the empty state message. This eliminates duplicate content and
provides a cleaner UI with contextual guidance.

Author: mgold1234

src/Components/CreateImageWizard/steps/Packages/Packages.tsx

@@ -468,21 +468,30 @@ const Packages = () => {
         <Tr>
           <Td colSpan={5}>
             <Bullseye>
-              <EmptyState icon={SearchIcon} variant={EmptyStateVariant.sm}>
-                {toggleSelected === 'toggle-available' ? (
+              {toggleSelected === 'toggle-available' ? (
+                <EmptyState
+                  headingLevel='h4'
+                  titleText='Search packages'
+                  icon={SearchIcon}
+                  variant={EmptyStateVariant.sm}
+                >
                   <EmptyStateBody>
-                    Search above to add additional
-                    <br />
-                    packages to your image.
+                    Search for exact matches by specifying the package name to
+                    add additional packages to your image
                   </EmptyStateBody>
-                ) : (
+                </EmptyState>
+              ) : (
+                <EmptyState
+                  headingLevel='h4'
+                  titleText='There are no selected packages'
+                  icon={SearchIcon}
+                  variant={EmptyStateVariant.sm}
+                >
                   <EmptyStateBody>
-                    No packages selected.
-                    <br />
-                    Search above to see available packages.
+                    Search above to see available packages
                   </EmptyStateBody>
-                )}
-              </EmptyState>
+                </EmptyState>
+              )}
             </Bullseye>
           </Td>
         </Tr>

src/Components/CreateImageWizard/steps/Packages/index.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 
-import { Alert, Content, Form, Title } from '@patternfly/react-core';
+import { Content, Form, Title } from '@patternfly/react-core';
 
 import PackageRecommendations from './PackageRecommendations';
 import Packages from './Packages';
 
-import { useIsOnPremise } from '../../../../Hooks';
 import { useAppSelector } from '../../../../store/hooks';
 import { selectDistribution } from '../../../../store/wizardSlice';
 import isRhel from '../../../../Utilities/isRhel';
 
 const PackagesStep = () => {
   const distribution = useAppSelector(selectDistribution);
-  const isOnPremise = useIsOnPremise();
   return (
     <Form>
       <Title headingLevel='h1' size='xl'>
@@ -21,19 +19,6 @@ const PackagesStep = () => {
       <Content>
         Blueprints created with Images include all required packages.
       </Content>
-      {!isOnPremise && (
-        <Alert variant='info' isInline title='Search for package groups'>
-          Search for package groups by starting your search with the
-          &apos;@&apos; character. A single &apos;@&apos; as search input lists
-          all available package groups.
-        </Alert>
-      )}
-      {isOnPremise && (
-        <Alert variant='info' isInline title='Searching for packages'>
-          Search for exact matches by specifying the whole package name, or glob
-          using asterisk wildcards (*) before or after the package name.
-        </Alert>
-      )}
       <Packages />
       {isRhel(distribution) && <PackageRecommendations />}
     </Form>

src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx

@@ -225,14 +225,27 @@ describe('Step Packages', () => {
     });
   });
 
-  test('should display default state', async () => {
+  test('should display default state in Available mode', async () => {
     await renderCreateMode();
     await goToPackagesStep();
+    await screen.findByRole('heading', {
+      name: /Search packages/i,
+    });
     await screen.findByText(
-      'Search above to add additionalpackages to your image.',
+      /Search for exact matches by specifying the package name to add additional packages to your image/i,
     );
   });
 
+  test('should display correct empty state in Selected mode', async () => {
+    await renderCreateMode();
+    await goToPackagesStep();
+    await toggleSelected();
+    await screen.findByRole('heading', {
+      name: /There are no selected packages/i,
+    });
+    await screen.findByText(/Search above to see available packages/i);
+  });
+
   test('search results should be sorted with most relevant results first', async () => {
     await renderCreateMode();
     await goToPackagesStep();