From b604e37241f20c890d6de7e29d71b3f26b69694d Mon Sep 17 00:00:00 2001
From: rawagner <rawagner@redhat.com>
Date: Thu, 6 Aug 2026 11:07:37 +0200
Subject: [PATCH] NO-ISSUE: Replace LabeledResourceRef with plain values in
 Select/MultiSelect fields

SelectField and MultiSelectField stored { value, label } objects (LabeledResourceRef)
in Formik state. This coupled display concerns into form values, complicated payloads,
and required unwrapping everywhere. Simplify to store plain string/number values instead
and derive display labels from the options list at render time.

- Remove labeledResourceRef.ts and labeledResourceRefSchema.ts
- Update SelectField/MultiSelectField to use primitive Formik values
- Move review step rendering into per-adapter components (VmReviewStep,
  ClusterReviewStep, BareMetalReviewStep) that fetch display data directly,
  replacing the generic ReviewStep that relied on labeled refs
- Simplify form schemas and payload builders to work with plain values
- Add get handlers to mock transport for InstanceTypes, VirtualNetworks,
  and Subnets to support review step data fetching in tests

Assisted-by: Claude Code <noreply@anthropic.com>
---
 libs/i18n/locales/en/translation.json         |  12 +-
 .../src/components/Form/MultiSelectField.tsx  |  16 +-
 .../src/components/Form/SelectField.test.tsx  |  24 ++-
 .../src/components/Form/SelectField.tsx       |  42 ++--
 .../src/components/Form/labeledResourceRef.ts |  22 ---
 .../Form/labeledResourceRefSchema.ts          |  20 --
 .../CatalogProvisionWizard.tsx                |  21 +-
 .../bareMetalInstance/BareMetalReviewStep.tsx |  52 +++++
 .../adapters/bareMetalInstanceAdapter.ts      |  27 +--
 .../cluster/ClusterConfigurationStep.test.tsx |   2 +-
 .../cluster/ClusterNodeSetsArrayField.tsx     |   4 +-
 .../adapters/cluster/ClusterReviewStep.tsx    | 134 +++++++++++++
 .../wizard/adapters/cluster/fields.ts         |   6 +-
 .../wizard/adapters/cluster/payload.test.ts   |  10 +-
 .../wizard/adapters/cluster/payload.ts        |   2 +-
 .../wizard/adapters/cluster/schemas.test.ts   |   6 +-
 .../wizard/adapters/cluster/schemas.ts        |   7 +-
 .../wizard/adapters/clusterAdapter.ts         |  88 +--------
 .../computeInstance/VmNetworkingStep.tsx      |   5 +-
 .../adapters/computeInstance/VmReviewStep.tsx | 180 ++++++++++++++++++
 .../wizard/adapters/computeInstance/fields.ts |  13 +-
 .../computeInstance/generalFields.test.ts     |  18 +-
 .../adapters/computeInstance/payload.ts       |  16 +-
 .../adapters/computeInstance/schemas.test.ts  |   9 +-
 .../adapters/computeInstance/schemas.ts       |  20 +-
 .../wizard/adapters/computeInstanceAdapter.ts |  83 +-------
 .../catalogProvision/wizard/adapters/types.ts |   3 +-
 .../catalogProvision/wizard/catalogOverlay.ts |  10 -
 .../catalogProvision/wizard/stepIds.ts        |  24 +--
 .../wizard/steps/ReviewStep.tsx               |  46 -----
 .../wizard/steps/WizardSteps.tsx              |   1 -
 .../networking/SecurityGroupCreateModal.tsx   |  16 +-
 .../networking/SecurityGroupRuleForm.tsx      |  15 +-
 .../networking/SecurityGroupRuleModal.tsx     |  17 +-
 .../vm/DetailsPage/AttachExternalIpModal.tsx  |   9 +-
 .../test-utils/createMockConnectTransport.ts  |   9 +
 36 files changed, 506 insertions(+), 483 deletions(-)
 delete mode 100644 libs/ui-components/src/components/Form/labeledResourceRef.ts
 delete mode 100644 libs/ui-components/src/components/Form/labeledResourceRefSchema.ts
 create mode 100644 libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstance/BareMetalReviewStep.tsx
 create mode 100644 libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterReviewStep.tsx
 create mode 100644 libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmReviewStep.tsx
 delete mode 100644 libs/ui-components/src/components/catalogProvision/wizard/steps/ReviewStep.tsx

diff --git a/libs/i18n/locales/en/translation.json b/libs/i18n/locales/en/translation.json
index cefab47f..e88a2c4a 100644
--- a/libs/i18n/locales/en/translation.json
+++ b/libs/i18n/locales/en/translation.json
@@ -25,6 +25,7 @@
   "Bare metal instances": "Bare metal instances",
   "Bare Metal Machines": "Bare Metal Machines",
   "Bare metal provisioning wizard": "Bare metal provisioning wizard",
+  "Boot disk": "Boot disk",
   "Break-glass credentials": "Break-glass credentials",
   "Browse catalog items and launch virtual machines, clusters, or bare metal machines from published offerings.": "Browse catalog items and launch virtual machines, clusters, or bare metal machines from published offerings.",
   "Cancel": "Cancel",
@@ -54,11 +55,7 @@
   "catalogProvision.instanceTypes.deprecatedSuffix": " (deprecated)",
   "catalogProvision.instanceTypes.loadError": "Could not load instance types",
   "catalogProvision.networking.loadError": "Could not load networking options",
-  "catalogProvision.review.catalogItem": "Catalog item",
   "catalogProvision.steps.catalog.title": "Catalog item",
-  "catalogProvision.steps.configuration.title": "Configuration",
-  "catalogProvision.steps.general.title": "General",
-  "catalogProvision.steps.networking.title": "Networking",
   "catalogProvision.steps.review.title": "Review",
   "catalogProvision.validation.bootDiskNumber": "Boot disk size must be a number",
   "catalogProvision.validation.catalogItemRequired": "Select a catalog item",
@@ -194,7 +191,12 @@
   "Failed to download kubeconfig": "Failed to download kubeconfig",
   "Failed to edit resource": "Failed to edit resource",
   "Failed to enable Identity provider": "Failed to enable Identity provider",
+  "Failed to fetch host types": "Failed to fetch host types",
   "Failed to fetch Identity provider": "Failed to fetch Identity provider",
+  "Failed to fetch instance type": "Failed to fetch instance type",
+  "Failed to fetch security groups": "Failed to fetch security groups",
+  "Failed to fetch subnet": "Failed to fetch subnet",
+  "Failed to fetch virtual network": "Failed to fetch virtual network",
   "Failed to load cluster password": "Failed to load cluster password",
   "Failed to load graphical console viewer": "Failed to load graphical console viewer",
   "Failed to load security groups": "Failed to load security groups",
@@ -388,6 +390,7 @@
   "Use IPv4 CIDR notation (for example 10.128.0.0/14).": "Use IPv4 CIDR notation (for example 10.128.0.0/14).",
   "Use IPv4 CIDR notation (for example 172.30.0.0/16).": "Use IPv4 CIDR notation (for example 172.30.0.0/16).",
   "User data": "User data",
+  "User Data": "User Data",
   "User Data is required": "User Data is required",
   "User data must not exceed 64 KB.": "User data must not exceed 64 KB.",
   "User info URL": "User info URL",
@@ -402,6 +405,7 @@
   "Virtual Network": "Virtual Network",
   "Virtual network is required": "Virtual network is required",
   "Virtual networks": "Virtual networks",
+  "VM image": "VM image",
   "Worker nodes": "Worker nodes",
   "You are not authorized to access this resource.": "You are not authorized to access this resource."
 }
diff --git a/libs/ui-components/src/components/Form/MultiSelectField.tsx b/libs/ui-components/src/components/Form/MultiSelectField.tsx
index 43c2e706..d61909c4 100644
--- a/libs/ui-components/src/components/Form/MultiSelectField.tsx
+++ b/libs/ui-components/src/components/Form/MultiSelectField.tsx
@@ -6,7 +6,6 @@ import { useField } from 'formik';
 import { getVisibleFieldError } from './fieldError';
 import { useShowFieldValidationErrors } from './FieldValidationContext';
 import { FormFieldHelper } from './FormFieldHelper';
-import { type LabeledResourceRef } from './labeledResourceRef';
 import type { SelectFieldOption } from './SelectField';
 
 interface MultiSelectFieldProps {
@@ -37,7 +36,7 @@ export const MultiSelectField = ({
   noOptionsFoundMessage = (filter) => `No options found for "${filter}"`,
   autoSelectSingleOption = false,
 }: MultiSelectFieldProps) => {
-  const [field, meta, helpers] = useField<LabeledResourceRef[]>(name);
+  const [field, meta, helpers] = useField<(string | number)[]>(name);
   const showValidationErrors = useShowFieldValidationErrors();
   const error = getVisibleFieldError(meta, showValidationErrors);
   const validated = error ? 'error' : 'default';
@@ -59,25 +58,18 @@ export const MultiSelectField = ({
     ) {
       return;
     }
-    void helpers.setValue([{ value: options[0].value, label: options[0].label }], false);
+    void helpers.setValue([options[0].value], false);
   }, [autoSelectSingleOption, helpers, isDisabled, isLoading, options, selectedValues.length]);
 
   const initialOptions = useMemo<MultiTypeaheadSelectOption[]>(() => {
     return options.map((option) => ({
       content: option.label,
       value: option.value,
-      selected: selectedValues.some((value) => value.value === option.value),
+      selected: selectedValues.some((value) => value === option.value),
       isDisabled: option.isDisabled,
     }));
   }, [options, selectedValues]);
 
-  const toLabeledResourceRefs = (selections: (string | number)[]) =>
-    selections.map((selection) => {
-      const value = String(selection);
-      const option = options.find((entry) => entry.value === value);
-      return option ? { value: option.value, label: option.label } : { value, label: value };
-    });
-
   return (
     <FormGroup label={label} fieldId={fieldId} isRequired={isRequired}>
       <MultiTypeaheadSelect
@@ -87,7 +79,7 @@ export const MultiSelectField = ({
         isDisabled={controlDisabled}
         noOptionsFoundMessage={noOptionsFoundMessage}
         onSelectionChange={(_event, selections) => {
-          void helpers.setValue(toLabeledResourceRefs(selections), true);
+          void helpers.setValue(selections, true);
           void helpers.setTouched(true);
         }}
         onToggle={(open) => {
diff --git a/libs/ui-components/src/components/Form/SelectField.test.tsx b/libs/ui-components/src/components/Form/SelectField.test.tsx
index 72472499..3645e762 100644
--- a/libs/ui-components/src/components/Form/SelectField.test.tsx
+++ b/libs/ui-components/src/components/Form/SelectField.test.tsx
@@ -4,26 +4,24 @@ import { Formik, type FormikErrors } from 'formik';
 import { describe, expect, it } from 'vitest';
 import * as yup from 'yup';
 
-import { EMPTY_LABELED_RESOURCE_REF, type LabeledResourceRef } from './labeledResourceRef';
-import { labeledResourceRefSchema } from './labeledResourceRefSchema';
 import { SelectField } from './SelectField';
 
 const renderSelect = ({
   autoSelectSingleOption = false,
-  initialValue = EMPTY_LABELED_RESOURCE_REF,
+  initialValue = '',
   isLoading = false,
 }: {
   autoSelectSingleOption?: boolean;
-  initialValue?: LabeledResourceRef;
+  initialValue?: string;
   isLoading?: boolean;
 } = {}) => {
-  let latestErrors: FormikErrors<{ kind: LabeledResourceRef }> = {};
+  let latestErrors: FormikErrors<{ kind: string }> = {};
 
   render(
     <Formik
       initialValues={{ kind: initialValue }}
       validationSchema={yup.object({
-        kind: labeledResourceRefSchema('Kind is required'),
+        kind: yup.string().required('Kind is required'),
       })}
       onSubmit={() => undefined}
     >
@@ -39,7 +37,7 @@ const renderSelect = ({
             placeholder="Select a kind"
             options={[{ value: 'only-option', label: 'Only option label' }]}
           />
-          <output aria-label="formik-value">{values.kind.value || '(empty)'}</output>
+          <output aria-label="formik-value">{values.kind || '(empty)'}</output>
           <button
             type="button"
             onClick={() => {
@@ -102,7 +100,7 @@ describe('SelectField', () => {
 
   it('does not auto-select when multiple options are available', async () => {
     render(
-      <Formik initialValues={{ kind: EMPTY_LABELED_RESOURCE_REF }} onSubmit={() => undefined}>
+      <Formik initialValues={{ kind: '' }} onSubmit={() => undefined}>
         {({ values }) => (
           <>
             <SelectField
@@ -116,7 +114,7 @@ describe('SelectField', () => {
                 { value: 'large', label: 'Large' },
               ]}
             />
-            <output aria-label="formik-value">{values.kind.value || '(empty)'}</output>
+            <output aria-label="formik-value">{values.kind || '(empty)'}</output>
           </>
         )}
       </Formik>,
@@ -133,7 +131,7 @@ describe('SelectField', () => {
     const user = userEvent.setup();
 
     render(
-      <Formik initialValues={{ kind: EMPTY_LABELED_RESOURCE_REF }} onSubmit={() => undefined}>
+      <Formik initialValues={{ kind: '' }} onSubmit={() => undefined}>
         {({ values }) => (
           <>
             <SelectField
@@ -146,7 +144,7 @@ describe('SelectField', () => {
                 { value: 'large', label: 'Large' },
               ]}
             />
-            <output aria-label="formik-value">{values.kind.value || '(empty)'}</output>
+            <output aria-label="formik-value">{values.kind || '(empty)'}</output>
           </>
         )}
       </Formik>,
@@ -166,10 +164,10 @@ describe('SelectField', () => {
 
     render(
       <Formik
-        initialValues={{ kind: EMPTY_LABELED_RESOURCE_REF }}
+        initialValues={{ kind: '' }}
         validateOnBlur
         validationSchema={yup.object({
-          kind: labeledResourceRefSchema('Kind is required'),
+          kind: yup.string().required('Kind is required'),
         })}
         onSubmit={() => undefined}
       >
diff --git a/libs/ui-components/src/components/Form/SelectField.tsx b/libs/ui-components/src/components/Form/SelectField.tsx
index 8202f0a9..99bf4468 100644
--- a/libs/ui-components/src/components/Form/SelectField.tsx
+++ b/libs/ui-components/src/components/Form/SelectField.tsx
@@ -12,14 +12,9 @@ import { useField } from 'formik';
 import { getVisibleFieldError } from './fieldError';
 import { useShowFieldValidationErrors } from './FieldValidationContext';
 import { FormFieldHelper } from './FormFieldHelper';
-import {
-  EMPTY_LABELED_RESOURCE_REF,
-  type LabeledResourceRef,
-  isLabeledResourceRefEmpty,
-} from './labeledResourceRef';
 
 export interface SelectFieldOption {
-  value: string;
+  value: string | number;
   label: string;
   isDisabled?: boolean;
 }
@@ -50,15 +45,13 @@ export const SelectField = ({
   loadingPlaceholder = 'Loading...',
   autoSelectSingleOption = false,
 }: SelectFieldProps) => {
-  const [field, meta, helpers] = useField<LabeledResourceRef>(name);
+  const [field, meta, helpers] = useField<string | number>(name);
   const [isOpen, setIsOpen] = useState(false);
   const showValidationErrors = useShowFieldValidationErrors();
   const error = getVisibleFieldError(meta, showValidationErrors);
   const validated = error ? 'error' : 'default';
   const effectivePlaceholder = isLoading ? loadingPlaceholder : placeholder;
   const controlDisabled = isDisabled || isLoading;
-  const fieldValue = field.value ?? EMPTY_LABELED_RESOURCE_REF;
-  const selectedValue = fieldValue.value;
 
   useEffect(() => {
     if (
@@ -66,35 +59,22 @@ export const SelectField = ({
       isLoading ||
       isDisabled ||
       options.length !== 1 ||
-      !isLabeledResourceRefEmpty(fieldValue)
+      field.value !== ''
     ) {
       return;
     }
-    void helpers.setValue({ value: options[0].value, label: options[0].label }, false);
-  }, [autoSelectSingleOption, fieldValue, helpers, isDisabled, isLoading, options]);
+    void helpers.setValue(options[0].value, false);
+  }, [autoSelectSingleOption, field.value, helpers, isDisabled, isLoading, options]);
 
   const toggleLabel = useMemo(() => {
-    if (isLabeledResourceRefEmpty(fieldValue)) {
+    if (field.value === '') {
       return effectivePlaceholder ?? '';
     }
-    return fieldValue.label.trim() || fieldValue.value;
-  }, [effectivePlaceholder, fieldValue]);
+    return options.find(({ value }) => value === field.value)?.label || field.value;
+  }, [effectivePlaceholder, field.value, options]);
 
-  const onSelect = (
-    _event: MouseEvent<Element> | undefined,
-    value: string | number | undefined,
-  ) => {
-    if (value == null) {
-      void helpers.setValue(EMPTY_LABELED_RESOURCE_REF, true);
-    } else {
-      const option = options.find((entry) => entry.value === String(value));
-      void helpers.setValue(
-        option
-          ? { value: option.value, label: option.label }
-          : { value: String(value), label: String(value) },
-        true,
-      );
-    }
+  const onSelect = (_event: MouseEvent<Element> | undefined, value: string | number) => {
+    helpers.setValue(value, true);
     void helpers.setTouched(true, false);
     setIsOpen(false);
   };
@@ -121,7 +101,7 @@ export const SelectField = ({
       <Select
         id={`${fieldId}-select`}
         isOpen={isOpen}
-        selected={selectedValue}
+        selected={field.value}
         onSelect={onSelect}
         onOpenChange={setIsOpen}
         toggle={toggle}
diff --git a/libs/ui-components/src/components/Form/labeledResourceRef.ts b/libs/ui-components/src/components/Form/labeledResourceRef.ts
deleted file mode 100644
index f6051657..00000000
--- a/libs/ui-components/src/components/Form/labeledResourceRef.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/** Form value for a picker that stores both API id and display label. */
-export interface LabeledResourceRef {
-  value: string;
-  label: string;
-}
-
-export const EMPTY_LABELED_RESOURCE_REF: LabeledResourceRef = { value: '', label: '' };
-
-export const isLabeledResourceRefEmpty = (ref?: LabeledResourceRef | null): boolean =>
-  !ref?.value?.trim();
-
-export const formatLabeledResourceRefForReview = (ref: LabeledResourceRef): string => {
-  const display = ref.label.trim() || ref.value.trim();
-  return display || '—';
-};
-
-export const formatLabeledResourceRefsForReview = (refs: LabeledResourceRef[]): string => {
-  if (refs.length === 0) {
-    return '—';
-  }
-  return refs.map((ref) => ref.label.trim() || ref.value.trim()).join(', ');
-};
diff --git a/libs/ui-components/src/components/Form/labeledResourceRefSchema.ts b/libs/ui-components/src/components/Form/labeledResourceRefSchema.ts
deleted file mode 100644
index 11a1e4f1..00000000
--- a/libs/ui-components/src/components/Form/labeledResourceRefSchema.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as yup from 'yup';
-
-export const labeledResourceRefSchema = (requiredMessage: string) =>
-  yup
-    .object({
-      value: yup.string(),
-      label: yup.string(),
-    })
-    .test('required', requiredMessage, (value) => Boolean(value?.value?.trim()));
-
-export const labeledResourceRefArraySchema = (requiredMessage: string) =>
-  yup
-    .array()
-    .of(
-      yup.object({
-        value: yup.string().defined(),
-        label: yup.string(),
-      }),
-    )
-    .min(1, requiredMessage);
diff --git a/libs/ui-components/src/components/catalogProvision/CatalogProvisionWizard.tsx b/libs/ui-components/src/components/catalogProvision/CatalogProvisionWizard.tsx
index 7610f9a2..5d6c6871 100644
--- a/libs/ui-components/src/components/catalogProvision/CatalogProvisionWizard.tsx
+++ b/libs/ui-components/src/components/catalogProvision/CatalogProvisionWizard.tsx
@@ -30,8 +30,13 @@ import { useBareMetalInstanceAdapter } from './wizard/adapters/bareMetalInstance
 import { useClusterAdapter } from './wizard/adapters/clusterAdapter';
 import { useComputeInstanceAdapter } from './wizard/adapters/computeInstanceAdapter';
 import type { CatalogProvisionAdapter } from './wizard/adapters/types';
-import { STEP_LABEL_KEYS, type WizardStepId, getWizardOrderedSteps } from './wizard/stepIds';
-import { CatalogStep, ReviewStep } from './wizard/steps/WizardSteps';
+import {
+  STEP_LABEL_KEYS,
+  WIZARD_STEP_IDS,
+  type WizardStepId,
+  getWizardOrderedSteps,
+} from './wizard/stepIds';
+import { CatalogStep } from './wizard/steps/WizardSteps';
 
 export type {
   CatalogProvisionPayload,
@@ -75,7 +80,7 @@ interface WizardFooterProps {
 }
 
 const isWizardStepId = (stepId: string | number | undefined): stepId is WizardStepId =>
-  typeof stepId === 'string' && Object.hasOwn(STEP_LABEL_KEYS, stepId);
+  typeof stepId === 'string' && WIZARD_STEP_IDS.includes(stepId);
 
 const CatalogProvisionWizardFooter = ({
   formik,
@@ -211,7 +216,6 @@ interface WizardBodyProps {
   adapter: ErasedCatalogAdapter;
   stepId: WizardStepId;
   catalogItem: CatalogItem | null;
-  values: CatalogProvisionWizardValues;
   provisionError?: string;
   validationAlert: boolean;
 }
@@ -220,7 +224,6 @@ const WizardStepBody = ({
   adapter,
   stepId,
   catalogItem,
-  values,
   provisionError,
   validationAlert,
 }: WizardBodyProps) => {
@@ -228,6 +231,7 @@ const WizardStepBody = ({
   const ConfigurationStep = adapter.ConfigurationStep;
   const NetworkingStep = adapter.NetworkingStep;
   const GeneralStepComponent = adapter.GeneralStep;
+  const ReviewStepComponent = adapter.ReviewStep;
 
   return (
     <FieldValidationProvider showErrors={validationAlert}>
@@ -248,9 +252,7 @@ const WizardStepBody = ({
         {stepId === 'general' ? <GeneralStepComponent catalogItem={catalogItem} /> : null}
         {stepId === 'configuration' ? <ConfigurationStep catalogItem={catalogItem} /> : null}
         {stepId === 'networking' ? <NetworkingStep catalogItem={catalogItem} /> : null}
-        {stepId === 'review' ? (
-          <ReviewStep adapter={adapter} catalogItem={catalogItem} values={values} />
-        ) : null}
+        {stepId === 'review' ? <ReviewStepComponent catalogItem={catalogItem} /> : null}
       </Stack>
     </FieldValidationProvider>
   );
@@ -499,12 +501,11 @@ const CatalogProvisionWizardForm = ({
           }
         >
           {orderedSteps.map((stepId) => (
-            <WizardStep key={stepId} id={stepId} name={t(STEP_LABEL_KEYS[stepId])}>
+            <WizardStep key={stepId} id={stepId} name={STEP_LABEL_KEYS(t)[stepId]}>
               <WizardStepBody
                 adapter={adapter}
                 stepId={stepId}
                 catalogItem={selectedCatalogItem}
-                values={formik.values}
                 provisionError={provisionError}
                 validationAlert={validationAlert}
               />
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstance/BareMetalReviewStep.tsx b/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstance/BareMetalReviewStep.tsx
new file mode 100644
index 00000000..a260ab45
--- /dev/null
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstance/BareMetalReviewStep.tsx
@@ -0,0 +1,52 @@
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { CatalogItem } from '@osac/ui-components/components/catalog/catalogItemDisplay';
+
+import { BareMetalInstanceWizardValues } from './fields';
+import { useTranslation } from '../../../../../hooks/useTranslation';
+import { formatReviewScalar } from '../../catalogOverlay';
+
+interface Props {
+  catalogItem: CatalogItem | null;
+}
+
+export const BareMetalReviewStep = ({ catalogItem }: Props) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<BareMetalInstanceWizardValues>();
+
+  return (
+    <DescriptionList isHorizontal isCompact aria-label={t('catalogProvision.steps.review.title')}>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{t('Catalog item')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {catalogItem?.title || catalogItem?.metadata?.name || '—'}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {formatReviewScalar(values.metadata.name)}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{t('SSH public key')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {formatReviewScalar(values.spec.sshKey)}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{t('User data')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {formatReviewScalar(values.spec.userData, true)}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  );
+};
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstanceAdapter.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstanceAdapter.ts
index b88fa6cf..d91a0cdf 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstanceAdapter.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/bareMetalInstanceAdapter.ts
@@ -1,15 +1,12 @@
 import { useMemo } from 'react';
 import type { MessageInitShape } from '@bufbuild/protobuf';
-import type { TFunction } from 'i18next';
 
 import type { BareMetalInstanceCatalogItem } from '@osac/types';
 import { BareMetalInstanceSchema } from '@osac/types';
 
-import { useBareMetalInstanceCatalogItems } from '../../../../api/v1/baremetal-instance';
-import { useTranslation } from '../../../../hooks/useTranslation';
-import { type ReviewSection, formatReviewScalar, reviewRow } from '../catalogOverlay';
 import BareMetalConfigurationStep from './bareMetalInstance/BareMetalConfigurationStep';
 import BareMetalGeneralStep from './bareMetalInstance/BareMetalGeneralStep';
+import { BareMetalReviewStep } from './bareMetalInstance/BareMetalReviewStep';
 import {
   type BareMetalInstanceWizardValues,
   applyBmCatalogDefaults,
@@ -18,24 +15,8 @@ import {
 import { buildBareMetalInstanceCreatePayload } from './bareMetalInstance/payload';
 import { buildBareMetalInstanceStepSchema } from './bareMetalInstance/schemas';
 import type { CatalogProvisionAdapter } from './types';
-
-const buildBmReviewSections = (
-  values: BareMetalInstanceWizardValues,
-  _catalogItem: BareMetalInstanceCatalogItem,
-  t: TFunction,
-): ReviewSection[] => [
-  {
-    title: t('General'),
-    rows: [
-      reviewRow(t('Name'), formatReviewScalar(values.metadata.name)),
-      reviewRow(t('SSH public key'), formatReviewScalar(values.spec.sshKey, true)),
-    ],
-  },
-  {
-    title: t('Configuration'),
-    rows: [reviewRow(t('User data'), formatReviewScalar(values.spec.userData, true))],
-  },
-];
+import { useBareMetalInstanceCatalogItems } from '../../../../api/v1/baremetal-instance';
+import { useTranslation } from '../../../../hooks/useTranslation';
 
 export const useBareMetalInstanceAdapter = (): CatalogProvisionAdapter<
   BareMetalInstanceCatalogItem,
@@ -62,10 +43,10 @@ export const useBareMetalInstanceAdapter = (): CatalogProvisionAdapter<
       buildCreatePayload: (values, _catalogItem) => buildBareMetalInstanceCreatePayload(values),
       ConfigurationStep: BareMetalConfigurationStep,
       GeneralStep: BareMetalGeneralStep,
+      ReviewStep: BareMetalReviewStep,
       NetworkingStep: () => null,
       getStepValidationSchema: (catalogItem, stepId) =>
         buildBareMetalInstanceStepSchema(catalogItem, stepId, t),
-      getReviewSections: (values, catalogItem) => buildBmReviewSections(values, catalogItem, t),
       onCatalogItemSelected: (item, helpers) => {
         helpers.resetForm({
           values: {
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterConfigurationStep.test.tsx b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterConfigurationStep.test.tsx
index 85f09eb4..64fef0f9 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterConfigurationStep.test.tsx
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterConfigurationStep.test.tsx
@@ -90,7 +90,7 @@ describe('ClusterConfigurationStep', () => {
               nodeSetRows: [
                 {
                   ...row,
-                  hostType: { value: 'acme_1tb', label: 'ACME 1TB' },
+                  hostType: 'acme_1tb',
                   size: '3',
                 },
               ],
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterNodeSetsArrayField.tsx b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterNodeSetsArrayField.tsx
index f7289013..13354aea 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterNodeSetsArrayField.tsx
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterNodeSetsArrayField.tsx
@@ -34,14 +34,14 @@ const ClusterNodeSetsArrayField = () => {
     () =>
       new Set(
         values.spec.nodeSetRows
-          .map((row) => row.hostType.value.trim())
+          .map((row) => row.hostType.trim())
           .filter((hostTypeId) => hostTypeId.length > 0),
       ),
     [values.spec.nodeSetRows],
   );
 
   const hostTypeOptionsForRow = (rowIndex: number) => {
-    const currentHostTypeId = values.spec.nodeSetRows[rowIndex]?.hostType.value.trim() ?? '';
+    const currentHostTypeId = values.spec.nodeSetRows[rowIndex]?.hostType.trim() ?? '';
     return hostTypes.map((hostType) => ({
       value: hostType.id,
       label: hostTypeDisplayName(hostType),
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterReviewStep.tsx b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterReviewStep.tsx
new file mode 100644
index 00000000..6ec2d76f
--- /dev/null
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/ClusterReviewStep.tsx
@@ -0,0 +1,134 @@
+import {
+  Alert,
+  Bullseye,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { HostType } from '@osac/types';
+import { useHostTypes } from '@osac/ui-components/api/v1/host-types';
+import { CatalogItem } from '@osac/ui-components/components/catalog/catalogItemDisplay';
+import { getErrorMessage } from '@osac/ui-components/utils/error';
+
+import { ClusterWizardValues } from './fields';
+import { useTranslation } from '../../../../../hooks/useTranslation';
+import { formatReviewScalar } from '../../catalogOverlay';
+
+const formatNodeSetsForReview = (
+  hostTypes: HostType[],
+  nodeSetRows: ClusterWizardValues['spec']['nodeSetRows'],
+): string => {
+  if (nodeSetRows.length === 0) {
+    return '—';
+  }
+  return nodeSetRows
+    .map((row) => {
+      const hostType = hostTypes.find((h) => h.id === row.hostType);
+
+      return `${hostType?.title || hostType?.metadata?.name || row.hostType}: ${row.size}`;
+    })
+    .join(', ');
+};
+
+interface Props {
+  catalogItem: CatalogItem | null;
+}
+
+export const ClusterReviewStep = ({ catalogItem }: Props) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<ClusterWizardValues>();
+
+  const {
+    data = [],
+    isLoading,
+    error,
+  } = useHostTypes({
+    filter: `this.id in [${values.spec.nodeSetRows.map(({ hostType }) => `"${hostType}"`).join(',')}]`,
+  });
+
+  if (isLoading) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return (
+    <Stack hasGutter>
+      {!!error && (
+        <StackItem>
+          <Alert variant="warning" isInline title={t('Failed to fetch host types')}>
+            {getErrorMessage(error)}
+          </Alert>
+        </StackItem>
+      )}
+      <StackItem>
+        <DescriptionList
+          isHorizontal
+          isCompact
+          aria-label={t('catalogProvision.steps.review.title')}
+        >
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Catalog item')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {catalogItem?.title || catalogItem?.metadata?.name || '—'}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.metadata.name)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('SSH public key')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.sshPublicKey)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Pull secret')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.pullSecret, true)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Release image')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.releaseImage)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Node sets')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatNodeSetsForReview(data, values.spec.nodeSetRows)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Pod CIDR')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.network.podCidr)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Service CIDR')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.network.serviceCidr)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </StackItem>
+    </Stack>
+  );
+};
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/fields.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/fields.ts
index f62ef992..1ccba159 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/fields.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/fields.ts
@@ -1,8 +1,6 @@
-import type { LabeledResourceRef } from '../../../../Form/labeledResourceRef';
-
 export interface ClusterNodeSetRow {
   rowId: string;
-  hostType: LabeledResourceRef;
+  hostType: string;
   size: string;
 }
 
@@ -49,6 +47,6 @@ export const createNodeSetRowId = (): string => crypto.randomUUID();
 
 export const createEmptyNodeSetRow = (): ClusterNodeSetRow => ({
   rowId: createNodeSetRowId(),
-  hostType: { value: '', label: '' },
+  hostType: '',
   size: '',
 });
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.test.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.test.ts
index 0cfc7739..ac1849bf 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.test.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.test.ts
@@ -52,7 +52,7 @@ describe('buildClusterCreatePayload', () => {
         nodeSetRows: [
           {
             ...row,
-            hostType: { value: 'acme_1tb', label: 'ACME 1TB' },
+            hostType: 'acme_1tb',
             size: '3',
           },
         ],
@@ -115,10 +115,10 @@ describe('buildClusterCreatePayload', () => {
         pullSecret: 'secret',
         releaseImage: '4.17.0',
         nodeSetRows: [
-          { ...row, hostType: { value: '', label: '' }, size: '3' },
-          { ...row, hostType: { value: 'acme_1tb', label: 'ACME 1TB' }, size: '0' },
-          { ...row, hostType: { value: 'acme_2tb', label: 'ACME 2TB' }, size: 'not-a-number' },
-          { ...row, hostType: { value: 'acme_1tb', label: 'ACME 1TB' }, size: '3' },
+          { ...row, hostType: '', size: '3' },
+          { ...row, hostType: 'acme_1tb', size: '0' },
+          { ...row, hostType: 'acme_2tb', size: 'not-a-number' },
+          { ...row, hostType: 'acme_1tb', size: '3' },
         ],
         network: { podCidr: '', serviceCidr: '' },
       },
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.ts
index d770148b..b0c976a2 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/payload.ts
@@ -37,7 +37,7 @@ export const buildClusterCreatePayload = (
 
   const nodeSets: Record<string, { hostType: string; size: number }> = {};
   for (const row of values.spec.nodeSetRows) {
-    const hostTypeId = row.hostType.value.trim();
+    const hostTypeId = row.hostType;
     const size = Number(row.size);
     if (!hostTypeId || !Number.isFinite(size) || size <= 0) {
       continue;
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.test.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.test.ts
index 8f5ab29f..c72cf987 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.test.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.test.ts
@@ -198,7 +198,7 @@ describe('buildClusterStepSchema', () => {
           nodeSetRows: [
             {
               ...row,
-              hostType: { value: 'acme_1tb', label: 'ACME 1TB' },
+              hostType: 'acme_1tb',
               size: '0',
             },
           ],
@@ -229,13 +229,13 @@ describe('buildClusterStepSchema', () => {
             {
               ...row,
               rowId: 'row-1',
-              hostType: { value: 'acme_1tb', label: 'ACME 1TB' },
+              hostType: 'acme_1tb',
               size: '3',
             },
             {
               ...row,
               rowId: 'row-2',
-              hostType: { value: 'acme_1tb', label: 'ACME 1TB' },
+              hostType: 'acme_1tb',
               size: '2',
             },
           ],
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.ts
index 463dfeb0..db3d5802 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/cluster/schemas.ts
@@ -17,7 +17,6 @@ import {
   cidrsOverlap,
   isValidCidr,
 } from '../../../../../validation/cidr-validation';
-import { labeledResourceRefSchema } from '../../../../Form/labeledResourceRefSchema';
 import {
   getCatalogFieldOverlay,
   hasCatalogFieldDefinition,
@@ -30,7 +29,7 @@ import type { WizardStepId } from '../../stepIds';
 const nodeSetRowSchema = (t: TFunction) =>
   yup.object({
     rowId: yup.string().required(),
-    hostType: labeledResourceRefSchema(t('Host type is required')),
+    hostType: yup.string().required(t('Host type is required')),
     size: yup
       .string()
       .required(t('Pool size is required'))
@@ -115,9 +114,7 @@ const buildClusterFieldDefinitions = (catalogItem: unknown, t: TFunction) => {
       .of(rowSchema)
       .min(1, t('At least one node set is required'))
       .test('unique-host-types', t('Each host type can only be selected once'), (rows) => {
-        const hostTypeIds = (rows ?? [])
-          .map((row) => row?.hostType?.value?.trim() ?? '')
-          .filter(Boolean);
+        const hostTypeIds = (rows ?? []).map((row) => row?.hostType?.trim() ?? '').filter(Boolean);
         return new Set(hostTypeIds).size === hostTypeIds.length;
       }),
     specNetwork: yup.object({
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/clusterAdapter.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/clusterAdapter.ts
index cae549df..80392824 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/clusterAdapter.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/clusterAdapter.ts
@@ -1,108 +1,24 @@
 import { useMemo } from 'react';
 import { type MessageInitShape } from '@bufbuild/protobuf';
-import type { TFunction } from 'i18next';
 
 import { type ClusterCatalogItem, ClusterSchema } from '@osac/types';
 
-import {
-  type ReviewSection,
-  formatReviewScalar,
-  getCatalogFieldOverlay,
-  readCatalogFieldDefinitions,
-  reviewRow,
-} from '../catalogOverlay';
 import { applyClusterCatalogConfigurationDefaults } from './cluster/applyCatalogDefaults';
 import { applyClusterCatalogGeneralDefaults } from './cluster/applyCatalogGeneralDefaults';
 import { applyClusterCatalogNetworkingDefaults } from './cluster/applyCatalogNetworkingDefaults';
 import ClusterConfigurationStep from './cluster/ClusterConfigurationStep';
 import ClusterGeneralStep from './cluster/ClusterGeneralStep';
 import { ClusterNetworkingStep } from './cluster/ClusterNetworkingStep';
+import { ClusterReviewStep } from './cluster/ClusterReviewStep';
 import type { ClusterWizardValues } from './cluster/fields';
-import {
-  CLUSTER_POD_CIDR_WIRE_PATH,
-  CLUSTER_PULL_SECRET_WIRE_PATH,
-  CLUSTER_RELEASE_IMAGE_WIRE_PATH,
-  CLUSTER_SERVICE_CIDR_WIRE_PATH,
-  CLUSTER_SSH_KEY_WIRE_PATH,
-} from './cluster/fields';
 import { buildClusterCreatePayload, createEmptyClusterValues } from './cluster/payload';
 import { buildClusterStepSchema } from './cluster/schemas';
 import type { CatalogProvisionAdapter } from './types';
 import { useClusterCatalogItems } from '../../../../api/v1/cluster-catalog-item';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { formatLabeledResourceRefForReview } from '../../../Form/labeledResourceRef';
 
 export { buildClusterCreatePayload, createEmptyClusterValues } from './cluster/payload';
 
-const formatNodeSetsForReview = (
-  nodeSetRows: ClusterWizardValues['spec']['nodeSetRows'],
-): string => {
-  if (nodeSetRows.length === 0) {
-    return '—';
-  }
-  return nodeSetRows
-    .map((row) => `${formatLabeledResourceRefForReview(row.hostType)}: ${row.size}`)
-    .join(', ');
-};
-
-const buildReviewSections = (
-  values: ClusterWizardValues,
-  catalogItem: ClusterCatalogItem,
-  t: TFunction,
-): ReviewSection[] => {
-  const definitions = readCatalogFieldDefinitions(catalogItem);
-  const sshKeyOverlay = getCatalogFieldOverlay(
-    CLUSTER_SSH_KEY_WIRE_PATH,
-    definitions,
-    t('SSH public key'),
-  );
-  const pullSecretOverlay = getCatalogFieldOverlay(
-    CLUSTER_PULL_SECRET_WIRE_PATH,
-    definitions,
-    t('Pull secret'),
-  );
-  const releaseImageOverlay = getCatalogFieldOverlay(
-    CLUSTER_RELEASE_IMAGE_WIRE_PATH,
-    definitions,
-    t('Release image'),
-  );
-  const podCidrOverlay = getCatalogFieldOverlay(
-    CLUSTER_POD_CIDR_WIRE_PATH,
-    definitions,
-    t('Pod CIDR'),
-  );
-  const serviceCidrOverlay = getCatalogFieldOverlay(
-    CLUSTER_SERVICE_CIDR_WIRE_PATH,
-    definitions,
-    t('Service CIDR'),
-  );
-
-  return [
-    {
-      title: t('catalogProvision.steps.general.title'),
-      rows: [
-        reviewRow(t('Name'), formatReviewScalar(values.metadata.name)),
-        reviewRow(sshKeyOverlay.label, formatReviewScalar(values.spec.sshPublicKey, true)),
-        reviewRow(pullSecretOverlay.label, formatReviewScalar(values.spec.pullSecret, true)),
-      ],
-    },
-    {
-      title: t('catalogProvision.steps.configuration.title'),
-      rows: [
-        reviewRow(releaseImageOverlay.label, formatReviewScalar(values.spec.releaseImage)),
-        reviewRow(t('Node sets'), formatNodeSetsForReview(values.spec.nodeSetRows)),
-      ],
-    },
-    {
-      title: t('catalogProvision.steps.networking.title'),
-      rows: [
-        reviewRow(podCidrOverlay.label, formatReviewScalar(values.spec.network.podCidr)),
-        reviewRow(serviceCidrOverlay.label, formatReviewScalar(values.spec.network.serviceCidr)),
-      ],
-    },
-  ];
-};
-
 export const useClusterAdapter = (): CatalogProvisionAdapter<
   ClusterCatalogItem,
   ClusterWizardValues,
@@ -131,7 +47,7 @@ export const useClusterAdapter = (): CatalogProvisionAdapter<
       GeneralStep: ClusterGeneralStep,
       getStepValidationSchema: (catalogItem, stepId) =>
         buildClusterStepSchema(catalogItem, stepId, t),
-      getReviewSections: (values, catalogItem) => buildReviewSections(values, catalogItem, t),
+      ReviewStep: ClusterReviewStep,
       onCatalogItemSelected: (item, helpers) => {
         helpers.resetForm({
           values: {
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmNetworkingStep.tsx b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmNetworkingStep.tsx
index d1356f05..e532ace8 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmNetworkingStep.tsx
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmNetworkingStep.tsx
@@ -5,7 +5,6 @@ import { useFormikContext } from 'formik';
 import type { ComputeInstanceCatalogItem } from '@osac/types';
 
 import type { ComputeInstanceWizardValues } from './fields';
-import { EMPTY_LABELED_RESOURCE_REF } from './fields';
 import {
   VIRTUAL_NETWORK_READY_LIST_FILTER,
   resourceDisplayName,
@@ -27,7 +26,7 @@ interface Props {
 export const VmNetworkingStep = ({ catalogItem }: Props) => {
   const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<ComputeInstanceWizardValues>();
-  const virtualNetworkId = values.spec.networking.virtualNetwork.value;
+  const virtualNetworkId = values.spec.networking.virtualNetwork;
 
   const {
     data: virtualNetworks = [],
@@ -94,7 +93,7 @@ export const VmNetworkingStep = ({ catalogItem }: Props) => {
     const previous = previousVirtualNetworkIdRef.current;
     previousVirtualNetworkIdRef.current = virtualNetworkId;
     if (previous && previous !== virtualNetworkId) {
-      void setFieldValue('spec.networking.subnet', EMPTY_LABELED_RESOURCE_REF);
+      void setFieldValue('spec.networking.subnet', '');
       void setFieldValue('spec.networking.securityGroups', []);
     }
   }, [setFieldValue, virtualNetworkId]);
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmReviewStep.tsx b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmReviewStep.tsx
new file mode 100644
index 00000000..3da6f2a1
--- /dev/null
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/VmReviewStep.tsx
@@ -0,0 +1,180 @@
+import {
+  Alert,
+  Bullseye,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+
+import { useInstanceType } from '@osac/ui-components/api/v1/instance-types';
+import {
+  useSecurityGroups,
+  useSubnet,
+  useVirtualNetwork,
+} from '@osac/ui-components/api/v1/networking';
+import { CatalogItem } from '@osac/ui-components/components/catalog/catalogItemDisplay';
+import { formatInstanceTypeReviewLabelFromType } from '@osac/ui-components/components/vm/utils';
+import { getErrorMessage } from '@osac/ui-components/utils/error';
+
+import { ComputeInstanceWizardValues } from './fields';
+import { useTranslation } from '../../../../../hooks/useTranslation';
+import { formatBootDiskSizeForReview, formatReviewScalar } from '../../catalogOverlay';
+
+interface Props {
+  catalogItem: CatalogItem | null;
+}
+
+export const VmReviewStep = ({ catalogItem }: Props) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<ComputeInstanceWizardValues>();
+
+  const {
+    data: instanceType,
+    isLoading: instanceLoading,
+    error: instanceErr,
+  } = useInstanceType(values.spec.instanceType);
+
+  const {
+    data: virtualNetwork,
+    isLoading: virtNetLoading,
+    error: virtNetErr,
+  } = useVirtualNetwork(values.spec.networking.virtualNetwork);
+
+  const {
+    data: subnet,
+    isLoading: subnetLoading,
+    error: subnetError,
+  } = useSubnet(values.spec.networking.subnet);
+
+  const {
+    data: securityGroups,
+    isLoading: scLoading,
+    error: scError,
+  } = useSecurityGroups({
+    filter: `this.id in [${values.spec.networking.securityGroups.map((sc) => `"${sc}"`).join(',')}]`,
+  });
+
+  if (instanceLoading || virtNetLoading || subnetLoading || scLoading) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return (
+    <Stack hasGutter>
+      {!!instanceErr && (
+        <StackItem>
+          <Alert variant="warning" isInline title={t('Failed to fetch instance type')}>
+            {getErrorMessage(instanceErr)}
+          </Alert>
+        </StackItem>
+      )}
+      {!!virtNetErr && (
+        <StackItem>
+          <Alert variant="warning" isInline title={t('Failed to fetch virtual network')}>
+            {getErrorMessage(virtNetErr)}
+          </Alert>
+        </StackItem>
+      )}
+      {!!subnetError && (
+        <StackItem>
+          <Alert variant="warning" isInline title={t('Failed to fetch subnet')}>
+            {getErrorMessage(subnetError)}
+          </Alert>
+        </StackItem>
+      )}
+      {!!scError && (
+        <StackItem>
+          <Alert variant="warning" isInline title={t('Failed to fetch security groups')}>
+            {getErrorMessage(scError)}
+          </Alert>
+        </StackItem>
+      )}
+      <StackItem>
+        <DescriptionList
+          isHorizontal
+          isCompact
+          aria-label={t('catalogProvision.steps.review.title')}
+        >
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Catalog item')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {catalogItem?.title || catalogItem?.metadata?.name || '—'}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Name')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.metadata.name)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('SSH public key')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.sshPublicKey)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('VM image')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.image.sourceRef)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Instance type')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatInstanceTypeReviewLabelFromType(
+                instanceType,
+                undefined,
+                values.spec.instanceType,
+              )}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Boot disk')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatBootDiskSizeForReview(values.spec.bootDisk.sizeGib)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('User Data')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {formatReviewScalar(values.spec.userData)}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Virtual network')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {virtualNetwork?.metadata?.name || values.spec.networking.virtualNetwork}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Subnet')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {subnet?.metadata?.name || values.spec.networking.subnet}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('Security groups')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {values.spec.networking.securityGroups
+                .map((sc) => securityGroups?.find(({ id }) => id === sc)?.metadata?.name || sc)
+                .join(', ')}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </StackItem>
+    </Stack>
+  );
+};
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/fields.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/fields.ts
index b836ed74..5c83e225 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/fields.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/fields.ts
@@ -1,13 +1,10 @@
-import type { LabeledResourceRef } from '../../../../Form/labeledResourceRef';
-import { EMPTY_LABELED_RESOURCE_REF } from '../../../../Form/labeledResourceRef';
-
 /** VMs are always created in the running state; stop/start is handled on the details page. */
 export const VM_CREATE_RUN_STRATEGY = 'Always' as const;
 
 export interface ComputeInstanceNetworkingValues {
-  virtualNetwork: LabeledResourceRef;
-  subnet: LabeledResourceRef;
-  securityGroups: LabeledResourceRef[];
+  virtualNetwork: string;
+  subnet: string;
+  securityGroups: string[];
 }
 
 export interface ComputeInstanceWizardValues {
@@ -20,7 +17,7 @@ export interface ComputeInstanceWizardValues {
     image: {
       sourceRef: string;
     };
-    instanceType: LabeledResourceRef;
+    instanceType: string;
     userData: string;
     bootDisk: {
       sizeGib: string;
@@ -29,8 +26,6 @@ export interface ComputeInstanceWizardValues {
   };
 }
 
-export { EMPTY_LABELED_RESOURCE_REF };
-
 export const VM_SSH_KEY_WIRE_PATH = 'ssh_public_key';
 export const VM_SSH_KEY_FORM_PATH = 'spec.sshPublicKey';
 export const vmSshPublicKeyWirePath = VM_SSH_KEY_WIRE_PATH;
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/generalFields.test.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/generalFields.test.ts
index 8a56c69c..493cbc78 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/generalFields.test.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/generalFields.test.ts
@@ -57,9 +57,9 @@ describe('buildComputeInstanceCreatePayload ssh key', () => {
         sshPublicKey: 'ssh-ed25519 locked',
         image: { sourceRef: 'quay.io/example/rhel9' },
         networking: {
-          virtualNetwork: { value: 'vn-1', label: 'tenant-vn' },
-          subnet: { value: 'subnet-1', label: 'tenant-subnet' },
-          securityGroups: [{ value: 'sg-1', label: 'default-sg' }],
+          virtualNetwork: 'vn-1',
+          subnet: 'subnet-1',
+          securityGroups: ['sg-1'],
         },
       },
     };
@@ -80,9 +80,9 @@ describe('buildComputeInstanceCreatePayload ssh key', () => {
         sshPublicKey: 'ssh-ed25519 default',
         image: { sourceRef: 'quay.io/example/rhel9' },
         networking: {
-          virtualNetwork: { value: 'vn-1', label: 'tenant-vn' },
-          subnet: { value: 'subnet-1', label: 'tenant-subnet' },
-          securityGroups: [{ value: 'sg-1', label: 'default-sg' }],
+          virtualNetwork: 'vn-1',
+          subnet: 'subnet-1',
+          securityGroups: ['sg-1'],
         },
       },
     };
@@ -102,9 +102,9 @@ describe('buildComputeInstanceCreatePayload ssh key', () => {
         ...createEmptyComputeInstanceValues().spec,
         image: { sourceRef: 'quay.io/example/rhel9' },
         networking: {
-          virtualNetwork: { value: 'vn-1', label: 'tenant-vn' },
-          subnet: { value: 'subnet-1', label: 'tenant-subnet' },
-          securityGroups: [{ value: 'sg-1', label: 'default-sg' }],
+          virtualNetwork: 'vn-1',
+          subnet: 'subnet-1',
+          securityGroups: ['sg-1'],
         },
       },
     };
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/payload.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/payload.ts
index 94307109..8419dbce 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/payload.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/payload.ts
@@ -3,7 +3,7 @@ import { type MessageInitShape } from '@bufbuild/protobuf';
 import { type ComputeInstanceCatalogItem, ComputeInstanceSchema } from '@osac/types';
 
 import type { ComputeInstanceWizardValues } from './fields';
-import { EMPTY_LABELED_RESOURCE_REF, VM_CREATE_RUN_STRATEGY } from './fields';
+import { VM_CREATE_RUN_STRATEGY } from './fields';
 
 export const createEmptyComputeInstanceValues = (): ComputeInstanceWizardValues => ({
   catalogItemId: '',
@@ -11,12 +11,12 @@ export const createEmptyComputeInstanceValues = (): ComputeInstanceWizardValues
   spec: {
     sshPublicKey: '',
     image: { sourceRef: '' },
-    instanceType: EMPTY_LABELED_RESOURCE_REF,
+    instanceType: '',
     userData: '',
     bootDisk: { sizeGib: '' },
     networking: {
-      virtualNetwork: EMPTY_LABELED_RESOURCE_REF,
-      subnet: EMPTY_LABELED_RESOURCE_REF,
+      virtualNetwork: '',
+      subnet: '',
       securityGroups: [],
     },
   },
@@ -26,11 +26,9 @@ export const buildComputeInstanceCreatePayload = (
   values: ComputeInstanceWizardValues,
   catalogItem: ComputeInstanceCatalogItem,
 ): MessageInitShape<typeof ComputeInstanceSchema> => {
-  const instanceType = values.spec.instanceType.value.trim();
-
   const spec: MessageInitShape<typeof ComputeInstanceSchema>['spec'] = {
     catalogItem: catalogItem.id,
-    instanceType,
+    instanceType: values.spec.instanceType,
     image: {
       sourceType: 'registry',
       sourceRef: values.spec.image.sourceRef.trim(),
@@ -38,8 +36,8 @@ export const buildComputeInstanceCreatePayload = (
     runStrategy: VM_CREATE_RUN_STRATEGY,
     networkAttachments: [
       {
-        subnet: values.spec.networking.subnet.value,
-        securityGroups: values.spec.networking.securityGroups.map((group) => group.value),
+        subnet: values.spec.networking.subnet,
+        securityGroups: values.spec.networking.securityGroups,
       },
     ],
   };
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.test.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.test.ts
index e5354236..3c964013 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.test.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.test.ts
@@ -5,7 +5,6 @@ import type { ComputeInstanceCatalogItem } from '@osac/types';
 import { tIdentity } from '@osac/ui-components/test-utils/i18n';
 
 import type { ComputeInstanceWizardValues } from './fields';
-import { EMPTY_LABELED_RESOURCE_REF } from './fields';
 import { buildComputeInstanceStepSchema } from './schemas';
 
 const vmCatalogItem: ComputeInstanceCatalogItem = {
@@ -46,12 +45,12 @@ const emptyValues: ComputeInstanceWizardValues = {
   spec: {
     sshPublicKey: '',
     image: { sourceRef: '' },
-    instanceType: EMPTY_LABELED_RESOURCE_REF,
+    instanceType: '',
     userData: '',
     bootDisk: { sizeGib: '' },
     networking: {
-      virtualNetwork: EMPTY_LABELED_RESOURCE_REF,
-      subnet: EMPTY_LABELED_RESOURCE_REF,
+      virtualNetwork: '',
+      subnet: '',
       securityGroups: [],
     },
   },
@@ -140,7 +139,7 @@ describe('buildComputeInstanceStepSchema', () => {
         spec: {
           ...emptyValues.spec,
           image: { sourceRef: 'quay.io/example/rhel9' },
-          instanceType: { value: 'standard-4-8', label: 'standard-4-8' },
+          instanceType: 'standard-4-8',
           bootDisk: { sizeGib: 'not-a-number' },
         },
       },
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.ts
index 9903c2fe..58f153bf 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstance/schemas.ts
@@ -4,10 +4,6 @@ import * as yup from 'yup';
 import { resourceNameSchema } from '@osac/ui-components/validation/resource-name';
 import { userDataSchema } from '@osac/ui-components/validation/user-data';
 
-import {
-  labeledResourceRefArraySchema,
-  labeledResourceRefSchema,
-} from '../../../../Form/labeledResourceRefSchema';
 import {
   getCatalogFieldOverlay,
   hasCatalogFieldDefinition,
@@ -64,9 +60,7 @@ const buildComputeInstanceFieldDefinitions = (catalogItem: unknown, t: TFunction
         t('catalogProvision.validation.imageRequired'),
       ),
     }),
-    specInstanceType: labeledResourceRefSchema(
-      t('catalogProvision.validation.instanceTypeRequired'),
-    ),
+    specInstanceType: yup.string().required(t('catalogProvision.validation.instanceTypeRequired')),
     specUserData: mergeCatalogValidation(
       userDataSchema(t),
       userDataOverlay,
@@ -88,13 +82,11 @@ const buildComputeInstanceFieldDefinitions = (catalogItem: unknown, t: TFunction
       ),
     }),
     specNetworking: yup.object({
-      virtualNetwork: labeledResourceRefSchema(
-        t('catalogProvision.validation.virtualNetworkRequired'),
-      ),
-      subnet: labeledResourceRefSchema(t('catalogProvision.validation.subnetRequired')),
-      securityGroups: labeledResourceRefArraySchema(
-        t('catalogProvision.validation.securityGroupRequired'),
-      ),
+      virtualNetwork: yup
+        .string()
+        .required(t('catalogProvision.validation.virtualNetworkRequired')),
+      subnet: yup.string().required(t('catalogProvision.validation.subnetRequired')),
+      securityGroups: yup.array().min(1, t('catalogProvision.validation.securityGroupRequired')),
     }),
   };
 };
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstanceAdapter.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstanceAdapter.ts
index 6b5a51e0..a1825bd2 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstanceAdapter.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/computeInstanceAdapter.ts
@@ -1,17 +1,8 @@
 import { useMemo } from 'react';
 import { type MessageInitShape } from '@bufbuild/protobuf';
-import type { TFunction } from 'i18next';
 
 import { type ComputeInstanceCatalogItem, ComputeInstanceSchema } from '@osac/types';
 
-import {
-  type ReviewSection,
-  formatBootDiskSizeForReview,
-  formatReviewScalar,
-  getCatalogFieldOverlay,
-  readCatalogFieldDefinitions,
-  reviewRow,
-} from '../catalogOverlay';
 import { applyVmCatalogConfigurationDefaults } from './computeInstance/applyCatalogDefaults';
 import { applyVmCatalogGeneralDefaults } from './computeInstance/applyCatalogGeneralDefaults';
 import type { ComputeInstanceWizardValues } from './computeInstance/fields';
@@ -23,86 +14,16 @@ import { buildComputeInstanceStepSchema } from './computeInstance/schemas';
 import { VmConfigurationStep } from './computeInstance/VmConfigurationStep';
 import VmGeneralStep from './computeInstance/VmGeneralStep';
 import { VmNetworkingStep } from './computeInstance/VmNetworkingStep';
+import { VmReviewStep } from './computeInstance/VmReviewStep';
 import type { CatalogProvisionAdapter } from './types';
 import { useComputeInstanceCatalogItems } from '../../../../api/v1/compute-instance-catalog-item';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import {
-  formatLabeledResourceRefForReview,
-  formatLabeledResourceRefsForReview,
-} from '../../../Form/labeledResourceRef';
 
 export {
   buildComputeInstanceCreatePayload,
   createEmptyComputeInstanceValues,
 } from './computeInstance/payload';
 
-const buildReviewSections = (
-  values: ComputeInstanceWizardValues,
-  catalogItem: ComputeInstanceCatalogItem,
-  t: TFunction,
-): ReviewSection[] => {
-  const definitions = readCatalogFieldDefinitions(catalogItem);
-  const imageOverlay = getCatalogFieldOverlay(
-    'spec.image.source_ref',
-    definitions,
-    t('catalogProvision.vm.fields.image'),
-  );
-  const userDataOverlay = getCatalogFieldOverlay(
-    'spec.user_data',
-    definitions,
-    t('catalogProvision.vm.fields.userData'),
-  );
-  const bootDiskOverlay = getCatalogFieldOverlay(
-    'spec.boot_disk.size_gib',
-    definitions,
-    t('catalogProvision.vm.fields.bootDisk'),
-  );
-  const sshKeyOverlay = getCatalogFieldOverlay(
-    'ssh_public_key',
-    definitions,
-    t('catalogProvision.vm.fields.sshKey'),
-  );
-
-  return [
-    {
-      title: t('catalogProvision.steps.general.title'),
-      rows: [
-        reviewRow(t('catalogProvision.vm.fields.name'), formatReviewScalar(values.metadata.name)),
-        reviewRow(sshKeyOverlay.label, formatReviewScalar(values.spec.sshPublicKey, true)),
-      ],
-    },
-    {
-      title: t('catalogProvision.steps.configuration.title'),
-      rows: [
-        reviewRow(imageOverlay.label, formatReviewScalar(values.spec.image.sourceRef)),
-        reviewRow(
-          t('catalogProvision.vm.fields.instanceType'),
-          formatLabeledResourceRefForReview(values.spec.instanceType),
-        ),
-        reviewRow(bootDiskOverlay.label, formatBootDiskSizeForReview(values.spec.bootDisk.sizeGib)),
-        reviewRow(userDataOverlay.label, formatReviewScalar(values.spec.userData, true)),
-      ],
-    },
-    {
-      title: t('catalogProvision.steps.networking.title'),
-      rows: [
-        reviewRow(
-          t('catalogProvision.vm.fields.virtualNetwork'),
-          formatLabeledResourceRefForReview(values.spec.networking.virtualNetwork),
-        ),
-        reviewRow(
-          t('catalogProvision.vm.fields.subnet'),
-          formatLabeledResourceRefForReview(values.spec.networking.subnet),
-        ),
-        reviewRow(
-          t('catalogProvision.vm.fields.securityGroup'),
-          formatLabeledResourceRefsForReview(values.spec.networking.securityGroups),
-        ),
-      ],
-    },
-  ];
-};
-
 export const useComputeInstanceAdapter = (): CatalogProvisionAdapter<
   ComputeInstanceCatalogItem,
   ComputeInstanceWizardValues,
@@ -131,7 +52,7 @@ export const useComputeInstanceAdapter = (): CatalogProvisionAdapter<
       GeneralStep: VmGeneralStep,
       getStepValidationSchema: (catalogItem, stepId) =>
         buildComputeInstanceStepSchema(catalogItem, stepId, t),
-      getReviewSections: (values, catalogItem) => buildReviewSections(values, catalogItem, t),
+      ReviewStep: VmReviewStep,
       onCatalogItemSelected: (item, helpers) => {
         helpers.resetForm({
           values: {
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/adapters/types.ts b/libs/ui-components/src/components/catalogProvision/wizard/adapters/types.ts
index 05c6987e..7c7ec999 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/adapters/types.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/adapters/types.ts
@@ -4,7 +4,6 @@ import type { AnyObjectSchema } from 'yup';
 
 import type { CatalogItem } from '../../../catalog/catalogItemDisplay';
 import type { CatalogProvisionKind } from '../../catalogFieldDefinition';
-import type { ReviewSection } from '../catalogOverlay';
 import type { WizardStepId } from '../stepIds';
 
 export interface CatalogItemsQueryResult<TItem extends CatalogItem> {
@@ -35,11 +34,11 @@ export interface CatalogProvisionAdapter<TItem extends CatalogItem, TValues, TPa
   ConfigurationStep: ComponentType<{ catalogItem: TItem | null }>;
   NetworkingStep: ComponentType<{ catalogItem: TItem | null }>;
   GeneralStep: ComponentType<{ catalogItem: TItem | null }>;
+  ReviewStep: ComponentType<{ catalogItem: TItem | null }>;
   getStepValidationSchema: (
     catalogItem: TItem | null,
     stepId: WizardStepId,
   ) => AnyObjectSchema | undefined;
-  getReviewSections: (values: TValues, catalogItem: TItem) => ReviewSection[];
   onCatalogItemSelected?: (item: TItem, helpers: FormikHelpers<TValues>) => void | Promise<void>;
   wizardTitleKey: string;
   wizardDescriptionKey: string;
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/catalogOverlay.ts b/libs/ui-components/src/components/catalogProvision/wizard/catalogOverlay.ts
index 84b76294..c3d62539 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/catalogOverlay.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/catalogOverlay.ts
@@ -1,4 +1,3 @@
-import type { TFunction } from 'i18next';
 import type { AnySchema } from 'yup';
 import * as yup from 'yup';
 
@@ -211,12 +210,3 @@ export const formatBootDiskSizeForReview = (value: unknown): string => {
   }
   return `${formatted} GB`;
 };
-
-export type ReviewSection = {
-  title: string;
-  rows: Array<{ label: string; value: string }>;
-};
-
-export const reviewRow = (label: string, value: string) => ({ label, value });
-
-export type TranslateFn = TFunction;
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/stepIds.ts b/libs/ui-components/src/components/catalogProvision/wizard/stepIds.ts
index 6eece8c2..8c883a43 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/stepIds.ts
+++ b/libs/ui-components/src/components/catalogProvision/wizard/stepIds.ts
@@ -1,22 +1,18 @@
+import { TFunction } from 'i18next';
+
 import { CatalogProvisionKind } from '../catalogFieldDefinition';
 
-export const WIZARD_STEP_IDS = [
-  'catalog',
-  'general',
-  'configuration',
-  'networking',
-  'review',
-] as const;
+export const WIZARD_STEP_IDS = ['catalog', 'general', 'configuration', 'networking', 'review'];
 
 export type WizardStepId = (typeof WIZARD_STEP_IDS)[number];
 
-export const STEP_LABEL_KEYS: Record<WizardStepId, string> = {
-  catalog: 'catalogProvision.steps.catalog.title',
-  general: 'catalogProvision.steps.general.title',
-  configuration: 'catalogProvision.steps.configuration.title',
-  networking: 'catalogProvision.steps.networking.title',
-  review: 'catalogProvision.steps.review.title',
-};
+export const STEP_LABEL_KEYS = (t: TFunction): Record<WizardStepId, string> => ({
+  catalog: t('Catalog item'),
+  general: t('General'),
+  configuration: t('Configuration'),
+  networking: t('Networking'),
+  review: t('Review'),
+});
 
 const BARE_METAL_WIZARD_STEPS: readonly WizardStepId[] = [
   'catalog',
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/steps/ReviewStep.tsx b/libs/ui-components/src/components/catalogProvision/wizard/steps/ReviewStep.tsx
deleted file mode 100644
index c51f331b..00000000
--- a/libs/ui-components/src/components/catalogProvision/wizard/steps/ReviewStep.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListGroup,
-  DescriptionListTerm,
-} from '@patternfly/react-core';
-
-import { CatalogItem } from '@osac/ui-components/components/catalog/catalogItemDisplay';
-
-import { useTranslation } from '../../../../hooks/useTranslation';
-import type { CatalogProvisionAdapter } from '../adapters/types';
-
-interface Props<TItem extends CatalogItem, TValues extends { catalogItemId: string }, TPayload> {
-  adapter: CatalogProvisionAdapter<TItem, TValues, TPayload>;
-  catalogItem: TItem | null;
-  values: TValues;
-}
-
-export const ReviewStep = <
-  TItem extends CatalogItem,
-  TValues extends { catalogItemId: string },
-  TPayload,
->({
-  adapter,
-  catalogItem,
-  values,
-}: Props<TItem, TValues, TPayload>) => {
-  const { t } = useTranslation();
-  const sections = catalogItem ? adapter.getReviewSections(values, catalogItem) : [];
-  const rows = sections.flatMap((section) => section.rows);
-
-  return (
-    <DescriptionList isHorizontal isCompact aria-label={t('catalogProvision.steps.review.title')}>
-      <DescriptionListGroup>
-        <DescriptionListTerm>{t('catalogProvision.review.catalogItem')}</DescriptionListTerm>
-        <DescriptionListDescription>{catalogItem?.title ?? '—'}</DescriptionListDescription>
-      </DescriptionListGroup>
-      {rows.map((row) => (
-        <DescriptionListGroup key={row.label}>
-          <DescriptionListTerm>{row.label}</DescriptionListTerm>
-          <DescriptionListDescription>{row.value}</DescriptionListDescription>
-        </DescriptionListGroup>
-      ))}
-    </DescriptionList>
-  );
-};
diff --git a/libs/ui-components/src/components/catalogProvision/wizard/steps/WizardSteps.tsx b/libs/ui-components/src/components/catalogProvision/wizard/steps/WizardSteps.tsx
index f370c685..c167885c 100644
--- a/libs/ui-components/src/components/catalogProvision/wizard/steps/WizardSteps.tsx
+++ b/libs/ui-components/src/components/catalogProvision/wizard/steps/WizardSteps.tsx
@@ -1,2 +1 @@
 export { CatalogStep } from './CatalogStep';
-export { ReviewStep } from './ReviewStep';
diff --git a/libs/ui-components/src/components/networking/SecurityGroupCreateModal.tsx b/libs/ui-components/src/components/networking/SecurityGroupCreateModal.tsx
index aaf4d1d3..66110577 100644
--- a/libs/ui-components/src/components/networking/SecurityGroupCreateModal.tsx
+++ b/libs/ui-components/src/components/networking/SecurityGroupCreateModal.tsx
@@ -18,7 +18,6 @@ import type { SecurityGroupSchema } from '@osac/types';
 
 import { useCreateSecurityGroup, useVirtualNetworks } from '../../api/v1/networking';
 import { InputField } from '../../components/Form/InputField';
-import { labeledResourceRefSchema } from '../../components/Form/labeledResourceRefSchema';
 import OsacForm from '../../components/Form/OsacForm';
 import { SelectField } from '../../components/Form/SelectField';
 import { useTranslation } from '../../hooks/useTranslation';
@@ -32,13 +31,13 @@ interface SecurityGroupCreateModalProps {
 
 interface FormValues {
   name: string;
-  virtualNetwork: { value: string; label: string };
+  virtualNetwork: string;
 }
 
 const validationSchema = (t: TFunction) =>
   Yup.object({
     name: Yup.string().required(t('Name is required')),
-    virtualNetwork: labeledResourceRefSchema(t('Virtual network is required')),
+    virtualNetwork: Yup.string().required(t('Virtual network is required')),
   });
 
 export const SecurityGroupCreateModal = ({
@@ -55,26 +54,19 @@ export const SecurityGroupCreateModal = ({
     label: `${vn.metadata?.name ?? vn.id} (${vn.spec?.ipv4Cidr ?? ''})`,
   }));
 
-  const preselectedVirtualNetwork = virtualNetworkId
-    ? (virtualNetworkOptions.find((option) => option.value === virtualNetworkId) ?? {
-        value: virtualNetworkId,
-        label: virtualNetworkId,
-      })
-    : { value: '', label: '' };
-
   return (
     <Formik<FormValues>
       enableReinitialize
       initialValues={{
         name: '',
-        virtualNetwork: preselectedVirtualNetwork,
+        virtualNetwork: virtualNetworkId || '',
       }}
       validationSchema={validationSchema(t)}
       onSubmit={async (values) => {
         try {
           const body: MessageInitShape<typeof SecurityGroupSchema> = {
             metadata: { name: values.name },
-            spec: { virtualNetwork: values.virtualNetwork.value, ingress: [], egress: [] },
+            spec: { virtualNetwork: values.virtualNetwork, ingress: [], egress: [] },
           };
           const sg = await createSecurityGroup.mutateAsync(body);
           navigate(`/networking/security-groups/${sg.id}`);
diff --git a/libs/ui-components/src/components/networking/SecurityGroupRuleForm.tsx b/libs/ui-components/src/components/networking/SecurityGroupRuleForm.tsx
index fcc5766c..95e94efc 100644
--- a/libs/ui-components/src/components/networking/SecurityGroupRuleForm.tsx
+++ b/libs/ui-components/src/components/networking/SecurityGroupRuleForm.tsx
@@ -5,11 +5,10 @@ import { Protocol } from '@osac/types';
 import { protocolToString } from './SecurityGroupRulesTable';
 import { useTranslation } from '../../hooks/useTranslation';
 import { InputField } from '../Form/InputField';
-import type { LabeledResourceRef } from '../Form/labeledResourceRef';
 import { SelectField } from '../Form/SelectField';
 
 export interface RuleFormValues {
-  protocol: LabeledResourceRef;
+  protocol: number;
   portFrom: string;
   portTo: string;
   ipv4Cidr: string;
@@ -21,15 +20,13 @@ export const SecurityGroupRuleForm = () => {
   const { values } = useFormikContext<RuleFormValues>();
 
   const protocolOptions = [
-    { value: String(Protocol.TCP), label: protocolToString(Protocol.TCP, t) },
-    { value: String(Protocol.UDP), label: protocolToString(Protocol.UDP, t) },
-    { value: String(Protocol.ICMP), label: protocolToString(Protocol.ICMP, t) },
-    { value: String(Protocol.ALL), label: protocolToString(Protocol.ALL, t) },
+    { value: Protocol.TCP, label: protocolToString(Protocol.TCP, t) },
+    { value: Protocol.UDP, label: protocolToString(Protocol.UDP, t) },
+    { value: Protocol.ICMP, label: protocolToString(Protocol.ICMP, t) },
+    { value: Protocol.ALL, label: protocolToString(Protocol.ALL, t) },
   ];
 
-  const showPortRange =
-    values.protocol.value === String(Protocol.TCP) ||
-    values.protocol.value === String(Protocol.UDP);
+  const showPortRange = values.protocol === Protocol.TCP || values.protocol === Protocol.UDP;
 
   return (
     <>
diff --git a/libs/ui-components/src/components/networking/SecurityGroupRuleModal.tsx b/libs/ui-components/src/components/networking/SecurityGroupRuleModal.tsx
index f05e61ec..5f85192e 100644
--- a/libs/ui-components/src/components/networking/SecurityGroupRuleModal.tsx
+++ b/libs/ui-components/src/components/networking/SecurityGroupRuleModal.tsx
@@ -17,19 +17,16 @@ import * as Yup from 'yup';
 import { Protocol, type SecurityGroup, SecurityGroupSchema, type SecurityRule } from '@osac/types';
 
 import { type RuleFormValues, SecurityGroupRuleForm } from './SecurityGroupRuleForm';
-import { protocolToString } from './SecurityGroupRulesTable';
 import { toPlainRule } from './securityGroupRuleUtils';
 import { useUpdateSecurityGroup } from '../../api/v1/networking';
 import { useTranslation } from '../../hooks/useTranslation';
 import { getErrorMessage } from '../../utils/error';
-import { labeledResourceRefSchema } from '../Form/labeledResourceRefSchema';
 
 const createRuleValidationSchema = (t: TFunction) =>
   Yup.object({
-    protocol: labeledResourceRefSchema(t('Protocol is required')),
+    protocol: Yup.number().required(t('Protocol is required')),
     portFrom: Yup.string().when('protocol', {
-      is: (protocol: { value?: string }) =>
-        protocol?.value === String(Protocol.TCP) || protocol?.value === String(Protocol.UDP),
+      is: (protocol: number) => protocol === Protocol.TCP || protocol === Protocol.UDP,
       then: (schema) =>
         schema
           .required(t('Port From is required for TCP/UDP'))
@@ -44,8 +41,7 @@ const createRuleValidationSchema = (t: TFunction) =>
       otherwise: (schema) => schema.notRequired(),
     }),
     portTo: Yup.string().when('protocol', {
-      is: (protocol: { value?: string }) =>
-        protocol?.value === String(Protocol.TCP) || protocol?.value === String(Protocol.UDP),
+      is: (protocol: number) => protocol === Protocol.TCP || protocol === Protocol.UDP,
       then: (schema) =>
         schema
           .required(t('Port To is required for TCP/UDP'))
@@ -121,10 +117,7 @@ export const SecurityGroupRuleModal = ({
     ruleIndex !== undefined ? securityGroup.spec?.[direction]?.[ruleIndex] : undefined;
 
   const defaultValues: RuleFormValues = {
-    protocol: {
-      value: String(initialValues?.protocol ?? Protocol.TCP),
-      label: protocolToString(initialValues?.protocol ?? Protocol.TCP, t),
-    },
+    protocol: initialValues?.protocol ?? Protocol.TCP,
     portFrom: initialValues?.portFrom?.toString() ?? '',
     portTo: initialValues?.portTo?.toString() ?? '',
     ipv4Cidr: initialValues?.ipv4Cidr ?? '',
@@ -134,7 +127,7 @@ export const SecurityGroupRuleModal = ({
   const handleSubmit = async (values: RuleFormValues) => {
     try {
       const rule = {
-        protocol: Number(values.protocol.value),
+        protocol: values.protocol,
         ...(values.portFrom &&
           String(values.portFrom).trim() !== '' && {
             portFrom: parseInt(String(values.portFrom), 10),
diff --git a/libs/ui-components/src/components/vm/DetailsPage/AttachExternalIpModal.tsx b/libs/ui-components/src/components/vm/DetailsPage/AttachExternalIpModal.tsx
index 96d8e524..8fcd903e 100644
--- a/libs/ui-components/src/components/vm/DetailsPage/AttachExternalIpModal.tsx
+++ b/libs/ui-components/src/components/vm/DetailsPage/AttachExternalIpModal.tsx
@@ -15,7 +15,6 @@ import * as Yup from 'yup';
 import type { ComputeInstance } from '@osac/types';
 
 import { useAttachExternalIp, useExternalIPPools } from '../../../api/v1/external-ip';
-import { labeledResourceRefSchema } from '../../../components/Form/labeledResourceRefSchema';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { getErrorMessage } from '../../../utils/error';
 import OsacForm from '../../Form/OsacForm';
@@ -28,12 +27,12 @@ interface AttachExternalIpModalProps {
 }
 
 interface FormValues {
-  pool: { value: string; label: string };
+  pool: string;
 }
 
 const validationSchema = (t: TFunction) =>
   Yup.object({
-    pool: labeledResourceRefSchema(t('An external IP pool is required')),
+    pool: Yup.string().required(t('An external IP pool is required')),
   });
 
 const AttachExternalIpModal = ({ vm, onClose, onSuccess }: AttachExternalIpModalProps) => {
@@ -49,13 +48,13 @@ const AttachExternalIpModal = ({ vm, onClose, onSuccess }: AttachExternalIpModal
 
   return (
     <Formik<FormValues>
-      initialValues={{ pool: { value: '', label: '' } }}
+      initialValues={{ pool: '' }}
       validationSchema={validationSchema(t)}
       onSubmit={async (values) => {
         try {
           await attachExternalIp.mutateAsync({
             computeInstanceId: vm.id,
-            pool: values.pool.value,
+            pool: values.pool,
           });
           onSuccess();
         } catch {
diff --git a/libs/ui-components/src/test-utils/createMockConnectTransport.ts b/libs/ui-components/src/test-utils/createMockConnectTransport.ts
index 6128342b..5682cff6 100644
--- a/libs/ui-components/src/test-utils/createMockConnectTransport.ts
+++ b/libs/ui-components/src/test-utils/createMockConnectTransport.ts
@@ -206,6 +206,9 @@ export const createMockConnectTransport = (
               matchesVirtualNetworkScopeFilter(req.filter, undefined),
           ),
         }),
+        get: (req) => ({
+          object: virtualNetworks.find((i) => i.id === req.id),
+        }),
       });
 
       router.service(Subnets, {
@@ -216,6 +219,9 @@ export const createMockConnectTransport = (
               matchesVirtualNetworkScopeFilter(req.filter, item.spec?.virtualNetwork),
           ),
         }),
+        get: (req) => ({
+          object: subnets.find((i) => i.id === req.id),
+        }),
       });
 
       router.service(SecurityGroups, {
@@ -234,6 +240,9 @@ export const createMockConnectTransport = (
             matchesInstanceTypeActiveFilter(req.filter, item.spec?.state),
           ),
         }),
+        get: (req) => ({
+          object: instanceTypes.find((i) => i.id === req.id),
+        }),
       });
 
       router.service(IdentityProviders, {