MGMT-19153: Expose osImageVersion field when creating InfraEnv (late-binding)

libs/locales/lib/en/translation.json

@@ -558,6 +558,7 @@
   "ai:No location": "No location",
   "ai:No matching events": "No matching events",
   "ai:No namespace with hosts is available": "No namespace with hosts is available",
+  "ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.": "No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.",
   "ai:No overlapping CIDR": "No overlapping CIDR",
   "ai:No proxy": "No proxy",
   "ai:No proxy domains": "No proxy domains",
@@ -568,6 +569,7 @@
   "ai:No skip missing disk": "No skip missing disk",
   "ai:No subnets are currently available": "No subnets are currently available",
   "ai:No support level data for version {{openshiftVersion}}": "No support level data for version {{openshiftVersion}}",
+  "ai:No version selected": "No version selected",
   "ai:Nodepool": "Nodepool",
   "ai:Nodepool conditions": "Nodepool conditions",
   "ai:Nodepool name": "Nodepool name",

libs/ui-lib/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -169,6 +169,16 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
                   .label ?? CpuArchitecture.x86}
               </DescriptionListDescription>
             </DescriptionListGroup>
+
+            {infraEnv.spec?.osImageVersion && (
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {`OpenShift ${infraEnv.spec?.osImageVersion}`}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            )}
+
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
               <DescriptionListDescription>

libs/ui-lib/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -49,6 +49,8 @@ import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
+import OpenshiftVersionDropdown from './OpenshiftVersionDropdown';
+import { OsImage } from '../../types';
 
 export type EnvironmentStepFormValues = {
   name: string;
@@ -67,6 +69,7 @@ export type EnvironmentStepFormValues = {
   >;
   enableNtpSources: boolean;
   additionalNtpSources: string;
+  osImageVersion?: string;
 };
 
 const validationSchema = (usedNames: string[], t: TFunction) =>
@@ -116,13 +119,15 @@ const initialValues: EnvironmentStepFormValues = {
   cpuArchitecture: CpuArchitecture.x86,
   enableNtpSources: false,
   additionalNtpSources: '',
+  osImageVersion: '',
 };
 
 type InfraEnvFormProps = {
   onValuesChanged?: (values: EnvironmentStepFormValues) => void;
   pullSecret?: string;
   sshPublicKey?: string;
   docVersion: string;
+  osImages?: OsImage[];
 };
 
 const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
@@ -131,6 +136,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
   pullSecret,
   sshPublicKey,
   docVersion,
+  osImages,
 }) => {
   const { values, setFieldValue } = useFormikContext<EnvironmentStepFormValues>();
   const { t } = useTranslation();
@@ -222,6 +228,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
             </Flex>
           </FormGroup>
           <CpuArchitectureDropdown />
+          {!!osImages && <OpenshiftVersionDropdown osImages={osImages} />}
           <RichInputField
             label={t('ai:Location')}
             name="location"
@@ -276,6 +283,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   pullSecret?: string;
   sshPublicKey?: string;
   docVersion: string;
+  osImages?: OsImage[];
 };
 
 export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({

libs/ui-lib/lib/cim/components/InfraEnv/OpenshiftVersionDropdown.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
+import { useField } from 'formik';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
+import { OsImage } from '../../types';
+
+const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
+  const { t } = useTranslation();
+  const [{ name, value }, , { setValue }] = useField<string>('osImageVersion');
+  const [{ value: cpuArchitecture }] = useField<string>('cpuArchitecture');
+  const [osImageOpen, setOsImageOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
+
+  const onOsImageSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+    const val = e?.currentTarget.id || '';
+    setValue(val);
+    setOsImageOpen(false);
+  };
+
+  const filteredImages = React.useMemo(
+    () => osImages.filter((image) => image.cpuArchitecture === cpuArchitecture),
+    [osImages, cpuArchitecture],
+  );
+
+  React.useEffect(() => {
+    if (filteredImages.length === 0 && value !== '') {
+      setValue('');
+    }
+  }, [filteredImages.length, setValue, t, value]);
+
+  return (
+    <FormGroup isInline fieldId={fieldId} label={t('ai:OpenShift version')}>
+      <Tooltip
+        content={t(
+          'ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.',
+          architectureData[cpuArchitecture as SupportedCpuArchitecture].label,
+        )}
+        hidden={!!filteredImages.length}
+      >
+        <Dropdown
+          toggle={
+            <DropdownToggle
+              onToggle={() => setOsImageOpen(!osImageOpen)}
+              className="pf-u-w-100"
+              isDisabled={!filteredImages.length}
+            >
+              {value ? `OpenShift ${value}` : t('ai:No version selected')}
+            </DropdownToggle>
+          }
+          name="osImageVersion"
+          isOpen={osImageOpen}
+          onSelect={onOsImageSelect}
+          dropdownItems={[
+            <DropdownItem key={'NO_VALUE'} value={''}>
+              {t('ai:No version selected')}
+            </DropdownItem>,
+            ...filteredImages.map((image) => (
+              <DropdownItem key={image.openshiftVersion} id={image.openshiftVersion}>
+                {`OpenShift ${image.openshiftVersion}`}
+              </DropdownItem>
+            )),
+          ]}
+          className="pf-u-w-100"
+        />
+      </Tooltip>
+    </FormGroup>
+  );
+};
+
+export default OpenshiftVersionDropdown;

libs/ui-lib/lib/cim/types/k8s/agent-service-config.ts

@@ -11,13 +11,21 @@ type StorageConfig = {
   };
 };
 
+export type OsImage = {
+  cpuArchitecture: string;
+  openshiftVersion: string;
+  url: string;
+  version: string;
+};
+
 export type AgentServiceConfigConditionType = 'DeploymentsHealthy' | 'ReconcileCompleted';
 
 export type AgentServiceConfigK8sResource = K8sResourceCommon & {
   spec: {
     databaseStorage: StorageConfig;
     filesystemStorage: StorageConfig;
     imageStorage: StorageConfig;
+    osImages?: OsImage[];
   };
   status?: {
     conditions?: StatusCondition<AgentServiceConfigConditionType>[];

libs/ui-lib/lib/cim/types/k8s/infra-env-k8s-resource.ts

@@ -24,6 +24,7 @@ export type InfraEnvK8sResource = K8sResourceCommon & {
     nmStateConfigLabelSelector?: Selector;
     additionalNTPSources?: string[];
     cpuArchitecture?: 'x86_64' | 'arm64' | 's390x';
+    osImageVersion?: string;
   };
   status?: {
     agentLabelSelector?: Selector;