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

package/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import { FormGroup } from '@patternfly/react-core';
 import {
   DropdownItem,
   DropdownToggle,
   Dropdown,
-  FormGroup,
   DropdownSeparator,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
@@ -91,10 +91,10 @@ export const DiscoveryImageTypeDropdown = ({
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(val)}
+        onToggle={(_event, val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isText
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
         isDisabled={isDisabled}
       >
         {current || value}
@@ -112,7 +112,7 @@ export const DiscoveryImageTypeDropdown = ({
         dropdownItems={dropdownItems}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
         onSelect={onSelect}
       />
     </FormGroup>

package/lib/ocm/components/clusterConfiguration/HostsNetworkConfigurationControlGroup.tsx

@@ -43,6 +43,7 @@ export const HostsNetworkConfigurationControlGroup = ({
       label="Hosts' network configuration"
       fieldId={fieldId}
       isInline
+      role="radiogroup"
     >
       <RadioFieldWithTooltip
         name={GROUP_NAME}
@@ -50,6 +51,7 @@ export const HostsNetworkConfigurationControlGroup = ({
         value={HostsNetworkConfigurationType.DHCP}
         label="DHCP only"
         tooltipProps={tooltipProps}
+        className="pf-v5-u-mr-md"
       />
       <RadioFieldWithTooltip
         name={GROUP_NAME}

package/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { useField, useFormikContext } from 'formik';
-import { ClusterDetailsValues, HelperText, getFieldId } from '../../../common';
+import { ClusterDetailsValues, getFieldId } from '../../../common';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { OcmCheckboxField, OcmInputField } from '../ui/OcmFormFields';
 import { ManagedDomain } from '@openshift-assisted/types/assisted-installer-service';
@@ -21,14 +28,18 @@ export const BaseDnsHelperText = ({
   name?: string;
   baseDnsDomain?: string;
 }) => (
-  <HelperText fieldId={fieldId}>
-    Enter the name of your domain [domainname] or [domainname.com]. This cannot be changed after
-    cluster installed. All DNS records must include the cluster name and be subdomains of the base
-    you enter. The full cluster address will be: <br />
-    <strong>
-      {name || '[Cluster Name]'}.{baseDnsDomain || '[domainname.com]'}
-    </strong>
-  </HelperText>
+  <FormHelperText>
+    <HelperText id={fieldId}>
+      <HelperTextItem>
+        Enter the name of your domain [domainname] or [domainname.com]. This cannot be changed after
+        cluster installed. All DNS records must include the cluster name and be subdomains of the
+        base you enter. The full cluster address will be: <br />
+        <strong>
+          {name || '[Cluster Name]'}.{baseDnsDomain || '[domainname.com]'}
+        </strong>
+      </HelperTextItem>
+    </HelperText>
+  </FormHelperText>
 );
 
 export const OcmBaseDomainField = ({
@@ -55,10 +66,10 @@ export const OcmBaseDomainField = ({
     const selectedDomain = managedDomains.find((d) => d.domain === value);
     return (
       <DropdownToggle
-        onToggle={(val) => setOpen(val)}
+        onToggle={(_event, val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isText
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
       >
         {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'}
       </DropdownToggle>
@@ -96,7 +107,6 @@ export const OcmBaseDomainField = ({
         name={INPUT_NAME}
         label={INPUT_LABEL}
         isRequired
-        helperText={<BaseDnsHelperText name={name} baseDnsDomain={baseDnsDomain} />}
       >
         {useRedHatDnsService ? (
           <Dropdown
@@ -104,7 +114,7 @@ export const OcmBaseDomainField = ({
             dropdownItems={dropdownItems}
             isOpen={isOpen}
             onSelect={onSelect}
-            className="pf-u-w-100"
+            className="pf-v5-u-w-100"
           />
         ) : (
           <OcmInputField
@@ -114,6 +124,7 @@ export const OcmBaseDomainField = ({
             isRequired
           />
         )}
+        <BaseDnsHelperText name={name} baseDnsDomain={baseDnsDomain} />
       </FormGroup>
     </>
   );

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -26,7 +26,7 @@ import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
 import OcmSNOControlGroup from './OcmSNOControlGroup';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
-import { useOpenshiftVersions } from '../../hooks';
+import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
 import { ExternalPlatformDropdown } from './platformIntegration/ExternalPlatformDropdown';
 import { HostsNetworkConfigurationType } from '../../services/types';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
@@ -64,9 +64,8 @@ export const OcmClusterDetailsFormFields = ({
 
   const { t } = useTranslation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
-  const isOracleCloudPlatformIntegrationEnabled = useFeature('ASSISTED_INSTALLER_PLATFORM_OCI');
   const { openshiftVersion, platform } = values;
-  const { getCpuArchitectures } = useOpenshiftVersions();
+  const { getCpuArchitectures } = useOpenshiftVersionsContext();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
   const clusterWizardContext = useClusterWizardContext();
   const featureSupportLevelData = useSupportLevelsAPI(
@@ -108,6 +107,13 @@ export const OcmClusterDetailsFormFields = ({
       ),
       false,
     );
+    setFieldValue(
+      'isSNODevPreview',
+      featureSupportLevelContext.getFeatureSupportLevel(
+        'SNO',
+        featureSupportLevelData ?? undefined,
+      ) === 'dev-preview',
+    );
   }, [setFieldValue, featureSupportLevelContext, featureSupportLevelData]);
 
   return (
@@ -169,7 +175,6 @@ export const OcmClusterDetailsFormFields = ({
         <ExternalPlatformDropdown
           onChange={handleExternalPartnerIntegrationsChange}
           cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
-          showOciOption={isOracleCloudPlatformIntegrationEnabled}
           featureSupportLevelData={featureSupportLevelData}
           isSNO={isSNO({ highAvailabilityMode })}
         />
@@ -191,6 +196,7 @@ export const OcmClusterDetailsFormFields = ({
         values={values}
         isDisabled={isPullSecretSet}
         isSNO={isSNO({ highAvailabilityMode })}
+        docVersion={openshiftVersion}
       />
     </Form>
   );

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -52,11 +52,11 @@ export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
   ProxyFieldsType &
   TrustedCertificateFieldsType;
 
-const validationSchema = Yup.lazy<OcmDiscoveryImageFormValues>((values) =>
+const validationSchema = Yup.lazy((values: OcmDiscoveryImageFormValues) =>
   Yup.object<OcmDiscoveryImageFormValues>().shape({
     sshPublicKey: sshPublicKeyListValidationSchema,
-    httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }),
-    httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }), // share the schema, httpS is currently not supported
+    httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
+    httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
     noProxy: noProxyValidationSchema,
   }),
 );

package/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx

@@ -1,84 +1,79 @@
 import React from 'react';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { TFunction } from 'i18next';
-import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
+import { OpenshiftVersionOptionType, ClusterDetailsValues } from '../../../common';
 import { isInOcm } from '../../../common/api';
-
-const OpenShiftLifeCycleDatesLink = () => {
-  const { t } = useTranslation();
-  return (
-    <a href={OPENSHIFT_LIFE_CYCLE_DATES_LINK} target="_blank" rel="noopener noreferrer">
-      {t('ai:Learn more')} <ExternalLinkAltIcon />
-    </a>
-  );
-};
-
-const getOpenshiftVersionHelperText = (
-  versions: OpenshiftVersionOptionType[],
-  selectedVersionValue: string | undefined,
-  t: TFunction,
-) => {
-  if (!versions.length) {
-    return (
-      <>
-        <ExclamationCircleIcon color={dangerColor.value} size="sm" />
-        &nbsp; {t('ai:No release image is available.')}
-      </>
-    );
-  }
-
-  const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
-  if (!selectedVersionValue || !selectedVersion) {
-    return null;
-  }
-
-  if (selectedVersion.supportLevel !== 'production') {
-    return (
-      <>
-        <ExclamationTriangleIcon color={warningColor.value} size="sm" />
-        &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
-        <OpenShiftLifeCycleDatesLink />
-      </>
-    );
-  }
-  return null;
-};
+import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
+import { OpenShiftVersionModal } from './OpenShiftVersionModal';
+import { useFormikContext } from 'formik';
+import { getOpenshiftVersionHelperText } from './OpenshiftVersionHelperText';
+import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
 
 type OcmOpenShiftVersionSelectProps = {
   versions: OpenshiftVersionOptionType[];
 };
 const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps) => {
   const { t } = useTranslation();
+  const {
+    values: { customOpenshiftSelect },
+  } = useFormikContext<ClusterDetailsValues>();
   const selectOptions = React.useMemo(
     () =>
-      versions
-        .filter((version) => version.supportLevel !== 'maintenance')
-        .map((version) => ({
-          label:
-            version.supportLevel === 'beta'
-              ? version.label + ' - ' + t('ai:Developer preview release')
-              : version.label,
-          // This is the "key" from openshift-versions API response
-          // It can either be in the long or short (for default versions) form
-          value: version.value,
-        })),
+      versions.map((version) => ({
+        label:
+          version.supportLevel === 'beta'
+            ? version.label + ' - ' + t('ai:Developer preview release')
+            : version.label,
+        // This is the "key" from openshift-versions API response
+        // It can either be in the long or short (for default versions) form
+        value: version.value,
+      })),
     [versions, t],
   );
+  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+
+  const showOpenshiftVersionModal = () => {
+    setIsOpenshiftVersionModalOpen(true);
+  };
+
+  const updatedSelectOptions = React.useMemo(() => {
+    if (
+      customOpenshiftSelect &&
+      !selectOptions.find((option) => option.value === customOpenshiftSelect.value)
+    ) {
+      return [
+        {
+          label: customOpenshiftSelect.label,
+          value: customOpenshiftSelect.value,
+        },
+      ];
+    }
+    return [];
+  }, [selectOptions, customOpenshiftSelect]);
+
+  const { allVersions } = useOpenshiftVersionsContext();
+
+  const getHelperText = (value: string | undefined, inModal?: boolean) => {
+    return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
+  };
 
   return (
-    <OpenShiftVersionDropdown
-      name="openshiftVersion"
-      items={selectOptions}
-      versions={versions}
-      getHelperText={getOpenshiftVersionHelperText}
-      showReleasesLink={isInOcm}
-    />
+    <>
+      <OpenShiftVersionDropdown
+        name="openshiftVersion"
+        items={selectOptions}
+        versions={versions}
+        getHelperText={getHelperText}
+        showReleasesLink={isInOcm}
+        showOpenshiftVersionModal={showOpenshiftVersionModal}
+        customItems={updatedSelectOptions}
+      />
+      {isOpenshiftVersionModalOpen && (
+        <OpenShiftVersionModal
+          setOpenshiftVersionModalOpen={setIsOpenshiftVersionModalOpen}
+          getHelperText={getHelperText}
+        />
+      )}
+    </>
   );
 };
 

package/lib/ocm/components/clusterConfiguration/OcmSingleNodeCheckbox.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { useField, useFormikContext } from 'formik';
-import { Checkbox, FormGroup, Tooltip } from '@patternfly/react-core';
-import { getFieldId, HelperText } from '../../../common';
+import {
+  Checkbox,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { getFieldId } from '../../../common';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { CheckboxFieldProps } from '../../../common/components/ui/formik/types';
 import NewFeatureSupportLevelBadge from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
@@ -76,12 +83,18 @@ const OcmSingleNodeCheckbox: React.FC<OcmCheckboxProps> = ({
             }
             aria-describedby={`${fieldId}-helper`}
             description={
-              <HelperText fieldId={fieldId}>
-                {t('ai:SNO enables you to install OpenShift using only one host.')}
-              </HelperText>
+              <FormGroup>
+                <FormHelperText>
+                  <HelperText id={fieldId}>
+                    <HelperTextItem>
+                      {t('ai:SNO enables you to install OpenShift using only one host.')}
+                    </HelperTextItem>
+                  </HelperText>
+                </FormHelperText>
+              </FormGroup>
             }
             isChecked={value === 'None'}
-            onChange={onChanged}
+            onChange={(event, value) => onChanged(value)}
             className="with-tooltip"
           />
         </Tooltip>

package/lib/ocm/components/clusterConfiguration/OpenShiftVersionModal.tsx

@@ -0,0 +1,61 @@
+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 { useFormikContext } from 'formik';
+import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../../../common';
+
+type OpenShiftVersionModalProps = {
+  setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
+  getHelperText: HelperTextType;
+};
+
+export const OpenShiftVersionModal = ({
+  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í
+
+  const handleSelect = () => {
+    if (customOpenshiftSelect) {
+      setFieldValue('customOpenshiftSelect', customOpenshiftSelect);
+    }
+    onClose();
+  };
+
+  return (
+    <Modal
+      title="Available OpenShift Versions"
+      id="available-openshift-versions-modal"
+      isOpen
+      actions={[
+        <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
+          Select
+        </Button>,
+        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
+          Cancel
+        </Button>,
+      ]}
+      onClose={onClose}
+      variant={ModalVariant.small}
+    >
+      <FormGroup
+        id={`form-control__customOpenshiftSelect`}
+        fieldId={'customOpenshiftSelect'}
+        label={'OpenShift version'}
+        isRequired
+      >
+        <OpenshiftSelectWithSearch
+          versions={versions}
+          getHelperText={getHelperText}
+          setCustomOpenshiftSelect={setCustomOpenshiftSelect}
+        />
+      </FormGroup>
+    </Modal>
+  );
+};

package/lib/ocm/components/clusterConfiguration/OpenshiftVersionHelperText.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {
+  OPENSHIFT_LIFE_CYCLE_DATES_LINK,
+  OpenshiftVersionOptionType,
+  UiIcon,
+} from '../../../common';
+import { TFunction } from 'i18next';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+const OpenShiftLifeCycleDatesLink = () => {
+  const { t } = useTranslation();
+  return (
+    <a href={OPENSHIFT_LIFE_CYCLE_DATES_LINK} target="_blank" rel="noopener noreferrer">
+      {t('ai:Learn more')} <ExternalLinkAltIcon />
+    </a>
+  );
+};
+
+export const getOpenshiftVersionHelperText = (
+  versions: OpenshiftVersionOptionType[],
+  selectedVersionValue: string | undefined,
+  t: TFunction,
+  isModal?: boolean,
+) => {
+  if (!versions.length && !isModal) {
+    return (
+      <>
+        <UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />
+        &nbsp; {t('ai:No release image is available.')}
+      </>
+    );
+  }
+
+  const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
+  if (!selectedVersionValue || !selectedVersion) {
+    return null;
+  }
+
+  if (
+    selectedVersion.supportLevel !== 'production' &&
+    selectedVersion.supportLevel !== 'maintenance'
+  ) {
+    let messageSelectedVersion = t('ai:Please note that this version is not production-ready.');
+    if (selectedVersion.supportLevel === 'end-of-life') {
+      messageSelectedVersion = t('ai:Please note that this version is not maintained anymore.');
+    }
+    return (
+      <>
+        <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />
+        &nbsp;
+        {messageSelectedVersion}&nbsp;
+        <OpenShiftLifeCycleDatesLink />
+      </>
+    );
+  }
+
+  return null;
+};

package/lib/ocm/components/clusterConfiguration/OpenshiftVersionModal.css

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

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/CustomManifestsForm.tsx

@@ -52,14 +52,6 @@ const AutosaveWithParentUpdate = ({
   return null;
 };
 
-const manifestUpdated = (manifest: CustomManifestValues, oldManifest: CustomManifestValues) => {
-  return (
-    oldManifest.filename !== manifest.filename ||
-    oldManifest.folder !== manifest.folder ||
-    oldManifest.manifestYaml !== manifest.manifestYaml
-  );
-};
-
 export const CustomManifestsForm = ({
   onFormStateChange,
   getEmptyValues,
@@ -84,30 +76,32 @@ export const CustomManifestsForm = ({
 
   const handleSubmit: FormikConfig<ManifestFormData>['onSubmit'] = React.useCallback(
     async ({ manifests }, actions) => {
+      clearAlerts();
       if (manifests.length < customManifestsLocalRef.current.length) {
         // submit was triggered by deleting a manifest
-
         customManifestsLocalRef.current = manifests;
         return;
       } else {
-        clearAlerts();
         actions.setSubmitting(true);
 
         for (let index = 0; index < manifests.length; index++) {
           try {
             const manifest = manifests[index];
-            if (index >= (customManifestsLocalRef.current?.length || 0)) {
-              // manifest added
+            if (manifest.created) {
+              // update manifest
+              const oldManifest = customManifestsLocalRef.current[index];
+              await ClustersService.updateCustomManifest(oldManifest, manifest, cluster.id);
+              await updateUISettings({ customManifestsUpdated: true });
+            } else {
+              // add manifest
               await ClustersAPI.createCustomManifest(
                 cluster.id,
                 ClustersService.transformFormViewManifest(manifest),
               );
-            } else {
-              // manifest updated
-              const oldManifest = customManifestsLocalRef.current[index];
 
-              if (manifestUpdated(manifest, oldManifest)) {
-                await ClustersService.updateCustomManifest(oldManifest, manifest, cluster.id);
+              manifests[index].created = true;
+              if (!uiSettings?.customManifestsAdded) {
+                await updateUISettings({ customManifestsAdded: true });
               }
             }
           } catch (error) {
@@ -130,14 +124,11 @@ export const CustomManifestsForm = ({
         }
 
         customManifestsLocalRef.current = manifests;
-        if (!uiSettings?.customManifestsAdded) {
-          await updateUISettings({ customManifestsAdded: true });
-        }
 
         actions.setSubmitting(false);
       }
     },
-    [clearAlerts, uiSettings?.customManifestsAdded, cluster.id, addAlert, updateUISettings],
+    [clearAlerts, cluster.id, uiSettings, updateUISettings, addAlert],
   );
 
   const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/ExpandedManifest.tsx

@@ -69,6 +69,7 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
             isRequired
             downloadFileName={getDownloadFileName(manifestIdx, value)}
             isReadOnly
+            showCustomControls
           />
         </GridItem>
       </Grid>

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/FolderDropdown.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
-import {
-  DropdownItem,
-  DropdownToggle,
-  Dropdown,
-  HelperText,
-  FormGroup,
-} from '@patternfly/react-core';
+import { HelperText, FormGroup } from '@patternfly/react-core';
+import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import { getFieldId } from '../../../../../common/components/ui/formik';
@@ -56,10 +51,10 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(val)}
+        onToggle={(_event, val) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isText
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
       >
         {value || 'manifests'}
       </DropdownToggle>
@@ -77,7 +72,7 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
         dropdownItems={dropdownItems}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
       />
       <HelperText style={{ display: 'inherit' }}>
         {'Manifests can be placed in "manifests" or "openshift" directories.'}