@openshift-assisted/ui-lib 2.8.2-cim → 2.8.4-cim

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

@@ -50,8 +50,8 @@ export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
 const validationSchema = Yup.lazy<OcmDiscoveryImageFormValues>((values) =>
   Yup.object<OcmDiscoveryImageFormValues>().shape({
     sshPublicKey: sshPublicKeyListValidationSchema,
-    httpProxy: httpProxyValidationSchema(values, 'httpProxy'),
-    httpsProxy: httpProxyValidationSchema(values, 'httpsProxy'), // share the schema, httpS is currently not supported
+    httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }),
+    httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }), // share the schema, httpS is currently not supported
     noProxy: noProxyValidationSchema,
   }),
 );
@@ -131,7 +131,7 @@ export const OcmDiscoveryImageConfigForm = ({
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
     >
-      {({ submitForm, isSubmitting, status }) => {
+      {({ submitForm, isSubmitting, status, setStatus }) => {
         return (
           <>
             <ModalBoxBody>
@@ -142,7 +142,6 @@ export const OcmDiscoveryImageConfigForm = ({
 
                 <StackItem>
                   <Form>
-                    <AlertFormikError status={status as StatusErrorType} />
                     <DiscoveryImageTypeDropdown
                       name="imageType"
                       defaultValue={discoveryImageTypes[imageTypeValue]}
@@ -161,18 +160,28 @@ export const OcmDiscoveryImageConfigForm = ({
               </Stack>
             </ModalBoxBody>
             <ModalBoxFooter>
-              <Button
-                onClick={() => {
-                  void submitForm();
-                }}
-                isDisabled={isSubmitting}
-                isLoading={isSubmitting}
-              >
-                {isSubmitting ? t('ai:Generating') : buttonText}
-              </Button>
-              <Button key="cancel" variant="link" onClick={onCancel}>
-                {t('ai:Cancel')}
-              </Button>
+              <Stack hasGutter style={{ width: '100%' }}>
+                <StackItem>
+                  <AlertFormikError
+                    status={status as StatusErrorType}
+                    onClose={() => setStatus(undefined)}
+                  />
+                </StackItem>
+                <StackItem>
+                  <Button
+                    onClick={() => {
+                      void submitForm();
+                    }}
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                  >
+                    {isSubmitting ? t('ai:Generating') : buttonText}
+                  </Button>
+                  <Button key="cancel" variant="link" onClick={onCancel}>
+                    {t('ai:Cancel')}
+                  </Button>
+                </StackItem>
+              </Stack>
             </ModalBoxFooter>
           </>
         );

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

@@ -1,11 +1,13 @@
 import React, { PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
-import { Form } from '@patternfly/react-core';
+import { Form, debounce } from '@patternfly/react-core';
 import {
   FieldArray,
   FieldArrayRenderProps,
   Formik,
   FormikConfig,
+  FormikErrors,
+  FormikHelpers,
   useFormikContext,
   yupToFormErrors,
 } from 'formik';
@@ -68,6 +70,33 @@ const getManifestDetails = (
   };
 };
 
+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 = ({
   onFormStateChange,
   getEmptyValues,
@@ -78,36 +107,42 @@ export const CustomManifestsForm = ({
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const [initialValues, setInitialValues] = React.useState<ManifestFormData | undefined>();
   const { addAlert, clearAlerts } = useAlerts();
-  const { customManifests, isLoading, error } = useClusterCustomManifests(cluster.id || '', true);
+  const [refreshFlag, setRefreshFlag] = React.useState<boolean>(true);
+  const { customManifests, isLoading, error } = useClusterCustomManifests(
+    cluster.id || '',
+    true,
+    refreshFlag,
+  );
   React.useEffect(() => {
     if (customManifests) {
       setInitialValues(getInitialValues(customManifests));
     }
   }, [customManifests, getInitialValues]);
 
+  const refreshCustomManifests = () => {
+    setRefreshFlag((refreshFlag) => !refreshFlag);
+  };
+
   const handleSubmit: FormikConfig<ManifestFormData>['onSubmit'] = React.useCallback(
     async (values, actions) => {
       clearAlerts();
       actions.setSubmitting(true);
-      try {
-        const manifests = values.manifests;
-        const manifestsModified = manifests.filter(
-          (manifest) =>
-            !customManifests?.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 === '',
-          );
+
+      const manifests = values.manifests;
+      const manifestsModified = manifests.filter(
+        (manifest) =>
+          !customManifests?.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);
 
@@ -124,26 +159,28 @@ export const CustomManifestsForm = ({
             );
           });
           await Promise.all(manifestsRequests);
-
+          refreshCustomManifests();
           if (newManifestsToCreate.length > 0) {
             await ClustersService.createClusterManifests(newManifestsToCreate, cluster?.id);
+            refreshCustomManifests();
           }
+        } catch (e) {
+          handleApiErrorInForm(manifests, manifestsThatExists, actions);
+          handleApiError(e, () =>
+            addAlert({
+              title: 'Failed to update the custom manifests',
+              message: getApiErrorMessage(e),
+            }),
+          );
+        } finally {
+          actions.setSubmitting(false);
         }
-      } catch (e) {
-        handleApiError(e, () =>
-          addAlert({
-            title: 'Failed to update the custom manifests',
-            message: getApiErrorMessage(e),
-          }),
-        );
-      } finally {
-        actions.setSubmitting(false);
       }
     },
     [addAlert, clearAlerts, cluster, customManifests],
   );
 
-  const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
+  const onSubmit = isViewerMode ? () => Promise.resolve() : debounce(handleSubmit, 1000);
 
   const validate = (values: ManifestFormData) => {
     try {

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

@@ -6,28 +6,17 @@ import {
   HelperText,
   FormGroup,
 } from '@patternfly/react-core';
-import { CaretDownIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons';
 import { useField } from 'formik';
 import { getFieldId } from '../../../../../common/components/ui/formik';
-import { CUSTOM_MANIFESTS_HELP_LINK, PopoverIcon } from '../../../../../common';
+import { PopoverIcon } from '../../../../../common';
 
 const FolderLabel = () => {
   return (
     <>
       Folder{' '}
       <PopoverIcon
-        bodyContent={
-          <>
-            Use documentation to help you select the right folder for the manifest you want to add.{' '}
-            <a
-              href={CUSTOM_MANIFESTS_HELP_LINK as string}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {'Learn more'} <ExternalLinkAltIcon />
-            </a>
-          </>
-        }
+        bodyContent={<>To overwrite a manifest, select the folder the existing manifest is in.</>}
       />
     </>
   );

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

@@ -1,36 +1,37 @@
 import * as Yup from 'yup';
 import { UniqueStringArrayExtractor } from '../../staticIp/commonValidationSchemas';
 import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
+import { load } from 'js-yaml';
 
+const MAX_FILE_SIZE = 100000; //100 kb
 const FILENAME_REGEX = /^[^/]*\.(yaml|yml|json)$/;
 const INCORRECT_FILENAME = 'Must have a yaml, yml or json extension and can not contain /.';
+const INCORRECT_TYPE_FILE = 'File type is not supported. File type must be yaml, yml or json.';
+const UNIQUE_FOLDER_FILENAME =
+  'Ensure unique file names within each folder to avoid conflicts and errors.';
 
 export const getUniqueValidationSchema = <FormValues,>(
   uniqueStringArrayExtractor: UniqueStringArrayExtractor<FormValues>,
 ) => {
-  return Yup.string().test(
-    'unique',
-    'Folder and file name must be unique',
-    function (value: string) {
-      const context = this.options.context as Yup.TestContext & { values?: FormValues };
-      if (!context || !context.values) {
-        return this.createError({
-          message: 'Unexpected error: Yup test context should contain form values',
-        });
-      }
-
-      const values = uniqueStringArrayExtractor(context.values, this, value);
-
-      const setValues = new Set(values);
-
-      if (!values) {
-        return this.createError({
-          message: 'Unexpected error: Failed to get values to test uniqueness',
-        });
-      }
-      return values.length === setValues.size;
-    },
-  );
+  return Yup.string().test('unique', UNIQUE_FOLDER_FILENAME, function (value: string) {
+    const context = this.options.context as Yup.TestContext & { values?: FormValues };
+    if (!context || !context.values) {
+      return this.createError({
+        message: 'Unexpected error: Yup test context should contain form values',
+      });
+    }
+
+    const values = uniqueStringArrayExtractor(context.values, this, value);
+
+    const setValues = new Set(values);
+
+    if (!values) {
+      return this.createError({
+        message: 'Unexpected error: Failed to get values to test uniqueness',
+      });
+    }
+    return values.length === setValues.size;
+  });
 };
 
 const getAllManifests: UniqueStringArrayExtractor<ManifestFormData> = (values: ManifestFormData) =>
@@ -49,7 +50,10 @@ export const getFormViewManifestsValidationSchema = Yup.lazy<ManifestFormData>((
             return validateFileName(value);
           })
           .concat(getUniqueValidationSchema(getAllManifests)),
-        manifestYaml: Yup.string().required('Required'),
+        manifestYaml: Yup.string()
+          .required('Required')
+          .test('not-big-file', getMaxFileSizeMessage, validateFileSize)
+          .test('not-valid-file', INCORRECT_TYPE_FILE, validateFileType),
       }),
     ),
   }),
@@ -58,3 +62,34 @@ export const getFormViewManifestsValidationSchema = Yup.lazy<ManifestFormData>((
 export const validateFileName = (fileName: string) => {
   return new RegExp(FILENAME_REGEX).test((fileName || '').toString());
 };
+
+export const validateFileType = (value: string) => {
+  return isStringValidYAML(value) || isStringValidJSON(value);
+};
+
+const isStringValidYAML = (input: string): boolean => {
+  try {
+    load(input);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const isStringValidJSON = (input: string): boolean => {
+  try {
+    JSON.parse(input);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const validateFileSize = (value: string): boolean => {
+  const contentFile = new Blob([value], { type: 'text/plain;charset=utf-8' });
+  return contentFile.size <= MAX_FILE_SIZE;
+};
+
+const getMaxFileSizeMessage = (): string => {
+  return `File size is too big. Upload a new ${MAX_FILE_SIZE / 1000} or less.`;
+};

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

@@ -21,11 +21,14 @@ const getNetworkLabelSuffix = (index: number, isDualStack: boolean) => {
   return isDualStack ? ` (${index === 0 ? 'IPv4' : 'IPv6'})` : '';
 };
 
-const IPv4PrefixHelperText =
-  'The subnet prefix length to assign to each individual node. For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses. If you are required to provide access to nodes from an external network, configure load balancers and routers to manage the traffic.';
+const IPv4PrefixPopoverText =
+  'For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.';
 
-const IPv6PrefixHelperText =
-  'The subnet prefix length to assign to each individual node. For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses. If you are required to provide access to nodes from an external network, configure load balancers and routers to manage the traffic.';
+const IPv6PrefixPopoverText =
+  'For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.';
+
+const ClusterPrefixHelperText =
+  'Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.';
 
 const clusterCidrHelperText =
   'The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.';
@@ -45,8 +48,18 @@ const AdvancedNetworkFields = () => {
 
   const isSubnetIPv6 = (index: number) => (isDualStack ? !!index : false);
 
-  const clusterNetworkHostPrefixHelperText = (index: number) =>
-    isSubnetIPv6(index) ? IPv6PrefixHelperText : IPv4PrefixHelperText;
+  const clusterNetworkHostPrefixPopoverText = (index: number) => (
+    <>
+      <p>
+        The subnet prefix length to assign to each individual node.{' '}
+        {isSubnetIPv6(index) ? IPv6PrefixPopoverText : IPv4PrefixPopoverText}
+      </p>
+      <p>
+        If you are required to provide access to nodes from an external network, configure load
+        balancers and routers to manage the traffic.
+      </p>
+    </>
+  );
 
   return (
     <Grid hasGutter className="pf-u-ml-lg">
@@ -76,7 +89,15 @@ const AdvancedNetworkFields = () => {
                   <StackItem className={'network-field-group pf-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
-                      label={`Cluster network host prefix${networkSuffix}`}
+                      label={
+                        <>
+                          <span>Cluster network host prefix{networkSuffix} </span>
+                          <PopoverIcon
+                            bodyContent={clusterNetworkHostPrefixPopoverText(index)}
+                            minWidth="30rem"
+                          />
+                        </>
+                      }
                       type={TextInputTypes.number}
                       min={clusterNetworkCidrPrefix(index)}
                       max={
@@ -84,7 +105,7 @@ const AdvancedNetworkFields = () => {
                           ? PREFIX_MAX_RESTRICTION.IPv6
                           : PREFIX_MAX_RESTRICTION.IPv4
                       }
-                      helperText={clusterNetworkHostPrefixHelperText(index)}
+                      helperText={ClusterPrefixHelperText}
                       isRequired
                     />
                   </StackItem>

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

@@ -38,7 +38,7 @@ import { captureException } from '../../../sentry';
 import { ClustersService } from '../../../services';
 import { setServerUpdateError, updateClusterBase } from '../../../reducers/clusters';
 import { isUnknownServerError, getApiErrorMessage, handleApiError } from '../../../api';
-import { useClusterSupportedPlatforms } from '../../../hooks';
+import { useClusterSupportedPlatforms, usePullSecret } from '../../../hooks';
 
 const NetworkConfigurationForm: React.FC<{
   cluster: Cluster;
@@ -127,11 +127,20 @@ const NetworkConfigurationForm: React.FC<{
 };
 
 const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
+  const pullSecret = usePullSecret();
   const {
     infraEnv,
     error: infraEnvError,
     isLoading,
-  } = useInfraEnv(cluster.id, CpuArchitecture.USE_DAY1_ARCHITECTURE);
+  } = useInfraEnv(
+    cluster.id,
+    cluster.cpuArchitecture
+      ? (cluster.cpuArchitecture as CpuArchitecture)
+      : CpuArchitecture.USE_DAY1_ARCHITECTURE,
+    cluster.name,
+    pullSecret,
+    cluster.openshiftVersion,
+  );
   const defaultNetworkValues = useDefaultConfiguration([
     'clusterNetworksDualstack',
     'clusterNetworksIpv4',

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

@@ -159,19 +159,12 @@ export const StackTypeControlGroup = ({
       >
         <Split>
           <SplitItem>
-            <Tooltip
-              content={
-                'Dual-stack is only available when your hosts are using IPV4 together with IPV6.'
-              }
-              hidden={isDualStackSelectable}
-            >
-              <OcmRadioField
-                name={'stackType'}
-                value={IPV4_STACK}
-                isDisabled={!isDualStackSelectable}
-                label="IPv4&nbsp;"
-              />
-            </Tooltip>
+            <OcmRadioField
+              name={'stackType'}
+              value={IPV4_STACK}
+              isDisabled={!isDualStackSelectable}
+              label="IPv4&nbsp;"
+            />
           </SplitItem>
           <SplitItem>
             <PopoverIcon

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

@@ -11,6 +11,7 @@ import {
   getVipValidationsById,
   DUAL_STACK,
   SupportLevel,
+  PopoverIcon,
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../selectors';
 import { OcmCheckboxField, OcmInputField } from '../../ui/OcmFormFields';
@@ -59,20 +60,6 @@ const VipStaticValue = ({
   return <i>This IP will be allocated by the DHCP server</i>;
 };
 
-const getVipHelperSuffix = (
-  vip?: string,
-  vipDhcpAllocation?: boolean,
-  vipDhcpAllocationFormValue?: boolean,
-): string => {
-  if (!vipDhcpAllocationFormValue) {
-    return 'Make sure that the VIP is unique and not used by any other device on your network.';
-  }
-  if (vipDhcpAllocation && vip) {
-    return 'This IP was allocated by the DHCP server.';
-  }
-  return '';
-};
-
 export type VirtualIPControlGroupProps = {
   cluster: Cluster;
   isVipDhcpAllocationDisabled?: boolean;
@@ -88,16 +75,9 @@ export const VirtualIPControlGroup = ({
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { t } = useTranslation();
 
-  const apiVipHelperText = `Provide an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information. ${getVipHelperSuffix(
-    cluster.apiVip,
-    cluster.vipDhcpAllocation,
-    values.vipDhcpAllocation,
-  )}`;
-  const ingressVipHelperText = `Provide an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information. ${getVipHelperSuffix(
-    cluster.ingressVip,
-    cluster.vipDhcpAllocation,
-    values.vipDhcpAllocation,
-  )}`;
+  const ipHelperText = 'Make sure the IP is not used by any other device on your network.';
+  const ipPopoverContent =
+    'Provides an endpoint for users, both human and machine, to interact with and configure the platform.';
 
   const {
     'api-vip-defined': apiVipFailedValidationMessage,
@@ -150,9 +130,13 @@ export const VirtualIPControlGroup = ({
       {values.vipDhcpAllocation ? (
         <>
           <FormikStaticField
-            label={`API IP${ipFieldsSuffix}`}
+            label={
+              <>
+                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
+              </>
+            }
             name="apiVip"
-            helperText={apiVipHelperText}
+            helperText={ipHelperText}
             value={values.apiVip || ''}
             isValid={!apiVipFailedValidationMessage}
             isRequired
@@ -165,9 +149,14 @@ export const VirtualIPControlGroup = ({
             />
           </FormikStaticField>
           <FormikStaticField
-            label={`Ingress IP${ipFieldsSuffix}`}
+            label={
+              <>
+                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
+                <PopoverIcon bodyContent={ipPopoverContent} />
+              </>
+            }
             name="ingressVip"
-            helperText={ingressVipHelperText}
+            helperText={ipHelperText}
             value={values.ingressVip || ''}
             isValid={!ingressVipFailedValidationMessage}
             isRequired
@@ -183,15 +172,24 @@ export const VirtualIPControlGroup = ({
       ) : (
         <>
           <OcmInputField
-            label={`API IP${ipFieldsSuffix}`}
+            label={
+              <>
+                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
+              </>
+            }
             name="apiVip"
-            helperText={apiVipHelperText}
+            helperText={ipHelperText}
             isRequired
           />
           <OcmInputField
             name="ingressVip"
-            label={`Ingress IP${ipFieldsSuffix}`}
-            helperText={ingressVipHelperText}
+            label={
+              <>
+                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
+                <PopoverIcon bodyContent={ipPopoverContent} />
+              </>
+            }
+            helperText={ipHelperText}
             isRequired
           />
         </>

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

@@ -20,7 +20,7 @@ const nutanixPlatformMessage =
   'Enable Nutanix platform integration to access features like node auto-scaling directly inside OpenShift.';
 
 const platformIntegrationTooltip =
-  'Platform integration is only applicable on non-SNO deployments and when all discovered hosts originated from the same platform.';
+  'Virtualization platform integration is only applicable on non-SNO deployments and when all discovered hosts originated from the same platform.';
 
 const messages: KeyType = {
   'no-active-integrations': undeterminedPlatformMessage,

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

@@ -28,6 +28,7 @@ import { SentryErrorMonitorContextProvider } from '../SentryErrorMonitorContextP
 import ClusterWizardContextProvider from '../clusterWizard/ClusterWizardContextProvider';
 import { BackButton } from '../ui/Buttons/BackButton';
 import { NewFeatureSupportLevelProvider } from '../newFeatureSupportLevels';
+import { usePullSecret } from '../../hooks';
 
 type AssistedInstallerDetailCardProps = {
   aiClusterId: string;
@@ -90,12 +91,21 @@ const AssistedInstallerDetailCard = ({
   permissions,
 }: AssistedInstallerDetailCardProps) => {
   const { cluster, uiState } = useClusterPolling(aiClusterId);
+  const pullSecret = usePullSecret();
   const {
     infraEnv,
     isLoading: infraEnvLoading,
     error: infraEnvError,
     updateInfraEnv,
-  } = useInfraEnv(aiClusterId, CpuArchitecture.USE_DAY1_ARCHITECTURE);
+  } = useInfraEnv(
+    aiClusterId,
+    cluster?.cpuArchitecture
+      ? (cluster.cpuArchitecture as CpuArchitecture)
+      : CpuArchitecture.USE_DAY1_ARCHITECTURE,
+    cluster?.name,
+    pullSecret,
+    cluster?.openshiftVersion,
+  );
   if (uiState === ResourceUIState.LOADING || infraEnvLoading) {
     return <LoadingCard />;
   } else if ((uiState === ResourceUIState.POLLING_ERROR && !cluster) || infraEnvError) {
@@ -151,7 +161,9 @@ const AssistedInstallerDetailCard = ({
 
 const Wrapper = (props: AssistedInstallerDetailCardProps) => (
   <Provider store={store}>
-    <AssistedInstallerDetailCard {...props} />
+    <AlertsContextProvider>
+      <AssistedInstallerDetailCard {...props} />
+    </AlertsContextProvider>
   </Provider>
 );