NO-ISSUE: Replace LabeledResourceRef with plain values in Select/Mult…

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."
 }

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) => {

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}
       >

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,51 +45,36 @@ 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 (
       !autoSelectSingleOption ||
       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}

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,14 +224,14 @@ const WizardStepBody = ({
   adapter,
   stepId,
   catalogItem,
-  values,
   provisionError,
   validationAlert,
 }: WizardBodyProps) => {
   const { t } = useTranslation();
   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}
               />