@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHosts.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { StaticIpForm } from '../StaticIpForm';
-import { StaticIpFormProps, StaticIpViewProps } from '../propTypes';
-
-import { FormViewHostsValues, StaticProtocolType } from '../../data/dataTypes';
-import { FormViewHostsFields } from './FormViewHostsFields';
-import { getFormViewHostsValidationSchema } from './formViewHostsValidationSchema';
-import { formViewHostsToInfraEnvField } from '../../data/formDataToInfraEnvField';
-import { getEmptyFormViewHostsValues } from '../../data/emptyData';
-import { getFormViewHostsValues, getFormViewNetworkWideValues } from '../../data/fromInfraEnv';
-import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-import { useTranslation } from '../../../../../../common';
-
-export const FormViewHosts: React.FC<StaticIpViewProps> = ({ infraEnv, ...props }) => {
-  const { t } = useTranslation();
-  const [protocolType, setProtocolType] = React.useState<StaticProtocolType>();
-  const [formProps, setFormProps] = React.useState<StaticIpFormProps<FormViewHostsValues>>();
-  React.useEffect(() => {
-    const networkWideValues = getFormViewNetworkWideValues(infraEnv);
-    setProtocolType(networkWideValues.protocolType);
-
-    if (networkWideValues) {
-      setFormProps({
-        infraEnv,
-        validationSchema: getFormViewHostsValidationSchema(networkWideValues, t),
-        getInitialValues: (infraEnv: InfraEnv) => {
-          return getFormViewHostsValues(infraEnv);
-        },
-        getUpdateParams: (currentInfraEnv: InfraEnv, values: FormViewHostsValues) =>
-          formViewHostsToInfraEnvField(currentInfraEnv, values.hosts),
-        getEmptyValues: () => getEmptyFormViewHostsValues(),
-        ...props,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!formProps || !protocolType) {
-    return null;
-  }
-  return (
-    <StaticIpForm<FormViewHostsValues> {...formProps}>
-      <FormViewHostsFields protocolType={protocolType} />
-    </StaticIpForm>
-  );
-};

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -1,161 +0,0 @@
-import React from 'react';
-import { FormGroup, Grid, Content, ContentVariants } from '@patternfly/react-core';
-import { useField, useFormikContext } from 'formik';
-import StaticIpHostsArray, { HostComponentProps } from '../StaticIpHostsArray';
-import { getFieldId, PopoverIcon } from '../../../../../../common';
-import HostSummary from '../CollapsedHost';
-import { FormViewHost, StaticProtocolType } from '../../data/dataTypes';
-import { getProtocolVersionLabel, getShownProtocolVersions } from '../../data/protocolVersion';
-import { getEmptyFormViewHost } from '../../data/emptyData';
-import { OcmCheckboxField, OcmInputField } from '../../../../ui/OcmFormFields';
-import '../staticIp.css';
-import BondsSelect from './BondsSelect';
-import BondsConfirmationModal from './BondsConfirmationModal';
-
-const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
-  const Component: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) => {
-    const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
-    const { setFieldValue } = useFormikContext();
-    const [bondPrimaryField] = useField(`${fieldName}.bondPrimaryInterface`);
-    const [bondSecondaryField] = useField(`${fieldName}.bondSecondaryInterface`);
-    const [useBond] = useField(`${fieldName}.useBond`);
-
-    const handleUseBondChange = (checked: boolean) => {
-      if (!checked) {
-        if (bondPrimaryField.value || bondSecondaryField.value) {
-          setIsModalOpen(true);
-        } else {
-          setFieldValue(`${fieldName}.useBond`, false);
-          setFieldValue(`${fieldName}.bondType`, 'active-backup');
-          setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
-          setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
-        }
-      }
-    };
-
-    const handleModalConfirm = () => {
-      setFieldValue(`${fieldName}.useBond`, false);
-      setFieldValue(`${fieldName}.bondType`, 'active-backup');
-      setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
-      setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
-      setIsModalOpen(false);
-    };
-
-    const handleModalCancel = () => {
-      setFieldValue(`${fieldName}.useBond`, true);
-      setIsModalOpen(false);
-    };
-    return (
-      <>
-        <Grid hasGutter>
-          <FormGroup>
-            <OcmCheckboxField
-              label={
-                <>
-                  {'Use bond'}{' '}
-                  <PopoverIcon
-                    noVerticalAlign
-                    bodyContent="Bonds help you to combine network interfaces  for increased bandwidth and ensure redundancy. To bond more than 2 network interfaces per host, use the YAML view."
-                  />
-                </>
-              }
-              onChange={(value) => handleUseBondChange(value)}
-              name={`${fieldName}.useBond`}
-              data-testid={`use-bond-${hostIdx}`}
-            />
-          </FormGroup>
-          {useBond.value && (
-            <Grid hasGutter className="pf-v6-u-ml-lg">
-              <FormGroup fieldId={`bond-type-${hostIdx}`}>
-                <BondsSelect name={`${fieldName}.bondType`} data-testid={`bond-type-${hostIdx}`} />
-              </FormGroup>
-              <OcmInputField
-                name={`${fieldName}.bondPrimaryInterface`}
-                label="Port 1 MAC Address"
-                data-testid={`bond-primary-interface-${hostIdx}`}
-                isRequired
-              />{' '}
-              <OcmInputField
-                name={`${fieldName}.bondSecondaryInterface`}
-                label="Port 2 MAC Address"
-                data-testid={`bond-secondary-interface-${hostIdx}`}
-                isRequired
-              />
-            </Grid>
-          )}
-          {!useBond.value && (
-            <OcmInputField
-              name={`${fieldName}.macAddress`}
-              label="MAC Address"
-              isRequired
-              data-testid={`mac-address-${hostIdx}`}
-            />
-          )}
-          {getShownProtocolVersions(protocolType).map((protocolVersion) => (
-            <FormGroup
-              label={`IP address (${getProtocolVersionLabel(protocolVersion)})`}
-              fieldId={getFieldId(`${fieldName}.ips.${protocolVersion}`, 'input')}
-              key={protocolVersion}
-            >
-              <OcmInputField
-                name={`${fieldName}.ips.${protocolVersion}`}
-                isRequired
-                data-testid={`${protocolVersion}-address-${hostIdx}`}
-              />{' '}
-            </FormGroup>
-          ))}
-        </Grid>
-        <BondsConfirmationModal
-          isOpen={isModalOpen}
-          onConfirm={handleModalConfirm}
-          onCancel={handleModalCancel}
-        />
-      </>
-    );
-  };
-  return Component;
-};
-
-const getCollapsedHostComponent = (protocolType: StaticProtocolType) => {
-  const Component: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) => {
-    const [{ value }, { error }] = useField<FormViewHost>({
-      name: fieldName,
-    });
-    const ipAddresses = getShownProtocolVersions(protocolType).map(
-      (protocolVersion) => value.ips[protocolVersion],
-    );
-    const mapValue = ipAddresses.join(', ');
-
-    return (
-      <HostSummary
-        title={value.useBond ? 'Bonds to IP mapping' : 'MAC to IP mapping'}
-        numInterfaces={1}
-        macAddress={value.macAddress}
-        mappingValue={mapValue}
-        hostIdx={hostIdx}
-        hasError={!!error}
-        bondPrimaryInterface={value.bondPrimaryInterface}
-        bondSecondaryInterface={value.bondSecondaryInterface}
-      />
-    );
-  };
-  return Component;
-};
-
-export const FormViewHostsFields: React.FC<{ protocolType: StaticProtocolType }> = ({
-  protocolType,
-}) => {
-  const emptyHost = getEmptyFormViewHost();
-  const CollapsedHostComponent = getCollapsedHostComponent(protocolType);
-  const ExpandedHostComponent = getExpandedHostComponent(protocolType);
-  return (
-    <>
-      <Content component={ContentVariants.h3}>Host specific configurations</Content>
-      <StaticIpHostsArray<FormViewHost>
-        CollapsedHostComponent={CollapsedHostComponent}
-        ExpandedHostComponent={ExpandedHostComponent}
-        emptyHostData={emptyHost}
-      />
-    </>
-  );
-};

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/formViewHostsValidationSchema.tsx

@@ -1,109 +0,0 @@
-import * as Yup from 'yup';
-import { TFunction } from 'i18next';
-
-import {
-  FormViewNetworkWideValues,
-  FormViewHostsValues,
-  ProtocolVersion,
-} from '../../data/dataTypes';
-import { macAddressValidationSchema } from '../../../../../../common';
-import { showIpv4, showIpv6 } from '../../data/protocolVersion';
-import { getInMachineNetworkValidationSchema } from '../FormViewNetworkWide/formViewNetworkWideValidationSchema';
-import {
-  getUniqueValidationSchema,
-  UniqueStringArrayExtractor,
-  getIpIsNotNetworkOrBroadcastAddressSchema,
-} from '../../commonValidationSchemas';
-import { getMachineNetworkCidr } from '../../data/machineNetwork';
-
-const requiredMsg = 'A value is required';
-
-const getAllIpv4Addresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
-  values: FormViewHostsValues,
-) => values.hosts.map((host) => host.ips.ipv4);
-
-const getAllIpv6Addresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
-  values: FormViewHostsValues,
-) => values.hosts.map((host) => host.ips.ipv6);
-
-const getAllMacAddresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
-  values: FormViewHostsValues,
-) => {
-  return values.hosts.map((host) => host.macAddress);
-};
-
-const getAllBondInterfaces: UniqueStringArrayExtractor<FormViewHostsValues> = (
-  values: FormViewHostsValues,
-) => {
-  return values.hosts.flatMap((host) => [
-    host.bondPrimaryInterface.toLowerCase(),
-    host.bondSecondaryInterface.toLowerCase(),
-  ]);
-};
-
-const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues, t: TFunction) =>
-  Yup.object({
-    macAddress: Yup.mixed().when('useBond', {
-      is: false,
-      then: () =>
-        macAddressValidationSchema(t)
-          .required(requiredMsg)
-          .concat(getUniqueValidationSchema(getAllMacAddresses)),
-      otherwise: () => Yup.mixed().notRequired(),
-    }),
-    ips: Yup.object({
-      ipv4: showIpv4(networkWideValues.protocolType)
-        ? getInMachineNetworkValidationSchema(
-            ProtocolVersion.ipv4,
-            networkWideValues.ipConfigs['ipv4'].machineNetwork,
-          )
-            .required(requiredMsg)
-            .concat(getUniqueValidationSchema(getAllIpv4Addresses))
-            .concat(
-              getIpIsNotNetworkOrBroadcastAddressSchema(
-                ProtocolVersion.ipv4,
-                getMachineNetworkCidr(networkWideValues.ipConfigs['ipv4'].machineNetwork),
-              ),
-            )
-        : Yup.string(),
-      ipv6: showIpv6(networkWideValues.protocolType)
-        ? getInMachineNetworkValidationSchema(
-            ProtocolVersion.ipv6,
-            networkWideValues.ipConfigs['ipv6'].machineNetwork,
-          )
-            .required(requiredMsg)
-            .concat(getUniqueValidationSchema(getAllIpv6Addresses))
-            .concat(
-              getIpIsNotNetworkOrBroadcastAddressSchema(
-                ProtocolVersion.ipv6,
-                getMachineNetworkCidr(networkWideValues.ipConfigs['ipv6'].machineNetwork),
-              ),
-            )
-        : Yup.string(),
-    }),
-    bondPrimaryInterface: Yup.mixed().when('useBond', {
-      is: true,
-      then: () =>
-        macAddressValidationSchema(t)
-          .required(requiredMsg)
-          .concat(getUniqueValidationSchema(getAllBondInterfaces)),
-      otherwise: () => Yup.mixed().notRequired(),
-    }),
-    bondSecondaryInterface: Yup.mixed().when('useBond', {
-      is: true,
-      then: () =>
-        macAddressValidationSchema(t)
-          .required(requiredMsg)
-          .concat(getUniqueValidationSchema(getAllBondInterfaces)),
-      otherwise: () => Yup.mixed().notRequired(),
-    }),
-  });
-
-export const getFormViewHostsValidationSchema = (
-  networkWideValues: FormViewNetworkWideValues,
-  t: TFunction,
-) => {
-  return Yup.object().shape({
-    hosts: Yup.array(getHostValidationSchema(networkWideValues, t)),
-  });
-};

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWide.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { StaticIpForm } from '../StaticIpForm';
-import { StaticIpFormProps, StaticIpViewProps } from '../propTypes';
-import { FormViewHost, FormViewNetworkWideValues } from '../../data/dataTypes';
-import { networkWideValidationSchema } from './formViewNetworkWideValidationSchema';
-import { networkWideToInfraEnvField } from '../../data/formDataToInfraEnvField';
-import { FormViewNetworkWideFields } from './FormViewNetworkWideFields';
-import { getFormData, getFormViewNetworkWideValues } from '../../data/fromInfraEnv';
-import { getEmptyNetworkWideConfigurations } from '../../data/emptyData';
-import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-
-export const FormViewNetworkWide: React.FC<StaticIpViewProps> = ({ infraEnv, ...props }) => {
-  const [formProps, setFormProps] = React.useState<StaticIpFormProps<FormViewNetworkWideValues>>();
-  const [hosts, setHosts] = React.useState<FormViewHost[]>();
-
-  React.useEffect(() => {
-    const _hosts = getFormData(infraEnv).hosts;
-    setHosts(_hosts);
-    if (!_hosts) {
-      return;
-    }
-    setFormProps({
-      infraEnv,
-      ...props,
-      validationSchema: networkWideValidationSchema,
-      getInitialValues: (infraEnv: InfraEnv) => {
-        return getFormViewNetworkWideValues(infraEnv);
-      },
-      getUpdateParams: (currentInfraEnv: InfraEnv, values: FormViewNetworkWideValues) =>
-        networkWideToInfraEnvField(currentInfraEnv, values),
-      getEmptyValues: () => getEmptyNetworkWideConfigurations(),
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!hosts || !formProps) {
-    return null;
-  }
-  return (
-    <StaticIpForm<FormViewNetworkWideValues> {...formProps}>
-      <FormViewNetworkWideFields hosts={hosts} />
-    </StaticIpForm>
-  );
-};

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

@@ -1,317 +0,0 @@
-import React from 'react';
-import {
-  Content,
-  ContentVariants,
-  Grid,
-  FormGroup,
-  TextInputTypes,
-  Alert,
-  AlertVariant,
-  Flex,
-  FlexItem,
-  ButtonVariant,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
-} from '@patternfly/react-core';
-import { useField, useFormikContext } from 'formik';
-import {
-  ConfirmationModal,
-  getFieldId,
-  getHumanizedSubnetRange,
-  PopoverIcon,
-} from '../../../../../../common';
-import {
-  getAddressObject,
-  getProtocolVersionLabel,
-  getShownProtocolVersions,
-} from '../../data/protocolVersion';
-import * as types from '../../data/dataTypes';
-import { getEmptyIpConfig } from '../../data/emptyData';
-import {
-  Cidr,
-  FormViewHost,
-  FormViewNetworkWideValues,
-  IpConfig,
-  ProtocolVersion,
-  StaticProtocolType,
-} from '../../data/dataTypes';
-import { getMachineNetworkCidr } from '../../data/machineNetwork';
-import useFieldErrorMsg from '../../../../../../common/hooks/useFieldErrorMsg';
-import {
-  MIN_PREFIX_LENGTH,
-  MAX_PREFIX_LENGTH,
-  MAX_VLAN_ID,
-  MIN_VLAN_ID,
-} from './formViewNetworkWideValidationSchema';
-import { OcmCheckboxField, OcmInputField, OcmRadioField } from '../../../../ui/OcmFormFields';
-
-import '../staticIp.css';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-
-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 types.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>
-      ))}
-    </>
-  );
-};