From ee2d77b7ccae5827bcc0553b75d41e473ab0649c Mon Sep 17 00:00:00 2001
From: Lucas Garfield <lucas@redhat.com>
Date: Mon, 10 Aug 2026 08:00:43 -0500
Subject: [PATCH 1/2] Wizard: replace local image builds with a coming soon
 note (HMS-11160)

Local (custom) image builds are not supported in this release. Rename
the "Custom images" source card to "Local images", drop its "No
login" label, and replace the local image dropdown with a small empty
state noting that support lands in Cockpit Image Builder 10.4,
alongside an image-builder CLI example for building local images in
the meantime. The empty state follows PatternFly's guidance for a
wizard pane with nothing to show; the gray rocket icon is their icon
mapping for a feature that cannot be used yet.

This removes the official-vs-local dropdown logic: the podman
distributions query for local images, the registry-auth-based filtering
of known references, and the typeahead machinery in ImageSelect that
only the local dropdown used. The rewritten tests don't cover the
official image dropdown interactions: the dropdown is on its way out
as a selection mechanism, and the tests that replace it arrive with
that change.

Resolves #4709
---
 .../components/ImageSourceSelect/Hosted.tsx   |   2 +-
 .../ImageSourceSelect/ImageSourceError.tsx    |  10 +-
 .../OnPrem/CustomImageSource.tsx              | 101 -----
 .../ImageSourceSelect/OnPrem/ImageSelect.tsx  | 109 +-----
 .../OnPrem/LocalImageSource.tsx               |  38 ++
 .../ImageSourceSelect/OnPrem/index.tsx        |  18 +-
 .../tests/ImageSourceSelect.test.tsx          | 367 ++++--------------
 .../steps/ImageOutput/tests/helpers.tsx       |  36 +-
 .../steps/ImageOutput/tests/mocks/fixtures.ts |  31 --
 src/store/slices/wizard/output/parsers.ts     |   2 +-
 src/store/slices/wizard/output/types.ts       |   2 +-
 11 files changed, 150 insertions(+), 566 deletions(-)
 delete mode 100644 src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/CustomImageSource.tsx
 create mode 100644 src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/LocalImageSource.tsx

diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/Hosted.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/Hosted.tsx
index 3f640ffe68..e5bfd9f32c 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/Hosted.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/Hosted.tsx
@@ -125,7 +125,7 @@ const HostedImageSourceSelect = () => {
 
   return (
     <FormGroup label='Image source' isRequired>
-      {isError && <ImageSourceError isOnPremise={false} />}
+      {isError && <ImageSourceError />}
       <Select
         isOpen={isOpen}
         selected={imageSource}
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/ImageSourceError.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/ImageSourceError.tsx
index 158c5c1491..16bd2cc5f4 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/ImageSourceError.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/ImageSourceError.tsx
@@ -2,19 +2,13 @@ import React from 'react';
 
 import { Alert } from '@patternfly/react-core';
 
-type ImageSourceErrorProps = {
-  isOnPremise: boolean;
-};
-
-const ImageSourceError = ({ isOnPremise }: ImageSourceErrorProps) => (
+const ImageSourceError = () => (
   <Alert
     title='Error loading bootc images'
     variant='danger'
     className='pf-v6-u-mb-md'
   >
-    {isOnPremise
-      ? 'Unable to load available bootc images. Ensure podman is installed and accessible.'
-      : 'Unable to load available bootc images. Please try again later.'}
+    Unable to load available bootc images. Please try again later.
   </Alert>
 );
 
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/CustomImageSource.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/CustomImageSource.tsx
deleted file mode 100644
index dacb0e4059..0000000000
--- a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/CustomImageSource.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
-import { SyncAltIcon } from '@patternfly/react-icons';
-
-import {
-  type BootcDistributionItem,
-  useGetDistributionsQuery,
-  useGetRegistryAuthStatusQuery,
-} from '@/store/api/backend';
-import { Distributions } from '@/store/api/backend/hosted';
-import { isKnownImageRef } from '@/store/api/backend/onprem/constants';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import {
-  changeDistribution,
-  changeImageSource,
-  changeImageTypes,
-  selectArchitecture,
-  selectImageSource,
-  selectImageSourceType,
-  type SupportedImageTypes,
-} from '@/store/slices/wizard';
-
-import ImageSelect from './ImageSelect';
-
-import ImageSourceError from '../ImageSourceError';
-
-const CustomImageSource = () => {
-  const dispatch = useAppDispatch();
-  const arch = useAppSelector(selectArchitecture);
-  const selectedRef = useAppSelector(selectImageSource);
-  const imageSourceType = useAppSelector(selectImageSourceType);
-
-  const { data: authStatus } = useGetRegistryAuthStatusQuery();
-  const isAuthenticated = authStatus?.status === 'authenticated';
-
-  const {
-    data: distributions,
-    isLoading,
-    isError,
-    refetch,
-  } = useGetDistributionsQuery({
-    kind: 'bootc',
-    arch,
-  });
-
-  const images = useMemo(() => {
-    const imgs = (distributions ?? []) as BootcDistributionItem[];
-    if (!isAuthenticated) {
-      return imgs;
-    }
-
-    return imgs.filter((img) => !isKnownImageRef(img.reference));
-  }, [isAuthenticated, distributions]);
-
-  if (imageSourceType !== 'custom') {
-    return null;
-  }
-
-  return (
-    <>
-      {isError && <ImageSourceError isOnPremise />}
-      <Flex>
-        <FlexItem>
-          <ImageSelect
-            items={images}
-            selectedRef={selectedRef}
-            onSelect={(_event, selection) => {
-              const selected = images.find(
-                (img) => img.reference === selection,
-              );
-              if (selected) {
-                dispatch(changeImageSource(selected.reference));
-                dispatch(changeDistribution(selected.distro as Distributions));
-                dispatch(
-                  changeImageTypes([selected.type as SupportedImageTypes]),
-                );
-              }
-            }}
-            getLabel={(item) => item.reference}
-            placeholder='Select a custom image'
-            isLoading={isLoading}
-            isSearchable
-          />
-        </FlexItem>
-        <FlexItem>
-          <Button
-            variant='plain'
-            icon={<SyncAltIcon />}
-            onClick={refetch}
-            isDisabled={isLoading}
-            isInline
-            aria-label='Refresh image sources'
-          />
-        </FlexItem>
-      </Flex>
-    </>
-  );
-};
-
-export default CustomImageSource;
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/ImageSelect.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/ImageSelect.tsx
index de16481030..41d3eab5ed 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/ImageSelect.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/ImageSelect.tsx
@@ -7,9 +7,6 @@ import {
   Select,
   SelectList,
   SelectOption,
-  Spinner,
-  TextInputGroup,
-  TextInputGroupMain,
 } from '@patternfly/react-core';
 
 import { simpleTargetNames } from '@/constants';
@@ -24,9 +21,7 @@ type ImageSelectProps = {
   onSelect: (event?: React.MouseEvent, selection?: string | number) => void;
   getLabel: (item: BootcDistributionItem) => string;
   placeholder?: string;
-  isLoading?: boolean;
   isDisabled?: boolean;
-  isSearchable?: boolean;
   ariaDescribedBy?: string | undefined;
 };
 
@@ -41,103 +36,33 @@ const ImageSelect = ({
   onSelect,
   getLabel,
   placeholder = 'Select an image',
-  isLoading = false,
   isDisabled = false,
-  isSearchable = false,
   ariaDescribedBy,
 }: ImageSelectProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  // null = not filtering (show selected label), string = user is typing
-  const [filterValue, setFilterValue] = useState<string | null>(null);
 
   const selectedItem = items.find((item) => item.reference === selectedRef);
 
-  const filteredItems =
-    isSearchable && filterValue
-      ? items.filter((item) =>
-          getLabel(item).toLowerCase().includes(filterValue.toLowerCase()),
-        )
-      : items;
-
   const handleSelect = (
     event?: React.MouseEvent,
     selection?: string | number,
   ) => {
     onSelect(event, selection);
-    setFilterValue(null);
     setIsOpen(false);
   };
 
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open);
-    if (!open) {
-      setFilterValue(null);
-    }
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => {
-    if (isLoading) {
-      return (
-        <MenuToggle
-          ref={toggleRef}
-          isDisabled
-          style={toggleStyle}
-          aria-describedby={ariaDescribedBy}
-        >
-          <Spinner size='sm' aria-hidden='true' /> Loading images...
-        </MenuToggle>
-      );
-    }
-
-    if (isSearchable) {
-      const inputValue =
-        filterValue !== null
-          ? filterValue
-          : selectedItem
-            ? getLabel(selectedItem)
-            : '';
-
-      return (
-        <MenuToggle
-          ref={toggleRef}
-          variant='typeahead'
-          onClick={() => setIsOpen((prev) => !prev)}
-          isExpanded={isOpen}
-          isDisabled={isDisabled}
-          style={toggleStyle}
-          aria-describedby={ariaDescribedBy}
-        >
-          <TextInputGroup isPlain>
-            <TextInputGroupMain
-              value={inputValue}
-              onClick={() => setIsOpen((prev) => !prev)}
-              onChange={(_event, value) => {
-                setFilterValue(value);
-                if (!isOpen) {
-                  setIsOpen(true);
-                }
-              }}
-              autoComplete='off'
-              placeholder={placeholder}
-            />
-          </TextInputGroup>
-        </MenuToggle>
-      );
-    }
-
-    return (
-      <MenuToggle
-        ref={toggleRef}
-        onClick={() => setIsOpen((prev) => !prev)}
-        isExpanded={isOpen}
-        isDisabled={isDisabled}
-        style={toggleStyle}
-        aria-describedby={ariaDescribedBy}
-      >
-        {selectedItem ? getLabel(selectedItem) : placeholder}
-      </MenuToggle>
-    );
-  };
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen((prev) => !prev)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      style={toggleStyle}
+      aria-describedby={ariaDescribedBy}
+    >
+      {selectedItem ? getLabel(selectedItem) : placeholder}
+    </MenuToggle>
+  );
 
   return (
     <div className='pf-v6-u-mt-md'>
@@ -145,17 +70,15 @@ const ImageSelect = ({
         isOpen={isOpen}
         selected={selectedRef}
         onSelect={handleSelect}
-        onOpenChange={handleOpenChange}
+        onOpenChange={(open) => setIsOpen(open)}
         toggle={toggle}
         shouldFocusToggleOnSelect
       >
         <SelectList>
-          {filteredItems.length === 0 && (
-            <SelectOption isDisabled>
-              {filterValue ? 'No results found' : 'No images available'}
-            </SelectOption>
+          {items.length === 0 && (
+            <SelectOption isDisabled>No images available</SelectOption>
           )}
-          {filteredItems.map((item) => (
+          {items.map((item) => (
             <SelectOption
               key={item.reference}
               value={item.reference}
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/LocalImageSource.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/LocalImageSource.tsx
new file mode 100644
index 0000000000..9fb4850c75
--- /dev/null
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/LocalImageSource.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {
+  ClipboardCopy,
+  EmptyState,
+  EmptyStateBody,
+} from '@patternfly/react-core';
+import { RocketIcon } from '@patternfly/react-icons';
+
+const LocalImageSource = () => {
+  return (
+    <EmptyState
+      variant='sm'
+      icon={RocketIcon}
+      titleText='Local image support is coming soon'
+      headingLevel='h4'
+      className='pf-v6-u-mt-md'
+    >
+      <EmptyStateBody>
+        Until support arrives in Cockpit Image Builder 10.4, build local
+        container images with the image-builder command-line tool:
+        <ClipboardCopy
+          isReadOnly
+          isCode
+          hoverTip='Copy'
+          clickTip='Copied'
+          className='pf-v6-u-mt-md'
+        >
+          {
+            'image-builder build qcow2 --bootc-ref localhost/my-derived-image:latest'
+          }
+        </ClipboardCopy>
+      </EmptyStateBody>
+    </EmptyState>
+  );
+};
+
+export default LocalImageSource;
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/index.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/index.tsx
index 409986530a..81c51da2c7 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/index.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/components/ImageSourceSelect/OnPrem/index.tsx
@@ -17,7 +17,7 @@ import {
   selectImageSourceType,
 } from '@/store/slices/wizard';
 
-import CustomImageSource from './CustomImageSource';
+import LocalImageSource from './LocalImageSource';
 import OfficialImageSource from './OfficialImageSource';
 
 const OnPremImageSourceSelect = () => {
@@ -53,33 +53,31 @@ const OnPremImageSourceSelect = () => {
           <CardBody>Remote images from {IMAGE_REGISTRY_HOST}</CardBody>
         </Card>
         <Card
-          id='custom-card'
+          id='local-card'
           isSelectable
-          isSelected={imageSourceType === 'custom'}
+          isSelected={imageSourceType === 'local'}
         >
           <CardHeader
             selectableActions={{
-              selectableActionId: 'custom-image-source-input',
-              selectableActionAriaLabelledby: 'custom-card-title',
+              selectableActionId: 'local-image-source-input',
+              selectableActionAriaLabelledby: 'local-card-title',
               name: 'image-source-type',
               variant: 'single',
               onChange: (_, checked) => {
                 if (checked) {
-                  dispatch(changeImageSourceType('custom'));
+                  dispatch(changeImageSourceType('local'));
                 }
               },
               hasNoOffset: true,
             }}
           >
-            <CardTitle id='custom-card-title'>
-              Custom images <Label isCompact>No login</Label>
-            </CardTitle>
+            <CardTitle id='local-card-title'>Local images</CardTitle>
           </CardHeader>
           <CardBody>Local container images</CardBody>
         </Card>
       </Gallery>
       {imageSourceType === 'official' && <OfficialImageSource />}
-      {imageSourceType === 'custom' && <CustomImageSource />}
+      {imageSourceType === 'local' && <LocalImageSource />}
     </FormGroup>
   );
 };
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/tests/ImageSourceSelect.test.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/tests/ImageSourceSelect.test.tsx
index 960ad8017f..0faa147c22 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/tests/ImageSourceSelect.test.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/tests/ImageSourceSelect.test.tsx
@@ -3,21 +3,12 @@ import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 
-import {
-  initialState,
-  selectDistribution,
-  selectImageSource as selectImageSourceState,
-} from '@/store/slices/wizard';
+import { initialState, selectImageSource } from '@/store/slices/wizard';
 import { clickWithWait, createUser, renderWithRedux } from '@/test/testUtils';
 
-import {
-  clickRefreshImageSources,
-  openImageSourceSelect,
-  renderImageSourceSelect,
-} from './helpers';
+import { renderImageSourceSelect } from './helpers';
 import {
   mockBootcDistributions,
-  mockBootcDistributionsMixed,
   mockBootcDistributionsMultipleTypes,
   mockBootcDistributionsNoRhel10,
   mockBootcDistributionsWithMinorVersions,
@@ -27,7 +18,10 @@ import ImageSourceSelect from '../components/ImageSourceSelect';
 
 const mockRefetch = vi.fn();
 const mockUseGetDistributionsQuery = vi.fn();
-const mockRegistryLogin = vi.fn().mockReturnValue({ unwrap: vi.fn() });
+const mockUseGetImageExistsQuery = vi.fn();
+const mockUseGetRegistryAuthStatusQuery = vi.fn();
+const mockUsePullImageMutation = vi.fn();
+const mockPullImage = vi.fn();
 
 vi.mock('@/store/api/backend', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/store/api/backend')>();
@@ -35,16 +29,12 @@ vi.mock('@/store/api/backend', async (importOriginal) => {
     ...actual,
     useGetDistributionsQuery: (...args: unknown[]) =>
       mockUseGetDistributionsQuery(...args),
-    useGetRegistryAuthStatusQuery: () => ({
-      data: { status: 'authenticated', username: 'testuser' },
-      isLoading: false,
-      isError: false,
-      error: undefined,
-    }),
-    useRegistryLoginMutation: () => [
-      mockRegistryLogin,
-      { isLoading: false, error: undefined },
-    ],
+    useGetRegistryAuthStatusQuery: (...args: unknown[]) =>
+      mockUseGetRegistryAuthStatusQuery(...args),
+    useGetImageExistsQuery: (...args: unknown[]) =>
+      mockUseGetImageExistsQuery(...args),
+    usePullImageMutation: (...args: unknown[]) =>
+      mockUsePullImageMutation(...args),
   };
 });
 
@@ -66,6 +56,21 @@ describe('ImageSourceSelect', () => {
       isError: false,
       refetch: mockRefetch,
     });
+    mockUseGetImageExistsQuery.mockReturnValue({
+      data: true,
+      isLoading: false,
+      isError: false,
+    });
+    mockUseGetRegistryAuthStatusQuery.mockReturnValue({
+      data: { status: 'authenticated', username: 'testuser' },
+      isLoading: false,
+      isError: false,
+      error: undefined,
+    });
+    mockUsePullImageMutation.mockReturnValue([
+      mockPullImage,
+      { isLoading: false, isError: false },
+    ]);
   });
 
   describe('Rendering', () => {
@@ -78,196 +83,107 @@ describe('ImageSourceSelect', () => {
       expect(requiredMarkers.length).toBeGreaterThanOrEqual(1);
     });
 
-    test('does not auto-select an image in custom on-prem mode', async () => {
-      const { store } = renderImageSourceSelect();
-
-      // Wait for component to settle
-      await screen.findByText('Image source');
-
-      expect(selectImageSourceState(store.getState())).toBeUndefined();
-    });
-  });
-
-  describe('Loading State', () => {
-    beforeEach(() => {
-      mockUseGetDistributionsQuery.mockReturnValue({
-        data: undefined,
-        isLoading: true,
-        isError: false,
-        refetch: mockRefetch,
-      });
-    });
-
-    test('displays loading text in toggle', async () => {
+    test('displays official and local image source cards', async () => {
       renderImageSourceSelect();
 
-      expect(await screen.findByText(/loading images/i)).toBeInTheDocument();
+      expect(
+        await screen.findByText('Official Red Hat images'),
+      ).toBeInTheDocument();
+      expect(screen.getByText('Local images')).toBeInTheDocument();
+      expect(screen.queryByText('Custom images')).not.toBeInTheDocument();
+      expect(screen.queryByText('No login')).not.toBeInTheDocument();
     });
 
-    test('disables refresh button when loading', async () => {
-      renderImageSourceSelect();
+    test('does not auto-select an image on-prem', async () => {
+      const { store } = renderImageSourceSelect();
 
-      const refreshButton = await screen.findByRole('button', {
-        name: /refresh image sources/i,
-      });
-      expect(refreshButton).toBeDisabled();
+      await screen.findByText('Image source');
+
+      expect(selectImageSource(store.getState())).toBeUndefined();
     });
   });
 
-  describe('Error State', () => {
-    beforeEach(() => {
-      mockUseGetDistributionsQuery.mockReturnValue({
-        data: undefined,
-        isLoading: false,
-        isError: true,
-        refetch: mockRefetch,
+  describe('Local images', () => {
+    const renderLocalImageSource = () => {
+      return renderImageSourceSelect({
+        output: {
+          ...initialState.output,
+          imageSourceType: 'local',
+        },
       });
-    });
+    };
 
-    test('displays error alert when query fails', async () => {
-      renderImageSourceSelect();
+    test('displays coming soon note instead of an image dropdown', async () => {
+      renderLocalImageSource();
 
       expect(
-        await screen.findByRole('heading', {
-          name: /error loading bootc images/i,
-        }),
+        await screen.findByText(/local image support is coming soon/i),
       ).toBeInTheDocument();
       expect(
-        screen.getByText(/unable to load available bootc images/i),
+        screen.getByText(/cockpit image builder 10\.4/i),
       ).toBeInTheDocument();
     });
 
-    test('displays on-prem error message mentioning podman', async () => {
-      renderImageSourceSelect();
+    test('displays the image-builder CLI example', async () => {
+      renderLocalImageSource();
 
       expect(
-        await screen.findByText(/ensure podman is installed/i),
+        await screen.findByDisplayValue(
+          'image-builder build qcow2 --bootc-ref localhost/my-derived-image:latest',
+        ),
       ).toBeInTheDocument();
     });
 
-    test('displays hosted error message without podman reference', async () => {
-      renderHostedImageSourceSelect();
-
-      expect(
-        await screen.findByText(/please try again later/i),
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('Empty State', () => {
-    beforeEach(() => {
-      mockUseGetDistributionsQuery.mockReturnValue({
-        data: [],
-        isLoading: false,
-        isError: false,
-        refetch: mockRefetch,
-      });
-    });
-
-    test('displays "No images available" in dropdown', async () => {
+    test('selecting the local card shows the coming soon note', async () => {
       renderImageSourceSelect();
       const user = createUser();
 
-      await openImageSourceSelect(user);
+      const localCard = await screen.findByRole('radio', {
+        name: /local images/i,
+      });
+      await clickWithWait(user, localCard);
 
       expect(
-        await screen.findByRole('option', {
-          name: /no images available/i,
-        }),
+        await screen.findByText(/local image support is coming soon/i),
       ).toBeInTheDocument();
     });
   });
 
-  describe('Image Selection', () => {
-    test('displays available images in dropdown', async () => {
-      renderImageSourceSelect();
-      const user = createUser();
+  describe('Hosted (non on-premise)', () => {
+    test('does not display source type cards', async () => {
+      renderHostedImageSourceSelect();
 
-      await openImageSourceSelect(user);
+      await screen.findByText('Image source');
 
+      expect(screen.queryByText('Local images')).not.toBeInTheDocument();
       expect(
-        await screen.findByRole('option', {
-          name: /registry.redhat.io\/rhel10\/rhel-bootc:rhel-10/i,
-        }),
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('option', {
-          name: /registry.redhat.io\/rhel9\/rhel-bootc:rhel-9/i,
-        }),
-      ).toBeInTheDocument();
-    });
-
-    test('updates redux state when selecting an image', async () => {
-      const { store } = renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-      const option = await screen.findByRole('option', {
-        name: /registry.redhat.io\/rhel9\/rhel-bootc:rhel-9/i,
-      });
-      await clickWithWait(user, option);
-
-      await waitFor(() => {
-        expect(selectImageSourceState(store.getState())).toBe(
-          'registry.redhat.io/rhel9/rhel-bootc:rhel-9',
-        );
-        expect(selectDistribution(store.getState())).toBe('rhel-9');
-      });
+        screen.queryByText('Official Red Hat images'),
+      ).not.toBeInTheDocument();
     });
 
-    test('closes dropdown after selection', async () => {
-      renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-      expect(screen.getByRole('listbox')).toBeInTheDocument();
-
-      const option = await screen.findByRole('option', {
-        name: /registry.redhat.io\/rhel9\/rhel-bootc:rhel-9/i,
+    test('displays hosted error message when query fails', async () => {
+      mockUseGetDistributionsQuery.mockReturnValue({
+        data: undefined,
+        isLoading: false,
+        isError: true,
+        refetch: mockRefetch,
       });
-      await clickWithWait(user, option);
 
-      await waitFor(() => {
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('On-premise refresh', () => {
-    test('displays refresh button', async () => {
-      renderImageSourceSelect();
-
-      expect(
-        await screen.findByRole('button', { name: /refresh image sources/i }),
-      ).toBeInTheDocument();
-    });
-
-    test('calls refetch when refresh button clicked', async () => {
-      renderImageSourceSelect();
-      const user = createUser();
-
-      await clickRefreshImageSources(user);
-
-      expect(mockRefetch).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('Hosted (non on-premise)', () => {
-    test('does not display refresh button', async () => {
       renderHostedImageSourceSelect();
 
-      await screen.findByText('Image source');
-
       expect(
-        screen.queryByRole('button', { name: /refresh image sources/i }),
-      ).not.toBeInTheDocument();
+        await screen.findByRole('heading', {
+          name: /error loading bootc images/i,
+        }),
+      ).toBeInTheDocument();
+      expect(screen.getByText(/please try again later/i)).toBeInTheDocument();
     });
 
     test('auto-selects the first rhel-10 distribution', async () => {
       const { store } = renderHostedImageSourceSelect();
 
       await waitFor(() => {
-        expect(selectImageSourceState(store.getState())).toBe(
+        expect(selectImageSource(store.getState())).toBe(
           'registry.redhat.io/rhel10/rhel-bootc:rhel-10',
         );
       });
@@ -284,133 +200,14 @@ describe('ImageSourceSelect', () => {
       const { store } = renderHostedImageSourceSelect();
 
       await waitFor(() => {
-        expect(selectImageSourceState(store.getState())).toBe(
+        expect(selectImageSource(store.getState())).toBe(
           'registry.redhat.io/rhel9/rhel-bootc:rhel-9',
         );
       });
     });
   });
 
-  describe('Non-RHEL distributions', () => {
-    beforeEach(() => {
-      mockUseGetDistributionsQuery.mockReturnValue({
-        data: mockBootcDistributionsMixed,
-        isLoading: false,
-        isError: false,
-        refetch: mockRefetch,
-      });
-    });
-
-    test('displays all image references including non-RHEL in dropdown', async () => {
-      renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-
-      expect(
-        screen.getByRole('option', {
-          name: /registry.redhat.io\/rhel10\/rhel-bootc:rhel-10/i,
-        }),
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('option', {
-          name: /quay.io\/fedora\/fedora-bootc:44/i,
-        }),
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('option', {
-          name: /quay.io\/centos-bootc\/centos-bootc:stream10/i,
-        }),
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('option', {
-          name: /localhost\/my-custom-image:latest/i,
-        }),
-      ).toBeInTheDocument();
-    });
-
-    test('selecting Fedora dispatches correct distribution and image source', async () => {
-      const { store } = renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-      const fedoraOption = await screen.findByRole('option', {
-        name: /quay.io\/fedora\/fedora-bootc:44/i,
-      });
-      await clickWithWait(user, fedoraOption);
-
-      await waitFor(() => {
-        expect(selectImageSourceState(store.getState())).toBe(
-          'quay.io/fedora/fedora-bootc:44',
-        );
-        expect(selectDistribution(store.getState())).toBe('fedora-44');
-      });
-    });
-
-    test('selecting CentOS dispatches correct distribution and image source', async () => {
-      const { store } = renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-      const centosOption = await screen.findByRole('option', {
-        name: /quay.io\/centos-bootc\/centos-bootc:stream10/i,
-      });
-      await clickWithWait(user, centosOption);
-
-      await waitFor(() => {
-        expect(selectImageSourceState(store.getState())).toBe(
-          'quay.io/centos-bootc/centos-bootc:stream10',
-        );
-        expect(selectDistribution(store.getState())).toBe('centos-10');
-      });
-    });
-
-    test('selecting unknown image dispatches correct distribution and image source', async () => {
-      const { store } = renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-      const customOption = await screen.findByRole('option', {
-        name: /localhost\/my-custom-image:latest/i,
-      });
-      await clickWithWait(user, customOption);
-
-      await waitFor(() => {
-        expect(selectImageSourceState(store.getState())).toBe(
-          'localhost/my-custom-image:latest',
-        );
-        expect(selectDistribution(store.getState())).toBe('unknown-custom');
-      });
-    });
-  });
-
   describe('Distribution filtering and deduplication', () => {
-    test('on-prem shows all images including minor versions', async () => {
-      mockUseGetDistributionsQuery.mockReturnValue({
-        data: mockBootcDistributionsWithMinorVersions,
-        isLoading: false,
-        isError: false,
-        refetch: mockRefetch,
-      });
-
-      renderImageSourceSelect();
-      const user = createUser();
-
-      await openImageSourceSelect(user);
-
-      const options = screen.getAllByRole('option');
-      expect(options).toHaveLength(3);
-      expect(options[0]).toHaveTextContent(
-        'registry.redhat.io/rhel10/rhel-bootc:rhel-10',
-      );
-      expect(options[1]).toHaveTextContent(
-        'registry.redhat.io/rhel10/rhel-bootc:rhel-10.1',
-      );
-      expect(options[2]).toHaveTextContent(
-        'registry.redhat.io/rhel9/rhel-bootc:rhel-9',
-      );
-    });
-
     test('hosted filters out minor versions', async () => {
       mockUseGetDistributionsQuery.mockReturnValue({
         data: mockBootcDistributionsWithMinorVersions,
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/tests/helpers.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/tests/helpers.tsx
index f93401a2ea..bdc84d48ea 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/tests/helpers.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/tests/helpers.tsx
@@ -146,7 +146,7 @@ export const renderImageSourceSelect = (
       },
       output: {
         ...initialState.output,
-        imageSourceType: 'custom',
+        imageSourceType: 'official',
       },
       ...wizardStateOverrides,
     },
@@ -157,37 +157,3 @@ export const renderImageSourceSelect = (
     },
   );
 };
-
-// ImageSourceSelect interaction helpers
-export const openImageSourceSelect = async (user: UserEventInstance) => {
-  // Custom on-prem uses a typeahead input; hosted uses a button toggle
-  const input = screen.queryByRole('textbox', {
-    name: /type to filter/i,
-  });
-  if (input) {
-    await clickWithWait(user, input);
-    return;
-  }
-  const toggle = await screen.findByRole('button', {
-    name: /select a bootc image/i,
-  });
-  await clickWithWait(user, toggle);
-};
-
-export const selectImageSource = async (
-  user: UserEventInstance,
-  imageTag: RegExp | string,
-) => {
-  await openImageSourceSelect(user);
-  const option = await screen.findByRole('option', {
-    name: imageTag,
-  });
-  await clickWithWait(user, option);
-};
-
-export const clickRefreshImageSources = async (user: UserEventInstance) => {
-  const button = await screen.findByRole('button', {
-    name: /refresh image sources/i,
-  });
-  await clickWithWait(user, button);
-};
diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/tests/mocks/fixtures.ts b/src/Components/CreateImageWizard/steps/ImageOutput/tests/mocks/fixtures.ts
index 26754bd948..dad9a88534 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/tests/mocks/fixtures.ts
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/tests/mocks/fixtures.ts
@@ -141,34 +141,3 @@ export const mockBootcDistributionsMultipleTypes: BootcDistributionItem[] = [
     reference: 'registry.redhat.io/rhel10/rhel-bootc-aws:10.3',
   },
 ];
-
-export const mockBootcDistributionsMixed: BootcDistributionItem[] = [
-  {
-    distro: 'rhel-10',
-    name: 'Red Hat Enterprise Linux (RHEL) 10',
-    type: 'guest-image',
-    arch: 'x86_64',
-    reference: 'registry.redhat.io/rhel10/rhel-bootc:rhel-10',
-  },
-  {
-    distro: 'fedora-44',
-    name: 'Fedora 44',
-    type: 'guest-image',
-    arch: 'x86_64',
-    reference: 'quay.io/fedora/fedora-bootc:44',
-  },
-  {
-    distro: 'centos-10',
-    name: 'CentOS Stream 10',
-    type: 'guest-image',
-    arch: 'x86_64',
-    reference: 'quay.io/centos-bootc/centos-bootc:stream10',
-  },
-  {
-    distro: 'unknown-custom',
-    name: 'localhost/my-custom-image:latest',
-    type: 'guest-image',
-    arch: 'x86_64',
-    reference: 'localhost/my-custom-image:latest',
-  },
-];
diff --git a/src/store/slices/wizard/output/parsers.ts b/src/store/slices/wizard/output/parsers.ts
index d0e7ea0be5..bf165997cd 100644
--- a/src/store/slices/wizard/output/parsers.ts
+++ b/src/store/slices/wizard/output/parsers.ts
@@ -63,7 +63,7 @@ const parseImageSourceType = ({ bootc }: RequestLike): ImageSourceType => {
   }
 
   if (!isKnownImageRef(bootc.reference)) {
-    return 'custom';
+    return 'local';
   }
 
   return 'official';
diff --git a/src/store/slices/wizard/output/types.ts b/src/store/slices/wizard/output/types.ts
index 7a457b7b92..ae27b00d55 100644
--- a/src/store/slices/wizard/output/types.ts
+++ b/src/store/slices/wizard/output/types.ts
@@ -24,7 +24,7 @@ export type MiscFormatType = Exclude<
 >;
 
 export type ImageSource = string;
-export type ImageSourceType = 'official' | 'custom';
+export type ImageSourceType = 'official' | 'local';
 
 export type RhelDistribution = (typeof RHEL_DISTRIBUTIONS)[number];
 

From cb9ad3339f5f722144444ff088f1477b96623c1c Mon Sep 17 00:00:00 2001
From: Lucas Garfield <lucas@redhat.com>
Date: Mon, 10 Aug 2026 05:10:49 -0500
Subject: [PATCH 2/2] Wizard: block navigation past the local images fake door

The local image source only shows a coming-soon note, so disable the
Next and Review image buttons and the sidebar navigation while it is
selected.
---
 .../CreateImageWizard/CreateImageWizard.tsx   | 17 ++++++--
 .../components/CustomWizardFooter.tsx         | 14 ++++++-
 .../tests/CustomWizardFooter.test.tsx         | 42 +++++++++++++++++++
 3 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 src/Components/CreateImageWizard/components/tests/CustomWizardFooter.test.tsx

diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx
index f26989158d..6647acaf6b 100644
--- a/src/Components/CreateImageWizard/CreateImageWizard.tsx
+++ b/src/Components/CreateImageWizard/CreateImageWizard.tsx
@@ -45,6 +45,7 @@ import {
   parseStateFromRequest,
   selectDistribution,
   selectImageSource,
+  selectImageSourceType,
   selectImageTypes,
   selectIsImageMode,
   selectTimezone,
@@ -121,6 +122,7 @@ const CreateImageWizard = () => {
   const isOnPremise = useAppSelector(selectIsOnPremise);
   const isImageMode = useAppSelector(selectIsImageMode);
   const imageSource = useAppSelector(selectImageSource);
+  const imageSourceType = useAppSelector(selectImageSourceType);
   const [searchParams, setSearchParams] = useSearchParams();
   const resolvePath = useAppSelector(selectPathResolver);
   const hasInitialized = useRef(false);
@@ -170,6 +172,11 @@ const CreateImageWizard = () => {
   const usersHaveErrors =
     usersValidation.disabledNext || userGroupsValidation.disabledNext;
 
+  // The "Local images" source is a fake door: it only shows a coming-soon
+  // note, so the wizard must not proceed past base settings.
+  const localImageSourceSelected =
+    isOnPremise && isImageMode && imageSourceType === 'local';
+
   const baseSettingsHasErrors =
     targetEnvironments.length === 0 ||
     (isImageMode && !imageSource) ||
@@ -417,10 +424,11 @@ const CreateImageWizard = () => {
       (s) => s.id === 'base-settings-step',
     )?.isVisited;
     const canNavigate =
-      mode === 'edit' ||
-      step.isVisited ||
-      isBaseSettingsStep ||
-      (hasVisitedBaseSettings && !baseSettingsHasErrors);
+      (isBaseSettingsStep || !localImageSourceSelected) &&
+      (mode === 'edit' ||
+        step.isVisited ||
+        isBaseSettingsStep ||
+        (hasVisitedBaseSettings && !baseSettingsHasErrors));
 
     return (
       <WizardNavItem
@@ -487,6 +495,7 @@ const CreateImageWizard = () => {
           footer={
             <CustomWizardFooter
               disableBack={true}
+              disableNext={localImageSourceSelected}
               hasErrors={baseSettingsHasErrors}
               isOnPremise={isOnPremise}
             />
diff --git a/src/Components/CreateImageWizard/components/CustomWizardFooter.tsx b/src/Components/CreateImageWizard/components/CustomWizardFooter.tsx
index 9c25ac749d..28e82931c8 100644
--- a/src/Components/CreateImageWizard/components/CustomWizardFooter.tsx
+++ b/src/Components/CreateImageWizard/components/CustomWizardFooter.tsx
@@ -20,6 +20,7 @@ import { scrollToFirstError } from '../utilities/scrollToFirstError';
 
 type CustomWizardFooterPropType = {
   disableBack?: boolean;
+  disableNext?: boolean;
   hasErrors: boolean;
   beforeNext?: () => boolean;
   isOnPremise: boolean;
@@ -27,6 +28,7 @@ type CustomWizardFooterPropType = {
 
 export const CustomWizardFooter = ({
   disableBack,
+  disableNext = false,
   hasErrors,
   beforeNext,
   isOnPremise,
@@ -89,10 +91,18 @@ export const CustomWizardFooter = ({
         >
           Back
         </Button>
-        <Button variant='secondary' onClick={handleNext}>
+        <Button
+          variant='secondary'
+          onClick={handleNext}
+          isDisabled={disableNext}
+        >
           Next
         </Button>
-        <Button variant='primary' onClick={handleReview}>
+        <Button
+          variant='primary'
+          onClick={handleReview}
+          isDisabled={disableNext}
+        >
           Review image
         </Button>
         <Button
diff --git a/src/Components/CreateImageWizard/components/tests/CustomWizardFooter.test.tsx b/src/Components/CreateImageWizard/components/tests/CustomWizardFooter.test.tsx
new file mode 100644
index 0000000000..987399e063
--- /dev/null
+++ b/src/Components/CreateImageWizard/components/tests/CustomWizardFooter.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Wizard, WizardStep } from '@patternfly/react-core';
+import { screen } from '@testing-library/react';
+
+import { renderWithRedux } from '@/test/testUtils';
+
+import CustomWizardFooter from '../CustomWizardFooter';
+
+const renderFooter = (
+  props: Partial<React.ComponentProps<typeof CustomWizardFooter>> = {},
+) => {
+  return renderWithRedux(
+    <Wizard>
+      <WizardStep
+        name='Test step'
+        id='test-step'
+        footer={
+          <CustomWizardFooter hasErrors={false} isOnPremise={true} {...props} />
+        }
+      >
+        Step content
+      </WizardStep>
+    </Wizard>,
+  );
+};
+
+describe('CustomWizardFooter', () => {
+  test('Next and Review image are enabled by default', async () => {
+    renderFooter();
+
+    expect(await screen.findByRole('button', { name: 'Next' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'Review image' })).toBeEnabled();
+  });
+
+  test('Next and Review image are disabled when disableNext is set', async () => {
+    renderFooter({ disableNext: true });
+
+    expect(await screen.findByRole('button', { name: 'Next' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Review image' })).toBeDisabled();
+  });
+});