@openshift-assisted/ui-lib 2.9.7-cim → 2.9.9-cim

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

@@ -6,27 +6,26 @@ import {
   FieldArrayRenderProps,
   Formik,
   FormikConfig,
-  FormikErrors,
-  FormikHelpers,
   useFormikContext,
   yupToFormErrors,
 } from 'formik';
 import isEqual from 'lodash-es/isEqual.js';
-import { ErrorState, LoadingState, useAlerts, useFormikAutoSave } from '../../../../../common';
-import { CustomManifestsFormProps } from './propTypes';
 import {
-  CustomManifestValues,
-  FormViewManifestFolder,
-  ListManifestsExtended,
-  ManifestExtended,
-  ManifestFormData,
-} from '../data/dataTypes';
-import { getApiErrorMessage, handleApiError } from '../../../../api';
+  ErrorState,
+  LoadingState,
+  getApiErrorMessage,
+  handleApiError,
+  useAlerts,
+  useFormikAutoSave,
+} from '../../../../../common';
+import { CustomManifestsFormProps } from './propTypes';
+import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
 import useClusterCustomManifests from '../../../../hooks/useClusterCustomManifests';
 import { ClustersService } from '../../../../services';
 import { CustomManifestsArray } from './CustomManifestsArray';
-import { getManifestFakeId } from './utils';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
+import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
+import { ClustersAPI } from '../../../../services/apis';
 
 const fieldName = 'manifests';
 
@@ -53,55 +52,12 @@ const AutosaveWithParentUpdate = ({
   return null;
 };
 
-const getManifestDetails = (
-  updatedManifest: CustomManifestValues,
-): {
-  folderName: FormViewManifestFolder;
-  fileName: string | undefined;
-} => {
-  const existingFolderByFakeId = updatedManifest.fakeId?.substring(
-    0,
-    updatedManifest.fakeId.indexOf('#'),
-  );
-  const existingFolder: FormViewManifestFolder =
-    existingFolderByFakeId === 'manifests' || existingFolderByFakeId === 'openshift'
-      ? existingFolderByFakeId
-      : 'manifests';
-  const existingFileName = updatedManifest.fakeId?.substring(
-    updatedManifest.fakeId.indexOf('#') + 1,
+const manifestUpdated = (manifest: CustomManifestValues, oldManifest: CustomManifestValues) => {
+  return (
+    oldManifest.filename !== manifest.filename ||
+    oldManifest.folder !== manifest.folder ||
+    oldManifest.manifestYaml !== manifest.manifestYaml
   );
-
-  return {
-    folderName: existingFolder,
-    fileName: existingFileName,
-  };
-};
-
-const handleApiErrorInForm = (
-  manifests: CustomManifestValues[],
-  manifestsThatExists: CustomManifestValues[],
-  actions: FormikHelpers<ManifestFormData>,
-) => {
-  const errors: FormikErrors<ManifestFormData> = {};
-  errors.manifests = [];
-  manifests.forEach((manifest) => {
-    (errors.manifests as FormikErrors<CustomManifestValues>[]).push({
-      fakeId: manifest.fakeId,
-      folder: '',
-      filename: '',
-      manifestYaml: '',
-    });
-  });
-  errors.manifests.forEach((errorManifest) => {
-    manifestsThatExists.forEach((updatedManifest) => {
-      if ((errorManifest as CustomManifestValues).fakeId === updatedManifest.fakeId) {
-        (errorManifest as CustomManifestValues).manifestYaml =
-          'Failed to update the existing manifest';
-      }
-    });
-  });
-
-  actions.setErrors(errors);
 };
 
 export const CustomManifestsForm = ({
@@ -115,142 +71,73 @@ export const CustomManifestsForm = ({
   const [initialValues, setInitialValues] = React.useState<ManifestFormData | undefined>();
   const { addAlert, clearAlerts } = useAlerts();
   const { customManifests, isLoading, error } = useClusterCustomManifests(cluster.id || '', true);
-  const customManifestsLocalRef = React.useRef<ListManifestsExtended | undefined>();
+  const customManifestsLocalRef = React.useRef<CustomManifestValues[]>([]);
+  const { updateUISettings, uiSettings } = useClusterWizardContext();
 
   React.useEffect(() => {
-    if (customManifests) {
-      setInitialValues(getInitialValues(customManifests));
-      customManifestsLocalRef.current = customManifests;
+    if (customManifests && !customManifestsLocalRef.current.length) {
+      const initValues = getInitialValues(customManifests);
+      setInitialValues(initValues);
+      customManifestsLocalRef.current = !!customManifests.length ? initValues.manifests : [];
     }
   }, [customManifests, getInitialValues]);
 
-  const updateCustomManifestsLocal = React.useCallback(
-    (updatedManifests: CustomManifestValues[], newValuesAdded: boolean) => {
-      if (newValuesAdded) {
-        updatedManifests.forEach((updatedManifest) => {
-          const customManifest: ManifestExtended = {
-            folder: updatedManifest.folder,
-            fileName: updatedManifest.filename,
-            yamlContent: updatedManifest.manifestYaml,
-          };
-          customManifestsLocalRef.current?.push(customManifest);
-        });
-      } else {
-        customManifestsLocalRef.current?.forEach((customManifest) => {
-          const updatedManifest: CustomManifestValues | undefined = updatedManifests.find(
-            (updatedManifest) =>
-              getManifestFakeId(
-                customManifest.folder || 'manifests',
-                customManifest.fileName || '',
-              ) === updatedManifest.fakeId || '',
-          );
-
-          if (updatedManifest) {
-            customManifest.folder = updatedManifest.folder;
-            customManifest.fileName = updatedManifest.filename;
-            customManifest.yamlContent = updatedManifest.manifestYaml;
-          }
-        });
-      }
-    },
-    [customManifestsLocalRef],
-  );
-
-  const removeCustomManifestFromLocal = React.useCallback(
-    (manifests: CustomManifestValues[]) => {
-      if (customManifestsLocalRef.current) {
-        const customManifestsLocalCopy = [...customManifestsLocalRef.current].filter(
-          (customManifest) => {
-            return !manifests.some((manifest) => {
-              return (
-                customManifest.folder === manifest.folder &&
-                customManifest.fileName === manifest.filename &&
-                customManifest.yamlContent === manifest.manifestYaml
-              );
-            });
-          },
-        );
-        if (customManifestsLocalCopy.length > 0) {
-          customManifestsLocalRef.current.splice(
-            customManifestsLocalRef.current.findIndex(
-              (manifest) =>
-                manifest.folder === customManifestsLocalCopy[0].folder &&
-                manifest.fileName === customManifestsLocalCopy[0].fileName,
-            ),
-            1,
-          );
-        }
-      }
-    },
-    [customManifestsLocalRef],
-  );
-
   const handleSubmit: FormikConfig<ManifestFormData>['onSubmit'] = React.useCallback(
-    async (values, actions) => {
-      clearAlerts();
-      actions.setSubmitting(true);
-      const manifests = values.manifests;
-      const manifestsModified = manifests.filter(
-        (manifest) =>
-          !customManifestsLocalRef.current?.some(
-            (customManifest) =>
-              customManifest.folder === manifest.folder &&
-              customManifest.fileName === manifest.filename &&
-              customManifest.yamlContent === manifest.manifestYaml,
-          ),
-      );
-      if (cluster && manifestsModified.length > 0) {
-        //See if manifests exists previously to make a patch or create a new one
-        const manifestsThatExists = manifestsModified.filter((manifest) => manifest.fakeId !== '');
-        const newManifestsToCreate = manifestsModified.filter((manifest) => manifest.fakeId === '');
-        try {
-          const manifestsRequests = manifestsThatExists.map((updatedManifest) => {
-            const { folderName, fileName } = getManifestDetails(updatedManifest);
+    async ({ manifests }, actions) => {
+      if (manifests.length < customManifestsLocalRef.current.length) {
+        // submit was triggered by deleting a manifest
 
-            const existingManifest: CustomManifestValues = {
-              folder: folderName,
-              filename: fileName || '',
-              manifestYaml: '',
+        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
+              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);
+              }
+            }
+          } catch (error) {
+            const errorArray = new Array(manifests.length).fill(undefined);
+            errorArray.splice(index, 1, { manifestYaml: 'Failed to save changes' });
+
+            const errors = {
+              manifests: errorArray,
             };
-
-            return ClustersService.updateCustomManifest(
-              existingManifest,
-              updatedManifest,
-              cluster?.id,
+            actions.setErrors(errors);
+
+            // handleApiErrorInForm(manifests, customManifestsLocalRef.current, actions);
+            handleApiError(error, () =>
+              addAlert({
+                title: 'Failed to update the custom manifests',
+                message: getApiErrorMessage(error),
+              }),
             );
-          });
-          await Promise.all(manifestsRequests);
-          if (newManifestsToCreate.length > 0) {
-            await ClustersService.createClusterManifests(newManifestsToCreate, cluster?.id);
-            updateCustomManifestsLocal(newManifestsToCreate, true);
           }
+        }
 
-          if (customManifestsLocalRef.current && manifestsThatExists.length > 0) {
-            updateCustomManifestsLocal(manifestsThatExists, false);
-          }
-        } catch (e) {
-          handleApiErrorInForm(manifests, manifestsThatExists, actions);
-          handleApiError(e, () =>
-            addAlert({
-              title: 'Failed to update the custom manifests',
-              message: getApiErrorMessage(e),
-            }),
-          );
-        } finally {
-          actions.setSubmitting(false);
+        customManifestsLocalRef.current = manifests;
+        if (!uiSettings?.customManifestsAdded) {
+          await updateUISettings({ customManifestsAdded: true });
         }
-      } else {
-        removeCustomManifestFromLocal(manifests);
+
+        actions.setSubmitting(false);
       }
     },
-    [
-      addAlert,
-      clearAlerts,
-      cluster,
-      customManifestsLocalRef,
-      updateCustomManifestsLocal,
-      removeCustomManifestFromLocal,
-    ],
+    [clearAlerts, uiSettings?.customManifestsAdded, cluster.id, addAlert, updateUISettings],
   );
 
   const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;

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

@@ -50,7 +50,7 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
             )}.`}
             label={
               <>
-                <span>File name</span>
+                <span>File name</span>{' '}
                 <PopoverIcon
                   bodyContent={
                     'File name determines order of executing manifests during the installation. For example "manifest1.yaml" will be applied before "manifest2.yaml"'

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

@@ -8,25 +8,24 @@ export const getFormData = (manifests: ListManifestsExtended): ManifestFormData
   };
 };
 
-export const getEmptyFormViewManifest = (): CustomManifestValues => {
+export const getEmptyManifest = (): CustomManifestValues => {
   return {
     folder: 'manifests',
     filename: '',
     manifestYaml: '',
-    fakeId: '',
   };
 };
 
-export const getFormViewManifestValues = (manifests: ListManifestsExtended): ManifestFormData => {
-  const formData = getFormData(manifests);
-  if (!formData.manifests.length) {
-    return { manifests: [getEmptyFormViewManifest()] };
+export const getManifestValues = (manifests: ListManifestsExtended): ManifestFormData => {
+  if (!!manifests.length) {
+    return getFormData(manifests);
+  } else {
+    return getEmptyManifestsValues();
   }
-  return { manifests: formData.manifests };
 };
 
-export const getEmptyFormViewManifestsValues = (): ManifestFormData => {
-  return { manifests: [getEmptyFormViewManifest()] };
+export const getEmptyManifestsValues = (): ManifestFormData => {
+  return { manifests: [getEmptyManifest()] };
 };
 
 export const getClusterCustomManifests = (
@@ -37,13 +36,8 @@ export const getClusterCustomManifests = (
       folder: manifest.folder || 'manifests',
       filename: manifest.fileName || '',
       manifestYaml: manifest.yamlContent || '',
-      fakeId: getManifestFakeId(manifest.folder || 'manifests', manifest.fileName || ''),
     }));
   } else {
-    return [getEmptyFormViewManifest()];
+    return [getEmptyManifest()];
   }
 };
-
-export const getManifestFakeId = (folder: string, fileName: string): string => {
-  return `${folder}#${fileName}`;
-};

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/data/dataTypes.ts

@@ -6,7 +6,6 @@ export type CustomManifestValues = {
   folder: FormViewManifestFolder;
   filename: string;
   manifestYaml: string;
-  fakeId?: string;
 };
 
 export interface ManifestFormData {

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { useSelector } from 'react-redux';
-import { Alert, AlertVariant, Grid, Tooltip } from '@patternfly/react-core';
+import { Grid, Tooltip } from '@patternfly/react-core';
 import { VirtualIPControlGroup, VirtualIPControlGroupProps } from './VirtualIPControlGroup';
 import {
   canBeDualStack,
   canSelectNetworkTypeSDN,
   clusterNetworksEqual,
+  CpuArchitecture,
   DUAL_STACK,
   HostSubnets,
   isSNO,
@@ -27,12 +28,15 @@ import { OcmCheckbox } from '../../ui/OcmFormFields';
 import { NetworkTypeControlGroup } from '../../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import {
   NewFeatureSupportLevelData,
+  NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
 import {
   Cluster,
   ClusterDefaultConfig,
+  PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
+import useSupportLevelsAPI from '../../../hooks/useSupportLevelsAPI';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   hostSubnets: HostSubnets;
@@ -74,15 +78,30 @@ const getManagedNetworkingDisabledReason = (
   }
 };
 
-const getUserManagedDisabledReason = (featureSupportLevelData: NewFeatureSupportLevelData) => {
-  if (!featureSupportLevelData.isFeatureSupported('USER_MANAGED_NETWORKING')) {
-    return featureSupportLevelData.getFeatureDisabledReason('USER_MANAGED_NETWORKING');
+const getUserManagedDisabledReason = (
+  featureSupportLevelContext: NewFeatureSupportLevelData,
+  platformType?: PlatformType,
+  featureSupportLevelMap?: NewFeatureSupportLevelMap | null,
+) => {
+  if (!featureSupportLevelContext.isFeatureSupported('USER_MANAGED_NETWORKING')) {
+    return featureSupportLevelContext.getFeatureDisabledReason(
+      'USER_MANAGED_NETWORKING',
+      featureSupportLevelMap ?? undefined,
+      undefined,
+      platformType,
+    );
   }
 };
 
-const getClusterManagedDisabledReason = (featureSupportLevelData: NewFeatureSupportLevelData) => {
-  if (!featureSupportLevelData.isFeatureSupported('CLUSTER_MANAGED_NETWORKING')) {
-    return featureSupportLevelData.getFeatureDisabledReason('CLUSTER_MANAGED_NETWORKING');
+const getClusterManagedDisabledReason = (
+  featureSupportLevelContext: NewFeatureSupportLevelData,
+  featureSupportLevelMap?: NewFeatureSupportLevelMap | null,
+) => {
+  if (!featureSupportLevelContext.isFeatureSupported('CLUSTER_MANAGED_NETWORKING')) {
+    return featureSupportLevelContext.getFeatureDisabledReason(
+      'CLUSTER_MANAGED_NETWORKING',
+      featureSupportLevelMap ?? undefined,
+    );
   }
 };
 
@@ -90,6 +109,8 @@ const getManagedNetworkingState = (
   isDualStack: boolean,
   isOracleCloudInfrastructure: boolean,
   featureSupportLevelData: NewFeatureSupportLevelData,
+  platformType?: PlatformType,
+  featureSupportLevelMap?: NewFeatureSupportLevelMap | null,
 ): {
   isDisabled: boolean;
   clusterManagedDisabledReason?: string;
@@ -100,8 +121,15 @@ const getManagedNetworkingState = (
     isOracleCloudInfrastructure,
     featureSupportLevelData,
   );
-  const cmnReason = getClusterManagedDisabledReason(featureSupportLevelData);
-  const umnReason = getUserManagedDisabledReason(featureSupportLevelData);
+  const cmnReason = getClusterManagedDisabledReason(
+    featureSupportLevelData,
+    featureSupportLevelMap,
+  );
+  const umnReason = getUserManagedDisabledReason(
+    featureSupportLevelData,
+    platformType,
+    featureSupportLevelMap,
+  );
 
   return {
     isDisabled: !!(cmnReason || umnReason || networkingReason),
@@ -116,7 +144,13 @@ const NetworkConfiguration = ({
   isVipDhcpAllocationDisabled,
   defaultNetworkSettings,
 }: NetworkConfigurationProps) => {
-  const featureSupportLevelData = useNewFeatureSupportLevel();
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const featureSupportLevelData = useSupportLevelsAPI(
+    'features',
+    cluster.openshiftVersion,
+    cluster.cpuArchitecture as CpuArchitecture,
+    cluster.platform?.type,
+  );
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { setFieldValue, values, validateField } = useFormikContext<NetworkConfigurationValues>();
 
@@ -194,9 +228,11 @@ const NetworkConfiguration = ({
       getManagedNetworkingState(
         isDualStack,
         cluster.platform?.type === 'oci',
+        featureSupportLevelContext,
+        cluster.platform?.type,
         featureSupportLevelData,
       ),
-    [isDualStack, cluster.platform?.type, featureSupportLevelData],
+    [isDualStack, cluster.platform?.type, featureSupportLevelContext, featureSupportLevelData],
   );
 
   return (
@@ -214,19 +250,6 @@ const NetworkConfiguration = ({
         />
       )}
 
-      {!isUserManagedNetworking &&
-        !featureSupportLevelData.isFeatureSupported('CLUSTER_MANAGED_NETWORKING_WITH_VMS') && (
-          <Alert
-            title="Your cluster will be subject to support limitations"
-            variant={AlertVariant.info}
-            isInline={true}
-            data-testid="networking-vms-alert"
-          >
-            Some or all of your discovered hosts are virtual machines, so selecting the
-            cluster-managed networking option will limit your installed cluster's support.
-          </Alert>
-        )}
-
       {(isSNOCluster || !isUserManagedNetworking) && (
         <StackTypeControlGroup
           clusterId={cluster.id}
@@ -255,7 +278,7 @@ const NetworkConfiguration = ({
         <VirtualIPControlGroup
           cluster={cluster}
           isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled}
-          supportLevel={featureSupportLevelData.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
+          supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
         />
       )}
 

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -12,7 +12,13 @@ import {
 } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons';
 import { useField } from 'formik';
-import { CpuArchitecture, DeveloperPreview, FeatureId, getFieldId } from '../../../../common';
+import {
+  CpuArchitecture,
+  DeveloperPreview,
+  FeatureId,
+  SupportedCpuArchitecture,
+  getFieldId,
+} from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
 import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import {
@@ -20,6 +26,7 @@ import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
+import { architectureData } from '../CpuArchitectureDropdown';
 
 const INPUT_NAME = 'platform';
 const fieldId = getFieldId(INPUT_NAME, 'input');
@@ -27,7 +34,7 @@ const fieldId = getFieldId(INPUT_NAME, 'input');
 type ExternalPlatformDropdownProps = {
   showOciOption: boolean;
   onChange: (selectedPlatform: PlatformType) => void;
-  cpuArchitecture?: string;
+  cpuArchitecture?: SupportedCpuArchitecture;
   featureSupportLevelData: NewFeatureSupportLevelMap | null;
   isSNO: boolean;
 };
@@ -43,7 +50,7 @@ const getDisabledReasonForExternalPlatform = (
   newFeatureSupportLevelContext: NewFeatureSupportLevelData,
   platform: PlatformType,
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
-  cpuArchitecture?: string,
+  cpuArchitecture?: SupportedCpuArchitecture,
 ): string | undefined => {
   if (!isSNO) {
     return newFeatureSupportLevelContext.getFeatureDisabledReason(
@@ -66,7 +73,7 @@ const getExternalPlatformTypes = (
   isSNO: boolean,
   newFeatureSupportLevelContext: NewFeatureSupportLevelData,
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
-  cpuArchitecture?: string,
+  cpuArchitecture?: SupportedCpuArchitecture,
 ): Partial<{ [key in PlatformType]: ExternalPlatformInfo }> => {
   const platforms = ['none', 'nutanix', showOciOption && 'oci', 'vsphere'] as PlatformType[];
 
@@ -111,7 +118,7 @@ export const ExternalPlatformDropdown = ({
   >({});
 
   const tooltipDropdownDisabled = `Platform integration is not supported when ${
-    cpuArchitecture || ''
+    cpuArchitecture ? architectureData[cpuArchitecture].label : ''
   } is selected`;
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string) => {

package/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx

@@ -142,8 +142,9 @@ const AssistedInstallerDetailCard = ({
               <NewFeatureSupportLevelProvider
                 loadingUi={<LoadingCard />}
                 cluster={cluster}
-                cpuArchitecture={infraEnv.cpuArchitecture}
+                cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
                 openshiftVersion={cluster.openshiftVersion}
+                platformType={cluster.platform?.type}
               >
                 {content}
               </NewFeatureSupportLevelProvider>

package/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx

@@ -45,8 +45,9 @@ const AssistedInstallerExtraDetailCard: React.FC<AssistedInstallerExtraDetailCar
         <NewFeatureSupportLevelProvider
           loadingUi={<div />}
           cluster={cluster}
-          cpuArchitecture={infraEnv?.cpuArchitecture}
+          cpuArchitecture={infraEnv?.cpuArchitecture as CpuArchitecture}
           openshiftVersion={cluster.openshiftVersion}
+          platformType={cluster.platform?.type}
         >
           <Grid className="pf-u-mt-md">
             <ClusterProperties cluster={cluster} externalMode />

package/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx

@@ -10,11 +10,12 @@ import {
 
 import { useDefaultConfiguration } from '../clusterConfiguration/ClusterDefaultConfigurationContext';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { calculateClusterDateDiff } from '../../../common/sevices/DateAndTime';
+import { calculateClusterDateDiff } from '../../../common/services/DateAndTime';
 import { isInOcm } from '../../api';
 import { ExternalPlatformLinks } from '../clusterConfiguration/platformIntegration/constants';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import PostInstallAlert from '../../../common/components/clusterDetail/PostInstallAlert';
 
 type ClusterDetailStatusMessagesProps = {
   cluster: Cluster;
@@ -76,22 +77,7 @@ const ClusterDetailStatusMessages = ({
           }
         />
       </RenderIf>
-      <RenderIf condition={!!platformLink}>
-        <Alert
-          variant="warning"
-          isInline
-          data-testid="alert-modify-platform-config"
-          title={
-            <p>
-              Modify your platform configuration to access your platform's features directly in
-              OpenShift.{' '}
-              <a href={platformLink} target="_blank" rel="noopener noreferrer">
-                Learn more about configuration <i className="fas fa-external-link-alt" />
-              </a>
-            </p>
-          }
-        />
-      </RenderIf>
+      {platformLink && <PostInstallAlert link={platformLink} />}
     </>
   );
 };