@openshift-assisted/ui-lib 2.12.3-cim → 2.12.5-cim

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsForm.tsx

@@ -1,17 +1,22 @@
 import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import * as React from 'react';
-import { InputField, OpenShiftVersionSelect, PullSecret } from '../../../../../common';
+import { InputField, PullSecret } from '../../../../../common';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 import { BaseDnsHelperText } from '../../../ClusterDeployment/ClusterDetailsFormFields';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { DetailsFormProps, DetailsFormValues } from './types';
+import { OpenShiftVersionDropdown } from '../../../../../common/components/ui/OpenShiftVersionDropdown';
+import { OpenShiftVersionModal } from '../../../../../common/components/ui/OpenShiftVersionModal';
 
 const DetailsForm: React.FC<DetailsFormProps> = ({
   onValuesChanged,
   extensionAfter,
   ocpVersions,
+  allVersions,
 }) => {
+  const { t } = useTranslation();
+  const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
   const { values } = useFormikContext<DetailsFormValues>();
   useTemptiflySync({ values, onValuesChanged });
 
@@ -20,7 +25,30 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
     nameInputRef.current?.focus();
   }, []);
 
-  const { t } = useTranslation();
+  const selectOptions = React.useMemo(
+    () =>
+      ocpVersions.map((version) => ({
+        label: version.label,
+        value: version.value,
+      })),
+    [ocpVersions],
+  );
+
+  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]);
+
   return (
     <Form>
       <InputField
@@ -38,7 +66,21 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
         placeholder="example.com"
         isRequired
       />
-      <OpenShiftVersionSelect versions={ocpVersions} />
+      <OpenShiftVersionDropdown
+        name="openshiftVersion"
+        items={selectOptions}
+        versions={ocpVersions}
+        showReleasesLink={false}
+        showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
+        customItems={additionalSelectOptions}
+      />
+      {openshiftVersionModalOpen && (
+        <OpenShiftVersionModal
+          allVersions={allVersions}
+          setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+        />
+      )}
+
       <PullSecret />
     </Form>
   );

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsStep.tsx

@@ -26,6 +26,7 @@ const useDetailsFormik: UseDetailsFormik = ({
       openshiftVersion: getDefaultOpenShiftVersion(ocpVersions),
       pullSecret: initPullSecret,
       baseDnsDomain: initBaseDomain,
+      customOpenshiftSelect: null,
     }),
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
@@ -53,6 +54,8 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
   supportedVersionsCM,
 }) => {
   const ocpVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM);
+  const allVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM, true);
+
   const [initialValues, validationSchema] = useDetailsFormik({
     ocpVersions,
     usedClusterNames,
@@ -70,6 +73,7 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
       <DetailsForm
         onValuesChanged={onValuesChanged}
         ocpVersions={ocpVersions}
+        allVersions={allVersions}
         extensionAfter={extensionAfter}
       />
     </Formik>

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/types.ts

@@ -8,6 +8,7 @@ export type DetailsFormValues = {
   openshiftVersion: string;
   pullSecret: string;
   baseDnsDomain: string;
+  customOpenshiftSelect: OpenshiftVersionOptionType | null;
 };
 
 type UseDetailsFormikArgs = {
@@ -19,7 +20,10 @@ type UseDetailsFormikArgs = {
 
 export type UseDetailsFormik = (
   args: UseDetailsFormikArgs,
-) => [DetailsFormValues, ObjectSchema<Omit<DetailsFormValues, 'openshiftVersion'>>];
+) => [
+  DetailsFormValues,
+  ObjectSchema<Omit<DetailsFormValues, 'openshiftVersion' | 'customOpenshiftSelect'>>,
+];
 
 export type DetailsStepProps = {
   usedClusterNames: string[];
@@ -35,4 +39,5 @@ export type DetailsStepProps = {
 
 export type DetailsFormProps = Pick<DetailsStepProps, 'onValuesChanged' | 'extensionAfter'> & {
   ocpVersions: OpenshiftVersionOptionType[];
+  allVersions: OpenshiftVersionOptionType[];
 };

package/lib/cim/components/Hypershift/hooks/useSupportedOCPVersions.ts

@@ -11,9 +11,10 @@ export const getSupportedCM = (configMaps: ConfigMapK8sResource[]) =>
 export const useSupportedOCPVersions = (
   clusterImages: ClusterImageSetK8sResource[],
   supportedVersionsCM?: ConfigMapK8sResource,
+  extended?: boolean,
 ) => {
   return React.useMemo(() => {
-    const ocpVersions = getOCPVersions(clusterImages, false);
+    const ocpVersions = getOCPVersions(clusterImages, false, undefined, extended);
     const supportedVersionsString = supportedVersionsCM?.data?.['supported-versions'];
     if (supportedVersionsString) {
       try {
@@ -25,5 +26,5 @@ export const useSupportedOCPVersions = (
       }
     }
     return ocpVersions;
-  }, [clusterImages, supportedVersionsCM]);
+  }, [clusterImages, extended, supportedVersionsCM?.data]);
 };

package/lib/cim/components/helpers/versions.ts

@@ -4,6 +4,7 @@ import {
   AgentClusterInstallK8sResource,
   ClusterImageSetK8sResource,
   ClusterVersionK8sResource,
+  OsImage,
 } from '../../types';
 import { OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
@@ -36,8 +37,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) {
@@ -51,10 +56,15 @@ export const isValidImageSet = (cis: ClusterImageSetK8sResource, architectures?:
 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);
@@ -67,6 +77,10 @@ export const getOCPVersions = (
         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),
     );
@@ -86,8 +100,9 @@ export const getSelectedVersion = (
   const selectedClusterImage = clusterImages.find(
     (ci) => ci.metadata?.name === agentClusterInstall?.spec?.imageSetRef?.name,
   );
+
   return selectedClusterImage
-    ? getOCPVersions([selectedClusterImage])?.[0]?.version
+    ? getOCPVersions([selectedClusterImage], undefined, undefined, true)?.[0]?.version
     : agentClusterInstall?.spec?.imageSetRef?.name;
 };
 

package/lib/cim/types/k8s/agent-service-config.ts

@@ -11,6 +11,13 @@ type StorageConfig = {
   };
 };
 
+export type OsImage = {
+  cpuArchitecture: string;
+  openshiftVersion: string;
+  url: string;
+  version: string;
+};
+
 export type AgentServiceConfigConditionType = 'DeploymentsHealthy' | 'ReconcileCompleted';
 
 export type AgentServiceConfigK8sResource = K8sResourceCommon & {

package/lib/common/components/clusterConfiguration/index.ts

@@ -1,6 +1,5 @@
 export { default as SNOControlGroup } from './SNOControlGroup';
 export { default as SNODisclaimer } from './SNODisclaimer';
-export { default as OpenShiftVersionSelect } from './OpenShiftVersionSelect';
 export { default as UploadSSH } from './UploadSSH';
 export { default as ProxyFields, ProxyInputFields } from './ProxyFields';
 export { default as DownloadIsoModal } from './DownloadIsoModal';

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -76,6 +76,7 @@ export const getClusterDetailsInitialValues = ({
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'none',
+    customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
   };
 };

package/lib/common/components/clusterWizard/types.ts

@@ -15,6 +15,7 @@ import {
 } from '../../types/hosts';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import { WizardStepsValidationMap } from './validationsInfoUtils';
+import { OpenshiftVersionOptionType } from '../../types';
 
 export type ClusterDetailsValues = {
   name: string;
@@ -31,6 +32,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
+  customOpenshiftSelect: OpenshiftVersionOptionType | null;
   userManagedNetworking: boolean;
 };
 
@@ -67,3 +69,8 @@ export type ValidationActionLinkProps<S extends string> = {
 };
 
 export type ClusterOperatorProps = Pick<Cluster, 'openshiftVersion'> & { clusterId: Cluster['id'] };
+
+export type ItemDropdown = {
+  label: string;
+  value: string;
+}[];

package/lib/common/components/ui/OpenShiftSelectWithSearch.tsx

@@ -0,0 +1,130 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import {
+  FormHelperText,
+  Select,
+  SelectOption,
+  SelectOptionObject,
+  SelectVariant,
+} from '@patternfly/react-core';
+import { OpenshiftVersionOptionType } from '../../types';
+import { HelperTextType } from './OpenShiftVersionDropdown';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type OpenshiftSelectWithSearchProps = {
+  versions: OpenshiftVersionOptionType[];
+  getHelperText?: HelperTextType;
+  setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
+};
+
+export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
+  versions,
+  getHelperText,
+  setCustomOpenshiftSelect,
+}: OpenshiftSelectWithSearchProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('');
+  const { t } = useTranslation();
+
+  const selectOptions = React.useMemo(
+    () =>
+      versions.map((version) => ({
+        value: version.value,
+        label:
+          version.supportLevel === 'beta'
+            ? version.label + ' - ' + t('ai:Developer preview release')
+            : version.label,
+        version: version,
+      })),
+    [versions, t],
+  );
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject,
+  ) => {
+    const value = typeof selection === 'string' ? selection : selection.toString();
+    const selectedOption = selectOptions.find((option) => option.value === value);
+
+    if (selectedOption) {
+      setSelected(value);
+      setCustomOpenshiftSelect(selectedOption.version);
+      setIsOpen(false);
+    }
+  };
+
+  const onClear = () => {
+    setSelected('');
+    setCustomOpenshiftSelect(undefined);
+    setIsOpen(false);
+  };
+
+  const onFilter = (e: React.ChangeEvent<HTMLInputElement> | null, value: string) => {
+    if (!value || value === '') {
+      return selectOptions.map((option) => (
+        <SelectOption key={option.value} value={option.value}>
+          {option.label}
+        </SelectOption>
+      ));
+    }
+
+    const filteredOptions = selectOptions.filter((option) =>
+      option.label.toLowerCase().includes(value.toLowerCase()),
+    );
+
+    if (filteredOptions.length === 0) {
+      return [
+        <SelectOption key="no-results" isDisabled>
+          {t('ai:No results found for "{{value}}"', { value })}
+        </SelectOption>,
+      ];
+    }
+
+    return filteredOptions.map((option) => (
+      <SelectOption key={option.value} value={option.value}>
+        {option.label}
+      </SelectOption>
+    ));
+  };
+
+  const helperText = getHelperText && getHelperText(selected, true);
+
+  return (
+    <>
+      <Select
+        id="customOpenshiftSelect"
+        variant={SelectVariant.typeahead}
+        typeAheadAriaLabel={t('ai:Select OpenShift version')}
+        placeholderText={t('ai:Select an OpenShift version')}
+        isOpen={isOpen}
+        onToggle={onToggle}
+        onSelect={onSelect}
+        onClear={onClear}
+        selections={selected}
+        onFilter={onFilter}
+        className="pf-u-w-100"
+        maxHeight="300px"
+        isCreatable={false}
+      >
+        {selectOptions.map((option) => (
+          <SelectOption key={option.value} value={option.value}>
+            {option.label}
+          </SelectOption>
+        ))}
+      </Select>
+
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+
+      {!helperText && (
+        <FormHelperText>
+          {t(
+            'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
+          )}
+        </FormHelperText>
+      )}
+    </>
+  );
+};

package/lib/common/components/ui/OpenShiftVersionDropdown.css

@@ -0,0 +1,7 @@
+#form-input-openshiftVersion-field-dropdown .pf-c-dropdown__menu ul,
+#form-input-openshiftVersion-field-dropdown .pf-c-dropdown__menu li {
+  margin: 0;
+  padding: 0;
+  list-style: none !important;
+  list-style-type: none !important;
+}

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -1,114 +1,159 @@
 import React from 'react';
 import {
+  FormGroup,
+  FormHelperText,
+  Button,
   DropdownItem,
   DropdownToggle,
   Dropdown,
-  HelperText,
-  FormGroup,
-  DropdownSeparator,
+  DropdownGroup,
+  Divider,
 } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 
 import { OpenshiftVersionOptionType } from '../../types';
-import { TFunction } from 'i18next';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
 import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
+import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
+import './OpenShiftVersionDropdown.css';
 
-export type HelperTextType = (
-  versions: OpenshiftVersionOptionType[],
-  value: string | undefined,
-  t: TFunction,
-) => JSX.Element | null;
+export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
-  items: {
-    label: string;
-    value: string;
-  }[];
+  items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   showReleasesLink: boolean;
+  showOpenshiftVersionModal: () => void;
+  customItems: ItemDropdown;
 };
 
+const getParsedVersions = (items: ItemDropdown) => {
+  const versionsY = Array.from(new Set(items.map((val) => val.value.match(/^\d+\.(\d+)/)?.[1])));
+
+  const parsedVersions = versionsY.map((y) => ({
+    y: y,
+    versions: items.filter((val) => val.value.match(/^\d+\.(\d+)/)?.[1] === y),
+  }));
+  return { parsedVersions: parsedVersions.reverse() };
+};
 export const OpenShiftVersionDropdown = ({
   name,
   items,
   versions,
   getHelperText,
   showReleasesLink,
+  showOpenshiftVersionModal,
+  customItems,
 }: OpenShiftVersionDropdownProps) => {
-  const [field, , { setValue }] = useField(name);
+  const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
   const { t } = useTranslation();
   const fieldId = getFieldId(name, 'input');
-  const isDisabled = versions.length === 0;
+  const {
+    values: { customOpenshiftSelect },
+  } = useFormikContext<ClusterDetailsValues>();
+  const [current, setCurrent] = React.useState<string>();
 
-  const { defaultLabel, defaultValue } = React.useMemo(() => {
-    const defaultVersion = versions.find((item) => item.default);
-    return {
-      defaultLabel: defaultVersion?.label || '',
-      defaultValue: defaultVersion?.value || '',
-    };
-  }, [versions]);
+  React.useEffect(() => {
+    const defaultVersion = customOpenshiftSelect
+      ? customOpenshiftSelect
+      : versions.find((item) => item.default);
+    setCurrent(defaultVersion?.label || '');
+    setValue(defaultVersion?.value || '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [customOpenshiftSelect]);
 
-  const [helperText, setHelperText] = React.useState(getHelperText(versions, defaultValue, t));
-  const [current, setCurrent] = React.useState<string>(defaultLabel);
-
-  const versionsY = Array.from(new Set(items.map((val) => val.value.match(/^\d+\.(\d+)/)?.[1])));
-  const lastVersion = versionsY.slice(-1)[0];
-
-  const parsedVersions = versionsY.map((y) => ({
-    y: y,
-    versions: items.filter((val) => val.value.match(/^\d+\.(\d+)/)?.[1] === y),
-  }));
-
-  const dropdownItems = parsedVersions.map(({ y, versions }) => {
+  const parsedVersionsForItems = getParsedVersions(items);
+  let lastY: string | undefined = '';
+  const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
     const items = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
 
-    if (y !== lastVersion) {
-      items.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+    if (lastY !== null && y !== lastY) {
+      items.push(<Divider key={`separator-${y || ''}`} />);
     }
-
+    lastY = y;
     return items;
   });
 
+  const parsedVersionsForCustomItems = getParsedVersions(customItems);
+  let lastCustomY: string | undefined = '';
+  const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
+    const customItems = versions.map(({ value, label }) => (
+      <DropdownItem key={value} id={value} value={value}>
+        {label}
+      </DropdownItem>
+    ));
+    if (lastCustomY !== null && y !== lastCustomY) {
+      customItems.push(<Divider key={`separator-${y || ''}`} />);
+    }
+    lastCustomY = y;
+    return customItems;
+  });
+
+  const dropdownGroup = [
+    dropdownItems.length && (
+      <DropdownGroup label="Latest releases" key="latest-releases">
+        {dropdownItems}
+      </DropdownGroup>
+    ),
+    customDropdownItems.length && (
+      <DropdownGroup label="Custom releases" key="custom-releases">
+        {customDropdownItems}
+      </DropdownGroup>
+    ),
+    <DropdownGroup key="all-available-versions">
+      <DropdownItem key="all-versions" id="all-versions" onSelect={(e) => e.preventDefault()}>
+        <Button
+          variant="link"
+          isInline
+          onClick={() => showOpenshiftVersionModal()}
+          id="show-all-versions"
+        >
+          {t('ai:Show all available versions')}
+        </Button>
+      </DropdownItem>
+    </DropdownGroup>,
+  ].filter(Boolean);
+
   const onSelect = React.useCallback(
     (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const newLabel = event?.currentTarget.innerText;
+      const newLabel = event?.currentTarget.textContent;
       const newValue = event?.currentTarget.id;
-      if (newLabel && newValue) {
+      if (newLabel && newValue && event.currentTarget.id !== 'all-versions') {
         setCurrent(newLabel);
         setValue(newValue);
-        setHelperText(getHelperText(versions, newValue, t));
         setOpen(false);
       }
     },
-    [setCurrent, setHelperText, setOpen, getHelperText, t, versions, setValue],
+    [setValue],
   );
 
-  const toggle = React.useMemo(
+  const dropdownToggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(!isDisabled && val)}
+        id={fieldId}
+        className="pf-u-w-100"
+        onToggle={(val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
         isText
-        className="pf-u-w-100"
       >
-        {current}
+        {current || t('ai:OpenShift version')}
       </DropdownToggle>
     ),
-    [setOpen, current, isDisabled],
+    [fieldId, current, t],
   );
 
+  const helperText = getHelperText && getHelperText(field.value);
+
   return (
     <FormGroup
       id={`form-control__${fieldId}`}
@@ -118,15 +163,15 @@ export const OpenShiftVersionDropdown = ({
     >
       <Dropdown
         {...field}
-        name={name}
-        id={fieldId}
-        onSelect={onSelect}
-        dropdownItems={dropdownItems}
-        toggle={toggle}
+        id={`${fieldId}-dropdown`}
         isOpen={isOpen}
+        onSelect={onSelect}
+        toggle={dropdownToggle}
+        dropdownItems={dropdownGroup}
         className="pf-u-w-100"
       />
-      <HelperText style={{ display: 'inherit' }}>{helperText}</HelperText>
+
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
       {showReleasesLink && (
         <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
           <span data-ouia-id="openshift-releases-link">

package/lib/common/components/ui/OpenShiftVersionModal.css

@@ -0,0 +1,7 @@
+#available-openshift-versions-modal {
+  height: 44vh;
+  display: flex;
+}
+#customOpenshiftSelect .pf-c-select__menu {
+  max-height: 22vh;
+}