@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/cim/components/ClusterDeployment/{ACMClusterDeploymentDetailsStep.tsx → clusterDetails/ACMClusterDeploymentDetailsStep.tsx}

@@ -2,13 +2,13 @@ import React from 'react';
 import { Formik, FormikProps, useFormikContext } from 'formik';
 import { Stack } from '@patternfly/react-core';
 import noop from 'lodash-es/noop.js';
-import { ClusterDetailsValues, getRichTextValidation } from '../../../common';
-import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
-import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
+import { ClusterDetailsValues, getRichTextValidation } from '../../../../common';
+import { ClusterImageSetK8sResource } from '../../../types/k8s/cluster-image-set';
 import { useDetailsFormik } from './ClusterDeploymentDetailsStep';
 import { ClusterDetailsFormFieldsProps } from './ClusterDetailsFormFields';
-import { OsImage } from '../../types';
-import { getOCPVersions } from '../helpers';
+import { OsImage } from '../../../types';
+import { getOCPVersions } from '../../helpers';
+import { ClusterDeploymentDetailsForm } from './ClusterDeploymentDetailsForm';
 
 type DetailsFormBodyProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -49,7 +49,7 @@ type ACMClusterDeploymentDetailsStepProps = DetailsFormBodyProps & {
   formRef: React.Ref<FormikProps<ClusterDetailsValues>>;
 };
 
-const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepProps> = ({
+export const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepProps> = ({
   clusterImages,
   formRef,
   usedClusterNames,
@@ -80,5 +80,3 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
     </Formik>
   );
 };
-
-export default ACMClusterDeploymentDetailsStep;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentDetailsForm.tsx → clusterDetails/ClusterDeploymentDetailsForm.tsx}

@@ -8,18 +8,26 @@ import {
   useWizardFooter,
   WizardFooter,
 } from '@patternfly/react-core';
-import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource, OsImage } from '../../types';
-import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
-import { getOCPVersions, getSelectedVersion } from '../helpers';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import {
+  AgentClusterInstallK8sResource,
+  ClusterDeploymentK8sResource,
+  OsImage,
+} from '../../../types';
+import { ClusterImageSetK8sResource } from '../../../types/k8s/cluster-image-set';
+import { getOCPVersions } from '../../helpers';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import {
   ClusterDetailsFormFields,
   ClusterDetailsFormFieldsProps,
 } from './ClusterDetailsFormFields';
 import { useFormikContext } from 'formik';
-import { ClusterDetailsValues, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
-import { ValidationSection } from './components/ValidationSection';
+import {
+  ClusterDetailsValues,
+  CpuArchitecture,
+  SupportedCpuArchitecture,
+} from '../../../../common';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
+import { ValidationSection } from '../components/ValidationSection';
 import { toNumber } from 'lodash-es';
 
 type ClusterDeploymentDetailsFormProps = {
@@ -38,17 +46,14 @@ export const ClusterDeploymentDetailsFormWrapper = ({
 }) => {
   const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
   const { syncError } = React.useContext(ClusterDeploymentWizardContext);
-  const { submitForm, isSubmitting, isValid, isValidating, dirty } =
-    useFormikContext<ClusterDetailsValues>();
+  const { isSubmitting, isValid, isValidating } = useFormikContext<ClusterDetailsValues>();
   const { t } = useTranslation();
 
+  // ClusterDeploymentDetailsFormWrapper is exclusively used by ClusterDeploymentWizard (edit flow).
+  // No form submission needed here—just navigate to the next step.
   const handleOnNext = React.useCallback(() => {
-    if (dirty) {
-      void submitForm();
-    } else {
-      void goToNextStep();
-    }
-  }, [dirty, goToNextStep, submitForm]);
+    void goToNextStep();
+  }, [goToNextStep]);
 
   const footer = React.useMemo(
     () => (
@@ -74,7 +79,7 @@ export const ClusterDeploymentDetailsFormWrapper = ({
       {syncError && (
         <StackItem>
           <ValidationSection currentStepId={'networking'} hosts={[]}>
-            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
               {syncError}
             </Alert>
           </ValidationSection>
@@ -84,8 +89,7 @@ export const ClusterDeploymentDetailsFormWrapper = ({
   );
 };
 
-const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
-  agentClusterInstall,
+export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
   clusterDeployment,
   clusterImages,
   extensionAfter,
@@ -103,18 +107,13 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
     [clusterImages, isNutanix, osImages],
   );
 
-  const forceOpenshiftVersion = agentClusterInstall
-    ? getSelectedVersion(clusterImages, agentClusterInstall)
-    : undefined;
   const isEditFlow = !!clusterDeployment;
 
   const { values } = useFormikContext<ClusterDetailsValues>();
 
   const [cpuArchitectures, allowHighlyAvailable] = React.useMemo(() => {
     const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
-    const version = allVersions.find(
-      (ver) => ver.value === values.openshiftVersion || ver.version === forceOpenshiftVersion,
-    );
+    const version = allVersions.find((ver) => ver.value === values.openshiftVersion);
     const isMulti = version?.cpuArchitectures?.[0] === CpuArchitecture.MULTI;
 
     const highlyAvailableSupported = toNumber(version?.version?.split('.')?.[1]) >= 18;
@@ -122,7 +121,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
       (isMulti ? cpuArchitectures : version?.cpuArchitectures) as SupportedCpuArchitecture[],
       highlyAvailableSupported && !isMulti,
     ];
-  }, [allVersions, forceOpenshiftVersion, values.openshiftVersion]);
+  }, [allVersions, values.openshiftVersion]);
 
   return (
     <>
@@ -140,7 +139,6 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
           versions={versions}
           allVersions={allVersions}
           isEditFlow={isEditFlow}
-          forceOpenshiftVersion={forceOpenshiftVersion}
           extensionAfter={extensionAfter}
           isNutanix={isNutanix}
           cpuArchitectures={cpuArchitectures}
@@ -150,5 +148,3 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
     </>
   );
 };
-
-export default ClusterDeploymentDetailsForm;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentDetailsStep.tsx → clusterDetails/ClusterDeploymentDetailsStep.tsx}

@@ -11,21 +11,22 @@ import {
   ClusterDetailsValues,
   getRichTextValidation,
   OpenshiftVersionOptionType,
-} from '../../../common';
+} from '../../../../common';
 
-import { ClusterDeploymentDetailsStepProps, ClusterDeploymentDetailsValues } from './types';
-import { getAICluster, getNetworkType, getOCPVersions } from '../helpers';
+import { ClusterDeploymentDetailsStepProps, ClusterDeploymentDetailsValues } from '../types';
+import { getAICluster, getNetworkType, getOCPVersions } from '../../helpers';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
   InfraEnvK8sResource,
-} from '../../types';
-import ClusterDeploymentDetailsForm, {
+} from '../../../types';
+import {
+  ClusterDeploymentDetailsForm,
   ClusterDeploymentDetailsFormWrapper,
 } from './ClusterDeploymentDetailsForm';
-import { getGridSpans } from './helpers';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { getGridSpans } from '../helpers';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 type UseDetailsFormikArgs = {
   usedClusterNames: string[];
@@ -96,7 +97,7 @@ export const useDetailsFormik = ({
   return [initialValues, validationSchema];
 };
 
-const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStepProps> = ({
+export const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStepProps> = ({
   clusterImages,
   clusterDeployment,
   agentClusterInstall,
@@ -159,5 +160,3 @@ const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStepProps>
     </Formik>
   );
 };
-
-export default ClusterDeploymentDetailsStep;

package/lib/cim/components/ClusterDeployment/{ClusterDetailsFormFields.tsx → clusterDetails/ClusterDetailsFormFields.tsx}

@@ -3,27 +3,24 @@ import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
 import {
+  acmClusterNameValidationMessages,
+  ExternalPlatformsDropdown,
   isMajorMinorVersionEqualOrGreater,
   OpenShiftVersionDropdown,
   OpenShiftVersionModal,
-} from '../../../common';
-import { StaticTextField } from '../../../common/components/ui/StaticTextField';
-import { PullSecret } from '../../../common/components/clusters';
-import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../common/types';
-import {
-  InputField,
-  RichInputField,
-  acmClusterNameValidationMessages,
-} from '../../../common/components/ui/formik';
-import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
-import { getNetworkType } from '../helpers';
+} from '../../../../common';
+import { StaticTextField } from '../../../../common/components/ui/StaticTextField';
+import { PullSecret } from '../../../../common/components/clusters';
+import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../../common/types';
+import { InputField, RichInputField } from '../../../../common/components/ui/formik';
+import { ClusterDetailsValues } from '../../../../common/components/clusterWizard/types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import CpuArchitectureDropdown from '../../common/CpuArchitectureDropdown';
+import ControlPlaneNodesDropdown from '../../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
+import { getNetworkType } from '../../helpers';
 
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
-  forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
   allVersions: OpenshiftVersionOptionType[];
@@ -43,9 +40,9 @@ export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string
         'ai:All DNS records must be subdomains of this base and include the cluster name. This cannot be changed after cluster installation. The full cluster address will be:',
       )}{' '}
       <br />
-      <strong>
+      <span className="pf-v6-u-font-weight-bold">
         {name || '[Cluster Name]'}.{baseDnsDomain || '[example.com]'}
-      </strong>
+      </span>
     </>
   );
 };
@@ -54,7 +51,6 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   isEditFlow,
   versions,
   allVersions,
-  forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
   cpuArchitectures,
@@ -67,9 +63,9 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   const { name, baseDnsDomain } = values;
 
   React.useEffect(() => {
-    if (!versions.length && !values.openshiftVersion) {
+    if (!versions.length && !values.openshiftVersion && !isEditFlow) {
       const fallbackOpenShiftVersion = allVersions.find((version) => version.default);
-      setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion);
+      setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion?.value);
       setFieldValue('openshiftVersion', fallbackOpenShiftVersion?.value);
       setFieldValue('networkType', getNetworkType(fallbackOpenShiftVersion));
     }
@@ -80,37 +76,23 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
     nameInputRef.current?.focus();
   }, []);
 
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
-
-  const additionalSelectOptions = React.useMemo(() => {
+  const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
-      !selectOptions.some((option) => option.value === values.customOpenshiftSelect?.value)
+      !versions.some((version) => version.value === values.customOpenshiftSelect)
     ) {
-      return [
-        {
-          value: values.customOpenshiftSelect.value,
-          label: values.customOpenshiftSelect.label,
-        },
-      ];
+      return allVersions.find((option) => option.value === values.customOpenshiftSelect);
     }
-    return [];
-  }, [selectOptions, values.customOpenshiftSelect]);
+    return undefined;
+  }, [allVersions, values.customOpenshiftSelect, versions]);
 
   const allowTNA = React.useMemo(() => {
     const current =
-      values.customOpenshiftSelect?.version ||
+      values.customOpenshiftSelect ||
       versions.find((version) => version.value === values.openshiftVersion)?.version;
 
     return isMajorMinorVersionEqualOrGreater(current, '4.19') && values.platform === 'baremetal';
-  }, [values.customOpenshiftSelect?.version, values.openshiftVersion, values.platform, versions]);
+  }, [values.customOpenshiftSelect, values.openshiftVersion, values.platform, versions]);
 
   return (
     <Form id="wizard-cluster-details__form">
@@ -147,24 +129,25 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           isRequired
         />
       )}
-      {forceOpenshiftVersion ? (
+      {isEditFlow ? (
         <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
-          {t('ai:OpenShift')} {forceOpenshiftVersion}
+          {t('ai:OpenShift')}{' '}
+          {allVersions.find((v) => v.value === values.openshiftVersion)?.version ||
+            values.openshiftVersion}
         </StaticTextField>
       ) : (
         <>
           <OpenShiftVersionDropdown
             name="openshiftVersion"
-            items={selectOptions}
             versions={versions}
             showReleasesLink={false}
             showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-            customItems={additionalSelectOptions}
+            customVersion={additionalSelectOption}
           />
           {openshiftVersionModalOpen && (
             <OpenShiftVersionModal
               allVersions={allVersions}
-              setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+              onClose={() => setOpenshiftVersionModalOpen(false)}
             />
           )}
         </>
@@ -178,6 +161,8 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}
 
+      <ExternalPlatformsDropdown isDisabled={isEditFlow} />
+
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}
 
       {!isEditFlow && <PullSecret />}

package/lib/cim/components/ClusterDeployment/clusterDetails/index.tsx

@@ -0,0 +1,4 @@
+export * from './ClusterDeploymentDetailsStep';
+export * from './ClusterDeploymentDetailsForm';
+export * from './ACMClusterDeploymentDetailsStep';
+export * from './ClusterDetailsFormFields';

package/lib/cim/components/ClusterDeployment/{AdditionalNTPSourcesDialogToggle.tsx → components/AdditionalNTPSourcesDialogToggle.tsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 // TODO we should use hostValidationFailureHints instead of passing this 'action' which is actually a hint
 export const AdditionalNTPSourcesDialogToggle: React.FC = () => {

package/lib/cim/components/ClusterDeployment/components/ClusterDeploymentHostsSelectionAdvanced.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Measure from 'react-measure';
 import isMatch from 'lodash-es/isMatch.js';
 import { useFormikContext } from 'formik';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+import useResizeObserver from '@react-hook/resize-observer';
 
 import { AgentK8sResource } from '../../../types';
 import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
@@ -58,6 +58,12 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     [availableAgents, locations, agentLabels],
   );
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
+
   return (
     <>
       <Grid hasGutter>
@@ -84,20 +90,16 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
           />
         )}
         <GridItem>
-          <Measure bounds>
-            {({ measureRef, contentRect }) => (
-              <div ref={measureRef}>
-                <AgentsSelectionTable
-                  matchingAgents={matchingAgents}
-                  onEditRole={onEditRole}
-                  onSetInstallationDiskId={onSetInstallationDiskId}
-                  width={contentRect.bounds?.width}
-                  onEditHost={onEditHost}
-                  onHostSelect={onHostSelect}
-                />
-              </div>
-            )}
-          </Measure>
+          <div ref={tableRef}>
+            <AgentsSelectionTable
+              matchingAgents={matchingAgents}
+              onEditRole={onEditRole}
+              onSetInstallationDiskId={onSetInstallationDiskId}
+              width={tableWidth}
+              onEditHost={onEditHost}
+              onHostSelect={onHostSelect}
+            />
+          </div>
         </GridItem>
       </Grid>
     </>

package/lib/cim/components/ClusterDeployment/components/index.tsx

@@ -0,0 +1 @@
+export * from './AdditionalNTPSourcesDialogToggle';

package/lib/cim/components/ClusterDeployment/constants.ts

@@ -18,6 +18,7 @@ export const wizardStepNames = (
   'hosts-selection': t('ai:Cluster hosts'),
   'hosts-discovery': t('ai:Cluster hosts'),
   networking: t('ai:Networking'),
+  'custom-manifests': t('ai:Custom manifests'),
   review: t('ai:Review and create'),
 });
 

package/lib/cim/components/ClusterDeployment/customManifests/ClusterDeploymentCustomManifestsStep.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import { k8sPatch, Patch } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  Alert,
+  AlertActionLink,
+  Content,
+  ContentVariants,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { ClusterWizardStepHeader, useTranslation } from '../../../../common';
+import { AgentClusterInstallK8sResource, AgentClusterInstallModel } from '../../../types';
+import { ConfigMapForm, CustomManifestFormType } from './ConfigMapForm';
+import { appendPatch } from '../../../utils';
+
+export const ClusterDeploymentCustomManifestsStep = ({
+  agentClusterInstall,
+}: {
+  agentClusterInstall: AgentClusterInstallK8sResource;
+}) => {
+  const { t } = useTranslation();
+
+  const initialValues: CustomManifestFormType = {
+    configMaps:
+      agentClusterInstall.spec?.manifestsConfigMapRefs?.map(({ name }) => ({
+        name,
+        valid: false,
+      })) || [],
+  };
+
+  const validationSchema = Yup.lazy((values: CustomManifestFormType) =>
+    Yup.object<CustomManifestFormType>({
+      configMaps: Yup.array()
+        .of(
+          Yup.object().shape({
+            name: Yup.string().required(t('ai:Config map name is required')),
+            valid: Yup.boolean().isTrue(t('ai:Config map not found')),
+            manifestNames: Yup.array()
+              .of(Yup.string())
+              .test(
+                'unique-manifests',
+                t(
+                  'ai:Manifest names in each config map should be unique across all referenced config maps.',
+                ),
+                (value) =>
+                  // check if another config map has any manifests with the same names as this one
+                  values.configMaps
+                    .flatMap(({ manifestNames }) => manifestNames)
+                    .filter((v) => value?.includes(v)).length === value?.length,
+              ),
+          }),
+        )
+        .min(
+          agentClusterInstall.spec?.platformType === 'External' ? 1 : 0,
+          t('ai:At least one config map is required'),
+        ),
+    }),
+  );
+
+  const onSubmit = async (values: CustomManifestFormType) => {
+    const patches: Patch[] = [];
+    appendPatch(
+      patches,
+      '/spec/manifestsConfigMapRefs',
+      values.configMaps.map(({ name }) => ({ name })),
+      agentClusterInstall.spec?.manifestsConfigMapRefs,
+    );
+
+    if (patches.length > 0) {
+      await k8sPatch({
+        model: AgentClusterInstallModel,
+        resource: agentClusterInstall,
+        data: patches,
+      });
+    }
+  };
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>{t('ai:Custom manifests')}</ClusterWizardStepHeader>
+      </GridItem>
+      <GridItem>
+        <Alert
+          variant="info"
+          isInline
+          title={t('ai:Add custom manifests')}
+          actionLinks={[
+            <AlertActionLink
+              key="define-config-map"
+              component={'a'}
+              href={`/k8s/ns/${
+                agentClusterInstall.metadata?.namespace as string
+              }/core~v1~ConfigMap`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('ai:Define a config map')} <ExternalLinkAltIcon />
+            </AlertActionLink>,
+          ]}
+        >
+          <Content component={ContentVariants.p}>
+            {t(
+              'ai:Define a config map with your custom manifests and select it in the form below.',
+            )}
+          </Content>
+          <Content component={ContentVariants.p}>
+            {t(
+              'ai:Manifest names in each config map should be unique across all referenced config maps.',
+            )}
+          </Content>
+        </Alert>
+      </GridItem>
+      <GridItem>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={onSubmit}
+          validationSchema={validationSchema}
+        >
+          <ConfigMapForm namespace={agentClusterInstall.metadata?.namespace as string} />
+        </Formik>
+      </GridItem>
+    </Grid>
+  );
+};