@openshift-assisted/ui-lib 2.17.3-cim → 2.18.0-cim

package/lib/common/components/ui/formik/LabelField.tsx

@@ -1,105 +1,89 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import {
+  Button,
   FormGroup,
   FormHelperText,
   HelperText,
   HelperTextItem,
   Label,
+  LabelGroup,
   TextInput,
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import TagsInput from 'react-tagsinput';
-import { InputFieldProps } from './types';
+
+import { useTranslation } from '../../../hooks';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { getFieldId } from './utils';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-export const LabelField = ({
-  label,
-  labelIcon,
-  helperText,
-  isRequired,
-  onChange,
-  validate,
-  idPostfix,
-  ...props
-}: InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
-}) => {
+type LabelsFieldProps = {
+  name: string;
+  label: string;
+  idPostfix?: string;
+};
+
+export const LabelField = ({ name, label, idPostfix }: LabelsFieldProps) => {
   const { t } = useTranslation();
-  const [input, setInput] = React.useState('');
-  const [field, { touched, error }, { setValue, setTouched }] = useField({
-    name: props.name,
-    validate,
-  });
-  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const [{ value: labels }, { touched, error }, { setValue: setLabels, setTouched }] =
+    useField<string[]>(name);
+  const fieldId = getFieldId(name, 'input', idPostfix);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
 
-  return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
-      <TagsInput
-        {...field}
-        onChange={(tags) => {
-          setValue(tags);
-          setInput('');
-          onChange && onChange(tags);
-          !touched && setTouched(true);
-        }}
-        addKeys={[13, 32, 188]}
-        renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-          <Label key={key} style={{ margin: 2 }} onClose={() => onRemove(key)}>
-            {getTagDisplayValue(tag)}
-          </Label>
-        )}
-        renderInput={({ value, onChange, ...rest }) => (
-          <TextInput
-            onChange={onChange as (e: unknown) => void}
-            value={value as string}
-            {...rest}
-          />
-        )}
-        renderLayout={(tagElements, inputElement) => (
-          <div
-            className="pf-v6-c-form-control"
-            style={{
-              padding: 0,
-              paddingTop: '1px',
-              display: 'flex',
-              alignItems: 'start',
-              flexWrap: 'wrap',
-              height: 'unset',
-              minHeight: '36px',
-            }}
-          >
-            <div>{tagElements}</div>
-            {inputElement}
-          </div>
-        )}
-        addOnBlur
-        inputProps={{
-          autoFocus: false,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          placeholder: field.value?.length ? '' : 'app=frontend',
-          spellCheck: 'false',
-          value: input,
-          // eslint-disable-next-line
-          onChange: (e: any) => setInput(e.target.value),
-          ['data-test']: fieldId,
-        }}
-      />
+  const onDelete = (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1);
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
 
+  const onAdd = (text: string) => {
+    if (!text) {
+      return;
+    }
+    const newLabels = [...labels, text];
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  const onEdit = (index: number, nextText: string) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1, nextText);
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  return (
+    <FormGroup label={label}>
+      <LabelGroup
+        numLabels={5}
+        addLabelControl={<EditableLabelControl defaultLabel="key=value" onAddLabel={onAdd} />}
+      >
+        {labels.map((label, index) => {
+          return (
+            <Label
+              key={index}
+              textMaxWidth="16ch"
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+              title={label}
+              isEditable
+            >
+              {label}
+            </Label>
+          );
+        })}
+      </LabelGroup>
       <FormHelperText>
         <HelperText>
           <HelperTextItem
             id={`${fieldId}-helper-text`}
             data-testid={`input-label-${fieldId}-helper-text`}
           >
-            {helperText ||
-              t(
-                "ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
-              )}
+            {t("ai:Enter a key=value and then press 'enter' to input the label.")}
           </HelperTextItem>
           {errorMessage && (
             <HelperTextItem
@@ -116,3 +100,59 @@ export const LabelField = ({
     </FormGroup>
   );
 };
+
+type EditableLabelControlProps = {
+  defaultLabel: string;
+  onAddLabel: (text: string) => void;
+};
+
+const EditableLabelControl = ({ defaultLabel, onAddLabel }: EditableLabelControlProps) => {
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const [label, setLabel] = React.useState<string>('');
+  const { t } = useTranslation();
+
+  const onConfirmAdd = () => {
+    onAddLabel(label);
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  const onDiscardAdd = () => {
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  return isEditing ? (
+    <TextInput
+      aria-label={t('ai:New label')}
+      autoFocus
+      value={label}
+      onChange={(_, value) => {
+        setLabel(value);
+      }}
+      onBlur={onConfirmAdd}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onConfirmAdd();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onDiscardAdd();
+        }
+      }}
+    />
+  ) : (
+    <Button
+      aria-label={t('ai:Add label')}
+      variant="link"
+      className="pf-v6-u-ml-xs"
+      isInline
+      onClick={() => {
+        setIsEditing(true);
+        setLabel(defaultLabel);
+      }}
+    >
+      {t('ai:Add label')}
+    </Button>
+  );
+};

package/lib/common/components/ui/formik/NumberInputField.tsx

@@ -15,7 +15,7 @@ import { getFieldId } from './utils';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // eslint-disable-next-line react/display-name
-const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
+const NumberInputField: React.FC<React.PropsWithChildren<NumberInputFieldProps>> = React.forwardRef(
   (
     {
       label,

package/lib/common/components/ui/formik/PullSecretField.tsx

@@ -67,7 +67,6 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
 
 const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   const { t } = useTranslation();
-
   return (
     <TextAreaField
       name="pullSecret"

package/lib/common/components/ui/formik/RemovableField.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import './RemovableField.css';
 import classnames from 'classnames';
-import UiIcon from '../UiIcon';
+
+import './RemovableField.css';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -30,7 +30,11 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
+          icon={
+            <Icon size="sm">
+              <MinusCircleIcon />
+            </Icon>
+          }
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -15,15 +15,13 @@ import {
   FormHelperText,
   HelperText,
   ButtonVariant,
+  Icon,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -164,11 +162,17 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               <Button
                 icon={
                   !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
                   ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
+                    <Icon status="success">
+                      <CheckCircleIcon />
+                    </Icon>
                   ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
+                    <Icon status="info">
+                      <InfoCircleIcon />
+                    </Icon>
                   )
                 }
                 variant={ButtonVariant.control}

package/lib/common/components/ui/formik/SelectFieldWithSearch.tsx

@@ -164,7 +164,7 @@ const SelectFieldWithSearch = ({
   };
 
   const onSelect = React.useCallback(
-    (val) => {
+    (val: unknown) => {
       if (val && val !== NO_RESULTS) {
         if (isMultiSelect && Array.isArray(value)) {
           setValue(

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -11,7 +11,7 @@ import { TextAreaFieldProps } from './types';
 import { getFieldId } from './utils';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const TextAreaField: React.FC<TextAreaFieldProps> = ({
+const TextAreaField: React.FC<React.PropsWithChildren<TextAreaFieldProps>> = ({
   label,
   helperText,
   getErrorText,
@@ -54,7 +54,10 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
         validated={isValid ? 'default' : 'error'}
         isRequired={isRequired}
         aria-describedby={`${fieldId}-helper`}
-        onChange={(event) => field.onChange(event)}
+        onChange={(event) => {
+          field.onChange(event);
+          restProps.onChange?.(event);
+        }}
         disabled={isDisabled}
       />
       {(errorMessage || helperText) && (
@@ -72,7 +75,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
-                data-testid={`input-textarea-${fieldId}-helper-text`}
+                data-testid={`input-textarea-${fieldId}-helper-text-error`}
               >
                 {errorMessage}
               </HelperTextItem>

package/lib/common/components/ui/formik/UploadField.tsx

@@ -12,7 +12,10 @@ import { getFieldId } from './utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const UploadField: React.FC<UploadFieldProps> = ({
+const MAX_FILE_SIZE = 2048;
+const ACCEPTED_FILES = { 'application/x-ssh-key': ['.pub'] };
+
+const UploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,
@@ -41,8 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
     return '';
   };
   const errorMessage = getErrorMessage();
-  const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
-  const maxFileSize = 2048;
+
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
@@ -70,7 +72,6 @@ const UploadField: React.FC<UploadFieldProps> = ({
         onFileInputChange={(_event, file) => {
           setFilename(file.name);
           setTouched(true);
-          setValue(file);
         }}
         onBlur={(e) => {
           const file: File | string = field.value;
@@ -96,8 +97,8 @@ const UploadField: React.FC<UploadFieldProps> = ({
         disabled={isDisabled}
         allowEditingUploadedText={allowEdittingUploadedText}
         dropzoneProps={{
-          accept: acceptedFiles,
-          maxSize: maxFileSize,
+          accept: ACCEPTED_FILES,
+          maxSize: MAX_FILE_SIZE,
         }}
         onClearClick={() => {
           setFilename('');

package/lib/common/components/ui/index.ts

@@ -28,5 +28,3 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
 export { default as ModalProgress } from './ModalProgress';
 export { default as ConfirmationModal } from './ConfirmationModal';
 export { default as NoPermissionsError } from './NoPermissionsError';
-
-export { default as UiIcon } from './UiIcon';

package/lib/common/components/ui/utils.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { DASH } from '../constants';
+import { OpenshiftVersionOptionType } from '../../types';
+import { TFunction } from 'i18next';
 
 export const getHumanizedDateTime = (dateTime?: string) => {
   if (!dateTime) return DASH;
@@ -20,3 +22,8 @@ export const isSelectEventChecked = (
   const target = event?.target as { checked?: boolean };
   return !!target?.checked;
 };
+
+export const getVersionLabel = (version: OpenshiftVersionOptionType, t: TFunction) =>
+  version.supportLevel === 'beta'
+    ? version.label + ' - ' + t('ai:Developer preview release')
+    : version.label;

package/lib/common/config/constants.ts

@@ -53,6 +53,7 @@ export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]:
   error: t('ai:Error'),
   installed: t('ai:Installed'),
   'adding-hosts': t('ai:Adding hosts'),
+  unmonitored: t('ai:Unmonitored'),
 });
 
 export const clusterFieldLabels = (t: TFunction): { [key in string]: string } => ({
@@ -70,6 +71,7 @@ export const clusterFieldLabels = (t: TFunction): { [key in string]: string } =>
   httpProxy: t('ai:HTTP proxy'),
   httpsProxy: t('ai:HTTPS proxy'),
   noProxy: t('ai:No proxy'),
+  additionalNtpSources: t('ai:Additional NTP sources'),
   machineNetworks: t('ai:Machine networks'),
   clusterNetworks: t('ai:Cluster networks'),
   serviceNetworks: t('ai:Service networks'),
@@ -331,9 +333,6 @@ export const MS_PER_DAY = 1000 * 60 * 60 * 24;
 
 export const NO_SUBNET_SET = 'NO_SUBNET_SET';
 
-export const NETWORK_TYPE_OVN = 'OVNKubernetes';
-export const NETWORK_TYPE_SDN = 'OpenShiftSDN';
-
 export const IPV4_STACK = 'singleStack';
 export const DUAL_STACK = 'dualStack';
 

package/lib/common/config/docs_links.ts

@@ -54,6 +54,8 @@ export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
   return `https://docs.redhat.com/en/documentation/openshift_container_platform/${validOcpVersion}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
 };
 
+export const RED_HAT_CNI_SUPPORT_MATRIX_LINK = 'https://access.redhat.com/articles/5436171';
+
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
 
 //Hosts status

package/lib/common/features/featureGate.tsx

@@ -34,9 +34,11 @@ export const FeatureGateContext = React.createContext<FeatureGateContextType>({
   isFeatureEnabled: () => false,
 });
 
-export const FeatureGateContextProvider: React.FC<{
-  features: FeatureListType;
-}> = ({ features, children }) => {
+export const FeatureGateContextProvider: React.FC<
+  React.PropsWithChildren<{
+    features: FeatureListType;
+  }>
+> = ({ features, children }) => {
   const featuresWithDefaults: FeatureListType = {
     ...features,
   };

package/lib/common/types/index.ts

@@ -7,6 +7,7 @@ export * from './events';
 export * from './clusters';
 export * from './cpuArchitecture';
 export * from './featureSupportLevel';
+export * from './networkType';
 export * from './typescriptExtensions';
 export * from './generateIsoFields';
 export * from './errortype';

package/lib/common/types/networkType.ts

@@ -0,0 +1,37 @@
+import type { FeatureSupportLevelId } from '@openshift-assisted/types/assisted-installer-service';
+
+export type NetworkTypeKey =
+  | 'OVNKubernetes'
+  | 'OpenShiftSDN'
+  | 'CiscoACI'
+  | 'Cilium'
+  | 'Calico'
+  | 'None';
+
+export const NETWORK_TYPE_OVN: NetworkTypeKey = 'OVNKubernetes';
+export const NETWORK_TYPE_SDN: NetworkTypeKey = 'OpenShiftSDN';
+export const NETWORK_TYPE_CISCO_ACI: NetworkTypeKey = 'CiscoACI';
+export const NETWORK_TYPE_CILIUM: NetworkTypeKey = 'Cilium';
+export const NETWORK_TYPE_CALICO: NetworkTypeKey = 'Calico';
+export const NETWORK_TYPE_NONE: NetworkTypeKey = 'None';
+
+export const NETWORK_TYPE_LABELS: Record<string, string> = {
+  [NETWORK_TYPE_OVN]: 'Open Virtual Networking (OVN)',
+  [NETWORK_TYPE_SDN]: 'Software-Defined Networking (SDN)',
+  [NETWORK_TYPE_CISCO_ACI]: 'Cisco ACI',
+  [NETWORK_TYPE_CILIUM]: 'Isovalent Cilium',
+  [NETWORK_TYPE_CALICO]: 'Tigera Calico',
+  [NETWORK_TYPE_NONE]: 'None (Custom CNI)',
+};
+
+export const NETWORK_TYPE_FEATURE_IDS: Record<string, FeatureSupportLevelId> = {
+  [NETWORK_TYPE_OVN]: 'OVN_NETWORK_TYPE',
+  [NETWORK_TYPE_SDN]: 'SDN_NETWORK_TYPE',
+  [NETWORK_TYPE_CISCO_ACI]: 'CISCO_ACI_NETWORK_TYPE',
+  [NETWORK_TYPE_CILIUM]: 'CILIUM_NETWORK_TYPE',
+  [NETWORK_TYPE_CALICO]: 'CALICO_NETWORK_TYPE',
+  [NETWORK_TYPE_NONE]: 'NONE_NETWORK_TYPE',
+};
+
+export const isThirdPartyCNI = (networkType: string | undefined): boolean =>
+  !!networkType && networkType !== NETWORK_TYPE_OVN && networkType !== NETWORK_TYPE_SDN;

package/lib/common/types/ui-settings.ts

@@ -1,5 +1,4 @@
 export type UISettingsValues = {
-  addCustomManifests?: boolean;
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
   bundlesSelected?: string[];

package/lib/common/validationSchemas/addressValidation.tsx

@@ -7,13 +7,7 @@ import { getAddress } from '../components/ui/formik/utils';
 import { getSubnet } from '../components/clusterConfiguration/utils';
 import { HostSubnets, NetworkConfigurationValues } from '../types';
 import { IP_V4_ZERO, IP_V6_ZERO, MAC_REGEX } from './regexes';
-import {
-  alwaysRequired,
-  getArrayIndexFromPath,
-  isIPorDN,
-  isIPv4Address,
-  isIPv6Address,
-} from './utils';
+import { getArrayIndexFromPath, isIPorDN, isIPv4Address, isIPv6Address } from './utils';
 import { NO_SUBNET_SET } from '../config';
 import { overlap } from 'cidr-tools';
 import parseUrl from 'parse-url';
@@ -28,6 +22,7 @@ export const ipValidationSchema = (t: TFunction) =>
 
 export const ipNoSuffixValidationSchema = (t: TFunction) =>
   Yup.string().test('ip-validation-no-suffix', t('ai:Not a valid IP address'), (value?: string) => {
+    if (!value) return true;
     const address = getAddress(value || '');
     return !!address && address.address === address.addressMinusSuffix;
   });
@@ -173,15 +168,25 @@ export const vipNoSuffixValidationSchema = (
         }
         if (apiVip === ingressVip) {
           return this.createError({
-            message: t('ai:The {{label}} Ingress and API IP addresses cannot be the same.', {
-              label: index === 0 ? t('ai:primary') : t('ai:secondary'),
-            }),
+            message:
+              index === 0
+                ? t('ai:The primary Ingress and API IP addresses cannot be the same.')
+                : t('ai:The secondary Ingress and API IP addresses cannot be the same.'),
           });
         }
         return true;
       });
+      const requiredField = (message: string) =>
+        Yup.string().test('required-field', message, function (value?: string) {
+          const index = getArrayIndexFromPath(this.path || '');
+          const api1 = (values.apiVips?.[1]?.ip ?? '').toString().trim();
+          const ingress1 = (values.ingressVips?.[1]?.ip ?? '').toString().trim();
+          // Dual-stack: secondary VIPs (index 1) are optional; skip required when both are empty
+          if (index === 1 && api1 === '' && ingress1 === '') return true;
+          return !!value;
+        });
 
-      return alwaysRequired(t('ai:Required field'))
+      return requiredField(t('ai:Required field'))
         .concat(ipNoSuffixValidationSchema(t))
         .concat(vipFamilyMatchSchema)
         .concat(vipRangeValidationSchema(hostSubnets, values, false, t))

package/lib/common/validationSchemas/ntpValidation.tsx

@@ -3,28 +3,34 @@ import { trimCommaSeparatedList } from '../components/ui/formik/utils';
 import { isIPorDN } from './utils';
 import { TFunction } from 'i18next';
 
-export const ntpSourceValidationSchema = (t: TFunction) =>
-  Yup.string()
+export const ntpSourceValidationSchema = (t: TFunction, allowEmpty = true) => {
+  let schema = Yup.string();
+
+  if (!allowEmpty) {
+    schema = schema.trim().required(t('ai:Required field'));
+  }
+
+  return schema
     .test(
       'ntp-source-validation',
       t('ai:Provide a comma separated list of valid DNS names or IP addresses.'),
       (value?: string) => {
-        if (!value || value === '') {
+        if (!value || value.trim() === '') {
           return true;
         }
-        return trimCommaSeparatedList(value)
-          .split(',')
-          .every((v) => isIPorDN(v));
+        const parts = trimCommaSeparatedList(value).split(',');
+        return parts.length > 0 && parts.every((v) => isIPorDN(v));
       },
     )
     .test(
       'ntp-source-validation-unique',
       t('ai:DNS names and IP addresses must be unique.'),
       (value?: string) => {
-        if (!value || value === '') {
+        if (!value || value.trim() === '') {
           return true;
         }
         const arr = trimCommaSeparatedList(value).split(',');
         return arr.length === new Set(arr).size;
       },
     );
+};

package/lib/common/validationSchemas/pullSecretValidation.tsx

@@ -6,19 +6,18 @@ export const pullSecretValidationSchema = (t: TFunction) =>
     'is-well-formed-json',
     t("ai:Invalid pull secret format. You must use your Red Hat account's pull secret."),
     (value?: string) => {
-      const isValid = true;
-      if (!value) return isValid;
+      if (!value || !value.trim()) return true;
       try {
-        const pullSecret = JSON.parse(value) as {
-          auths: string;
-        };
+        const pullSecret = JSON.parse(value) as unknown;
         return (
-          pullSecret.constructor.name === 'Object' &&
-          !!pullSecret?.auths &&
-          pullSecret.auths.constructor.name === 'Object'
+          typeof pullSecret === 'object' &&
+          pullSecret !== null &&
+          'auths' in pullSecret &&
+          typeof (pullSecret as { auths: unknown }).auths === 'object' &&
+          (pullSecret as { auths: unknown }).auths !== null
         );
       } catch {
-        return !isValid;
+        return false;
       }
     },
   );