@bigbinary/neeto-molecules 1.1.28 → 1.1.30

package/dist/IpRestriction.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import React__default, { useState } from 'react';
-import { useMutationWithInvalidation, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Check, Close, MenuVertical, MenuHorizontal, Warning } from '@bigbinary/neeto-icons';
-import { Typography, Button as Button$1, Dropdown, Tooltip, Alert, Checkbox, Callout } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
+import { Delete, Warning } from '@bigbinary/neeto-icons';
+import { Typography, Button, Callout, Alert } from '@bigbinary/neetoui';
+import { Input, Select, Form, BlockNavigation, Checkbox, Button as Button$1 } from '@bigbinary/neetoui/formik';
+import { Trans, useTranslation } from 'react-i18next';
+import { FieldArray } from 'formik';
+import { withT, useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { t as t$1 } from 'i18next';
-import { Form, Input, Select, Button } from '@bigbinary/neetoui/formik';
-import { isNil, isNotNil, assoc, mergeRight } from 'ramda';
+import * as yup from 'yup';
+import { Validator, IPv4, IPv6 } from 'ip-num';
+import { isNil, isNotNil, assoc } from 'ramda';
 import { useQuery } from 'react-query';
 import axios from 'axios';
-import { Validator, IPv4, IPv6 } from 'ip-num';
-import * as yup from 'yup';
-import { truncate } from '@bigbinary/neeto-cist';
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -163,11 +163,11 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css = ".neeto-molecules-pageloader__wrapper{height:100%;position:relative;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader{height:100%;left:0;position:absolute;top:0;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__content{height:66px;margin-bottom:16px;overflow:hidden;padding:8px;position:relative;width:66px}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__text{color:rgb(var(--neeto-ui-gray-800));font-size:1.25rem;line-height:1.75rem;margin-bottom:4rem;text-align:center}.neeto-molecules-pageloader__spinner{display:flex;gap:2px;height:25px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.neeto-molecules-pageloader__spinner>div{animation:neeto-ui-stretch-delay 1.2s ease-in-out infinite;background-color:#fff;border-radius:2px;display:inline-flex;height:100%;width:2px}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2{animation-delay:-1.1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3{animation-delay:-1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4{animation-delay:-.9s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5{animation-delay:-.8s}@keyframes neeto-ui-stretch-delay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}";
 n(css,{});
 
-var _excluded$3 = ["text"];
+var _excluded = ["text"];
 var PageLoader = function PageLoader(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "" : _ref$text,
-    otherProps = _objectWithoutProperties(_ref, _excluded$3);
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("div", _extends$1({
     className: "neeto-molecules-pageloader__wrapper"
   }, otherProps), /*#__PURE__*/React__default.createElement("div", {
@@ -196,74 +196,14 @@ var PageLoader = function PageLoader(_ref) {
 };
 var PageLoader$1 = /*#__PURE__*/React__default.memo(PageLoader);
 
-var IP_RESTRICTIONS_ENGINE_BASE_URL = "ip_restrictions/api/v1";
-var QUERY_KEYS = {
-  IP_RESTRICTION: "IP_RESTRICTION",
-  ALLOWED_IP_RANGES: "ALLOWED_IP_RANGES",
-  CURRENT_IP: "CURRENT_IP"
-};
-var TRUNCATE_LENGTH = 18;
-var ADDRESS_TYPE_SELECT_OPTIONS = [{
-  label: t$1("neetoMolecules.ipRestriction.ipv4"),
-  value: "ipv4"
-}, {
-  label: t$1("neetoMolecules.ipRestriction.ipv6"),
-  value: "ipv6"
-}];
-var INITIAL_VALUES = {
-  ipStart: "",
-  ipEnd: "",
-  addressType: ADDRESS_TYPE_SELECT_OPTIONS[0].value
-};
-
-var allowedIpRangesUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/allowed_ips");
-var fetch = function fetch() {
-  return axios.get(allowedIpRangesUrl);
-};
-var create = function create(payload) {
-  return axios.post(allowedIpRangesUrl, {
-    allowedIpRange: payload
-  });
-};
-var destroy = function destroy(id) {
-  return axios["delete"]("".concat(allowedIpRangesUrl, "/").concat(id));
-};
-var update$1 = function update(_ref) {
-  var id = _ref.id,
-    payload = _ref.payload;
-  return axios.patch("".concat(allowedIpRangesUrl, "/").concat(id), {
-    allowedIpRange: payload
-  });
-};
-var allowedIpRangesApi = {
-  fetch: fetch,
-  create: create,
-  destroy: destroy,
-  update: update$1
-};
-
-var ALLOWED_IP_RANGES = QUERY_KEYS.ALLOWED_IP_RANGES;
-var useFetchAllowedIpRanges = function useFetchAllowedIpRanges() {
-  return useQuery([ALLOWED_IP_RANGES], function () {
-    return allowedIpRangesApi.fetch();
-  });
-};
-var useCreateAllowedIpRanges = function useCreateAllowedIpRanges() {
-  return useMutationWithInvalidation(allowedIpRangesApi.create, {
-    keysToInvalidate: [ALLOWED_IP_RANGES]
-  });
-};
-var useDestroyAllowedIpRanges = function useDestroyAllowedIpRanges() {
-  return useMutationWithInvalidation(allowedIpRangesApi.destroy, {
-    keysToInvalidate: [ALLOWED_IP_RANGES]
-  });
-};
-var useUpdateAllowedIpRanges = function useUpdateAllowedIpRanges() {
-  return useMutationWithInvalidation(allowedIpRangesApi.update, {
-    keysToInvalidate: [ALLOWED_IP_RANGES]
-  });
+// We need to apply a transformation for the label. Hence disabling this lint warning.
+// eslint-disable-next-line @bigbinary/neeto/use-functions-and-hooks-from-neeto-commons-frontend
+var toLabelAndValue = function toLabelAndValue(value) {
+  return {
+    label: humanizeIpAddressFormat(value),
+    value: value
+  };
 };
-
 var isValidIPv4String = function isValidIPv4String(ip) {
   return isNotNil(ip) && Validator.isValidIPv4String(ip)[0];
 };
@@ -338,337 +278,95 @@ var humanizeIpAddressFormat = function humanizeIpAddressFormat(addressFormat) {
   };
   return addressFormats[addressFormat];
 };
-var buildInitialValue = function buildInitialValue(values) {
-  var labelAndValue = {
-    label: humanizeIpAddressFormat(values.addressType),
-    value: values.addressType
+var buildInitialValue = function buildInitialValue(isIpRestrictionEnabled, allowedIpRanges) {
+  return {
+    ipRestriction: isIpRestrictionEnabled,
+    allowedIpRanges: buildAllowedIpRangesFormData(allowedIpRanges)
   };
-  return assoc("addressType", labelAndValue, values);
 };
-
-var FormRow = function FormRow(_ref) {
-  var data = _ref.data,
-    isAddNew = _ref.isAddNew,
-    onCollapse = _ref.onCollapse;
-  var _useCreateAllowedIpRa = useCreateAllowedIpRanges(),
-    createAllowedIpRange = _useCreateAllowedIpRa.mutate;
-  var _useUpdateAllowedIpRa = useUpdateAllowedIpRanges(),
-    updateAllowedIpRange = _useUpdateAllowedIpRa.mutate;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleSubmit = function handleSubmit(values) {
-    var payload = assoc("addressType", values.addressType.value, values);
-    if (isAddNew) {
-      createAllowedIpRange(payload);
-    } else {
-      updateAllowedIpRange({
-        id: data.id,
-        payload: payload
-      });
-    }
-    onCollapse();
-  };
-  return /*#__PURE__*/React__default.createElement(Form, {
-    "data-cy": "allowed-ip-range-form",
-    formikProps: {
-      initialValues: buildInitialValue(data),
-      validationSchema: getIpRestrictionValidationSchema(),
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var isSubmitting = _ref2.isSubmitting;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 gap-4 p-3"
-    }, /*#__PURE__*/React__default.createElement(Input, {
-      autoFocus: true,
-      className: "col-span-4 text-left",
-      "data-cy": "ip-start-text-field",
-      name: "ipStart",
-      placeholder: t("neetoMolecules.ipRestriction.ipStart")
-    }), /*#__PURE__*/React__default.createElement(Input, {
-      className: "col-span-4 text-left",
-      "data-cy": "ip-end-text-field",
-      name: "ipEnd",
-      placeholder: t("neetoMolecules.ipRestriction.ipEnd")
-    }), /*#__PURE__*/React__default.createElement(Select, {
-      className: "col-span-2 text-left",
-      name: "addressType",
-      options: ADDRESS_TYPE_SELECT_OPTIONS
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "col-span-2 flex items-start justify-center gap-1"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      "data-cy": "save-changes-button",
-      "data-testid": "save-changes-button",
-      disabled: isSubmitting,
-      icon: Check,
-      style: "text",
-      tooltipProps: {
-        content: "Submit",
-        position: "top"
-      },
-      type: "submit"
-    }), /*#__PURE__*/React__default.createElement(Button$1, {
-      "data-cy": "ip-cancel-button",
-      icon: Close,
-      style: "text",
-      type: "reset",
-      tooltipProps: {
-        content: t("neetoMolecules.common.actions.cancel"),
-        position: "top"
-      },
-      onClick: onCollapse
-    })));
+var buildAllowedIpRangesFormData = function buildAllowedIpRangesFormData(allowedIpRanges) {
+  return allowedIpRanges.map(function (allowedIpRange) {
+    return assoc("addressType", toLabelAndValue(allowedIpRange.addressType), allowedIpRange);
   });
 };
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
-var _excluded$2 = ["label", "key"],
-  _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown.MenuItem,
-  Menu$1 = Dropdown.Menu;
-var Submenu = function Submenu(_ref) {
-  var label = _ref.label,
-    key = _ref.key,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(Dropdown, _extends$1({
-    customTarget: /*#__PURE__*/React__default.createElement(MenuItem$1.Button, null, label),
-    key: key,
-    position: "left",
-    trigger: "hover"
-  }, menuItemProps.dropdownProps), /*#__PURE__*/React__default.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React__default.createElement(MoreDropdownMenuItem, _extends$1({
-      key: key
-    }, menuItemProps));
-  })));
+var buildIpRestrictionPayload = function buildIpRestrictionPayload(values) {
+  var allowedIpRangesWithTransformedAddressType = values.allowedIpRanges.map(function (allowedIpRange) {
+    return assoc("addressType", allowedIpRange.addressType.value, allowedIpRange);
+  });
+  return {
+    isIpRestrictionEnabled: values.ipRestriction,
+    allowedIpRanges: allowedIpRangesWithTransformedAddressType
+  };
 };
 
-var _excluded$1 = ["onClick", "label", "type", "hasSubItems"];
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var MenuItem = Dropdown.MenuItem,
-  Divider = Dropdown.Divider;
-var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
-  var onClick = _ref.onClick,
-    label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
-    _ref$hasSubItems = _ref.hasSubItems,
-    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$1);
-  if (type === MENU_ITEM_TYPES.divider) {
-    return /*#__PURE__*/React__default.createElement(Divider, null);
-  }
-  if (hasSubItems) {
-    return /*#__PURE__*/React__default.createElement(Submenu, _objectSpread$1({
-      label: label
-    }, menuItemProps));
-  }
-  return /*#__PURE__*/React__default.createElement(MenuItem.Button, _objectSpread$1({
-    onClick: onClick
-  }, menuItemProps), label);
+var IP_RESTRICTIONS_ENGINE_BASE_URL = "ip_restrictions/api/v1";
+var QUERY_KEYS = {
+  IP_RESTRICTION: "IP_RESTRICTION",
+  ALLOWED_IP_RANGES: "ALLOWED_IP_RANGES",
+  CURRENT_IP: "CURRENT_IP"
 };
-
-var _excluded = ["isVisible", "key"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Menu = Dropdown.Menu;
-var MoreDropdown = function MoreDropdown(_ref) {
-  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
-    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
-    _ref$isVertical = _ref.isVertical,
-    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    menuTopChildren = _ref.menuTopChildren,
-    menuBottomChildren = _ref.menuBottomChildren,
-    _ref$menuItems = _ref.menuItems,
-    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
-  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
-  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
-  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
-  if (isDropdownDisabled && !tooltipProps.disabled) {
-    return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Button$1, _extends$1({
-      disabled: true,
-      "data-testid": "nui-dropdown-button",
-      icon: targetIcon,
-      iconPosition: "right",
-      size: "medium",
-      style: "text"
-    }, dropdownButtonProps))));
-  }
-  return /*#__PURE__*/React__default.createElement(Dropdown, _extends$1({
-    autoWidth: true,
-    className: "flex",
-    disabled: isDisabled,
-    icon: targetIcon,
-    buttonProps: _objectSpread({
-      className: "min-h-0 flex-shrink-0",
-      style: "text"
-    }, dropdownButtonProps)
-  }, dropdownProps), /*#__PURE__*/React__default.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React__default.createElement(MoreDropdownMenuItem, _extends$1({
-      key: key
-    }, menuItemProps));
-  }), menuBottomChildren));
+var ADDRESS_TYPE_SELECT_OPTIONS = [{
+  label: t$1("neetoMolecules.ipRestriction.ipv4"),
+  value: "ipv4"
+}, {
+  label: t$1("neetoMolecules.ipRestriction.ipv6"),
+  value: "ipv6"
+}];
+({
+  ipStart: "",
+  ipEnd: "",
+  addressType: ADDRESS_TYPE_SELECT_OPTIONS[0].value
+});
+var VALIDATION_SCHEMA = yup.object().shape({
+  ipRestriction: yup["boolean"](),
+  allowedIpRanges: yup.array().of(getIpRestrictionValidationSchema())
+});
+var NEW_ALLOWED_IP_RANGE = {
+  ipStart: "",
+  ipEnd: "",
+  addressType: null,
+  createdAt: new Date().toISOString()
 };
 
-var Row = function Row(_ref) {
-  var data = _ref.data,
-    setEditingRow = _ref.setEditingRow;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDeleteIpRangeAlertOpen = _useState2[0],
-    setIsDeleteIpRangeAlertOpen = _useState2[1];
-  var _useDestroyAllowedIpR = useDestroyAllowedIpRanges(),
-    destroyAllowedIpRange = _useDestroyAllowedIpR.mutate;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleDelete = function handleDelete() {
-    destroyAllowedIpRange(data.id);
-    setIsDeleteIpRangeAlertOpen(false);
-  };
+var AllowedIpRange = withT(function (_ref) {
+  var t = _ref.t,
+    index = _ref.index,
+    arrayHelpers = _ref.arrayHelpers;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 items-center gap-4 p-3",
-    "data-cy": "ip-range-row"
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: data.ipStart,
-    disabled: data.ipStart.length < TRUNCATE_LENGTH,
-    position: "top"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "col-span-4",
-    "data-cy": "ip-range-start-value",
-    style: "body2"
-  }, truncate(data.ipStart, TRUNCATE_LENGTH))), /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: data.ipEnd,
-    disabled: data.ipEnd.length < TRUNCATE_LENGTH,
-    position: "top"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "col-span-4",
-    "data-cy": "ip-range-end-value",
-    style: "body2"
-  }, truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "col-span-2",
-    "data-cy": "ip-range-end-value",
-    style: "body2"
-  }, humanizeIpAddressFormat(data.addressType)), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 gap-4 p-3"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    className: "col-span-4 text-left",
+    "data-cy": "ip-start-text-field",
+    name: "allowedIpRanges.".concat(index, ".ipStart"),
+    placeholder: t("neetoMolecules.ipRestriction.ipStart")
+  }), /*#__PURE__*/React__default.createElement(Input, {
+    className: "col-span-4 text-left",
+    "data-cy": "ip-end-text-field",
+    name: "allowedIpRanges.".concat(index, ".ipEnd"),
+    placeholder: t("neetoMolecules.ipRestriction.ipEnd")
+  }), /*#__PURE__*/React__default.createElement(Select, {
+    className: "col-span-2 text-left",
+    "data-testid": "address-type-select-field",
+    name: "allowedIpRanges.".concat(index, ".addressType"),
+    options: ADDRESS_TYPE_SELECT_OPTIONS
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-2 flex justify-center"
-  }, /*#__PURE__*/React__default.createElement(MoreDropdown, {
-    dropdownButtonProps: {
-      "data-testid": "ip-range-actions-dropdown"
-    },
-    dropdownProps: {
-      position: "bottom-end"
-    },
-    menuItems: [{
-      "data-cy": "ip-range-edit-button",
-      key: "ip-range-edit-button",
-      label: t("neetoMolecules.common.actions.edit"),
-      onClick: function onClick() {
-        return setEditingRow(data.id);
-      }
-    }, {
-      "data-cy": "ip-range-delete-button",
-      key: "ip-range-delete-button",
-      label: t("neetoMolecules.common.actions.delete"),
-      onClick: function onClick() {
-        return setIsDeleteIpRangeAlertOpen(true);
-      }
-    }]
-  }), /*#__PURE__*/React__default.createElement(Alert, {
-    isOpen: isDeleteIpRangeAlertOpen,
-    submitButtonLabel: t("neetoMolecules.common.actions.delete"),
-    message: /*#__PURE__*/React__default.createElement(Trans, {
-      i18nKey: "neetoMolecules.ipRestriction.allowedIpRangeConfirmation",
-      values: {
-        ipStart: data.ipStart,
-        ipEnd: data.ipEnd
-      }
-    }),
-    title: t("neetoMolecules.common.deleteAlert.title", {
-      entity: t("neetoMolecules.ipRestriction.allowedIpRangeConfirmationTitle")
-    }),
-    onClose: function onClose() {
-      return setIsDeleteIpRangeAlertOpen(false);
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "allowed-ip-range-delete-btn",
+    icon: Delete,
+    style: "text",
+    tooltipProps: {
+      content: t("neetoMolecules.common.actions.discard"),
+      position: "top"
     },
-    onSubmit: handleDelete
+    onClick: function onClick() {
+      return arrayHelpers.remove(index);
+    }
   })));
-};
-var Row$1 = /*#__PURE__*/React__default.memo(Row);
+});
 
-var AllowedIpRanges = function AllowedIpRanges() {
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    editingRow = _useState2[0],
-    setEditingRow = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showAddNew = _useState4[0],
-    setShowAddNew = _useState4[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useFetchAllowedIpRan = useFetchAllowedIpRanges(),
-    allowedIpRanges = _useFetchAllowedIpRan.data;
+var AllowedIpRanges = withT(function (_ref) {
+  var t = _ref.t;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-6",
     "data-cy": "allowed-ip-range-container"
@@ -682,46 +380,37 @@ var AllowedIpRanges = function AllowedIpRanges() {
   }, /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 col-span-4 uppercase",
     style: "h6"
-  }, t("neetoMolecules.ipRestriction.ipStart")), /*#__PURE__*/React__default.createElement(Typography, {
+  }, t("neetoMolecules.ipRestriction.ipStart"), "*"), /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 col-span-4 uppercase",
     style: "h6"
-  }, t("neetoMolecules.ipRestriction.ipEnd")), /*#__PURE__*/React__default.createElement(Typography, {
+  }, t("neetoMolecules.ipRestriction.ipEnd"), "*"), /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 col-span-2 uppercase",
     style: "h6"
-  }, t("neetoMolecules.ipRestriction.type")), /*#__PURE__*/React__default.createElement(Typography, {
+  }, t("neetoMolecules.ipRestriction.type"), "*"), /*#__PURE__*/React__default.createElement(Typography, {
     className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
     style: "h6"
   }, t("neetoMolecules.ipRestriction.actions"))), /*#__PURE__*/React__default.createElement("div", {
     className: "w-full space-y-2"
-  }, allowedIpRanges === null || allowedIpRanges === void 0 ? void 0 : allowedIpRanges.map(function (allowedIpRange) {
-    return editingRow === allowedIpRange.id ? /*#__PURE__*/React__default.createElement(FormRow, {
-      data: allowedIpRange,
-      isAddNew: false,
-      key: allowedIpRange.id,
-      onCollapse: function onCollapse() {
-        return setEditingRow("");
+  }, /*#__PURE__*/React__default.createElement(FieldArray, {
+    name: "allowedIpRanges"
+  }, function (arrayHelpers) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, arrayHelpers.form.values.allowedIpRanges.map(function (allowedIpRange, index) {
+      return /*#__PURE__*/React__default.createElement(AllowedIpRange, {
+        allowedIpRange: allowedIpRange,
+        arrayHelpers: arrayHelpers,
+        index: index,
+        key: allowedIpRange.createdAt
+      });
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      "data-cy": "add-allowed-ip-range-button",
+      label: t("neetoMolecules.ipRestriction.addNew"),
+      style: "link",
+      onClick: function onClick() {
+        return arrayHelpers.push(NEW_ALLOWED_IP_RANGE);
       }
-    }) : /*#__PURE__*/React__default.createElement(Row$1, {
-      data: allowedIpRange,
-      key: allowedIpRange.id,
-      setEditingRow: setEditingRow
-    });
-  }), showAddNew && /*#__PURE__*/React__default.createElement(FormRow, {
-    isAddNew: true,
-    data: INITIAL_VALUES,
-    onCollapse: function onCollapse() {
-      return setShowAddNew(false);
-    }
-  })), /*#__PURE__*/React__default.createElement(Button$1, {
-    "data-cy": "add-allowed-ip-range-button",
-    disabled: showAddNew,
-    label: t("neetoMolecules.ipRestriction.addNew"),
-    style: "link",
-    onClick: function onClick() {
-      return setShowAddNew(true);
-    }
-  })));
-};
+    }));
+  }))));
+});
 var AllowedIpRanges$1 = /*#__PURE__*/React__default.memo(AllowedIpRanges);
 
 var show$1 = function show(params) {
@@ -744,25 +433,51 @@ var CurrentIp = function CurrentIp() {
   var _useShowCurrentIp = useShowCurrentIp(),
     data = _useShowCurrentIp.data,
     isLoading = _useShowCurrentIp.isLoading;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-wrap items-baseline gap-1",
     "data-cy": "current-ip-container"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "current-ip-heading",
-    style: "body2"
-  }, t("neetoMolecules.ipRestriction.currentIpTitle")), /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "current-ip-value",
-    style: "h4",
-    weight: "semibold"
-  }, isLoading ? "..." : data.ip), /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "current-ip-description",
-    style: "body2"
-  }, t("neetoMolecules.ipRestriction.currentIpDescription")));
+  }, /*#__PURE__*/React__default.createElement(Typography, null, /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoMolecules.ipRestriction.currentIpMessage",
+    values: {
+      ip: isLoading ? "..." : data.ip
+    }
+  })));
 };
 var CurrentIp$1 = /*#__PURE__*/React__default.memo(CurrentIp);
 
+var allowedIpRangesUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/allowed_ips");
+var fetch = function fetch() {
+  return axios.get(allowedIpRangesUrl);
+};
+var create = function create(payload) {
+  return axios.post(allowedIpRangesUrl, {
+    allowedIpRange: payload
+  });
+};
+var destroy = function destroy(id) {
+  return axios["delete"]("".concat(allowedIpRangesUrl, "/").concat(id));
+};
+var update$1 = function update(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
+  return axios.patch("".concat(allowedIpRangesUrl, "/").concat(id), {
+    allowedIpRange: payload
+  });
+};
+var allowedIpRangesApi = {
+  fetch: fetch,
+  create: create,
+  destroy: destroy,
+  update: update$1
+};
+
+var ALLOWED_IP_RANGES$1 = QUERY_KEYS.ALLOWED_IP_RANGES;
+var useFetchAllowedIpRanges = function useFetchAllowedIpRanges(options) {
+  return useQuery([ALLOWED_IP_RANGES$1], function () {
+    return allowedIpRangesApi.fetch();
+  }, options);
+};
+
 var ipRestrictionUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/ip_restriction");
 var update = function update(params) {
   return axios.patch(ipRestrictionUrl, {
@@ -777,7 +492,8 @@ var ipRestrictionApi = {
   show: show
 };
 
-var IP_RESTRICTION = QUERY_KEYS.IP_RESTRICTION;
+var IP_RESTRICTION = QUERY_KEYS.IP_RESTRICTION,
+  ALLOWED_IP_RANGES = QUERY_KEYS.ALLOWED_IP_RANGES;
 var useShowIpRestriction = function useShowIpRestriction() {
   return useQuery([IP_RESTRICTION], function () {
     return ipRestrictionApi.show();
@@ -785,101 +501,141 @@ var useShowIpRestriction = function useShowIpRestriction() {
 };
 var useUpdateIpRestriction = function useUpdateIpRestriction() {
   return useMutationWithInvalidation(ipRestrictionApi.update, {
-    keysToInvalidate: [IP_RESTRICTION]
+    keysToInvalidate: [IP_RESTRICTION, ALLOWED_IP_RANGES]
   });
 };
 
 var IpRestriction = function IpRestriction() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useShowIpRestriction = useShowIpRestriction(),
-    data = _useShowIpRestriction.data,
-    isFetching = _useShowIpRestriction.isLoading;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isAlertOpen = _useState2[0],
     setIsAlertOpen = _useState2[1];
-  var _useStateWithDependen = useStateWithDependency((data === null || data === void 0 ? void 0 : data.isIpRestrictionEnabled) || false, [data]),
-    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
-    isIpRestrictionVisible = _useStateWithDependen2[0],
-    setIsIpRestrictionVisible = _useStateWithDependen2[1];
+  var _useShowIpRestriction = useShowIpRestriction(),
+    _useShowIpRestriction2 = _useShowIpRestriction.data,
+    _useShowIpRestriction3 = _useShowIpRestriction2 === void 0 ? {} : _useShowIpRestriction2,
+    isIpRestrictionEnabled = _useShowIpRestriction3.isIpRestrictionEnabled,
+    isFetchingIpRestriction = _useShowIpRestriction.isLoading;
+  var _useFetchAllowedIpRan = useFetchAllowedIpRanges({
+      enabled: isIpRestrictionEnabled
+    }),
+    allowedIpRanges = _useFetchAllowedIpRan.data,
+    isFetchingAllowedIpRanges = _useFetchAllowedIpRan.isLoading,
+    isRefetching = _useFetchAllowedIpRan.isRefetching;
   var _useUpdateIpRestricti = useUpdateIpRestriction(),
     updateIpRestriction = _useUpdateIpRestricti.mutate,
     isUpdating = _useUpdateIpRestricti.isLoading;
-  if (isFetching) {
+  if (isFetchingIpRestriction || isFetchingAllowedIpRanges || isRefetching) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "h-screen"
     }, /*#__PURE__*/React__default.createElement(PageLoader$1, null));
   }
-  var updateIpRestrictionStatus = function updateIpRestrictionStatus() {
-    return updateIpRestriction({
-      isIpRestrictionEnabled: isIpRestrictionVisible
-    }, {
+  var handleSubmit = function handleSubmit(values, formikBag) {
+    if (values.ipRestriction) setIsAlertOpen(true);else handleUpdateIpRestriction(values, formikBag);
+  };
+  var handleCloseAlert = function handleCloseAlert(setSubmitting) {
+    setIsAlertOpen(false);
+    setSubmitting(false);
+  };
+  var handleUpdateIpRestriction = function handleUpdateIpRestriction(values, _ref) {
+    var setSubmitting = _ref.setSubmitting,
+      resetForm = _ref.resetForm;
+    updateIpRestriction(buildIpRestrictionPayload(values), {
       onSuccess: function onSuccess() {
-        return setIsAlertOpen(false);
+        setIsAlertOpen(false);
+        setSubmitting(false);
+        resetForm({
+          values: values
+        });
+      },
+      onError: function onError() {
+        setIsAlertOpen(false);
+        setSubmitting(false);
       }
     });
   };
-  var handleOnChange = function handleOnChange() {
-    if (data.isIpRestrictionEnabled) {
-      updateIpRestriction({
-        isIpRestrictionEnabled: false
-      }, {
-        onSuccess: function onSuccess() {
-          return setIsIpRestrictionVisible(false);
-        }
-      });
-    } else {
-      setIsIpRestrictionVisible(function (previousState) {
-        return !previousState;
-      });
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-lg mx-auto mb-4 w-full overflow-hidden border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
-    "data-cy": "ip-restrictions-card"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-2 p-6"
-  }, /*#__PURE__*/React__default.createElement(Checkbox, {
-    checked: isIpRestrictionVisible,
-    className: "flex-grow-0",
-    "data-cy": "enable-ip-restriction-checkbox",
-    disabled: isFetching || isUpdating,
-    label: /*#__PURE__*/React__default.createElement(Typography, {
-      style: "h3"
-    }, t("neetoMolecules.ipRestriction.switchLabel")),
-    onChange: handleOnChange
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "ip-restriction-description",
-    style: "body2"
-  }, t("neetoMolecules.ipRestriction.description"))), isIpRestrictionVisible && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-100 w-full space-y-6 p-6"
-  }, /*#__PURE__*/React__default.createElement(CurrentIp$1, null), /*#__PURE__*/React__default.createElement(AllowedIpRanges$1, null), /*#__PURE__*/React__default.createElement(Callout, {
-    icon: Warning,
-    style: "warning"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "leading-2 block whitespace-pre-wrap py-1"
-  }, /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.ipRestriction.warningMessage"
-  }))), /*#__PURE__*/React__default.createElement(Button$1, {
-    "data-cy": "ip-restriction-save-changes",
-    label: t("neetoMolecules.common.actions.saveChanges"),
-    onClick: function onClick() {
-      return setIsAlertOpen(true);
+  return /*#__PURE__*/React__default.createElement(Form, {
+    className: "mx-auto mb-4 w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
+    formikProps: {
+      initialValues: buildInitialValue(isIpRestrictionEnabled, allowedIpRanges),
+      validationSchema: VALIDATION_SCHEMA,
+      validateOnBlur: true,
+      enableReinitialize: true,
+      onSubmit: handleSubmit
     }
-  }), /*#__PURE__*/React__default.createElement(Alert, {
-    isOpen: isAlertOpen,
-    isSubmitting: isUpdating,
-    title: t("neetoMolecules.ipRestriction.enableAlert.title"),
-    message: /*#__PURE__*/React__default.createElement(Trans, {
-      i18nKey: "neetoMolecules.ipRestriction.enableAlert.message"
-    }),
-    submitButtonLabel: t("neetoMolecules.ipRestriction.enableAlert.submitButtonLabel"),
-    onClose: function onClose() {
-      return setIsAlertOpen(false);
-    },
-    onSubmit: updateIpRestrictionStatus
-  })));
+  }, function (_ref2) {
+    var values = _ref2.values,
+      dirty = _ref2.dirty,
+      setFieldValue = _ref2.setFieldValue,
+      resetForm = _ref2.resetForm,
+      setSubmitting = _ref2.setSubmitting;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BlockNavigation, null), /*#__PURE__*/React__default.createElement("div", {
+      className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-lg mx-auto mb-4 w-full overflow-hidden border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
+      "data-cy": "ip-restrictions-card"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "space-y-2 p-6"
+    }, /*#__PURE__*/React__default.createElement(Checkbox, {
+      checked: values.ipRestriction,
+      className: "flex-grow-0",
+      "data-cy": "enable-ip-restriction-checkbox",
+      disabled: isFetchingIpRestriction || isUpdating,
+      name: "ipRestriction",
+      label: /*#__PURE__*/React__default.createElement(Typography, {
+        style: "h3"
+      }, t("neetoMolecules.ipRestriction.switchLabel")),
+      onChange: function onChange() {
+        return setFieldValue("ipRestriction", !values.ipRestriction);
+      }
+    }), /*#__PURE__*/React__default.createElement(Typography, {
+      "data-cy": "ip-restriction-description",
+      style: "body2"
+    }, t("neetoMolecules.ipRestriction.description"))), values.ipRestriction && /*#__PURE__*/React__default.createElement("div", {
+      className: "neeto-ui-bg-gray-100 w-full space-y-6 p-6"
+    }, /*#__PURE__*/React__default.createElement(CurrentIp$1, null), /*#__PURE__*/React__default.createElement(AllowedIpRanges$1, null), /*#__PURE__*/React__default.createElement(Callout, {
+      icon: Warning,
+      style: "warning"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "leading-2 block whitespace-pre-wrap py-1"
+    }, /*#__PURE__*/React__default.createElement(Trans, {
+      i18nKey: "neetoMolecules.ipRestriction.warningMessage"
+    }))))), /*#__PURE__*/React__default.createElement("div", {
+      className: "align-center flex justify-between"
+    }, dirty && /*#__PURE__*/React__default.createElement(Typography, {
+      className: "neeto-ui-text-error-500"
+    }, t("neetoMolecules.ipRestriction.validations.unsavedChanges")), /*#__PURE__*/React__default.createElement("div", {
+      className: "ml-auto flex justify-between"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      className: "mr-2",
+      disabled: !dirty,
+      label: t("neetoMolecules.common.actions.reset"),
+      style: "secondary",
+      type: "reset",
+      onClick: resetForm
+    }), /*#__PURE__*/React__default.createElement(Button$1, {
+      "data-cy": "ip-restriction-save-changes",
+      "data-testid": "save-changes-button",
+      isLoading: isUpdating,
+      type: "submit"
+    }, t("neetoMolecules.common.actions.saveChanges")))), /*#__PURE__*/React__default.createElement(Alert, {
+      isOpen: isAlertOpen,
+      isSubmitting: isUpdating,
+      title: t("neetoMolecules.ipRestriction.enableAlert.title"),
+      message: /*#__PURE__*/React__default.createElement(Trans, {
+        i18nKey: "neetoMolecules.ipRestriction.enableAlert.message"
+      }),
+      submitButtonLabel: t("neetoMolecules.ipRestriction.enableAlert.submitButtonLabel"),
+      onClose: function onClose() {
+        return handleCloseAlert(setSubmitting);
+      },
+      onSubmit: function onSubmit() {
+        return handleUpdateIpRestriction(values, {
+          setSubmitting: setSubmitting,
+          resetForm: resetForm
+        });
+      }
+    }));
+  });
 };
 var index = /*#__PURE__*/React__default.memo(IpRestriction);