@openshift-assisted/ui-lib 2.9.0-cim → 2.9.5-cim

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

@@ -48,55 +48,53 @@ const InputField: React.FC<
     const isValid = !errorMessage;
 
     return (
-      <>
-        <Stack>
-          <StackItem>
-            <FormGroup
-              fieldId={fieldId}
-              label={label}
-              helperText={fieldHelperText}
-              helperTextInvalid={fieldHelperText}
-              validated={isValid ? 'default' : 'error'}
-              isRequired={isRequired}
-              labelIcon={labelIcon}
-              labelInfo={labelInfo}
-            >
-              {description && (
-                <HelperText fieldId={fieldId}>
-                  <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
-                </HelperText>
-              )}
-              <Split>
-                <SplitItem isFilled>
-                  <TextInput
-                    {...field}
-                    {...props}
-                    ref={ref}
-                    id={fieldId}
-                    validated={isValid ? 'default' : 'error'}
-                    isRequired={isRequired}
-                    aria-describedby={`${fieldId}-helper`}
-                    onChange={(value, event) => {
-                      if (!props.isDisabled) {
-                        !noDefaultOnChange && field.onChange(event);
-                        onChange && onChange(event);
-                      }
-                    }}
-                  />
-                </SplitItem>
-                <SplitItem>{children}</SplitItem>
-              </Split>
-            </FormGroup>
-          </StackItem>
-          <StackItem>
-            {showErrorMessage && errorMessage && (
-              <HelperText fieldId={fieldId} isError>
-                {errorMessage}
+      <Stack id={`form-control__${fieldId}`}>
+        <StackItem>
+          <FormGroup
+            fieldId={fieldId}
+            label={label}
+            helperText={fieldHelperText}
+            helperTextInvalid={fieldHelperText}
+            validated={isValid ? 'default' : 'error'}
+            isRequired={isRequired}
+            labelIcon={labelIcon}
+            labelInfo={labelInfo}
+          >
+            {description && (
+              <HelperText fieldId={fieldId}>
+                <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
               </HelperText>
             )}
-          </StackItem>
-        </Stack>
-      </>
+            <Split>
+              <SplitItem isFilled>
+                <TextInput
+                  {...field}
+                  {...props}
+                  ref={ref}
+                  id={fieldId}
+                  validated={isValid ? 'default' : 'error'}
+                  isRequired={isRequired}
+                  aria-describedby={`${fieldId}-helper`}
+                  onChange={(value, event) => {
+                    if (!props.isDisabled) {
+                      !noDefaultOnChange && field.onChange(event);
+                      onChange && onChange(event);
+                    }
+                  }}
+                />
+              </SplitItem>
+              <SplitItem>{children}</SplitItem>
+            </Split>
+          </FormGroup>
+        </StackItem>
+        <StackItem>
+          {showErrorMessage && errorMessage && (
+            <HelperText fieldId={fieldId} isError>
+              {errorMessage}
+            </HelperText>
+          )}
+        </StackItem>
+      </Stack>
     );
   },
 );

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

@@ -102,6 +102,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
     const isValid = !touched || !error?.length;
     return (
       <FormGroup
+        id={`form-control__${fieldId}`}
         fieldId={fieldId}
         label={label}
         helperText={

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

@@ -28,7 +28,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
   const fieldHelperText = <HelperText fieldId={fieldId}>{hText}</HelperText>;
 
   return (
-    <Stack>
+    <Stack id={`form-control__${fieldId}`}>
       <StackItem>
         <FormGroup
           fieldId={fieldId}

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

@@ -7,7 +7,7 @@ import { getFieldId } from './utils';
 import HelperText from './HelperText';
 import { CheckboxFieldProps } from './types';
 import { FeatureSupportLevelBadge, useFeatureSupportLevel } from '../../featureSupportLevels';
-import { ClusterCreateParams } from '../../../api/types';
+import { ClusterCreateParams } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
 type SingleNodeCheckboxProps = CheckboxFieldProps & { versions: OpenshiftVersionOptionType[] };

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

@@ -32,7 +32,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
   const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
 
   return (
-    <Stack>
+    <Stack id={`form-control__${fieldId}`}>
       <StackItem>
         <FormGroup
           fieldId={fieldId}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldHelperProps, useField } from 'formik';
+import { useField } from 'formik';
 import { FormGroup, FileUpload, Stack, StackItem } from '@patternfly/react-core';
 import { UploadFieldProps } from './types';
 import { getFieldId } from './utils';
@@ -80,8 +80,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
             dropzoneProps={{
               ...dropzoneProps,
               onDropRejected:
-                dropzoneProps?.onDropRejected &&
-                dropzoneProps?.onDropRejected(helpers as FieldHelperProps<string>),
+                dropzoneProps?.onDropRejected && dropzoneProps?.onDropRejected(helpers),
             }}
             allowEditingUploadedText={allowEdittingUploadedText}
           />

package/lib/common/components/ui/formik/types.ts

@@ -132,6 +132,7 @@ export interface CodeFieldProps extends FieldProps {
   language: CodeEditorProps['language'];
   description?: React.ReactNode;
   downloadFileName?: string;
+  dataTestid?: string;
 }
 
 type RadioWithoutRef = Omit<RadioProps, 'ref'>;

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

@@ -5,7 +5,11 @@ import set from 'lodash-es/set.js';
 import groupBy from 'lodash-es/groupBy.js';
 import pickBy from 'lodash-es/pickBy.js';
 import { OpenshiftVersionOptionType } from '../../../types';
-import { ClusterNetwork, MachineNetwork, ServiceNetwork } from '../../../api';
+import {
+  ClusterNetwork,
+  MachineNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { getKeys } from '../../../utils';
 
 export const getFieldId = (fieldName: string, fieldType: string, unique?: string) => {

package/lib/common/components/ui/formik/validationSchemas.test.ts

@@ -0,0 +1,368 @@
+import { test, describe, expect } from 'vitest';
+import {
+  baseDomainValidationSchema,
+  dnsNameValidationSchema,
+  hostPrefixValidationSchema,
+  ipBlockValidationSchema,
+  ipValidationSchema,
+  macAddressValidationSchema,
+  nameValidationSchema,
+  noProxyValidationSchema,
+  pullSecretValidationSchema,
+} from './validationSchemas';
+import { TFunction } from 'react-i18next';
+import { CLUSTER_NAME_MAX_LENGTH } from './constants';
+
+const t: TFunction = (t: string) => t;
+
+describe('validationSchemas', () => {
+  test('noProxyValidationSchema accepts input', async () => {
+    const valid = [
+      '.x.com',
+      '.x.com,.y.org, .z.net   , u.foo.bar',
+      '.svc',
+      'localhost',
+      '9999',
+      '.9999',
+      'kraken',
+      'a-x.com',
+      '.x.com,',
+    ];
+
+    await Promise.all(
+      valid.map((value) =>
+        noProxyValidationSchema
+          .validate(value)
+          .catch(() => expect(value).toBe('was rejected but is valid')),
+      ),
+    );
+  });
+
+  test('noProxyValidationSchema rejects input', async () => {
+    const invalid = ['.x.com.', '.x.com,.y.org., .z.net', '-x.com'];
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        noProxyValidationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('nameValidationSchema for clusters', async () => {
+    const usedClusterNames = ['cluster-one', 'cluster-two'];
+    const valid = [
+      'cluster-one-foo',
+      'cluster',
+      'aa',
+      'a9',
+      '0a',
+      'a'.repeat(CLUSTER_NAME_MAX_LENGTH),
+    ];
+    const invalid = [
+      'cluster$',
+      'cluster-',
+      's',
+      '-a',
+      'x.y',
+      'a@',
+      'a%',
+      'b'.repeat(CLUSTER_NAME_MAX_LENGTH + 1),
+      ...usedClusterNames,
+    ];
+
+    const validationSchema = nameValidationSchema(t, usedClusterNames, '', true, false);
+
+    await Promise.all(
+      valid.map((value) =>
+        validationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        validationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('pullSecretValidationSchema', async () => {
+    const valid = ['', '{"auths": {}}'];
+    const invalid = ['{}', '{"foo":"bar"}', '"auths":"{}"', '{"auths": "foo"}'];
+
+    await Promise.all(
+      valid.map((value) =>
+        pullSecretValidationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        pullSecretValidationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('ipValidationSchema', async () => {
+    const valid = [
+      '1.1.1.1',
+      '0.0.0.0',
+      '255.255.255.255',
+      '2345:0425:2CA1:0000:0000:0567:5673:23b5',
+      '2345:0425:2CA1:0::0567:5673:23b5',
+      '::',
+    ];
+    const invalid = [
+      '',
+      '1.1.1.1.',
+      '1.1.1',
+      '1.1.1.',
+      '255.255.255.256',
+      '1.1.1.a',
+      '1.1.1.*',
+      '2345:0425:2CA1:0:0:0567:5673:',
+    ];
+
+    await Promise.all(
+      valid.map((value) =>
+        ipValidationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        ipValidationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('macAddressValidationSchema', async () => {
+    const valid = ['', '00:00:0A:BB:28:FC', '00:00:0A:BB:28:fc'];
+    const invalid = [
+      ':00:0A:BB:28:FC',
+      '0:00:0A:BB:28:FC',
+      '00:00:0A:BB:28:FG',
+      '00:00:0A:BB:28:Fg',
+      '00:00:0A:BB:28:',
+      '00000ABB28FC',
+      '00:00:0A:BB:28',
+      '00:00:0A:BB:28 FC',
+      '00:00:0A:BB:28-FC',
+    ];
+
+    await Promise.all(
+      valid.map((value) =>
+        macAddressValidationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        macAddressValidationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('ipBlockValidationSchema', async () => {
+    const valid = ['192.1.1.0/24', '192.1.0.0/16', '193.0.0.0/8'];
+    const invalid = [
+      '',
+      '192.168.1.0',
+      '192.168.1.0/24',
+      '192.1.1.0/16',
+      '192.0.0.0/8' /* Overlap */,
+    ];
+
+    const validationSchema = ipBlockValidationSchema(['192.168.1.0']);
+    await Promise.all(
+      valid.map((value) =>
+        validationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        validationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('dnsNameValidationSchema', async () => {
+    const valid = ['', 'aa.com', 'aa.com.com.com.com', 'aa.com.' + 'b'.repeat(63)];
+    const invalid = [
+      '00:00:0A:BB:28:FC',
+      '192.1.1.1',
+      '.aa.com',
+      'aa.com.',
+      'a',
+      'aa',
+      'aa,com',
+      'aa.com.' + 'b'.repeat(63 + 1),
+      'aa.com/bb',
+    ];
+
+    await Promise.all(
+      valid.map((value) =>
+        dnsNameValidationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        dnsNameValidationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('hostPrefixValidationSchema for IPv4', async () => {
+    const valid = [16, 25];
+    const invalid = ['', 'a', 0, 1, 33, 15, 26];
+
+    const validationSchema = hostPrefixValidationSchema('192.168.0.0/16');
+    await Promise.all(
+      valid.map((value) =>
+        validationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        validationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('hostPrefixValidationSchema for IPv6', async () => {
+    const valid = [8, 32, 128];
+    const invalid = ['', 'a', 0, 1, 7, 129];
+
+    const validationSchema = hostPrefixValidationSchema('2002::1234:abcd:ffff:c0a8:101/64');
+    await Promise.all(
+      valid.map((value) =>
+        validationSchema
+          .validate(value)
+          .catch((msg: string) => expect(value).toBe(`was rejected but is valid: ${msg}`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        validationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+
+  test('baseDomainNameValidationSchema', async () => {
+    const valid = [
+      'a.com',
+      'co',
+      '1c',
+      '1-c',
+      '1--c',
+      'aaa',
+      'abc.def',
+      'a-aa.com',
+      'a--aa.com',
+      'aa.com.com.com.com',
+      'red.cat--rahul.com',
+    ];
+    const invalid = [
+      'a',
+      '-',
+      'a-',
+      '-aaa.com.',
+      'aaa-.com',
+      'a.c',
+      'aaa.c',
+      'DNSnamescancontainonlyalphabeticalcharactersa-znumericcharacters0-9theminussign-andtheperiod',
+      'DNSnamescancontainonlyalphabeticalcharactersa-znumericcharacters0-9theminussign-andtheperiod.com',
+    ];
+
+    await Promise.all(
+      valid.map((value) =>
+        baseDomainValidationSchema
+          .validate(value)
+          .catch(() => expect(value).toBe(`was rejected but is valid`)),
+      ),
+    );
+
+    let counter = 0;
+    await Promise.all(
+      invalid.map((value) =>
+        baseDomainValidationSchema.validate(value).then(
+          () => expect(value).toBe('should be rejected since it is invalid'),
+          () => counter++,
+        ),
+      ),
+    );
+
+    expect(counter).toBe(invalid.length);
+  });
+});

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -5,7 +5,13 @@ import { isInSubnet } from 'is-in-subnet';
 import * as Yup from 'yup';
 
 import { TFunction } from 'i18next';
-import { ClusterNetwork, MachineNetwork, ServiceNetwork } from '../../../api/types';
+import {
+  ApiVip,
+  ClusterNetwork,
+  IngressVip,
+  MachineNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { NO_SUBNET_SET } from '../../../config/constants';
 import { ProxyFieldsType } from '../../../types';
 import { HostSubnets, NetworkConfigurationValues } from '../../../types/clusters';
@@ -21,6 +27,8 @@ import {
   nameValidationMessages,
 } from './constants';
 import { allSubnetsIPv4, getAddress, trimCommaSeparatedList, trimSshPublicKey } from './utils';
+import { selectApiVip, selectIngressVip } from '../../../selectors';
+import { head } from 'lodash-es';
 
 const ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;
 const NAME_START_END_REGEX = /^[a-z0-9](.*[a-z0-9])?$/;
@@ -30,11 +38,11 @@ const CLUSTER_NAME_VALID_CHARS_REGEX = /^[a-z0-9-]*$/;
 const SSH_PUBLIC_KEY_REGEX =
   /^(ssh-rsa|ssh-ed25519|ecdsa-[-a-z0-9]*) AAAA[0-9A-Za-z+/]+[=]{0,3}( .+)?$/;
 const DNS_NAME_REGEX = /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/;
-const BASE_DOMAIN_REGEX = /^([a-z0-9]+(-[a-z0-9]+)*)$/;
-const DNS_NAME_REGEX_OCM = /^([a-z0-9]+(-[a-z0-9]+)*[.])+[a-z]{2,}$/;
+const BASE_DOMAIN_REGEX = /^[a-z\d][\-]*[a-z\d]+$/;
+const DNS_NAME_REGEX_OCM = /^([a-z\d]([\-]*[a-z\d]+)*\.)+[a-z\d]+[\-]*[a-z\d]+$/;
 
 const PROXY_DNS_REGEX =
-  /(^\.?([a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62}\.){1}([a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62})+$)|(^\*$)/;
+  /(^\.?([a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62}){1}(\.[a-zA-Z0-9_]{1}[a-zA-Z0-9_-]{0,62})*$)/;
 const IP_V4_ZERO = '0.0.0.0';
 const IP_V6_ZERO = '0000:0000:0000:0000:0000:0000:0000:0000';
 const MAC_REGEX = /^([0-9A-Fa-f]{2}[:]){5}([0-9A-Fa-f]{2})$/;
@@ -220,15 +228,15 @@ export const vipRangeValidationSchema = (
     },
   );
 
-const vipUniqueValidationSchema = ({ ingressVip, apiVip }: NetworkConfigurationValues) =>
+const vipUniqueValidationSchema = ({ ingressVips, apiVips }: NetworkConfigurationValues) =>
   Yup.string().test(
     'vip-uniqueness-validation',
     'The Ingress and API IP addresses cannot be the same.',
     (value) => {
-      if (!value) {
+      if (!value || ingressVips?.length === 0 || apiVips?.length === 0) {
         return true;
       }
-      return ingressVip !== apiVip;
+      return selectApiVip({ apiVips }) !== selectIngressVip({ ingressVips });
     },
   );
 
@@ -280,12 +288,12 @@ export const vipValidationSchema = (
 export const vipNoSuffixValidationSchema = (
   hostSubnets: HostSubnets,
   values: NetworkConfigurationValues,
-  initialValue?: string,
+  initialValues?: ApiVip[] | IngressVip[],
 ) =>
   Yup.mixed().when(['vipDhcpAllocation', 'managedNetworkingType'], {
     is: (vipDhcpAllocation, managedNetworkingType) =>
       !vipDhcpAllocation && managedNetworkingType !== 'userManaged',
-    then: requiredOnceSet(initialValue, 'Required. Please provide an IP address')
+    then: requiredOnceSet(head(initialValues)?.ip, 'Required. Please provide an IP address')
       .concat(ipNoSuffixValidationSchema)
       .concat(vipRangeValidationSchema(hostSubnets, values, false))
       .concat(vipBroadcastValidationSchema(values))
@@ -296,6 +304,25 @@ export const vipNoSuffixValidationSchema = (
       }),
   });
 
+export const vipArrayValidationSchema = <T>(
+  hostSubnets: HostSubnets,
+  values: NetworkConfigurationValues,
+  initialValues?: ApiVip[] | IngressVip[],
+) =>
+  (values.apiVips?.length && values.managedNetworkingType === 'clusterManaged'
+    ? Yup.array<T>().of(
+        Yup.object().shape({
+          clusterId: Yup.string(),
+          ip: vipNoSuffixValidationSchema(hostSubnets, values, initialValues),
+        }),
+      )
+    : Yup.array<T>()
+  ).test(
+    'vips-length',
+    'Both API and ingress APIs must be provided.',
+    (_value) => values.apiVips?.length === values.ingressVips?.length,
+  );
+
 export const ipBlockValidationSchema = (reservedCidrs: string | string[] | undefined) =>
   Yup.string()
     .required('A value is required.')
@@ -371,9 +398,10 @@ export const dnsNameValidationSchema = Yup.string()
   });
 
 export const validateBaseDomainName = (baseDomainName: string) => {
-  if (baseDomainName.match(BASE_DOMAIN_REGEX)) return true;
-  else if (baseDomainName.match(DNS_NAME_REGEX_OCM)) return true;
-  else return false;
+  if (baseDomainName.match(BASE_DOMAIN_REGEX) && baseDomainName.length > 1) {
+    return true;
+  }
+  return !!baseDomainName.match(DNS_NAME_REGEX_OCM);
 };
 
 export const baseDomainValidationSchema = Yup.string()