ImageOutput: migrate BlueprintMode, ArchSelect, and Security review to usePlatformFeatures

Co-authored-by: Claude Sonnet 4 <noreply@anthropic.com>

Author: kingsleyzissou

src/Components/CreateImageWizard/steps/ImageOutput/components/ArchSelect.tsx

@@ -10,9 +10,9 @@ import {
 } from '@patternfly/react-core';
 
 import { ARCHES } from '@/constants';
+import { usePlatformFeatures } from '@/Hooks/usePlatformFeatures';
 import { ImageRequest } from '@/store/api/backend';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { selectIsOnPremise } from '@/store/slices/env';
 import { changeArchitecture, selectArchitecture } from '@/store/slices/wizard';
 
 type ArchSelectProps = {
@@ -22,7 +22,7 @@ type ArchSelectProps = {
 const ArchSelect = ({ isDisabled = false }: ArchSelectProps) => {
   const arch = useAppSelector(selectArchitecture);
   const dispatch = useAppDispatch();
-  const isOnPremise = useAppSelector(selectIsOnPremise);
+  const { canCrossArchBuild } = usePlatformFeatures();
   const [isOpen, setIsOpen] = useState(false);
 
   const setArch = (_event?: React.MouseEvent, selection?: string | number) => {
@@ -34,9 +34,7 @@ const ArchSelect = ({ isDisabled = false }: ArchSelectProps) => {
   const setSelectOptions = () => {
     const options: ReactElement[] = [];
     const arches = ARCHES.filter((a) => {
-      // we don't want to support cross-arch
-      // builds for on-prem for now
-      if (isOnPremise) {
+      if (!canCrossArchBuild) {
         return a === arch;
       }
       return true;

src/Components/CreateImageWizard/steps/ImageOutput/components/BlueprintMode.tsx

@@ -9,9 +9,9 @@ import {
 import { BuildIcon, RepositoryIcon } from '@patternfly/react-icons';
 
 import { RHEL_10, RHEL_10_IMAGE_MODE_IMAGE, X86_64 } from '@/constants';
+import { usePlatformFeatures } from '@/Hooks/usePlatformFeatures';
 import { Distributions } from '@/store/api/backend';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { selectIsOnPremise } from '@/store/slices/env';
 import {
   changeArchitecture,
   changeBlueprintMode,
@@ -26,7 +26,11 @@ import { getHostDistro } from '@/Utilities/getHostInfo';
 
 const BlueprintMode = () => {
   const dispatch = useAppDispatch();
-  const isOnPremise = useAppSelector(selectIsOnPremise);
+  const {
+    canCrossArchBuild,
+    restoresPreviousSelections,
+    setsDefaultImageSource,
+  } = usePlatformFeatures();
   const isImageMode = useAppSelector(selectIsImageMode);
   const distribution = useAppSelector(selectDistribution);
   const architecture = useAppSelector(selectArchitecture);
@@ -35,7 +39,7 @@ const BlueprintMode = () => {
   const previousArch = useRef(architecture);
 
   useEffect(() => {
-    if (!isOnPremise) return;
+    if (canCrossArchBuild) return;
     const fetchDefaultDistro = async () => {
       try {
         const distro = await getHostDistro();
@@ -46,7 +50,34 @@ const BlueprintMode = () => {
     };
 
     fetchDefaultDistro();
-  }, [isOnPremise]);
+  }, [canCrossArchBuild]);
+
+  const handlePackageMode = () => {
+    dispatch(changeBlueprintMode('package'));
+    dispatch(
+      changeDistribution(
+        restoresPreviousSelections ? previousDistro.current : defaultDistro,
+      ),
+    );
+    // Image source is only relevant in image mode
+    dispatch(changeImageSource(undefined));
+    if (restoresPreviousSelections) {
+      dispatch(changeArchitecture(previousArch.current));
+    }
+  };
+
+  const handleImageMode = () => {
+    if (restoresPreviousSelections) {
+      previousDistro.current = distribution;
+      previousArch.current = architecture;
+    }
+    dispatch(changeBlueprintMode('image'));
+    dispatch(changeImageTypes([]));
+    if (setsDefaultImageSource) {
+      dispatch(changeArchitecture(X86_64));
+      dispatch(changeImageSource(RHEL_10_IMAGE_MODE_IMAGE));
+    }
+  };
 
   return (
     <FormGroup label='Image type' isRequired>
@@ -56,38 +87,15 @@ const BlueprintMode = () => {
           text='Package mode'
           buttonId='blueprint-mode-package'
           isSelected={!isImageMode}
-          onChange={() => {
-            dispatch(changeBlueprintMode('package'));
-            dispatch(
-              changeDistribution(
-                isOnPremise ? defaultDistro : previousDistro.current,
-              ),
-            );
-            // Image source is only relevant in image mode
-            dispatch(changeImageSource(undefined));
-            if (!isOnPremise) {
-              dispatch(changeArchitecture(previousArch.current));
-            }
-          }}
+          onChange={handlePackageMode}
           aria-describedby='blueprint-mode-description'
         />
         <ToggleGroupItem
           icon={<BuildIcon />}
           text='Image mode'
           buttonId='blueprint-mode-image'
           isSelected={isImageMode}
-          onChange={() => {
-            if (!isOnPremise) {
-              previousDistro.current = distribution;
-              previousArch.current = architecture;
-            }
-            dispatch(changeBlueprintMode('image'));
-            dispatch(changeImageTypes([]));
-            if (!isOnPremise) {
-              dispatch(changeArchitecture(X86_64));
-              dispatch(changeImageSource(RHEL_10_IMAGE_MODE_IMAGE));
-            }
-          }}
+          onChange={handleImageMode}
           aria-describedby='blueprint-mode-description'
         />
       </ToggleGroup>

src/Components/CreateImageWizard/steps/ImageOutput/tests/ArchSelect.test.tsx

@@ -4,7 +4,12 @@ import { AARCH64, X86_64 } from '@/constants';
 import { selectArchitecture } from '@/store/slices/wizard';
 import { clickWithWait, createUser } from '@/test/testUtils';
 
-import { openArchSelect, renderArchSelect, selectArch } from './helpers';
+import {
+  openArchSelect,
+  renderArchSelect,
+  renderArchSelectOnPrem,
+  selectArch,
+} from './helpers';
 
 describe('ArchSelect', () => {
   test('renders with default x86_64 architecture', () => {
@@ -76,4 +81,30 @@ describe('ArchSelect', () => {
       expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
   });
+
+  describe('on-prem (no cross-arch build)', () => {
+    test('only shows the current architecture option', async () => {
+      const user = createUser();
+      renderArchSelectOnPrem();
+
+      await openArchSelect(user);
+
+      expect(screen.getByRole('option', { name: X86_64 })).toBeInTheDocument();
+      expect(
+        screen.queryByRole('option', { name: AARCH64 }),
+      ).not.toBeInTheDocument();
+    });
+
+    test('only shows aarch64 when that is the current arch', async () => {
+      const user = createUser();
+      renderArchSelectOnPrem({ architecture: AARCH64 });
+
+      await openArchSelect(user);
+
+      expect(screen.getByRole('option', { name: AARCH64 })).toBeInTheDocument();
+      expect(
+        screen.queryByRole('option', { name: X86_64 }),
+      ).not.toBeInTheDocument();
+    });
+  });
 });

src/Components/CreateImageWizard/steps/ImageOutput/tests/BlueprintMode.test.tsx

@@ -1,8 +1,13 @@
 import { screen } from '@testing-library/react';
 
+import { AARCH64, RHEL_10, RHEL_9, X86_64 } from '@/constants';
 import { createUser } from '@/test/testUtils';
 
-import { renderBlueprintMode, toggleBlueprintMode } from './helpers';
+import {
+  renderBlueprintMode,
+  renderBlueprintModeHosted,
+  toggleBlueprintMode,
+} from './helpers';
 
 describe('BlueprintMode', () => {
   describe('Rendering', () => {
@@ -131,4 +136,81 @@ describe('BlueprintMode', () => {
       expect(imageModeButton).toHaveAttribute('aria-pressed', 'true');
     });
   });
+
+  describe('Hosted platform behavior', () => {
+    test('restores previous distribution when switching back to package mode', async () => {
+      const { store } = renderBlueprintModeHosted({ distribution: RHEL_9 });
+      const user = createUser();
+
+      // Switch to image mode (saves previous distro)
+      await toggleBlueprintMode(user, 'image');
+      // Switch back to package mode (restores previous distro)
+      await toggleBlueprintMode(user, 'package');
+
+      expect(store.getState().wizard.distribution).toBe(RHEL_9);
+    });
+
+    test('restores previous architecture when switching back to package mode', async () => {
+      const { store } = renderBlueprintModeHosted({ architecture: AARCH64 });
+      const user = createUser();
+
+      await toggleBlueprintMode(user, 'image');
+      // Image mode forces x86_64
+      expect(store.getState().wizard.architecture).toBe(X86_64);
+
+      await toggleBlueprintMode(user, 'package');
+      // Package mode restores previous arch
+      expect(store.getState().wizard.architecture).toBe(AARCH64);
+    });
+
+    test('sets default image source when switching to image mode', async () => {
+      const { store } = renderBlueprintModeHosted();
+      const user = createUser();
+
+      await toggleBlueprintMode(user, 'image');
+
+      expect(store.getState().wizard.imageSource).toBeDefined();
+    });
+
+    test('forces x86_64 architecture when switching to image mode', async () => {
+      const { store } = renderBlueprintModeHosted({ architecture: AARCH64 });
+      const user = createUser();
+
+      await toggleBlueprintMode(user, 'image');
+
+      expect(store.getState().wizard.architecture).toBe(X86_64);
+    });
+  });
+
+  describe('On-prem platform behavior', () => {
+    test('does not save or restore previous selections', async () => {
+      const { store } = renderBlueprintMode({ distribution: RHEL_9 });
+      const user = createUser();
+
+      await toggleBlueprintMode(user, 'image');
+      await toggleBlueprintMode(user, 'package');
+
+      // On-prem uses the default distro (RHEL_10 from state), not previous
+      expect(store.getState().wizard.distribution).toBe(RHEL_10);
+    });
+
+    test('does not set default image source when switching to image mode', async () => {
+      const { store } = renderBlueprintMode();
+      const user = createUser();
+
+      await toggleBlueprintMode(user, 'image');
+
+      expect(store.getState().wizard.imageSource).toBeUndefined();
+    });
+
+    test('does not change architecture when switching to image mode', async () => {
+      const { store } = renderBlueprintMode({ architecture: AARCH64 });
+      const user = createUser();
+
+      await toggleBlueprintMode(user, 'image');
+
+      // On-prem doesn't force x86_64
+      expect(store.getState().wizard.architecture).toBe(AARCH64);
+    });
+  });
 });

src/Components/CreateImageWizard/steps/ImageOutput/tests/helpers.tsx

@@ -41,6 +41,23 @@ export const renderArchSelect = (
   });
 };
 
+export const renderArchSelectOnPrem = (
+  wizardStateOverrides: WizardStateOverrides = {},
+) => {
+  return renderWithRedux(
+    <ArchSelect />,
+    {
+      ...defaultStateOverrides,
+      ...wizardStateOverrides,
+    },
+    {
+      preloadedState: {
+        env: { isOnPremise: true },
+      },
+    },
+  );
+};
+
 // Interaction helpers
 export const openArchSelect = async (user: UserEventInstance) => {
   const toggle = await screen.findByTestId('arch_select');
@@ -120,6 +137,16 @@ export const renderBlueprintMode = (
   );
 };
 
+// BlueprintMode render function (uses hosted store)
+export const renderBlueprintModeHosted = (
+  wizardStateOverrides: WizardStateOverrides = {},
+) => {
+  return renderWithRedux(<BlueprintMode />, {
+    ...defaultStateOverrides,
+    ...wizardStateOverrides,
+  });
+};
+
 export const toggleBlueprintMode = async (
   user: UserEventInstance,
   mode: 'package' | 'image',

src/Components/CreateImageWizard/steps/Review/components/Security/index.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import { Card, CardBody } from '@patternfly/react-core';
 
+import { usePlatformFeatures } from '@/Hooks/usePlatformFeatures';
 import { useAppSelector } from '@/store/hooks';
-import { selectFips, selectIsOnPremise } from '@/store/slices';
+import { selectFips } from '@/store/slices';
 
 import { FIPSDetails, SecurityDetails } from './components';
 import { isSecurityConfigured, SecuritySummary } from './types';
@@ -16,7 +17,7 @@ type SecurityCardProps = ReviewCardProps & {
 };
 
 const Security = ({ restrictions, security }: SecurityCardProps) => {
-  const isOnPremise = useAppSelector(selectIsOnPremise);
+  const { securitySectionLabel } = usePlatformFeatures();
   const { enabled: fipsEnabled } = useAppSelector(selectFips);
 
   if (restrictions.openscap.shouldHide && restrictions.fips.shouldHide) {
@@ -30,9 +31,7 @@ const Security = ({ restrictions, security }: SecurityCardProps) => {
   return (
     <Card>
       <ReviewCardHeader
-        title={
-          isOnPremise ? 'Security configuration' : 'Compliance configuration'
-        }
+        title={securitySectionLabel}
         stepId='base-settings-step'
         sectionId='security-section'
       />

src/Components/CreateImageWizard/steps/Review/components/Security/tests/Security.test.tsx

@@ -60,6 +60,44 @@ describe('Security', () => {
     });
   });
 
+  describe('Platform labels', () => {
+    test('shows "Compliance configuration" on hosted', () => {
+      renderWithRedux(<Security restrictions={createDefaultRestrictions()} />, {
+        imageTypes: ['guest-image'],
+        fips: {
+          enabled: true,
+        },
+      });
+
+      expect(screen.getByText('Compliance configuration')).toBeInTheDocument();
+      expect(
+        screen.queryByText('Security configuration'),
+      ).not.toBeInTheDocument();
+    });
+
+    test('shows "Security configuration" on-prem', () => {
+      renderWithRedux(
+        <Security restrictions={createDefaultRestrictions()} />,
+        {
+          imageTypes: ['guest-image'],
+          fips: {
+            enabled: true,
+          },
+        },
+        {
+          preloadedState: {
+            env: { isOnPremise: true },
+          },
+        },
+      );
+
+      expect(screen.getByText('Security configuration')).toBeInTheDocument();
+      expect(
+        screen.queryByText('Compliance configuration'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   describe('OpenSCAP', () => {
     test('displays OpenSCAP profile when compliance type is openscap', () => {
       const mockSummaryWithCIS = {