@openshift-assisted/ui-lib 2.55.0 → 2.56.0

package/lib/ocm/components/wizard/steps/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

@@ -0,0 +1,314 @@
+import React from 'react';
+import {
+  Content,
+  ContentVariants,
+  Grid,
+  FormGroup,
+  TextInputTypes,
+  Alert,
+  AlertVariant,
+  Flex,
+  FlexItem,
+  ButtonVariant,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { useField, useFormikContext } from 'formik';
+import {
+  ConfirmationModal,
+  getFieldId,
+  getHumanizedSubnetRange,
+  PopoverIcon,
+  useFieldErrorMsg,
+} from '../../../../../../../common';
+import { OcmCheckboxField, OcmInputField, OcmRadioField } from '../../../../../ui/OcmFormFields';
+import {
+  getAddressObject,
+  getProtocolVersionLabel,
+  getShownProtocolVersions,
+  getEmptyIpConfig,
+  Cidr,
+  FormViewHost,
+  FormViewNetworkWideValues,
+  IpConfig,
+  ProtocolVersion,
+  StaticProtocolType,
+  getMachineNetworkCidr,
+} from '../../data';
+import {
+  MIN_PREFIX_LENGTH,
+  MAX_PREFIX_LENGTH,
+  MAX_VLAN_ID,
+  MIN_VLAN_ID,
+} from './formViewNetworkWideValidationSchema';
+
+import '../staticIp.css';
+
+const hostsConfiguredAlert = (
+  <Alert
+    variant={AlertVariant.warning}
+    isInline={true}
+    data-testid="hosts-configured-alert"
+    title="If you edit the values and click Next, the earlier configurations will be replaced with the new values for all of the hosts."
+  />
+);
+
+const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVersion }> = ({
+  fieldName,
+  protocolVersion,
+}) => {
+  const [{ value }] = useField<Cidr>(fieldName);
+  const ipFieldName = `${fieldName}.ip`;
+  const prefixLengthFieldName = `${fieldName}.prefixLength`;
+  const ipErrorMessage = useFieldErrorMsg({ name: ipFieldName });
+  const prefixLengthErrorMessage = useFieldErrorMsg({ name: prefixLengthFieldName });
+  const errorMessage = ipErrorMessage || prefixLengthErrorMessage;
+  const machineNetworkHelptext = React.useMemo(() => {
+    if (errorMessage) {
+      return '';
+    }
+    const cidr = getMachineNetworkCidr(value);
+    return getHumanizedSubnetRange(getAddressObject(cidr, protocolVersion));
+  }, [value, protocolVersion, errorMessage]);
+  const fieldId = getFieldId(`${fieldName}`, 'input');
+  return (
+    <FormGroup
+      labelHelp={
+        <PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
+      }
+      label="Subnet"
+      fieldId={fieldId}
+      isRequired
+      className="subnet"
+    >
+      <Flex>
+        <FlexItem spacer={{ default: 'spacerSm' }}>
+          <OcmInputField
+            name={`${fieldName}.ip`}
+            isRequired={true}
+            data-testid={`${protocolVersion}-machine-network-ip`}
+            showErrorMessage={false}
+          />
+        </FlexItem>
+        <FlexItem spacer={{ default: 'spacerSm' }}>{'/'}</FlexItem>
+        <FlexItem>
+          <OcmInputField
+            name={`${fieldName}.prefixLength`}
+            isRequired={true}
+            data-testid={`${protocolVersion}-machine-network-prefix-length`}
+            type={TextInputTypes.number}
+            showErrorMessage={false}
+            min={MIN_PREFIX_LENGTH}
+            max={
+              protocolVersion === ProtocolVersion.ipv4
+                ? MAX_PREFIX_LENGTH.ipv4
+                : MAX_PREFIX_LENGTH.ipv6
+            }
+          />
+        </FlexItem>
+      </Flex>
+      {(errorMessage || machineNetworkHelptext) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage ? <ExclamationCircleIcon /> : null}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-machine-network-${fieldId}-helper-text`}
+            >
+              {errorMessage ? errorMessage : machineNetworkHelptext}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormGroup>
+  );
+};
+
+const IpConfigFields: React.FC<{
+  fieldName: string;
+  protocolVersion: ProtocolVersion;
+}> = ({ protocolVersion, fieldName }) => {
+  return (
+    <Grid hasGutter>
+      <MachineNetwork fieldName={`${fieldName}.machineNetwork`} protocolVersion={protocolVersion} />
+      <OcmInputField
+        isRequired
+        label="Default gateway"
+        labelIcon={
+          <PopoverIcon
+            noVerticalAlign
+            bodyContent="An IP address to where any IP packet should be forwarded in case there is no other routing rule configured for a destination IP."
+          />
+        }
+        name={`${fieldName}.gateway`}
+        data-testid={`${protocolVersion}-gateway`}
+      />
+    </Grid>
+  );
+};
+
+const ipv6ValuesEmpty = (values: FormViewNetworkWideValues) =>
+  values.ipConfigs.ipv6.gateway === '' &&
+  values.ipConfigs.ipv6.machineNetwork.ip === '' &&
+  values.ipConfigs.ipv6.machineNetwork.prefixLength === '';
+
+export const ProtocolTypeSelect = () => {
+  const selectFieldName = 'protocolType';
+  const [{ value: protocolType }, , { setValue: setProtocolType }] =
+    useField<StaticProtocolType>(selectFieldName);
+  const [, , { setValue: setIpv6 }] = useField<IpConfig>(`ipConfigs.ipv6`);
+  const [openConfirmModal, setConfirmModal] = React.useState(false);
+  const { values } = useFormikContext<FormViewNetworkWideValues>();
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newProtocolType = e.target.value as StaticProtocolType;
+    if (newProtocolType === protocolType) {
+      return;
+    }
+    if (newProtocolType === 'ipv4' && !ipv6ValuesEmpty(values)) {
+      setConfirmModal(true);
+    } else {
+      //no need to empty ipv4, when switching back dual stack ipv4 remains as is
+      setIpv6(getEmptyIpConfig());
+      setProtocolType(newProtocolType);
+    }
+  };
+  const isIpv4Selected = protocolType === 'ipv4';
+  return (
+    <>
+      <FormGroup
+        fieldId={getFieldId(selectFieldName, 'radio')}
+        isInline
+        label="Networking stack type"
+        isRequired
+        onChange={onChange}
+      >
+        <OcmRadioField
+          label={
+            <>
+              {getProtocolVersionLabel(ProtocolVersion.ipv4)}{' '}
+              <PopoverIcon
+                noVerticalAlign
+                bodyContent="Select this when your hosts are using only IPv4."
+              />
+            </>
+          }
+          name={selectFieldName}
+          data-testid="select-ipv4"
+          id="select-ipv4"
+          value="ipv4"
+          isChecked={isIpv4Selected}
+          callFormikOnChange={false}
+        />
+        <OcmRadioField
+          label={
+            <>
+              {'Dual-stack'}{' '}
+              <PopoverIcon
+                noVerticalAlign
+                bodyContent="Select dual-stack when your hosts are using IPV4 together with IPV6."
+              />
+            </>
+          }
+          name={selectFieldName}
+          data-testid="select-dual-stack"
+          id="select-dual-stack"
+          value="dualStack"
+          isChecked={!isIpv4Selected}
+          callFormikOnChange={false}
+        />
+      </FormGroup>
+
+      {openConfirmModal && (
+        <ConfirmationModal
+          title={'Change networking stack type?'}
+          titleIconVariant={'warning'}
+          confirmationButtonText={'Change'}
+          confirmationButtonVariant={ButtonVariant.primary}
+          content={
+            <>
+              <p>All data and configuration done for 'Dual Stack' will be lost.</p>
+            </>
+          }
+          onClose={() => {
+            setConfirmModal(false);
+            setProtocolType('dualStack');
+          }}
+          onConfirm={() => {
+            setConfirmModal(false);
+            setProtocolType('ipv4');
+          }}
+        />
+      )}
+    </>
+  );
+};
+export const FormViewNetworkWideFields = ({ hosts }: { hosts: FormViewHost[] }) => {
+  const { values, setFieldValue } = useFormikContext<FormViewNetworkWideValues>();
+  return (
+    <>
+      <Content>
+        <Content component={ContentVariants.h3}>Network-wide configurations</Content>
+        <Content component={ContentVariants.small}>
+          The following configurations are applicable to all the hosts.
+        </Content>
+      </Content>
+
+      {hosts.length > 0 && hostsConfiguredAlert}
+
+      <ProtocolTypeSelect />
+
+      <OcmCheckboxField
+        label={
+          <>
+            {'Use VLAN '}
+            <PopoverIcon
+              noVerticalAlign
+              bodyContent="If the hosts are in a sub network, enter the VLAN ID."
+            />
+          </>
+        }
+        name="useVlan"
+        data-testid="use-vlan"
+        onChange={() => setFieldValue('vlanId', '')}
+      />
+
+      {values.useVlan && (
+        <div className="vlan-id">
+          <OcmInputField
+            label="VLAN ID"
+            name="vlanId"
+            isRequired
+            data-testid="vlan-id"
+            min={MIN_VLAN_ID}
+            max={MAX_VLAN_ID}
+          />
+        </div>
+      )}
+
+      <OcmInputField
+        isRequired
+        label="DNS"
+        name={`dns`}
+        data-testid={`dns`}
+        helperText={'List of your DNS server addresses, separated by commas.'}
+      />
+
+      {getShownProtocolVersions(values.protocolType).map((protocolVersion) => (
+        <FormGroup
+          key={protocolVersion}
+          label={getProtocolVersionLabel(protocolVersion)}
+          fieldId={getFieldId(`ip-configs-${protocolVersion}`, 'input')}
+        >
+          <IpConfigFields
+            fieldName={`ipConfigs.${protocolVersion}`}
+            protocolVersion={protocolVersion}
+          />
+        </FormGroup>
+      ))}
+    </>
+  );
+};

package/lib/ocm/components/wizard/steps/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.tsx

@@ -0,0 +1,127 @@
+import * as Yup from 'yup';
+
+import {
+  IpConfig,
+  ProtocolVersion,
+  FormViewNetworkWideValues,
+  Cidr,
+  StaticProtocolType,
+  showProtocolVersion,
+  getMachineNetworkCidr,
+} from '../../data';
+import {
+  getIpAddressInSubnetValidationSchema,
+  getIpAddressValidationSchema,
+  getIpIsNotNetworkOrBroadcastAddressSchema,
+  getMultipleIpAddressValidationSchema,
+  isNotReservedHostIPAddress,
+  isNotReservedHostDNSAddress,
+} from '../../commonValidationSchemas';
+
+const REQUIRED_MESSAGE = 'A value is required';
+const MUST_BE_A_NUMBER = 'Must be a number';
+const ONLY_DIGITS_REGEX = /^\d+$/;
+
+export const MIN_PREFIX_LENGTH = 1;
+export const MAX_PREFIX_LENGTH = {
+  ipv4: 32,
+  ipv6: 128,
+};
+
+export const MIN_VLAN_ID = 1;
+export const MAX_VLAN_ID = 4094;
+
+const transformNumber = (originalValue: number) => {
+  return isNaN(originalValue) ? null : originalValue;
+};
+
+export const getInMachineNetworkValidationSchema = (
+  protocolVersion: ProtocolVersion,
+  machineNetwork: Cidr,
+) => {
+  return getIpAddressInSubnetValidationSchema(
+    protocolVersion,
+    getMachineNetworkCidr(machineNetwork),
+  );
+};
+
+export const getIsNotNetworkOrBroadcastAddressSchema = (
+  protocolVersion: ProtocolVersion,
+  machineNetwork: Cidr,
+) => {
+  return getIpIsNotNetworkOrBroadcastAddressSchema(
+    protocolVersion,
+    getMachineNetworkCidr(machineNetwork),
+  );
+};
+
+const getMachineNetworkValidationSchema = (protocolVersion: ProtocolVersion) =>
+  Yup.object<Cidr>().shape({
+    ip: getIPValidationSchema(protocolVersion),
+    prefixLength: Yup.number()
+      .required('Prefix length is required')
+      .min(1, `Prefix length must be more than or equal to 1`)
+      .max(
+        MAX_PREFIX_LENGTH[protocolVersion],
+        `Prefix length must be less than or equal to ${MAX_PREFIX_LENGTH[protocolVersion]}`,
+      )
+      .transform(transformNumber) as Yup.NumberSchema, //add casting to not get typescript error caused by nullable
+  });
+
+const getIPValidationSchema = (protocolVersion: ProtocolVersion) => {
+  return getIpAddressValidationSchema(protocolVersion)
+    .required(REQUIRED_MESSAGE)
+    .concat(isNotReservedHostIPAddress(protocolVersion));
+};
+
+const getDNSValidationSchema = (protocolType: StaticProtocolType) => {
+  if (protocolType === 'dualStack') {
+    return getMultipleIpAddressValidationSchema()
+      .required(REQUIRED_MESSAGE)
+      .concat(isNotReservedHostDNSAddress());
+  }
+  return getMultipleIpAddressValidationSchema(ProtocolVersion.ipv4)
+    .required(REQUIRED_MESSAGE)
+    .concat(isNotReservedHostDNSAddress(ProtocolVersion.ipv4));
+};
+
+const getAddressDataValidationSchema = (protocolVersion: ProtocolVersion, ipConfig: IpConfig) => {
+  return Yup.object({
+    machineNetwork: getMachineNetworkValidationSchema(protocolVersion),
+    gateway: getIPValidationSchema(protocolVersion)
+      .concat(getInMachineNetworkValidationSchema(protocolVersion, ipConfig.machineNetwork))
+      .concat(getIsNotNetworkOrBroadcastAddressSchema(protocolVersion, ipConfig.machineNetwork)),
+  });
+};
+
+export const networkWideValidationSchema = Yup.lazy((values: FormViewNetworkWideValues) => {
+  const ipConfigsValidationSchemas = Yup.object({
+    ipv4: getAddressDataValidationSchema(ProtocolVersion.ipv4, values.ipConfigs.ipv4),
+    ipv6: showProtocolVersion(values.protocolType, ProtocolVersion.ipv6)
+      ? getAddressDataValidationSchema(ProtocolVersion.ipv6, values.ipConfigs.ipv6)
+      : Yup.object<IpConfig>(),
+  });
+
+  return Yup.object({
+    useVlan: Yup.boolean(),
+    vlanId: Yup.mixed().when('useVlan', {
+      is: (useVlan: boolean) => useVlan,
+      then: () =>
+        Yup.number()
+          .required(MUST_BE_A_NUMBER)
+          .min(1, `Must be more than or equal to 1`)
+          .max(MAX_VLAN_ID, `Must be less than or equal to ${MAX_VLAN_ID}`)
+          .test('not-number', MUST_BE_A_NUMBER, () => validateNumber(values.vlanId))
+          .nullable()
+          .transform(transformNumber) as Yup.NumberSchema,
+    }),
+    protocolType: Yup.string(),
+    dns: getDNSValidationSchema(values.protocolType),
+    ipConfigs: ipConfigsValidationSchemas,
+  });
+});
+
+export const validateNumber = (vlanId: FormViewNetworkWideValues['vlanId']) => {
+  //We need to validate that value is a number(without letters) and is not an exponential number (ex: 1e2)
+  return new RegExp(ONLY_DIGITS_REGEX).test((vlanId || '').toString());
+};

package/lib/ocm/components/wizard/steps/staticIp/components/FormViewNetworkWide/index.tsx

@@ -0,0 +1,2 @@
+export * from './FormViewNetworkWide';
+export * from './formViewNetworkWideValidationSchema';

package/lib/ocm/components/wizard/steps/staticIp/components/StaticIpForm.tsx

@@ -0,0 +1,129 @@
+import React, { PropsWithChildren } from 'react';
+import { useSelector } from 'react-redux';
+import { Form } from '@patternfly/react-core';
+import { Formik, useFormikContext, yupToFormErrors } from 'formik';
+import isEqual from 'lodash-es/isEqual.js';
+import {
+  getApiErrorMessage,
+  useAlerts,
+  useErrorMonitor,
+  useFormikAutoSave,
+} from '../../../../../../common';
+import { selectCurrentClusterPermissionsState } from '../../../../../store';
+import { useFeature } from '../../../../../hooks';
+import { getStaticNetworkConfig } from '../data/fromInfraEnv';
+import { StaticIpFormProps } from './propTypes';
+
+/** Reports form state and triggers save on every value change (useFormikAutoSave) */
+const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
+  onFormStateChange,
+  getEmptyValues,
+}: {
+  onFormStateChange: StaticIpFormProps<StaticIpFormValues>['onFormStateChange'];
+  getEmptyValues: StaticIpFormProps<StaticIpFormValues>['getEmptyValues'];
+}) => {
+  const emptyValues = React.useMemo(() => getEmptyValues(), [getEmptyValues]);
+  const { isSubmitting, isValid, touched, errors, values, initialValues, submitForm } =
+    useFormikContext<StaticIpFormValues>();
+
+  const isEmpty = React.useMemo(() => isEqual(values, emptyValues), [values, emptyValues]);
+  const isAutoSaveRunning = useFormikAutoSave(0);
+
+  // Submit once on mount when form was opened with existing data (so it gets persisted).
+  React.useEffect(() => {
+    if (!isEqual(emptyValues, initialValues)) {
+      void submitForm();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: run only on mount.
+  }, []);
+
+  React.useEffect(() => {
+    onFormStateChange({
+      isSubmitting,
+      isAutoSaveRunning,
+      isValid,
+      touched,
+      errors,
+      isEmpty,
+      values: values as Record<string, unknown>,
+    });
+  }, [
+    isSubmitting,
+    isValid,
+    isAutoSaveRunning,
+    touched,
+    errors,
+    values,
+    isEmpty,
+    onFormStateChange,
+  ]);
+  return null;
+};
+
+export const StaticIpForm = <StaticIpFormValues extends object>({
+  infraEnv,
+  updateInfraEnv,
+  getInitialValues,
+  getUpdateParams,
+  validationSchema,
+  onFormStateChange,
+  getEmptyValues,
+  children,
+  showEmptyValues,
+}: PropsWithChildren<StaticIpFormProps<StaticIpFormValues>>) => {
+  const { clearAlerts, addAlert } = useAlerts();
+  const { captureException } = useErrorMonitor();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const prefillFromInfraEnv = isSingleClusterFeatureEnabled && !!getStaticNetworkConfig(infraEnv);
+  const initialValues = React.useMemo(() => {
+    if (showEmptyValues && !prefillFromInfraEnv) {
+      return getEmptyValues();
+    }
+    return getInitialValues(infraEnv);
+  }, [showEmptyValues, prefillFromInfraEnv, infraEnv, getInitialValues, getEmptyValues]);
+
+  const handleSubmit = async (values: StaticIpFormValues) => {
+    clearAlerts();
+    try {
+      await updateInfraEnv({
+        staticNetworkConfig: getUpdateParams(infraEnv, values),
+      });
+    } catch (error) {
+      captureException(error);
+      addAlert({
+        title: 'Failed to update the static network config',
+        message: getApiErrorMessage(error),
+      });
+    }
+  };
+
+  const validate = (values: StaticIpFormValues) => {
+    try {
+      validationSchema.validateSync(values, {
+        abortEarly: false,
+        context: { values },
+      });
+      return {};
+    } catch (error) {
+      return yupToFormErrors(error);
+    }
+  };
+
+  if (!initialValues) {
+    return null;
+  }
+
+  const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
+  return (
+    <Formik initialValues={initialValues} onSubmit={onSubmit} validate={validate} validateOnMount>
+      <Form>
+        {children}
+        <AutosaveWithParentUpdate<StaticIpFormValues>
+          onFormStateChange={onFormStateChange}
+          getEmptyValues={getEmptyValues}
+        />
+      </Form>
+    </Formik>
+  );
+};