MGMT-20135: Implement OpenShift versions select with "all versions" modal (#2864)

* Use OpenShift versions dropdown with modal in CIM

* Openshift -> OpenShift

Author: jgyselov

docs/DEVELOPMENT.md

@@ -84,7 +84,7 @@ apply for `libs/locales` as well.
    [README file](https://gitlab.cee.redhat.com/service/uhc-portal/-/blob/master/README.md) in order
    to set up their dev-environment.
 
-## Integrating with the Openshift Console for ACM and MCE (aka CIM)
+## Integrating with the OpenShift Console for ACM and MCE (aka CIM)
 
 Some components of the Assisted Installer UI are integrated into the Central Infrastructure
 Management project (a.k.a. [stolostron/console](https://github.com/stolostron/console)).

libs/ui-lib-tests/cypress/integration/ui-behaviour/cluster-creation.cy.ts

@@ -18,7 +18,7 @@ describe('Assisted Installer UI behaviour - cluster creation', () => {
   });
 
   describe('OpenShiftVersion tests', () => {
-    it('Should have the correct values for the Openshift versions', () => {
+    it('Should have the correct values for the OpenShift versions', () => {
       commonActions.visitNewClusterPage();
       clusterDetailsPage.inputOpenshiftVersion();
 

libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-custom-ocp-releases.cy.ts

@@ -44,7 +44,7 @@ describe('Assisted Installer UI behaviour - cluster creation with custom OCP rel
       customOCPModal.getSearchResponse('No results found');
     });
 
-    it('Should search a custom OCP version and is shown in the Openshift dropdown modal', () => {
+    it('Should search a custom OCP version and is shown in the OpenShift dropdown modal', () => {
       commonActions.visitNewClusterPage();
       clusterDetailsPage.openOpenshiftVersionDropdown();
       clusterDetailsPage.clickLinkAllAvailableVersions();

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsForm.tsx

@@ -92,11 +92,16 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
   osImages,
 }) => {
   const { t } = useTranslation();
-  const ocpVersions = React.useMemo(
+  const versions = React.useMemo(
     () => getOCPVersions(clusterImages, isNutanix, osImages),
     [clusterImages, isNutanix, osImages],
   );
 
+  const allVersions = React.useMemo(
+    () => getOCPVersions(clusterImages, isNutanix, osImages, true),
+    [clusterImages, isNutanix, osImages],
+  );
+
   const forceOpenshiftVersion = agentClusterInstall
     ? getSelectedVersion(clusterImages, agentClusterInstall)
     : undefined;
@@ -110,7 +115,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
       return cpuArchitectures;
     }
 
-    const openshiftVersion = ocpVersions
+    const openshiftVersion = versions
       .find((ver) => ver.value === values.openshiftVersion)
       ?.version.split('.')
       .slice(0, 2)
@@ -119,7 +124,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
     return osImages
       .filter((osImage) => osImage.openshiftVersion === openshiftVersion)
       .map((osImage) => osImage.cpuArchitecture as SupportedCpuArchitecture);
-  }, [osImages, ocpVersions, values.openshiftVersion]);
+  }, [osImages, versions, values.openshiftVersion]);
 
   return (
     <>
@@ -134,7 +139,8 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
       )}
       <StackItem>
         <ClusterDetailsFormFields
-          versions={ocpVersions}
+          versions={versions}
+          allVersions={allVersions}
           isEditFlow={isEditFlow}
           forceOpenshiftVersion={forceOpenshiftVersion}
           extensionAfter={extensionAfter}

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { Alert, AlertVariant, FlexItem, Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
+import { OpenShiftVersionDropdown, OpenShiftVersionModal } from '../../../common';
 import { StaticTextField } from '../../../common/components/ui/StaticTextField';
-import OpenShiftVersionSelect from '../../../common/components/clusterConfiguration/OpenShiftVersionSelect';
 import { PullSecret } from '../../../common/components/clusters';
 import { OpenshiftVersionOptionType } from '../../../common/types';
 import {
@@ -14,13 +14,14 @@ import {
 import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import { getNetworkType } from '../helpers';
 import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
+
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
+  allVersions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
   cpuArchitectures?: string[];
 };
@@ -46,13 +47,39 @@ export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string
 export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> = ({
   isEditFlow,
   versions,
+  allVersions,
   forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
   cpuArchitectures,
 }) => {
-  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const { values } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain } = values;
+  const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
+
+  const selectOptions = React.useMemo(
+    () =>
+      versions.map((version) => ({
+        label: version.label,
+        value: version.value,
+      })),
+    [versions],
+  );
+
+  const additionalSelectOptions = React.useMemo(() => {
+    if (
+      values.customOpenshiftSelect &&
+      !selectOptions.some((option) => option.value === values.customOpenshiftSelect?.value)
+    ) {
+      return [
+        {
+          value: values.customOpenshiftSelect.value,
+          label: values.customOpenshiftSelect.label,
+        },
+      ];
+    }
+    return [];
+  }, [selectOptions, values.customOpenshiftSelect]);
 
   const nameInputRef = React.useRef<HTMLInputElement>();
   React.useEffect(() => {
@@ -102,13 +129,22 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           {t('ai:OpenShift')} {forceOpenshiftVersion}
         </StaticTextField>
       ) : (
-        <OpenShiftVersionSelect
-          versions={versions}
-          onChange={(_event, value) => {
-            const ocpVersion = versions.find((v) => v.value === value);
-            setFieldValue('networkType', getNetworkType(ocpVersion));
-          }}
-        />
+        <>
+          <OpenShiftVersionDropdown
+            name="openshiftVersion"
+            items={selectOptions}
+            versions={versions}
+            showReleasesLink={false}
+            showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
+            customItems={additionalSelectOptions}
+          />
+          {openshiftVersionModalOpen && (
+            <OpenShiftVersionModal
+              allVersions={allVersions}
+              setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+            />
+          )}
+        </>
       )}
       <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
       {!isNutanix && (

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

@@ -49,7 +49,7 @@ 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 InfraEnvOpenShiftVersionDropdown from './InfraEnvOpenShiftVersionDropdown';
 import { OsImage } from '../../types';
 
 export type EnvironmentStepFormValues = {
@@ -228,7 +228,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
             </Flex>
           </FormGroup>
           <CpuArchitectureDropdown />
-          {!!osImages && <OpenshiftVersionDropdown osImages={osImages} />}
+          {!!osImages && <InfraEnvOpenShiftVersionDropdown osImages={osImages} />}
           <RichInputField
             label={t('ai:Location')}
             name="location"

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

@@ -6,7 +6,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
 import { OsImage } from '../../types';
 
-const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
+const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
   const { t } = useTranslation();
   const [{ name, value }, , { setValue }] = useField<string>('osImageVersion');
   const [{ value: cpuArchitecture }] = useField<string>('cpuArchitecture');
@@ -69,4 +69,4 @@ const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
   );
 };
 
-export default OpenshiftVersionDropdown;
+export default InfraEnvOpenShiftVersionDropdown;

libs/ui-lib/lib/cim/components/helpers/versions.ts

@@ -6,11 +6,18 @@ import {
   ClusterVersionK8sResource,
   OsImage,
 } from '../../types';
-import { OpenshiftVersionOptionType } from '../../../common';
+import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
-  const match = /.+:(.*)-/gm.exec(releaseImage);
+  const match = /.+:(.*)/gm.exec(releaseImage);
+  if (match && match.length > 1 && match[1]) {
+    return match[1];
+  }
+};
+
+const getCPUArchFromReleaseImage = (releaseImage = '') => {
+  const match = /.+:.*-(.*)/gm.exec(releaseImage);
   if (match && match.length > 1 && match[1]) {
     return match[1];
   }
@@ -37,8 +44,12 @@ const getSupportLevelFromChannel = (
 
 export const supportedNutanixPlatforms = ['x86_64', 'x86-64'];
 
-export const isValidImageSet = (cis: ClusterImageSetK8sResource, architectures?: string[]) => {
-  if (cis.metadata?.labels?.visible !== 'true') {
+export const isValidImageSet = (
+  cis: ClusterImageSetK8sResource,
+  architectures?: string[],
+  extended?: boolean,
+) => {
+  if (!extended && cis.metadata?.labels?.visible !== 'true') {
     return false;
   }
   if (!architectures) {
@@ -53,24 +64,27 @@ export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
   isNutanix?: boolean | undefined,
   osImages?: OsImage[],
+  extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
   const ocpImageVersions = Array.from(
     new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
   );
 
   const versions = clusterImageSets
     .filter((clusterImageSet) =>
-      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined),
+      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined, extended),
     )
     .map((clusterImageSet): OpenshiftVersionOptionType => {
       const version = getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage);
+      const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
       return {
         label: `OpenShift ${version ? version : (clusterImageSet.metadata?.name as string)}`,
         version: version || clusterImageSet.metadata?.name || '',
         value: clusterImageSet.metadata?.name as string,
         default: false,
         // (rawagner) ACM does not have the warning so changing to 'production'
         supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
+        cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
       };
     })
     .filter((ocpVersion) => {

libs/ui-lib/lib/common/components/ui/OpenshiftSelectWithSearch.tsx libs/ui-lib/lib/common/components/ui/OpenShiftSelectWithSearch.tsx

@@ -22,11 +22,11 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
-export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
+export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
   setCustomOpenshiftSelect,
@@ -232,7 +232,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     </MenuToggle>
   );
 
-  const helperText = getHelperText(selected, true);
+  const helperText = getHelperText && getHelperText(selected, true);
 
   return (
     <>
@@ -285,7 +285,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         <HelperText>
           <HelperTextItem variant="default">
             {helperText ??
-              'Select an Openshift version from the list or use the type ahead to narrow down the list.'}
+              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
           </HelperTextItem>
         </HelperText>
       </FormHelperText>

libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.css

@@ -0,0 +1,9 @@
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
+  max-height: 22vh;
+  overflow: auto;
+}
+
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul {
+  list-style: none;
+  padding-left: 0;
+}

libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -22,15 +22,15 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenshiftVersionDropdown.css';
+import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
   items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
   customItems: ItemDropdown;
@@ -159,7 +159,7 @@ export const OpenShiftVersionDropdown = ({
     [setOpen, current, isDisabled],
   );
 
-  const helperText = getHelperText(field.value);
+  const helperText = getHelperText && getHelperText(field.value);
 
   return (
     <FormGroup

libs/ui-lib/lib/ocm/components/clusterConfiguration/OpenshiftVersionModal.css libs/ui-lib/lib/common/components/ui/OpenShiftVersionModal.css

@@ -1,23 +1,23 @@
 import React, { useState } from 'react';
 import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
-import './OpenshiftVersionModal.css';
-import { OpenshiftSelectWithSearch } from '../../../common/components/ui/OpenshiftSelectWithSearch';
-import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
-import { HelperTextType } from '../../../common/components/ui/OpenShiftVersionDropdown';
+import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
+import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
-import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../../../common';
+import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../..';
+import './OpenShiftVersionModal.css';
 
 type OpenShiftVersionModalProps = {
+  allVersions: OpenshiftVersionOptionType[];
   setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
 };
 
 export const OpenShiftVersionModal = ({
+  allVersions,
   setOpenshiftVersionModalOpen,
   getHelperText,
 }: OpenShiftVersionModalProps) => {
   const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { allVersions: versions } = useOpenshiftVersionsContext();
   const onClose = () => setOpenshiftVersionModalOpen(false);
   const [customOpenshiftSelect, setCustomOpenshiftSelect] = useState<OpenshiftVersionOptionType>(); // Cambiar el tipo según lo que esperes aquí
 
@@ -50,8 +50,8 @@ export const OpenShiftVersionModal = ({
         label={'OpenShift version'}
         isRequired
       >
-        <OpenshiftSelectWithSearch
-          versions={versions}
+        <OpenShiftSelectWithSearch
+          versions={allVersions}
           getHelperText={getHelperText}
           setCustomOpenshiftSelect={setCustomOpenshiftSelect}
         />

libs/ui-lib/lib/ocm/components/clusterConfiguration/OpenShiftVersionModal.tsx libs/ui-lib/lib/common/components/ui/OpenShiftVersionModal.tsx

@@ -12,6 +12,9 @@ export * from './PreviewBadge';
 export * from './TechnologyPreview';
 export * from './DeveloperPreview';
 
+export * from './OpenShiftVersionDropdown';
+export * from './OpenShiftVersionModal';
+
 export * from './utils';
 
 export { default as PopoverIcon } from './PopoverIcon';