@openshift-assisted/ui-lib 2.7.11-cim → 2.8.2-cim

package/build/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Text, TextVariants, Grid, FormGroup, TextInputTypes, Alert, AlertVariant, TextContent, Flex, FlexItem, ButtonVariant, } from '@patternfly/react-core';
+import { useField, useFormikContext } from 'formik';
+import { ConfirmationModal, getFieldId, getHumanizedSubnetRange, PopoverIcon, } from '../../../../../../common';
+import { getAddressObject, getProtocolVersionLabel, getShownProtocolVersions, } from '../../data/protocolVersion';
+import { getEmptyIpConfig } from '../../data/emptyData';
+import { ProtocolVersion, } 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';
+const hostsConfiguredAlert = (React.createElement(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 = ({ fieldName, protocolVersion, }) => {
+    const [{ value }] = useField(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]);
+    return (React.createElement(FormGroup, { labelIcon: React.createElement(PopoverIcon, { noVerticalAlign: true, bodyContent: "The range of IP addresses of the hosts." }), label: "Machine network", fieldId: getFieldId(`${fieldName}`, 'input'), isRequired: true, helperTextInvalid: errorMessage, validated: errorMessage ? 'error' : 'default', helperText: machineNetworkHelptext, className: "machine-network" },
+        React.createElement(Flex, null,
+            React.createElement(FlexItem, { spacer: { default: 'spacerSm' } },
+                React.createElement(OcmInputField, { name: `${fieldName}.ip`, isRequired: true, "data-testid": `${protocolVersion}-machine-network-ip`, showErrorMessage: false })),
+            React.createElement(FlexItem, { spacer: { default: 'spacerSm' } }, '/'),
+            React.createElement(FlexItem, null,
+                React.createElement(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 })))));
+};
+const IpConfigFields = ({ protocolVersion, fieldName }) => {
+    return (React.createElement(Grid, { hasGutter: true },
+        React.createElement(MachineNetwork, { fieldName: `${fieldName}.machineNetwork`, protocolVersion: protocolVersion }),
+        React.createElement(OcmInputField, { isRequired: true, label: "Default gateway", labelIcon: React.createElement(PopoverIcon, { noVerticalAlign: true, 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` })));
+};
+const ipv6ValuesEmpty = (values) => 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(selectFieldName);
+    const [, , { setValue: setIpv6 }] = useField(`ipConfigs.ipv6`);
+    const [openConfirmModal, setConfirmModal] = React.useState(false);
+    const { values } = useFormikContext();
+    const onChange = (e) => {
+        const newProtocolType = e.target.value;
+        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 (React.createElement(React.Fragment, null,
+        React.createElement(FormGroup, { fieldId: getFieldId(selectFieldName, 'radio'), isInline: true, label: "Networking stack type", isRequired: true, onChange: onChange },
+            React.createElement(OcmRadioField, { label: React.createElement(React.Fragment, null,
+                    getProtocolVersionLabel(ProtocolVersion.ipv4),
+                    ' ',
+                    React.createElement(PopoverIcon, { noVerticalAlign: true, 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 }),
+            React.createElement(OcmRadioField, { label: React.createElement(React.Fragment, null,
+                    'Dual-stack',
+                    ' ',
+                    React.createElement(PopoverIcon, { noVerticalAlign: true, 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 })),
+        openConfirmModal && (React.createElement(ConfirmationModal, { title: 'Change networking stack type?', titleIconVariant: 'warning', confirmationButtonText: 'Change', confirmationButtonVariant: ButtonVariant.primary, content: React.createElement(React.Fragment, null,
+                React.createElement("p", null, "All data and configuration done for 'Dual Stack' will be lost.")), onClose: () => {
+                setConfirmModal(false);
+                setProtocolType('dualStack');
+            }, onConfirm: () => {
+                setConfirmModal(false);
+                setProtocolType('ipv4');
+            } }))));
+};
+export const FormViewNetworkWideFields = ({ hosts }) => {
+    const { values, setFieldValue } = useFormikContext();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextContent, null,
+            React.createElement(Text, { component: TextVariants.h3 }, "Network-wide configurations"),
+            React.createElement(Text, { component: TextVariants.small }, "The following configurations are applicable to all the hosts.")),
+        hosts.length > 0 && hostsConfiguredAlert,
+        React.createElement(ProtocolTypeSelect, null),
+        React.createElement(OcmCheckboxField, { label: React.createElement(React.Fragment, null,
+                'Use VLAN ',
+                React.createElement(PopoverIcon, { noVerticalAlign: true, bodyContent: "If the hosts are in a sub network, enter the VLAN ID." })), name: "useVlan", "data-testid": "use-vlan", onChange: () => setFieldValue('vlanId', '') }),
+        values.useVlan && (React.createElement("div", { className: "vlan-id" },
+            React.createElement(OcmInputField, { label: "VLAN ID", name: "vlanId", isRequired: true, "data-testid": "vlan-id", min: MIN_VLAN_ID, max: MAX_VLAN_ID }))),
+        React.createElement(OcmInputField, { isRequired: true, label: "DNS", name: `dns`, "data-testid": `dns`, helperText: 'List of your DNS server addresses, separated by commas.' }),
+        getShownProtocolVersions(values.protocolType).map((protocolVersion) => (React.createElement(FormGroup, { key: protocolVersion, label: getProtocolVersionLabel(protocolVersion), fieldId: getFieldId(`ip-configs-${protocolVersion}`, 'input') },
+            React.createElement(IpConfigFields, { fieldName: `ipConfigs.${protocolVersion}`, protocolVersion: protocolVersion }))))));
+};
+//# sourceMappingURL=FormViewNetworkWideFields.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormViewNetworkWideFields.js","sourceRoot":"","sources":["../../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,cAAc,EACd,KAAK,EACL,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,aAAa,GACd,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,uBAAuB,EACvB,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAKL,eAAe,GAEhB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,WAAW,GACZ,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE9F,OAAO,iBAAiB,CAAC;AAEzB,MAAM,oBAAoB,GAAG,CAC3B,oBAAC,KAAK,IACJ,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,QAAQ,EAAE,IAAI,iBACF,wBAAwB,EACpC,KAAK,EAAC,8HAA8H,GACpI,CACH,CAAC;AAEF,MAAM,cAAc,GAAsE,CAAC,EACzF,SAAS,EACT,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,QAAQ,CAAO,SAAS,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,GAAG,SAAS,KAAK,CAAC;IACtC,MAAM,qBAAqB,GAAG,GAAG,SAAS,eAAe,CAAC;IAC1D,MAAM,cAAc,GAAG,gBAAgB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;IAC/D,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAE,CAAC,CAAC;IACnF,MAAM,YAAY,GAAG,cAAc,IAAI,wBAAwB,CAAC;IAChE,MAAM,sBAAsB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,YAAY,EAAE;YAChB,OAAO,EAAE,CAAC;SACX;QACD,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC1C,OAAO,uBAAuB,CAAC,gBAAgB,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EACP,oBAAC,WAAW,IAAC,eAAe,QAAC,WAAW,EAAC,yCAAyC,GAAG,EAEvF,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,UAAU,CAAC,GAAG,SAAS,EAAE,EAAE,OAAO,CAAC,EAC5C,UAAU,QACV,iBAAiB,EAAE,YAAY,EAC/B,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC7C,UAAU,EAAE,sBAAsB,EAClC,SAAS,EAAC,iBAAiB;QAE3B,oBAAC,IAAI;YACH,oBAAC,QAAQ,IAAC,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;gBACvC,oBAAC,aAAa,IACZ,IAAI,EAAE,GAAG,SAAS,KAAK,EACvB,UAAU,EAAE,IAAI,iBACH,GAAG,eAAe,qBAAqB,EACpD,gBAAgB,EAAE,KAAK,GACvB,CACO;YACX,oBAAC,QAAQ,IAAC,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,IAAG,GAAG,CAAY;YAC3D,oBAAC,QAAQ;gBACP,oBAAC,aAAa,IACZ,IAAI,EAAE,GAAG,SAAS,eAAe,EACjC,UAAU,EAAE,IAAI,iBACH,GAAG,eAAe,gCAAgC,EAC/D,IAAI,EAAE,cAAc,CAAC,MAAM,EAC3B,gBAAgB,EAAE,KAAK,EACvB,GAAG,EAAE,iBAAiB,EACtB,GAAG,EACD,eAAe,KAAK,eAAe,CAAC,IAAI;wBACtC,CAAC,CAAC,iBAAiB,CAAC,IAAI;wBACxB,CAAC,CAAC,iBAAiB,CAAC,IAAI,GAE5B,CACO,CACN,CACG,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAGf,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS;QACb,oBAAC,cAAc,IAAC,SAAS,EAAE,GAAG,SAAS,iBAAiB,EAAE,eAAe,EAAE,eAAe,GAAI;QAC9F,oBAAC,aAAa,IACZ,UAAU,QACV,KAAK,EAAC,iBAAiB,EACvB,SAAS,EACP,oBAAC,WAAW,IACV,eAAe,QACf,WAAW,EAAC,kIAAkI,GAC9I,EAEJ,IAAI,EAAE,GAAG,SAAS,UAAU,iBACf,GAAG,eAAe,UAAU,GACzC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,MAAiC,EAAE,EAAE,CAC5D,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,KAAK,EAAE;IACpC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE;IAC9C,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,YAAY,KAAK,EAAE,CAAC;AAE3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,eAAe,GAAG,cAAc,CAAC;IACvC,MAAM,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,AAAD,EAAG,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,GAC9D,QAAQ,CAAqB,eAAe,CAAC,CAAC;IAChD,MAAM,CAAC,EAAE,AAAD,EAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,GAAG,QAAQ,CAAW,gBAAgB,CAAC,CAAC;IACzE,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAA6B,CAAC;IAEjE,MAAM,QAAQ,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC1D,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,KAAiC,CAAC;QACnE,IAAI,eAAe,KAAK,YAAY,EAAE;YACpC,OAAO;SACR;QACD,IAAI,eAAe,KAAK,MAAM,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE;YAC1D,eAAe,CAAC,IAAI,CAAC,CAAC;SACvB;aAAM;YACL,0EAA0E;YAC1E,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;YAC5B,eAAe,CAAC,eAAe,CAAC,CAAC;SAClC;IACH,CAAC,CAAC;IACF,MAAM,cAAc,GAAG,YAAY,KAAK,MAAM,CAAC;IAC/C,OAAO,CACL;QACE,oBAAC,SAAS,IACR,OAAO,EAAE,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,EAC7C,QAAQ,QACR,KAAK,EAAC,uBAAuB,EAC7B,UAAU,QACV,QAAQ,EAAE,QAAQ;YAElB,oBAAC,aAAa,IACZ,KAAK,EACH;oBACG,uBAAuB,CAAC,eAAe,CAAC,IAAI,CAAC;oBAAE,GAAG;oBACnD,oBAAC,WAAW,IACV,eAAe,QACf,WAAW,EAAC,kDAAkD,GAC9D,CACD,EAEL,IAAI,EAAE,eAAe,iBACT,aAAa,EACzB,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,cAAc,EACzB,kBAAkB,EAAE,KAAK,GACzB;YACF,oBAAC,aAAa,IACZ,KAAK,EACH;oBACG,YAAY;oBAAE,GAAG;oBAClB,oBAAC,WAAW,IACV,eAAe,QACf,WAAW,EAAC,sEAAsE,GAClF,CACD,EAEL,IAAI,EAAE,eAAe,iBACT,mBAAmB,EAC/B,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,CAAC,cAAc,EAC1B,kBAAkB,EAAE,KAAK,GACzB,CACQ;QAEX,gBAAgB,IAAI,CACnB,oBAAC,iBAAiB,IAChB,KAAK,EAAE,+BAA+B,EACtC,gBAAgB,EAAE,SAAS,EAC3B,sBAAsB,EAAE,QAAQ,EAChC,yBAAyB,EAAE,aAAa,CAAC,OAAO,EAChD,OAAO,EACL;gBACE,gGAAqE,CACpE,EAEL,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,eAAe,CAAC,WAAW,CAAC,CAAC;YAC/B,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,eAAe,CAAC,MAAM,CAAC,CAAC;YAC1B,CAAC,GACD,CACH,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EAAE,KAAK,EAA6B,EAAE,EAAE;IAChF,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,EAA6B,CAAC;IAChF,OAAO,CACL;QACE,oBAAC,WAAW;YACV,oBAAC,IAAI,IAAC,SAAS,EAAE,YAAY,CAAC,EAAE,kCAAoC;YACpE,oBAAC,IAAI,IAAC,SAAS,EAAE,YAAY,CAAC,KAAK,oEAE5B,CACK;QAEb,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB;QAEzC,oBAAC,kBAAkB,OAAG;QAEtB,oBAAC,gBAAgB,IACf,KAAK,EACH;gBACG,WAAW;gBACZ,oBAAC,WAAW,IACV,eAAe,QACf,WAAW,EAAC,uDAAuD,GACnE,CACD,EAEL,IAAI,EAAC,SAAS,iBACF,UAAU,EACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,CAAC,GAC3C;QAED,MAAM,CAAC,OAAO,IAAI,CACjB,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,aAAa,IACZ,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,EACb,UAAU,uBACE,SAAS,EACrB,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,WAAW,GAChB,CACE,CACP;QAED,oBAAC,aAAa,IACZ,UAAU,QACV,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,KAAK,iBACE,KAAK,EAClB,UAAU,EAAE,yDAAyD,GACrE;QAED,wBAAwB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE,CAAC,CACtE,oBAAC,SAAS,IACR,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,uBAAuB,CAAC,eAAe,CAAC,EAC/C,OAAO,EAAE,UAAU,CAAC,cAAc,eAAe,EAAE,EAAE,OAAO,CAAC;YAE7D,oBAAC,cAAc,IACb,SAAS,EAAE,aAAa,eAAe,EAAE,EACzC,eAAe,EAAE,eAAe,GAChC,CACQ,CACb,CAAC,CACD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/build/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.js

@@ -0,0 +1,78 @@
+import * as Yup from 'yup';
+import { ProtocolVersion } from '../../data/dataTypes';
+import { showProtocolVersion } from '../../data/protocolVersion';
+import { getMachineNetworkCidr } from '../../data/machineNetwork';
+import { getIpAddressInSubnetValidationSchema, getIpAddressValidationSchema, getIpIsNotNetworkOrBroadcastAddressSchema, getMultipleIpAddressValidationSchema, isNotReservedHostIPAddress, } 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) => {
+    return isNaN(originalValue) ? null : originalValue;
+};
+export const getInMachineNetworkValidationSchema = (protocolVersion, machineNetwork) => {
+    return getIpAddressInSubnetValidationSchema(protocolVersion, getMachineNetworkCidr(machineNetwork));
+};
+export const getIsNotNetworkOrBroadcastAddressSchema = (protocolVersion, machineNetwork) => {
+    return getIpIsNotNetworkOrBroadcastAddressSchema(protocolVersion, getMachineNetworkCidr(machineNetwork));
+};
+const getMachineNetworkValidationSchema = (protocolVersion) => Yup.object().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]}`)
+        .nullable()
+        .transform(transformNumber), //add casting to not get typescript error caused by nullable
+});
+const getIPValidationSchema = (protocolVersion, allowsMultiple = false, isDnsAddress = false) => {
+    const baseValidation = allowsMultiple
+        ? getMultipleIpAddressValidationSchema
+        : getIpAddressValidationSchema;
+    return baseValidation(protocolVersion)
+        .required(REQUIRED_MESSAGE)
+        .concat(isNotReservedHostIPAddress(protocolVersion, isDnsAddress));
+};
+const getAddressDataValidationSchema = (protocolVersion, ipConfig) => {
+    return Yup.object().shape({
+        machineNetwork: getMachineNetworkValidationSchema(protocolVersion),
+        gateway: getIPValidationSchema(protocolVersion)
+            .concat(getInMachineNetworkValidationSchema(protocolVersion, ipConfig.machineNetwork))
+            .concat(getIsNotNetworkOrBroadcastAddressSchema(protocolVersion, ipConfig.machineNetwork)),
+    });
+};
+export const networkWideValidationSchema = Yup.lazy((values) => {
+    const ipConfigsValidationSchemas = Yup.object().shape({
+        ipv4: getAddressDataValidationSchema(ProtocolVersion.ipv4, values.ipConfigs.ipv4),
+        ipv6: showProtocolVersion(values.protocolType, ProtocolVersion.ipv6)
+            ? getAddressDataValidationSchema(ProtocolVersion.ipv6, values.ipConfigs.ipv6)
+            : Yup.object(),
+    });
+    return Yup.object().shape({
+        useVlan: Yup.boolean(),
+        vlanId: Yup.mixed().when('useVlan', {
+            is: true,
+            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),
+        }),
+        protocolType: Yup.string(),
+        dns: getIPValidationSchema(ProtocolVersion.ipv4, true, true),
+        ipConfigs: ipConfigsValidationSchemas,
+    });
+});
+export const validateNumber = (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());
+};
+//# sourceMappingURL=formViewNetworkWideValidationSchema.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formViewNetworkWideValidationSchema.js","sourceRoot":"","sources":["../../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.tsx"],"names":[],"mappings":"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"}

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React 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 { useAlerts, useFormikAutoSave } from '../../../../../common';
+import { useErrorMonitor } from '../../../../../common/components/ErrorHandling/ErrorMonitorContext';
+import { getApiErrorMessage } from '../../../../api';
+import { selectCurrentClusterPermissionsState } from '../../../../selectors';
+const AutosaveWithParentUpdate = ({ onFormStateChange, getEmptyValues, }) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const emptyValues = React.useMemo(() => getEmptyValues(), []);
+    const { isSubmitting, isValid, touched, errors, values } = useFormikContext();
+    const isEmpty = React.useMemo(() => {
+        return isEqual(values, emptyValues);
+    }, [values, emptyValues]);
+    const isAutoSaveRunning = useFormikAutoSave();
+    React.useEffect(() => {
+        onFormStateChange({ isSubmitting, isAutoSaveRunning, isValid, touched, errors, isEmpty });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSubmitting, isValid, isAutoSaveRunning, touched, errors]);
+    return null;
+};
+export const StaticIpForm = ({ infraEnv, updateInfraEnv, getInitialValues, getUpdateParams, validationSchema, onFormStateChange, getEmptyValues, children, showEmptyValues, }) => {
+    const { clearAlerts, addAlert } = useAlerts();
+    const { captureException } = useErrorMonitor();
+    const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+    const [initialValues, setInitialValues] = React.useState();
+    React.useEffect(() => {
+        if (showEmptyValues) {
+            //after view changed the formik should be rendered with empty values
+            setInitialValues(getEmptyValues());
+        }
+        else {
+            setInitialValues(getInitialValues(infraEnv));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (!initialValues) {
+        return null;
+    }
+    const handleSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        clearAlerts();
+        try {
+            const staticNetworkConfig = getUpdateParams(infraEnv, values);
+            yield updateInfraEnv({
+                staticNetworkConfig: staticNetworkConfig,
+            });
+        }
+        catch (error) {
+            captureException(error);
+            addAlert({
+                title: 'Failed to update the static network config',
+                message: getApiErrorMessage(error),
+            });
+        }
+    });
+    const validate = (values) => {
+        try {
+            validationSchema.validateSync(values, { abortEarly: false, context: { values } });
+            return {};
+        }
+        catch (error) {
+            return yupToFormErrors(error);
+        }
+    };
+    const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
+    return (React.createElement(Formik, { initialValues: initialValues, onSubmit: onSubmit, validate: validate, validateOnMount: true, enableReinitialize: true },
+        React.createElement(Form, null,
+            children,
+            React.createElement(AutosaveWithParentUpdate, { onFormStateChange: onFormStateChange, getEmptyValues: getEmptyValues }))));
+};
+//# sourceMappingURL=StaticIpForm.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticIpForm.js","sourceRoot":"","sources":["../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.tsx"],"names":[],"mappings":"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"}

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpHostsArray.js

@@ -0,0 +1,118 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Button, ButtonVariant, Checkbox, Divider, ExpandableSection, ExpandableSectionToggle, Flex, FlexItem, Grid, } from '@patternfly/react-core';
+import { MinusCircleIcon } from '@patternfly/react-icons';
+import { FieldArray, useField } from 'formik';
+import cloneDeep from 'lodash-es/cloneDeep.js';
+import { getFormikArrayItemFieldName, LoadingState, } from '../../../../../common';
+import ConfirmationModal from '../../../../../common/components/ui/ConfirmationModal';
+import { selectIsCurrentClusterSNO, selectCurrentClusterPermissionsState, } from '../../../../selectors';
+const fieldName = 'hosts';
+export const RemoveItemButton = ({ onRemove, showRemoveButton, dataTestId }) => (
+//use css visibility instead of conditional rendering to avoid button jumping when hovering
+React.createElement(Button, { "aria-label": "remove host", style: { visibility: showRemoveButton ? 'visible' : 'hidden' }, variant: "plain" },
+    React.createElement(MinusCircleIcon, { onClick: onRemove, "data-testid": dataTestId })));
+const getHostName = (hostIdx) => `Host ${hostIdx + 1}`;
+const SingleHost = ({ fieldName, hostIdx, onRemove, onToggleExpand, isExpanded, isDisabled, CollapsedHostComponent, ExpandedHostComponent, enableRemoveHost, }) => {
+    //TODO: fix RemovableField reusable component to support this use case
+    const [showRemoveButton, setShowRemoveButton] = React.useState(false);
+    const updateShowRemoveButton = (value) => {
+        if (isDisabled) {
+            return;
+        }
+        if (!enableRemoveHost) {
+            setShowRemoveButton(false);
+        }
+        else {
+            setShowRemoveButton(value);
+        }
+    };
+    const hostFieldName = getFormikArrayItemFieldName(fieldName, hostIdx);
+    return (React.createElement(Grid, { onMouseEnter: () => updateShowRemoveButton(true), onMouseLeave: () => updateShowRemoveButton(false), hasGutter: true },
+        React.createElement(Flex, null,
+            React.createElement(FlexItem, null,
+                React.createElement(ExpandableSectionToggle, { isExpanded: isExpanded, onToggle: onToggleExpand, direction: "down", "data-testid": `toggle-host-${hostIdx}` }, getHostName(hostIdx))),
+            !isDisabled && enableRemoveHost && (React.createElement(FlexItem, { align: { default: 'alignRight' } },
+                React.createElement(RemoveItemButton, { onRemove: onRemove, showRemoveButton: showRemoveButton, dataTestId: `remove-host-${hostIdx}` })))),
+        isExpanded ? (React.createElement(ExpandableSection, { isDetached: true, key: hostIdx, isExpanded: true },
+            React.createElement(ExpandedHostComponent, { fieldName: hostFieldName, hostIdx: hostIdx, isDisabled: isDisabled }))) : (React.createElement(CollapsedHostComponent, { fieldName: hostFieldName, hostIdx: hostIdx, isDisabled: isDisabled }))));
+};
+const getExpandedHostsInitialValue = (numHosts) => {
+    const ret = {};
+    for (let i = 0; i < numHosts; ++i) {
+        ret[i] = false;
+    }
+    return ret;
+};
+const getExpandedHostsDefaultValue = (numHosts) => {
+    const ret = getExpandedHostsInitialValue(numHosts);
+    if (numHosts === 1) {
+        ret[0] = true;
+    }
+    return ret;
+};
+const Hosts = (_a) => {
+    var { push, remove, enableCopyAboveConfiguration = false, emptyHostData } = _a, props = __rest(_a, ["push", "remove", "enableCopyAboveConfiguration", "emptyHostData"]);
+    const [field, { error }] = useField({
+        name: fieldName,
+    });
+    const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+    const canAddHosts = !useSelector(selectIsCurrentClusterSNO) && !isViewerMode;
+    const [expandedHosts, setExpandedHosts] = React.useState(getExpandedHostsDefaultValue(field.value.length));
+    const [copyConfiguration, setCopyConfiguration] = React.useState(enableCopyAboveConfiguration);
+    const [hostIdxToRemove, setHostIdxToRemove] = React.useState(null);
+    if (field.value === undefined) {
+        return React.createElement(LoadingState, null);
+    }
+    const onAddHost = () => {
+        const newHostData = cloneDeep(emptyHostData);
+        if (copyConfiguration) {
+            newHostData.networkYaml = cloneDeep(field.value[field.value.length - 1].networkYaml);
+        }
+        const newExpandedHosts = getExpandedHostsInitialValue(field.value.length + 1);
+        newExpandedHosts[field.value.length] = true;
+        setExpandedHosts(newExpandedHosts);
+        push(newHostData);
+    };
+    return (React.createElement(React.Fragment, null,
+        field.value.map((_data, hostIdx) => {
+            const onToggleExpand = (isExpanded) => {
+                const newExpandedHosts = cloneDeep(expandedHosts);
+                newExpandedHosts[hostIdx] = isExpanded;
+                setExpandedHosts(newExpandedHosts);
+            };
+            return (React.createElement(React.Fragment, { key: hostIdx },
+                React.createElement(SingleHost, Object.assign({ hostIdx: hostIdx, onToggleExpand: onToggleExpand, isExpanded: expandedHosts[hostIdx], isDisabled: isViewerMode, onRemove: () => setHostIdxToRemove(hostIdx), fieldName: fieldName, emptyHostData: emptyHostData, enableRemoveHost: field.value.length > 1 }, props)),
+                React.createElement(Divider, null)));
+        }),
+        canAddHosts && (React.createElement(Flex, null,
+            React.createElement(FlexItem, null,
+                React.createElement(Button, { variant: "secondary", onClick: onAddHost, "data-testid": "add-host", isDisabled: !!error }, "Add another host configuration")),
+            enableCopyAboveConfiguration && (React.createElement(FlexItem, { alignSelf: { default: 'alignSelfCenter' } },
+                React.createElement(Checkbox, { label: "Copy the YAML content", isChecked: copyConfiguration, onChange: setCopyConfiguration, "aria-label": "copy host configuration", name: "copy-host-configuration", id: "copy-host-configuration", "data-testid": "copy-host-configuration" }))))),
+        hostIdxToRemove !== null && (React.createElement(ConfirmationModal, { title: `Delete ${getHostName(hostIdxToRemove)}?`, titleIconVariant: "warning", confirmationButtonText: "Delete", confirmationButtonVariant: ButtonVariant.danger, content: React.createElement(React.Fragment, null,
+                React.createElement("p", null, `All the network configurations of ${getHostName(hostIdxToRemove)} will be lost`)), onClose: () => setHostIdxToRemove(null), onConfirm: () => {
+                remove(hostIdxToRemove);
+                setHostIdxToRemove(null);
+            } }))));
+};
+const StaticIpHostsArray = (_a) => {
+    var props = __rest(_a, []);
+    const renderHosts = React.useCallback((arrayRenderProps) => (React.createElement(Hosts, Object.assign({}, Object.assign(props, arrayRenderProps)))), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    return React.createElement(FieldArray, { name: fieldName, render: renderHosts });
+};
+export default StaticIpHostsArray;
+//# sourceMappingURL=StaticIpHostsArray.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpHostsArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticIpHostsArray.js","sourceRoot":"","sources":["../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpHostsArray.tsx"],"names":[],"mappings":"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"}

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Text, TextContent, TextVariants, Alert, AlertVariant, Grid } from '@patternfly/react-core';
+import StaticIpViewRadioGroup from './StaticIpViewRadioGroup';
+import { getStaticIpInfo } from '../data/fromInfraEnv';
+import { YamlView } from './YamlView/YamlView';
+import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
+import { FormViewHosts } from './FormViewHosts/FormViewHosts';
+import { FormViewNetworkWide } from './FormViewNetworkWide/FormViewNetworkWide';
+import './staticIp.css';
+const isoRegenerationAlert = (React.createElement(Alert, { variant: AlertVariant.warning, isInline: true, "data-testid": "regenerate-iso-alert", title: "To add new hosts that will use the new or edited configurations, you'll need to regenerate the\n  Discovery ISO in the 'Host discovery' step and boot your new hosts from it." }));
+export const StaticIpPage = ({ infraEnv, updateInfraEnv, onFormStateChange: onFormStateChangeParent, }) => {
+    const clusterWizardContext = useClusterWizardContext();
+    const [confirmOnChangeView, setConfirmOnChangeView] = React.useState(false);
+    const [viewChanged, setViewChanged] = React.useState(false);
+    const onChangeView = React.useCallback((view) => {
+        clusterWizardContext.onUpdateStaticIpView(view);
+        setViewChanged(true);
+    }, [clusterWizardContext]);
+    const initialStaticIpInfo = React.useMemo(() => {
+        return getStaticIpInfo(infraEnv);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    if (!initialStaticIpInfo) {
+        return null;
+    }
+    const onFormStateChange = (formState) => {
+        const hasFilledData = clusterWizardContext.currentStepId === 'static-ip-host-configurations' || !formState.isEmpty;
+        setConfirmOnChangeView(hasFilledData);
+        onFormStateChangeParent(formState);
+    };
+    const viewProps = {
+        onFormStateChange,
+        infraEnv,
+        updateInfraEnv,
+        showEmptyValues: viewChanged,
+    };
+    const getContent = () => {
+        switch (clusterWizardContext.currentStepId) {
+            case 'static-ip-yaml-view':
+                return React.createElement(YamlView, Object.assign({}, viewProps));
+            case 'static-ip-host-configurations':
+                return React.createElement(FormViewHosts, Object.assign({}, viewProps));
+            case 'static-ip-network-wide-configurations':
+                return React.createElement(FormViewNetworkWide, Object.assign({}, viewProps));
+            default:
+                throw `Unexpected wizard step id ${clusterWizardContext.currentStepId} when entering static ip page`;
+        }
+    };
+    const content = getContent();
+    if (!content) {
+        return null;
+    }
+    return (React.createElement(Grid, { hasGutter: true },
+        React.createElement(TextContent, null,
+            React.createElement(Text, { component: TextVariants.h2 }, "Static network configurations"),
+            React.createElement(Text, { component: TextVariants.small }, "Network configuration can be done using either the form view or YAML view. Configurations done in this step are for discovering hosts.")),
+        React.createElement(StaticIpViewRadioGroup, { initialView: initialStaticIpInfo.view, confirmOnChangeView: confirmOnChangeView, onChangeView: onChangeView }),
+        initialStaticIpInfo.isDataComplete && isoRegenerationAlert,
+        content));
+};
+//# sourceMappingURL=StaticIpPage.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticIpPage.js","sourceRoot":"","sources":["../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAEpG,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,gBAAgB,CAAC;AAExB,MAAM,oBAAoB,GAAG,CAC3B,oBAAC,KAAK,IACJ,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,QAAQ,EAAE,IAAI,iBACF,sBAAsB,EAClC,KAAK,EAAC,+KACoE,GAC1E,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,cAAc,EACd,iBAAiB,EAAE,uBAAuB,GAC3C,EAAE,EAAE;IACH,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;IACvD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,IAAkB,EAAE,EAAE;QACrB,oBAAoB,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAChD,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,oBAAoB,CAAC,CACvB,CAAC;IAEF,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAA2B,GAAG,EAAE;QACvE,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC;QACjC,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,IAAI,CAAC,mBAAmB,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IACD,MAAM,iBAAiB,GAAG,CAAC,SAA4B,EAAE,EAAE;QACzD,MAAM,aAAa,GACjB,oBAAoB,CAAC,aAAa,KAAK,+BAA+B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;QAC/F,sBAAsB,CAAC,aAAa,CAAC,CAAC;QACtC,uBAAuB,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAsB;QACnC,iBAAiB;QACjB,QAAQ;QACR,cAAc;QACd,eAAe,EAAE,WAAW;KAC7B,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,oBAAoB,CAAC,aAAa,EAAE;YAC1C,KAAK,qBAAqB;gBACxB,OAAO,oBAAC,QAAQ,oBAAK,SAAS,EAAI,CAAC;YACrC,KAAK,+BAA+B;gBAClC,OAAO,oBAAC,aAAa,oBAAK,SAAS,EAAI,CAAC;YAC1C,KAAK,uCAAuC;gBAC1C,OAAO,oBAAC,mBAAmB,oBAAK,SAAS,EAAI,CAAC;YAChD;gBACE,MAAM,6BAA6B,oBAAoB,CAAC,aAAa,+BAA+B,CAAC;SACxG;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS;QACb,oBAAC,WAAW;YACV,oBAAC,IAAI,IAAC,SAAS,EAAE,YAAY,CAAC,EAAE,oCAAsC;YACtE,oBAAC,IAAI,IAAC,SAAS,EAAE,YAAY,CAAC,KAAK,6IAG5B,CACK;QAEd,oBAAC,sBAAsB,IACrB,WAAW,EAAE,mBAAmB,CAAC,IAAI,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,EAAE,YAAY,GAC1B;QACD,mBAAmB,CAAC,cAAc,IAAI,oBAAoB;QAC1D,OAAO,CACH,CACR,CAAC;AACJ,CAAC,CAAC"}

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpViewRadioGroup.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Alert, AlertVariant, ButtonVariant, Form, FormGroup } from '@patternfly/react-core';
+import { StaticIpView } from '../data/dataTypes';
+import { getFieldId } from '../../../../../common';
+import ConfirmationModal from '../../../../../common/components/ui/ConfirmationModal';
+import { OcmRadio } from '../../../ui/OcmFormFields';
+const StaticIpViewRadioGroup = ({ initialView, confirmOnChangeView, onChangeView, }) => {
+    const GROUP_NAME = 'select-static-ip-view';
+    const [confirmView, setConfirmView] = React.useState();
+    const [view, setView] = React.useState(initialView);
+    const handleChange = (_checked, event) => {
+        const selectedView = event.currentTarget.value;
+        if (confirmOnChangeView) {
+            setConfirmView(selectedView);
+        }
+        else {
+            setView(selectedView);
+            onChangeView(selectedView);
+        }
+    };
+    const onConfirm = (selectedView) => {
+        setView(selectedView);
+        setConfirmView(undefined);
+        onChangeView(selectedView);
+    };
+    const onCancel = () => {
+        setConfirmView(undefined);
+    };
+    const getCurrentViewText = () => {
+        return view === StaticIpView.YAML ? 'YAML' : 'form';
+    };
+    const isFormViewSelected = view === StaticIpView.FORM;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Form, { isHorizontal: true },
+            React.createElement(FormGroup, { fieldId: getFieldId(GROUP_NAME, 'radio'), isInline: true, label: "Configure via :", className: "static-config-type-label" },
+                React.createElement(OcmRadio, { label: "Form view", name: GROUP_NAME, "data-testid": "select-form-view", id: "select-form-view", value: StaticIpView.FORM, isChecked: isFormViewSelected, onChange: handleChange }),
+                React.createElement(OcmRadio, { label: "YAML view", name: GROUP_NAME, "data-testid": "select-yaml-view", id: "select-yaml-view", value: StaticIpView.YAML, isChecked: !isFormViewSelected, onChange: handleChange }))),
+        isFormViewSelected && (React.createElement(Alert, { variant: AlertVariant.info, isInline: true, title: 'Form view supports basic configurations. Select YAML view for advanced configurations.' })),
+        confirmView && (React.createElement(ConfirmationModal, { title: 'Change configuration option?', titleIconVariant: 'warning', confirmationButtonText: 'Change', confirmationButtonVariant: ButtonVariant.primary, content: React.createElement(React.Fragment, null,
+                React.createElement("p", null, `All data and configuration done in ${getCurrentViewText()} view will be lost.`)), onClose: onCancel, onConfirm: () => onConfirm(confirmView) }))));
+};
+export default StaticIpViewRadioGroup;
+//# sourceMappingURL=StaticIpViewRadioGroup.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/StaticIpViewRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticIpViewRadioGroup.js","sourceRoot":"","sources":["../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpViewRadioGroup.tsx"],"names":[],"mappings":"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"}

package/build/ocm/components/clusterConfiguration/staticIp/components/YamlView/MacIpMapping.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { GridItem, Grid, Button } from '@patternfly/react-core';
+import { FieldArray } from 'formik';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { getFormikArrayItemFieldName, RemovableField, } from '../../../../../../common';
+import { OcmInputField } from '../../../../ui/OcmFormFields';
+import { useSelector } from 'react-redux';
+import { selectCurrentClusterPermissionsState } from '../../../../../selectors';
+const AddMapping = ({ onPush }) => {
+    return (React.createElement(Button, { icon: React.createElement(PlusCircleIcon, null), isInline: true, onClick: () => onPush({ macAddress: '', logicalNicName: '' }), "data-testid": "add-mapping", variant: "link" }, "Add another MAC to interface name mapping"));
+};
+const MacMappingItem = ({ fieldName, onRemove, mapIdx, enableRemove, hostIdx, }) => {
+    return (React.createElement(RemovableField, { hideRemoveButton: !enableRemove, onRemove: onRemove },
+        React.createElement(Grid, { hasGutter: true },
+            React.createElement(GridItem, { span: 6 },
+                React.createElement(OcmInputField, { label: "MAC address", isRequired: true, name: `${fieldName}.macAddress`, "data-testid": `mac-address-${hostIdx}-${mapIdx}` })),
+            React.createElement(GridItem, { span: 6 },
+                React.createElement(OcmInputField, { label: "Interface name", isRequired: true, name: `${fieldName}.logicalNicName`, "data-testid": `interface-name-${hostIdx}-${mapIdx}` })))));
+};
+export const MacIpMapping = ({ fieldName, macInterfaceMap, hostIdx, }) => {
+    const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+    return (React.createElement(Grid, { className: "mac-ip-mapping" },
+        React.createElement(GridItem, { span: 6 },
+            React.createElement(FieldArray, { name: fieldName, validateOnChange: false, render: ({ push, remove }) => (React.createElement(Grid, { hasGutter: true },
+                    macInterfaceMap.map((_, idx) => (React.createElement(MacMappingItem, { key: getFormikArrayItemFieldName(fieldName, idx), fieldName: getFormikArrayItemFieldName(fieldName, idx), onRemove: () => remove(idx), mapIdx: idx, enableRemove: !isViewerMode && idx > 0, hostIdx: hostIdx }))),
+                    !isViewerMode && React.createElement(AddMapping, { onPush: push }))) }))));
+};
+//# sourceMappingURL=MacIpMapping.js.map

package/build/ocm/components/clusterConfiguration/staticIp/components/YamlView/MacIpMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MacIpMapping.js","sourceRoot":"","sources":["../../../../../../../lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/MacIpMapping.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAgB,UAAU,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,2BAA2B,EAE3B,cAAc,GACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,oCAAoC,EAAE,MAAM,0BAA0B,CAAC;AAEhF,MAAM,UAAU,GAEX,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IAClB,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,iBACjD,aAAa,EACzB,OAAO,EAAC,MAAM,gDAGP,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,OAAO,GAOR,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,cAAc,IAAC,gBAAgB,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ;QACjE,oBAAC,IAAI,IAAC,SAAS;YACb,oBAAC,QAAQ,IAAC,IAAI,EAAE,CAAC;gBACf,oBAAC,aAAa,IACZ,KAAK,EAAC,aAAa,EACnB,UAAU,QACV,IAAI,EAAE,GAAG,SAAS,aAAa,iBAClB,eAAe,OAAO,IAAI,MAAM,EAAE,GAC/C,CACO;YACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,CAAC;gBACf,oBAAC,aAAa,IACZ,KAAK,EAAC,gBAAgB,EACtB,UAAU,QACV,IAAI,EAAE,GAAG,SAAS,iBAAiB,iBACtB,kBAAkB,OAAO,IAAI,MAAM,EAAE,GAClD,CACO,CACN,CACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,eAAe,EACf,OAAO,GAKR,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC,oCAAoC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,EAAC,gBAAgB;QAC9B,oBAAC,QAAQ,IAAC,IAAI,EAAE,CAAC;YACf,oBAAC,UAAU,IACT,IAAI,EAAE,SAAS,EACf,gBAAgB,EAAE,KAAK,EACvB,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC5B,oBAAC,IAAI,IAAC,SAAS;oBACZ,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/B,oBAAC,cAAc,IACb,GAAG,EAAE,2BAA2B,CAAC,SAAS,EAAE,GAAG,CAAC,EAChD,SAAS,EAAE,2BAA2B,CAAC,SAAS,EAAE,GAAG,CAAC,EACtD,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAC3B,MAAM,EAAE,GAAG,EACX,YAAY,EAAE,CAAC,YAAY,IAAI,GAAG,GAAG,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;oBAED,CAAC,YAAY,IAAI,oBAAC,UAAU,IAAC,MAAM,EAAE,IAAI,GAAI,CACzC,CACR,GACD,CACO,CACN,CACR,CAAC;AACJ,CAAC,CAAC"}

package/build/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlView.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { StaticIpForm } from '../StaticIpForm';
+import { yamlViewValidationSchema } from './yamlViewValidationSchema';
+import { YamlViewFields } from './YamlViewFields';
+import { getEmptyYamlValues } from '../../data/emptyData';
+import { getYamlViewValues } from '../../data/fromInfraEnv';
+export const YamlView = (_a) => {
+    var props = __rest(_a, []);
+    const formProps = Object.assign(Object.assign({}, props), { validationSchema: yamlViewValidationSchema, getInitialValues: (infraEnv) => {
+            return getYamlViewValues(infraEnv);
+        }, getUpdateParams: (currentInfraEnv, values) => values.hosts, getEmptyValues: () => getEmptyYamlValues() });
+    return (React.createElement(StaticIpForm, Object.assign({}, formProps),
+        React.createElement(YamlViewFields, null)));
+};
+//# sourceMappingURL=YamlView.js.map