@openshift-assisted/ui-lib 2.9.8-cim → 2.9.10-cim

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabContentErrors.tsx

@@ -19,20 +19,6 @@ const UnableToAddHostsError = ({ onTryAgain }: TryAgainProps) => {
   );
 };
 
-const UnsupportedVersionError = ({ version, onTryAgain }: { version: string } & TryAgainProps) => {
-  return (
-    <>
-      Unsupported OpenShift cluster version: {version || 'N/A'}.
-      <br />
-      Check your connection and{' '}
-      <Button variant={'link'} isInline onClick={onTryAgain}>
-        try again
-      </Button>
-      .
-    </>
-  );
-};
-
 const ReloadFailedError = ({ onTryAgain }: TryAgainProps) => {
   return (
     <>
@@ -63,4 +49,4 @@ const AddHostsApiError = ({ isImport, onTryAgain }: { isImport: boolean } & TryA
   );
 };
 
-export { AddHostsApiError, UnsupportedVersionError, UnableToAddHostsError, ReloadFailedError };
+export { AddHostsApiError, UnableToAddHostsError, ReloadFailedError };

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

@@ -1,9 +1,18 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  FormGroup,
+  Split,
+  SplitItem,
+  Tooltip,
+} from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
+  FeatureId,
   getDefaultCpuArchitecture,
   getFieldId,
   SupportedCpuArchitecture,
@@ -11,7 +20,14 @@ import {
 import {
   ArchitectureSupportLevelId,
   Cluster,
+  PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  NewFeatureSupportLevelMap,
+  useNewFeatureSupportLevel,
+} from '../../../common/components/newFeatureSupportLevels';
+import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
+import { ExternalPlaformIds, ExternalPlatformLabels } from './platformIntegration/constants';
 
 export type CpuArchitectureItem = {
   description: string;
@@ -57,6 +73,7 @@ type CpuArchitectureDropdownProps = {
   day1CpuArchitecture?: SupportedCpuArchitecture;
   cpuArchitectures: SupportedCpuArchitecture[];
   onChange?: (value: string) => void;
+  platformType?: PlatformType;
 };
 
 const CpuArchitectureDropdown = ({
@@ -64,7 +81,10 @@ const CpuArchitectureDropdown = ({
   day1CpuArchitecture,
   cpuArchitectures,
   onChange,
+  platformType,
 }: CpuArchitectureDropdownProps) => {
+  const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
+
   const [field, { value: selectedCpuArchitecture }, { setValue }] =
     useField<SupportedCpuArchitecture>(INPUT_NAME);
 
@@ -75,21 +95,56 @@ const CpuArchitectureDropdown = ({
     day1CpuArchitecture ? architectureData[day1CpuArchitecture].label : CpuArchitecture.x86,
   );
 
+  const supportLevelDataForAllCpuArchs = useSupportLevelsAPI(
+    'featureForAllCpus',
+    openshiftVersion,
+    undefined,
+    platformType,
+    cpuArchitectures,
+  );
+
   const enabledItems = React.useMemo(() => {
     if (cpuArchitectures !== undefined) {
       return cpuArchitectures.map((cpuArch) => {
+        let isCpuSupported = true;
+        if (supportLevelDataForAllCpuArchs) {
+          const featureSupportLevelData = supportLevelDataForAllCpuArchs[
+            cpuArch
+          ] as NewFeatureSupportLevelMap;
+          isCpuSupported = newFeatureSupportLevelContext.isFeatureSupported(
+            ExternalPlaformIds[platformType ? platformType : 'baremetal'] as FeatureId,
+            featureSupportLevelData ?? undefined,
+          );
+        }
+
+        const disabledReason = `This cluster is using the  ${
+          platformType ? ExternalPlatformLabels[platformType] : ''
+        } platform which doesn't allow this CPU architecture.`;
         return (
           <DropdownItem
             key={cpuArch}
             id={cpuArch}
             description={cpuArch ? architectureData[cpuArch].description : ''}
+            isAriaDisabled={!isCpuSupported}
           >
-            {cpuArch ? architectureData[cpuArch].label : ''}
+            <Split>
+              <SplitItem>
+                <Tooltip hidden={isCpuSupported} content={disabledReason} position="top">
+                  <div>{cpuArch ? architectureData[cpuArch].label : ''}</div>
+                </Tooltip>
+              </SplitItem>
+              <SplitItem isFilled />
+            </Split>
           </DropdownItem>
         );
       });
     }
-  }, [cpuArchitectures]);
+  }, [
+    cpuArchitectures,
+    supportLevelDataForAllCpuArchs,
+    newFeatureSupportLevelContext,
+    platformType,
+  ]);
 
   const onSelect = React.useCallback(
     (event?: React.SyntheticEvent<HTMLDivElement>) => {

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

@@ -5,8 +5,8 @@ import { getFieldId, HelperText, PopoverIcon } from '../../../common';
 import { OcmCheckbox } from '../ui/OcmFormFields';
 import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import DeleteCustomManifestModal from './manifestsConfiguration/DeleteCustomManifestModal';
-import useClusterCustomManifests from '../../hooks/useClusterCustomManifests';
 import { ClustersService } from '../../services';
+import { ClustersAPI } from '../../services/apis';
 
 const Label = () => {
   return (
@@ -27,49 +27,42 @@ const Label = () => {
 type CustomManifestCheckboxProps = { clusterId: string; isDisabled: boolean };
 
 const CustomManifestCheckbox = ({ clusterId, isDisabled }: CustomManifestCheckboxProps) => {
-  const [{ name }, , { setValue }] = useField('addCustomManifest');
+  const [{ name }, { value }, { setValue }] = useField<boolean>('addCustomManifest');
   const fieldId = getFieldId(name, 'input');
   const clusterWizardContext = useClusterWizardContext();
-  const { customManifests } = useClusterCustomManifests(clusterId, false);
   const [isDeleteCustomManifestsOpen, setDeleteCustomManifestsOpen] = React.useState(false);
-  const [manifestsRemoved, setManifestsRemoved] = React.useState(false);
-  const cleanCustomManifests = React.useCallback(() => {
+
+  const cleanCustomManifests = React.useCallback(async () => {
+    const { data: manifests } = await ClustersAPI.getManifests(clusterId);
+    void ClustersService.removeClusterManifests(manifests, clusterId);
+
     setValue(false);
-    clusterWizardContext.setAddCustomManifests(false);
+    clusterWizardContext.setCustomManifestsStep(false);
     setDeleteCustomManifestsOpen(false);
-    setManifestsRemoved(true);
-    //if cluster exists remove existing cluster manifests
-    if (clusterId && customManifests) {
-      void ClustersService.removeClusterManifests(customManifests, clusterId);
-    }
-  }, [clusterWizardContext, setValue, clusterId, customManifests]);
+    await clusterWizardContext.updateUISettings({
+      addCustomManifests: false,
+      customManifestsAdded: false,
+    });
+  }, [clusterWizardContext, setValue, clusterId]);
 
-  const onChanged = React.useCallback(
+  const onChange = React.useCallback(
     (checked: boolean) => {
-      if (!checked) {
-        //For new clusters is not necessary to show the delete modal
-        if (clusterId) setDeleteCustomManifestsOpen(true);
-        else {
-          cleanCustomManifests();
-        }
-      } else {
-        setValue(checked);
-        setManifestsRemoved(false);
-        clusterWizardContext.setAddCustomManifests(checked);
+      if (!checked && clusterWizardContext.uiSettings?.customManifestsAdded) {
+        setDeleteCustomManifestsOpen(true);
       }
+
+      setValue(checked);
+      clusterWizardContext.setCustomManifestsStep(checked);
     },
-    [setValue, clusterWizardContext, setDeleteCustomManifestsOpen, cleanCustomManifests, clusterId],
+    [setValue, clusterWizardContext, setDeleteCustomManifestsOpen],
   );
 
   const onClose = React.useCallback(() => {
     setValue(true);
-    clusterWizardContext.setAddCustomManifests(true);
+    clusterWizardContext.setCustomManifestsStep(true);
     setDeleteCustomManifestsOpen(false);
-    setManifestsRemoved(false);
   }, [clusterWizardContext, setValue]);
 
-  const customManifestsActivated =
-    clusterWizardContext.addCustomManifests || (customManifests && customManifests.length > 0);
   return (
     <>
       <FormGroup id={`form-control__${fieldId}`} isInline fieldId={fieldId}>
@@ -84,18 +77,18 @@ const CustomManifestCheckbox = ({ clusterId, isDisabled }: CustomManifestCheckbo
               the cluster.
             </HelperText>
           }
-          onChange={(checked: boolean) => onChanged(checked)}
+          onChange={onChange}
           className="with-tooltip"
-          isChecked={manifestsRemoved ? false : customManifestsActivated}
+          isChecked={value}
           isDisabled={isDisabled}
         />
         <DeleteCustomManifestModal
           isOpen={isDeleteCustomManifestsOpen}
           onClose={onClose}
-          onDelete={() => cleanCustomManifests()}
+          onDelete={() => void cleanCustomManifests()}
         />
       </FormGroup>
-      {customManifestsActivated && (
+      {value && (
         <Alert isInline variant="info" title={'This is an advanced configuration feature.'}>
           Custom manifests will be added to the wizard as a new step.
         </Alert>

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
 import { useField, useFormikContext } from 'formik';
 import { ClusterDetailsValues, HelperText, getFieldId } from '../../../common';
 import { CaretDownIcon } from '@patternfly/react-icons';
 import { OcmCheckboxField, OcmInputField } from '../ui/OcmFormFields';
 import { ManagedDomain } from '@openshift-assisted/types/assisted-installer-service';
+import { clusterExistsReason } from '../featureSupportLevels/featureStateUtils';
 
 const INPUT_NAME = 'baseDnsDomain';
 const INPUT_LABEL = 'Base domain';
@@ -21,15 +22,22 @@ export const BaseDnsHelperText = ({
   baseDnsDomain?: string;
 }) => (
   <HelperText fieldId={fieldId}>
-    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 />
+    Enter the name of your local host [localhost] or [localhost.com]. This cannot be changed after
+    creation. 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 || '[example.com]'}
+      {name || '[Cluster Name]'}.{baseDnsDomain || '[localhost.com]'}
     </strong>
   </HelperText>
 );
 
-export const OcmBaseDomainField = ({ managedDomains }: { managedDomains: ManagedDomain[] }) => {
+export const OcmBaseDomainField = ({
+  managedDomains,
+  clusterExists,
+}: {
+  managedDomains: ManagedDomain[];
+  clusterExists: boolean;
+}) => {
   const [, { value }, { setValue }] = useField<string>(INPUT_NAME);
   const { values } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain, useRedHatDnsService } = values;
@@ -72,12 +80,15 @@ export const OcmBaseDomainField = ({ managedDomains }: { managedDomains: Managed
   return (
     <>
       {!!managedDomains.length && toggleRedHatDnsService && (
-        <OcmCheckboxField
-          name="useRedHatDnsService"
-          label="Use a temporary 60-day domain"
-          helperText="A base domain will be provided for temporary, non-production clusters."
-          onChange={toggleRedHatDnsService}
-        />
+        <Tooltip content={clusterExistsReason} hidden={!clusterExists}>
+          <OcmCheckboxField
+            name="useRedHatDnsService"
+            label="Use a temporary 60-day domain"
+            helperText="A base domain will be provided for temporary, non-production clusters."
+            onChange={toggleRedHatDnsService}
+            isDisabled={clusterExists}
+          />
+        </Tooltip>
       )}
       <FormGroup
         id={`form-control__${fieldId}`}
@@ -98,7 +109,7 @@ export const OcmBaseDomainField = ({ managedDomains }: { managedDomains: Managed
         ) : (
           <OcmInputField
             name={INPUT_NAME}
-            placeholder="example.com"
+            placeholder="localhost.com"
             isDisabled={useRedHatDnsService}
             isRequired
           />

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

@@ -66,7 +66,6 @@ export const OcmClusterDetailsFormFields = ({
 
   const { t } = useTranslation();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
-  const isMultiArchSupported = useFeature('ASSISTED_INSTALLER_MULTIARCH_SUPPORTED');
   const isOracleCloudPlatformIntegrationEnabled = useFeature('ASSISTED_INSTALLER_PLATFORM_OCI');
   const { openshiftVersion, platform } = values;
   const { getCpuArchitectures } = useOpenshiftVersions();
@@ -78,8 +77,8 @@ export const OcmClusterDetailsFormFields = ({
     values.cpuArchitecture as SupportedCpuArchitecture,
   );
   const cpuArchitectures = React.useMemo(
-    () => getSupportedCpuArchitectures(isMultiArchSupported, cpuArchitecturesByVersionImage),
-    [cpuArchitecturesByVersionImage, isMultiArchSupported],
+    () => getSupportedCpuArchitectures(cpuArchitecturesByVersionImage),
+    [cpuArchitecturesByVersionImage],
   );
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -96,7 +95,7 @@ export const OcmClusterDetailsFormFields = ({
       const isOracleSelected = selectedPlatform === 'oci';
       if (isOracleSelected) {
         setFieldValue('addCustomManifest', isOracleSelected, false);
-        clusterWizardContext.setAddCustomManifests(isOracleSelected);
+        clusterWizardContext.setCustomManifestsStep(isOracleSelected);
         setFieldValue('hostsNetworkConfigurationType', HostsNetworkConfigurationType.DHCP);
       }
     },
@@ -130,7 +129,7 @@ export const OcmClusterDetailsFormFields = ({
         maxLength={CLUSTER_NAME_MAX_LENGTH}
       />
 
-      <OcmBaseDomainField managedDomains={managedDomains} />
+      <OcmBaseDomainField managedDomains={managedDomains} clusterExists={clusterExists} />
 
       {/* TODO(mlibra): For single-cluster: We will probably change this to just a static text */}
       {forceOpenshiftVersion ? (

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

@@ -7,33 +7,26 @@ import { CustomManifestFormState } from './components/propTypes';
 
 export const CustomManifestsPage = ({
   cluster,
-  onFormStateChange: onFormStateChangeParent,
+  onFormStateChange,
 }: {
   cluster: Cluster;
   onFormStateChange(formState: CustomManifestFormState): void;
-}) => {
-  const onFormStateChange = (formState: CustomManifestFormState) => {
-    const hasFilledData = !formState.isEmpty;
-    hasFilledData && onFormStateChangeParent(formState);
-  };
-
-  return (
-    <Grid hasGutter>
-      <TextContent>
-        <Text component={TextVariants.h2}>Custom manifests</Text>
-        <Text component={TextVariants.small}>
-          Upload additional manifests that will be applied at the install time for advanced
-          configuration of the cluster.
-        </Text>
-      </TextContent>
-      <Alert
-        isInline
-        variant="warning"
-        title={
-          'No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures.'
-        }
-      />
-      <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
-    </Grid>
-  );
-};
+}) => (
+  <Grid hasGutter>
+    <TextContent>
+      <Text component={TextVariants.h2}>Custom manifests</Text>
+      <Text component={TextVariants.small}>
+        Upload additional manifests that will be applied at the install time for advanced
+        configuration of the cluster.
+      </Text>
+    </TextContent>
+    <Alert
+      isInline
+      variant="warning"
+      title={
+        'No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures.'
+      }
+    />
+    <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
+  </Grid>
+);

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

@@ -3,7 +3,7 @@ import { ListManifestsExtended } from '../data/dataTypes';
 import { CustomManifestsFormProps, CustomManifestFormState } from './propTypes';
 import { getFormViewManifestsValidationSchema } from './customManifestsValidationSchema';
 import { CustomManifestsForm } from './CustomManifestsForm';
-import { getEmptyFormViewManifestsValues, getFormViewManifestValues } from './utils';
+import { getEmptyManifestsValues, getManifestValues } from './utils';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 export const CustomManifests = ({
@@ -21,9 +21,9 @@ export const CustomManifests = ({
       validationSchema: getFormViewManifestsValidationSchema,
 
       getInitialValues: (customManifests: ListManifestsExtended) => {
-        return getFormViewManifestValues(customManifests);
+        return getManifestValues(customManifests);
       },
-      getEmptyValues: () => getEmptyFormViewManifestsValues(),
+      getEmptyValues: () => getEmptyManifestsValues(),
       showEmptyValues: true,
       cluster: cluster,
     });

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

@@ -9,7 +9,7 @@ import ConfirmationModal from '../../../../../common/components/ui/ConfirmationM
 import { ClustersAPI } from '../../../../services/apis';
 import { getApiErrorMessage, handleApiError } from '../../../../api';
 import { CustomManifest } from './CustomManifest';
-import { getEmptyFormViewManifest, getManifestName } from './utils';
+import { getEmptyManifest, getManifestName } from './utils';
 import { CustomManifestValues } from '../data/dataTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
 
@@ -54,7 +54,7 @@ export const CustomManifestsArray = ({
     const newExpandedManifests = getExpandedManifestsInitialValue(field.value.length + 1);
     newExpandedManifests[field.value.length] = true;
     setExpandedManifests(newExpandedManifests);
-    push(getEmptyFormViewManifest());
+    push(getEmptyManifest());
   }, [field.value.length, push]);
 
   const removeManifest = React.useCallback(