@openshift-assisted/ui-lib 2.12.1-cim → 2.13.0-cim

package/build/cjs/cim/components/InfraEnv/OpenshiftVersionDropdown.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const formik_1 = require("formik");
+const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
+const common_1 = require("../../../common");
+const OpenshiftVersionDropdown = ({ osImages }) => {
+    const { t } = (0, use_translation_wrapper_1.useTranslation)();
+    const [{ name, value }, , { setValue }] = (0, formik_1.useField)('osImageVersion');
+    const [{ value: cpuArchitecture }] = (0, formik_1.useField)('cpuArchitecture');
+    const [osImageOpen, setOsImageOpen] = React.useState(false);
+    const fieldId = (0, common_1.getFieldId)(name, 'input');
+    const onOsImageSelect = (e) => {
+        const val = (e === null || e === void 0 ? void 0 : 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 (React.createElement(react_core_1.FormGroup, { isInline: true, fieldId: fieldId, label: t('ai:OpenShift version') },
+        React.createElement(react_core_1.Tooltip, { content: t('ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.', common_1.architectureData[cpuArchitecture].label), hidden: !!filteredImages.length },
+            React.createElement(react_core_1.Dropdown, { toggle: React.createElement(react_core_1.DropdownToggle, { onToggle: () => setOsImageOpen(!osImageOpen), className: "pf-u-w-100", isDisabled: !filteredImages.length }, value ? `OpenShift ${value}` : t('ai:No version selected')), name: "osImageVersion", isOpen: osImageOpen, onSelect: onOsImageSelect, dropdownItems: [
+                    React.createElement(react_core_1.DropdownItem, { key: 'NO_VALUE', value: '' }, t('ai:No version selected')),
+                    ...filteredImages.map((image) => (React.createElement(react_core_1.DropdownItem, { key: image.openshiftVersion, id: image.openshiftVersion }, `OpenShift ${image.openshiftVersion}`))),
+                ], className: "pf-u-w-100" }))));
+};
+exports.default = OpenshiftVersionDropdown;
+//# sourceMappingURL=OpenshiftVersionDropdown.js.map

package/build/cjs/cim/components/InfraEnv/OpenshiftVersionDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenshiftVersionDropdown.js","sourceRoot":"","sources":["../../../../../lib/cim/components/InfraEnv/OpenshiftVersionDropdown.tsx"],"names":[],"mappings":"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"}

package/build/cjs/cim/components/common/CpuArchitectureDropdown.js

@@ -7,7 +7,12 @@ const use_translation_wrapper_1 = require("../../../common/hooks/use-translation
 const common_1 = require("../../../common");
 const formik_1 = require("formik");
 const useFormikHelpers_1 = require("../../../common/hooks/useFormikHelpers");
-const CpuArchitectureDropdown = ({ isDisabled = false }) => {
+const allDropdownItems = {
+    [common_1.CpuArchitecture.x86]: (React.createElement(react_core_1.DropdownItem, { key: 'x86_64', id: "x86_64", description: common_1.architectureData['x86_64'].description }, common_1.architectureData['x86_64'].label)),
+    [common_1.CpuArchitecture.ARM]: (React.createElement(react_core_1.DropdownItem, { key: 'arm64', id: "arm64", description: common_1.architectureData['arm64'].description }, common_1.architectureData['arm64'].label)),
+    [common_1.CpuArchitecture.s390x]: (React.createElement(react_core_1.DropdownItem, { key: 's390x', id: "s390x", description: common_1.architectureData['s390x'].description }, common_1.architectureData['s390x'].label)),
+};
+const CpuArchitectureDropdown = ({ isDisabled = false, cpuArchitectures, }) => {
     const { t } = (0, use_translation_wrapper_1.useTranslation)();
     const [{ name, value }, , { setValue }] = (0, formik_1.useField)('cpuArchitecture');
     const [cpuArchOpen, setCpuArchOpen] = React.useState(false);
@@ -19,12 +24,23 @@ const CpuArchitectureDropdown = ({ isDisabled = false }) => {
         setUserManagedNetworking(val === common_1.CpuArchitecture.s390x);
         setCpuArchOpen(false);
     };
-    return !isDisabled ? (React.createElement(react_core_1.FormGroup, { isInline: true, fieldId: fieldId, label: t('ai:CPU architecture'), required: true },
-        React.createElement(react_core_1.Dropdown, { toggle: React.createElement(react_core_1.DropdownToggle, { onToggle: () => setCpuArchOpen(!cpuArchOpen), className: "pf-u-w-100" }, value ? common_1.architectureData[value].label : t('ai:CPU architecture')), name: "cpuArchitecture", isOpen: cpuArchOpen, onSelect: onCpuArchSelect, dropdownItems: [
-                React.createElement(react_core_1.DropdownItem, { key: 'x86_64', id: "x86_64", description: common_1.architectureData['x86_64'].description }, common_1.architectureData['x86_64'].label),
-                React.createElement(react_core_1.DropdownItem, { key: 'arm64', id: "arm64", description: common_1.architectureData['arm64'].description }, common_1.architectureData['arm64'].label),
-                React.createElement(react_core_1.DropdownItem, { key: 's390x', id: "s390x", description: common_1.architectureData['s390x'].description }, common_1.architectureData['s390x'].label),
-            ], className: "pf-u-w-100" }))) : (React.createElement(common_1.StaticField, { name: 'cpuArchitecture', label: t('ai:CPU architecture'), isRequired: true }, common_1.architectureData[value].label));
+    const dropdownItems = React.useMemo(() => {
+        if (!cpuArchitectures) {
+            return Object.values(allDropdownItems);
+        }
+        else {
+            return Object.entries(allDropdownItems)
+                .filter(([key, _]) => cpuArchitectures.includes(key))
+                .map(([_, val]) => val);
+        }
+    }, [cpuArchitectures]);
+    React.useEffect(() => {
+        if (!isDisabled && value !== '' && cpuArchitectures && !(cpuArchitectures === null || cpuArchitectures === void 0 ? void 0 : cpuArchitectures.includes(value))) {
+            setValue('');
+        }
+    }, [cpuArchitectures, isDisabled, setValue, value]);
+    return !isDisabled ? (React.createElement(react_core_1.FormGroup, { isInline: true, fieldId: fieldId, label: t('ai:CPU architecture'), isRequired: true },
+        React.createElement(react_core_1.Dropdown, { toggle: React.createElement(react_core_1.DropdownToggle, { onToggle: () => setCpuArchOpen(!cpuArchOpen), className: "pf-u-w-100" }, value ? common_1.architectureData[value].label : t('ai:CPU architecture')), name: "cpuArchitecture", isOpen: cpuArchOpen, onSelect: onCpuArchSelect, dropdownItems: dropdownItems, className: "pf-u-w-100" }))) : (React.createElement(common_1.StaticField, { name: 'cpuArchitecture', label: t('ai:CPU architecture'), isRequired: true }, common_1.architectureData[value].label));
 };
 exports.default = CpuArchitectureDropdown;
 //# sourceMappingURL=CpuArchitectureDropdown.js.map

package/build/cjs/cim/components/common/CpuArchitectureDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"CpuArchitectureDropdown.js","sourceRoot":"","sources":["../../../../../lib/cim/components/common/CpuArchitectureDropdown.tsx"],"names":[],"mappings":";;;AAAA,qDAA+B;AAC/B,uDAA2F;AAC3F,2FAA+E;AAC/E,4CAMyB;AACzB,mCAAkC;AAClC,6EAA0E;AAE1E,MAAM,uBAAuB,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,EAA4B,EAAE,EAAE;IACnF,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,AAAD,EAAG,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAA,iBAAQ,EAA2B,iBAAiB,CAAC,CAAC;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,IAAA,mBAAU,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,GAAG,IAAA,mCAAgB,EAAU,uBAAuB,CAAC,CAAC;IAElG,MAAM,eAAe,GAAG,CAAC,CAAwC,EAAE,EAAE;QACnE,MAAM,GAAG,GAAG,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,aAAa,CAAC,EAA8B,CAAC;QAC5D,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,wBAAwB,CAAC,GAAG,KAAK,wBAAe,CAAC,KAAK,CAAC,CAAC;QAExD,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CACnB,oBAAC,sBAAS,IAAC,QAAQ,QAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAAE,QAAQ;QAC7E,oBAAC,qBAAQ,IACP,MAAM,EACJ,oBAAC,2BAAc,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,EAAC,YAAY,IACjF,KAAK,CAAC,CAAC,CAAC,yBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAClD,EAEnB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,eAAe,EACzB,aAAa,EAAE;gBACb,oBAAC,yBAAY,IACX,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,QAAQ,EACX,WAAW,EAAE,yBAAgB,CAAC,QAAQ,CAAC,CAAC,WAAW,IAElD,yBAAgB,CAAC,QAAQ,CAAC,CAAC,KAAK,CACpB;gBACf,oBAAC,yBAAY,IACX,GAAG,EAAE,OAAO,EACZ,EAAE,EAAC,OAAO,EACV,WAAW,EAAE,yBAAgB,CAAC,OAAO,CAAC,CAAC,WAAW,IAEjD,yBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,CACnB;gBACf,oBAAC,yBAAY,IACX,GAAG,EAAE,OAAO,EACZ,EAAE,EAAC,OAAO,EACV,WAAW,EAAE,yBAAgB,CAAC,OAAO,CAAC,CAAC,WAAW,IAEjD,yBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,CACnB;aAChB,EACD,SAAS,EAAC,YAAY,GACtB,CACQ,CACb,CAAC,CAAC,CAAC,CACF,oBAAC,oBAAW,IAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAAE,UAAU,UAC9E,yBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAClB,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,uBAAuB,CAAC"}
+{"version":3,"file":"CpuArchitectureDropdown.js","sourceRoot":"","sources":["../../../../../lib/cim/components/common/CpuArchitectureDropdown.tsx"],"names":[],"mappings":";;;AAAA,qDAA+B;AAC/B,uDAA2F;AAC3F,2FAA+E;AAC/E,4CAMyB;AACzB,mCAAkC;AAClC,6EAA0E;AAE1E,MAAM,gBAAgB,GAAG;IACvB,CAAC,wBAAe,CAAC,GAAG,CAAC,EAAE,CACrB,oBAAC,yBAAY,IAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAC,QAAQ,EAAC,WAAW,EAAE,yBAAgB,CAAC,QAAQ,CAAC,CAAC,WAAW,IACzF,yBAAgB,CAAC,QAAQ,CAAC,CAAC,KAAK,CACpB,CAChB;IACD,CAAC,wBAAe,CAAC,GAAG,CAAC,EAAE,CACrB,oBAAC,yBAAY,IAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAC,OAAO,EAAC,WAAW,EAAE,yBAAgB,CAAC,OAAO,CAAC,CAAC,WAAW,IACtF,yBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,CACnB,CAChB;IACD,CAAC,wBAAe,CAAC,KAAK,CAAC,EAAE,CACvB,oBAAC,yBAAY,IAAC,GAAG,EAAE,OAAO,EAAE,EAAE,EAAC,OAAO,EAAC,WAAW,EAAE,yBAAgB,CAAC,OAAO,CAAC,CAAC,WAAW,IACtF,yBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,CACnB,CAChB;CACF,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,EAC/B,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAIjB,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,AAAD,EAAG,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAA,iBAAQ,EAChD,iBAAiB,CAClB,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,IAAA,mBAAU,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,GAAG,IAAA,mCAAgB,EAAU,uBAAuB,CAAC,CAAC;IAElG,MAAM,eAAe,GAAG,CAAC,CAAwC,EAAE,EAAE;QACnE,MAAM,GAAG,GAAG,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,aAAa,CAAC,EAA8B,CAAC;QAC5D,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,wBAAwB,CAAC,GAAG,KAAK,wBAAe,CAAC,KAAK,CAAC,CAAC;QAExD,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;SACxC;aAAM;YACL,OAAO,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC;iBACpC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;iBACpD,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,UAAU,IAAI,KAAK,KAAK,EAAE,IAAI,gBAAgB,IAAI,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA,EAAE;YACzF,QAAQ,CAAC,EAAE,CAAC,CAAC;SACd;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpD,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CACnB,oBAAC,sBAAS,IAAC,QAAQ,QAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAAE,UAAU;QAC/E,oBAAC,qBAAQ,IACP,MAAM,EACJ,oBAAC,2BAAc,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,EAAC,YAAY,IACjF,KAAK,CAAC,CAAC,CAAC,yBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAClD,EAEnB,IAAI,EAAC,iBAAiB,EACtB,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,eAAe,EACzB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAC,YAAY,GACtB,CACQ,CACb,CAAC,CAAC,CAAC,CACF,oBAAC,oBAAW,IAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,EAAE,UAAU,UAC9E,yBAAgB,CAAC,KAAiC,CAAC,CAAC,KAAK,CAC9C,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,uBAAuB,CAAC"}

package/build/cjs/cim/components/helpers/versions.js

@@ -35,7 +35,8 @@ const isValidImageSet = (cis, architectures) => {
     return architectures.some((arch) => { var _a, _b, _c; return ((_a = cis.spec) === null || _a === void 0 ? void 0 : _a.releaseImage.endsWith(arch)) || ((_c = (_b = cis.metadata) === null || _b === void 0 ? void 0 : _b.labels) === null || _c === void 0 ? void 0 : _c.architecture) === arch; });
 };
 exports.isValidImageSet = isValidImageSet;
-const getOCPVersions = (clusterImageSets, isNutanix) => {
+const getOCPVersions = (clusterImageSets, isNutanix, osImages) => {
+    const ocpImageVersions = Array.from(new Set(osImages === null || osImages === void 0 ? void 0 : osImages.map((osImage) => osImage.openshiftVersion)));
     const versions = clusterImageSets
         .filter((clusterImageSet) => (0, exports.isValidImageSet)(clusterImageSet, isNutanix ? exports.supportedNutanixPlatforms : undefined))
         .map((clusterImageSet) => {
@@ -49,6 +50,10 @@ const getOCPVersions = (clusterImageSets, isNutanix) => {
             // (rawagner) ACM does not have the warning so changing to 'production'
             supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
         };
+    })
+        .filter((ocpVersion) => {
+        const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
+        return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
     })
         .sort((versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label));
     if (versions.length) {

package/build/cjs/cim/components/helpers/versions.js.map

@@ -1 +1 @@
-{"version":3,"file":"versions.js","sourceRoot":"","sources":["../../../../../lib/cim/components/helpers/versions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"versions.js","sourceRoot":"","sources":["../../../../../lib/cim/components/helpers/versions.ts"],"names":[],"mappings":"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"}

package/build/cjs/common/components/ui/formik/LabelField.css

@@ -6,6 +6,11 @@
   border: 1px solid transparent;
   outline: none;
   width: 100%;
+  background-color: initial;
+}
+
+.label-field__input::placeholder {
+  color: var(--pf-c-form-control--placeholder--Color);
 }
 
 .label-field .react-autosuggest__suggestions-list {

package/lib/cim/components/ClusterDeployment/ACMClusterDeploymentDetailsStep.tsx

@@ -7,11 +7,14 @@ import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
 import { useDetailsFormik } from './ClusterDeploymentDetailsStep';
 import { ClusterDetailsFormFieldsProps } from './ClusterDetailsFormFields';
+import { OsImage } from '../../types';
+import { getOCPVersions } from '../helpers';
 
 type DetailsFormBodyProps = {
   clusterImages: ClusterImageSetK8sResource[];
   onValuesChanged: (values: ClusterDetailsValues, initRender: boolean) => void;
   extensionAfter: ClusterDetailsFormFieldsProps['extensionAfter'];
+  osImages?: OsImage[];
   isNutanix?: boolean;
 };
 
@@ -20,6 +23,7 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
   clusterImages,
   extensionAfter,
   isNutanix,
+  osImages,
 }) => {
   const { values } = useFormikContext<ClusterDetailsValues>();
   const initRenderRef = React.useRef(true);
@@ -33,6 +37,7 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
       clusterImages={clusterImages}
       extensionAfter={extensionAfter}
       isNutanix={isNutanix}
+      osImages={osImages}
     />
   );
 };
@@ -46,13 +51,17 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
   clusterImages,
   formRef,
   usedClusterNames,
+  osImages,
+  isNutanix,
   ...rest
 }) => {
+  const ocpVersions = getOCPVersions(clusterImages, !!isNutanix, osImages);
+
   const [initialValues, validationSchema] = useDetailsFormik({
-    clusterImages,
+    ocpVersions,
     usedClusterNames,
-    isNutanix: !!rest.isNutanix,
   });
+
   return (
     <Formik
       initialValues={initialValues}
@@ -60,7 +69,12 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
       innerRef={formRef}
       onSubmit={noop}
     >
-      <DetailsFormBody clusterImages={clusterImages} {...rest} />
+      <DetailsFormBody
+        clusterImages={clusterImages}
+        osImages={osImages}
+        isNutanix={isNutanix}
+        {...rest}
+      />
     </Formik>
   );
 };

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Alert, Stack, StackItem } from '@patternfly/react-core';
-import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource } from '../../types';
+import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource, OsImage } from '../../types';
 import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { getOCPVersions, getSelectedVersion } from '../helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -8,6 +8,8 @@ import {
   ClusterDetailsFormFields,
   ClusterDetailsFormFieldsProps,
 } from './ClusterDetailsFormFields';
+import { useFormikContext } from 'formik';
+import { ClusterDetailsValues, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
 
 type ClusterDeploymentDetailsFormProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -15,6 +17,7 @@ type ClusterDeploymentDetailsFormProps = {
   agentClusterInstall?: AgentClusterInstallK8sResource;
   extensionAfter?: ClusterDetailsFormFieldsProps['extensionAfter'];
   isNutanix?: boolean;
+  osImages?: OsImage[];
 };
 
 const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
@@ -23,16 +26,38 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
   clusterImages,
   extensionAfter,
   isNutanix,
+  osImages,
 }) => {
+  const { t } = useTranslation();
   const ocpVersions = React.useMemo(
-    () => getOCPVersions(clusterImages, isNutanix),
-    [clusterImages, isNutanix],
+    () => getOCPVersions(clusterImages, isNutanix, osImages),
+    [clusterImages, isNutanix, osImages],
   );
+
   const forceOpenshiftVersion = agentClusterInstall
     ? getSelectedVersion(clusterImages, agentClusterInstall)
     : undefined;
   const isEditFlow = !!clusterDeployment;
-  const { t } = useTranslation();
+
+  const { values } = useFormikContext<ClusterDetailsValues>();
+
+  const cpuArchitectures = React.useMemo(() => {
+    const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
+    if (!osImages) {
+      return cpuArchitectures;
+    }
+
+    const openshiftVersion = ocpVersions
+      .find((ver) => ver.value === values.openshiftVersion)
+      ?.version.split('.')
+      .slice(0, 2)
+      .join('.');
+
+    return osImages
+      .filter((osImage) => osImage.openshiftVersion === openshiftVersion)
+      .map((osImage) => osImage.cpuArchitecture as SupportedCpuArchitecture);
+  }, [osImages, ocpVersions, values.openshiftVersion]);
+
   return (
     <Stack hasGutter>
       {isEditFlow && (
@@ -51,6 +76,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
           forceOpenshiftVersion={forceOpenshiftVersion}
           extensionAfter={extensionAfter}
           isNutanix={isNutanix}
+          cpuArchitectures={cpuArchitectures}
         />
       </StackItem>
     </Stack>

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsStep.tsx

@@ -11,6 +11,7 @@ import {
   ClusterDetailsValues,
   useFeatureSupportLevel,
   getRichTextValidation,
+  OpenshiftVersionOptionType,
 } from '../../../common';
 
 import { ClusterDeploymentDetailsStepProps, ClusterDeploymentDetailsValues } from './types';
@@ -25,35 +26,33 @@ import {
   InfraEnvK8sResource,
 } from '../../types';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
-import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { isCIMFlow, getGridSpans } from './helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type UseDetailsFormikArgs = {
-  clusterImages: ClusterImageSetK8sResource[];
   usedClusterNames: string[];
+  ocpVersions: OpenshiftVersionOptionType[];
   clusterDeployment?: ClusterDeploymentK8sResource;
   agentClusterInstall?: AgentClusterInstallK8sResource;
   agents?: AgentK8sResource[];
   infraEnv?: InfraEnvK8sResource;
-  isNutanix: boolean;
 };
 
 export const useDetailsFormik = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
-  clusterImages,
   usedClusterNames,
   infraEnv,
-  isNutanix,
+  ocpVersions,
 }: UseDetailsFormikArgs): [
   ClusterDetailsValues & { networkType: 'OpenShiftSDN' | 'OVNKubernetes' },
   Lazy,
 ] => {
   const { t } = useTranslation();
   const featureSupportLevels = useFeatureSupportLevel();
-  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
+  const isEdit = !!clusterDeployment || !!agentClusterInstall;
+
   const cluster = React.useMemo(
     () =>
       clusterDeployment && agentClusterInstall
@@ -66,6 +65,7 @@ export const useDetailsFormik = ({
         : undefined,
     [agentClusterInstall, clusterDeployment, agents, infraEnv],
   );
+
   const initialValues = React.useMemo(
     () => {
       const initValues = getClusterDetailsInitialValues({
@@ -85,7 +85,6 @@ export const useDetailsFormik = ({
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const isEdit = !!clusterDeployment || !!agentClusterInstall;
   const validationSchema = React.useMemo(
     () =>
       getClusterDetailsValidationSchema({
@@ -117,14 +116,15 @@ const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStepProps>
   const { addAlert } = useAlerts();
   const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
   const { t } = useTranslation();
+  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
+
   const [initialValues, validationSchema] = useDetailsFormik({
     clusterDeployment,
+    ocpVersions,
     agentClusterInstall,
     agents,
-    clusterImages,
     usedClusterNames,
     infraEnv,
-    isNutanix,
   });
   const next = () =>
     isCIMFlow(clusterDeployment)

package/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -16,13 +16,13 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 import { SNOControlGroup } from '../../../common';
 import { getNetworkType } from '../helpers';
-
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
+  cpuArchitectures?: string[];
 };
 
 export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string }> = ({
@@ -49,6 +49,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
+  cpuArchitectures,
 }) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain, highAvailabilityMode } = values;
@@ -112,7 +113,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
       {!isNutanix && (
         <>
           <SNOControlGroup versions={versions} highAvailabilityMode={highAvailabilityMode} />
-          <CpuArchitectureDropdown isDisabled={isEditFlow} />
+          <CpuArchitectureDropdown isDisabled={isEditFlow} cpuArchitectures={cpuArchitectures} />
         </>
       )}
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}

package/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>

package/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,6 +119,7 @@ const initialValues: EnvironmentStepFormValues = {
   cpuArchitecture: CpuArchitecture.x86,
   enableNtpSources: false,
   additionalNtpSources: '',
+  osImageVersion: '',
 };
 
 type InfraEnvFormProps = {
@@ -123,6 +127,7 @@ type InfraEnvFormProps = {
   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> = ({

package/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;