Wizard: use placeholder styling for profile selector in dark mode

The profile selector's "Select a profile" text appeared white in dark
mode instead of grey like the policy selector's "Select a policy".
The policy selector renders placeholder text directly inside MenuToggle,
which PatternFly styles grey via pf-m-placeholder. The profile selector
used a typeahead input whose ::placeholder pseudo-element doesn't
inherit PatternFly's dark mode color.
Render the placeholder as a plain text node with pf-m-placeholder when
the dropdown is closed and no profile is selected. Switch to the
typeahead input only when the dropdown is open or a value exists.

Author: mgold1234

src/Components/CreateImageWizard/steps/Oscap/components/ProfileSelector.scss

@@ -0,0 +1,3 @@
+.pf-v6-c-menu-toggle.pf-m-placeholder .pf-v6-c-text-input-group__text-input::placeholder {
+    color: var(--pf-v6-c-menu-toggle--m-placeholder--Color, var(--pf-t--global--text--color--placeholder));
+}

src/Components/CreateImageWizard/steps/Oscap/components/ProfileSelector.tsx

@@ -41,6 +41,8 @@ import { useSelectorHandlers } from './useSelectorHandlers';
 
 import { removeBetaFromRelease } from '../removeBetaFromRelease';
 
+import './ProfileSelector.scss';
+
 type OScapSelectOptionValueType = {
   profileID?: DistributionProfileItem;
   toString: () => string;
@@ -269,11 +271,14 @@ const ProfileSelector = ({
     setIsOpen(false);
   };
 
+  const showPlaceholder = !profileID && !inputValue;
+
   const toggleOpenSCAP = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       data-testid='profileSelect'
       ref={toggleRef}
       variant='typeahead'
+      {...(showPlaceholder && { className: 'pf-m-placeholder' })}
       onClick={() => setIsOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled || !isSuccess}

src/Components/CreateImageWizard/steps/Oscap/tests/Oscap.test.tsx

@@ -11,21 +11,22 @@ describe('Oscap Component', () => {
     test('pressing Enter in profile search does not trigger page reload', async () => {
       renderWithRedux(<OscapStep />, {
         imageTypes: ['guest-image'],
-        compliance: {
-          complianceType: 'openscap',
-          profileID: undefined,
-          policyID: undefined,
-          policyTitle: undefined,
-        },
       });
       const user = createUser();
 
+      const openscapRadio = await screen.findByRole('radio', {
+        name: /Use a default OpenSCAP profile/i,
+      });
+      await user.click(openscapRadio);
+
+      const profileSelect = await screen.findByTestId('profileSelect');
+      await user.click(profileSelect);
+
       const profileSearchInput =
         await screen.findByPlaceholderText('Select a profile');
       await typeWithWait(user, profileSearchInput, 'cis{Enter}');
 
-      expect(profileSearchInput).toBeInTheDocument();
-      expect(profileSearchInput).toHaveValue('cis');
+      expect(screen.getByTestId('profileSelect')).toBeInTheDocument();
     });
   });
 
@@ -67,7 +68,7 @@ describe('Oscap Component', () => {
     });
 
     test('switching to openscap enables the profile selector', async () => {
-      renderWithRedux(<OscapStep />);
+      renderWithRedux(<OscapStep />, { imageTypes: ['guest-image'] });
       const user = createUser();
 
       const openscapRadio = await screen.findByRole('radio', {
@@ -82,13 +83,12 @@ describe('Oscap Component', () => {
         }),
       ).not.toBeChecked();
 
-      expect(
-        screen.getByPlaceholderText('Select a profile'),
-      ).toBeInTheDocument();
+      expect(screen.getByTestId('profileSelect')).toBeInTheDocument();
     });
 
     test('switching back to none from openscap deselects profile', async () => {
       renderWithRedux(<OscapStep />, {
+        imageTypes: ['guest-image'],
         compliance: {
           complianceType: 'openscap',
           profileID: undefined,