@bigbinary/neeto-molecules 1.0.88 → 1.0.89-beta

package/dist/IpRestriction.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import React__default, { useState } from 'react';
-import { Typography, Button as Button$1, Dropdown, Tooltip, Alert, Switch } from '@bigbinary/neetoui';
+import { useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Check, Close, MenuHorizontal, Plus, 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 { Check, Close, MenuVertical, Plus } from '@bigbinary/neeto-icons';
 import { Form, Input, Button } from '@bigbinary/neetoui/formik';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import axios from 'axios';
@@ -11,6 +12,61 @@ import { isNil, isNotNil } from 'ramda';
 import * as yup from 'yup';
 import { truncate } from '@bigbinary/neeto-commons-frontend/pure';
 
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -139,61 +195,6 @@ var PageLoader = function PageLoader(_ref) {
 };
 var PageLoader$1 = /*#__PURE__*/React__default.memo(PageLoader);
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
 var IP_RESTRICTIONS_ENGINE_BASE_URL = "ip_restrictions/api/v1";
 var INITIAL_VALUES = {
   ipStart: "",
@@ -3523,7 +3524,7 @@ var Row = function Row(_ref) {
     className: "w-4/12 flex-grow px-3 py-2 text-center"
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
     buttonStyle: "text",
-    icon: MenuVertical,
+    icon: MenuHorizontal,
     position: "bottom-end"
   }, /*#__PURE__*/React__default.createElement(Menu, null, /*#__PURE__*/React__default.createElement(MenuItem.Button, {
     "data-cy": "ip-range-edit-button",
@@ -3691,46 +3692,94 @@ var useUpdateIpRestriction = function useUpdateIpRestriction() {
 };
 
 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 _useUpdateIpRestricti = useUpdateIpRestriction(),
     updateIpRestriction = _useUpdateIpRestricti.mutate,
     isUpdating = _useUpdateIpRestricti.isLoading;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleSwitchButtonChange = function handleSwitchButtonChange(e) {
-    var payload = {
-      isIpRestrictionEnabled: e.target.checked
-    };
-    updateIpRestriction(payload);
-  };
   if (isFetching) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "h-screen"
     }, /*#__PURE__*/React__default.createElement(PageLoader$1, null));
   }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
-    React__default.createElement("div", {
-      className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-sm mx-auto mb-4 w-full space-y-4 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-1 p-4"
-    }, /*#__PURE__*/React__default.createElement(Switch, {
-      checked: data.isIpRestrictionEnabled,
-      "data-cy": "enable-ip-restriction-switch",
-      disabled: isFetching || isUpdating,
-      label: t("neetoMolecules.ipRestriction.switchLabel"),
-      onChange: handleSwitchButtonChange
-    }), /*#__PURE__*/React__default.createElement(Typography, {
-      "data-cy": "ip-restriction-description",
-      style: "body3"
-    }, t("neetoMolecules.ipRestriction.description"))), data.isIpRestrictionEnabled && /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-bg-gray-100 w-full space-y-4 p-4"
-    }, /*#__PURE__*/React__default.createElement(CurrentIp$1, null), /*#__PURE__*/React__default.createElement(AllowedIpRanges$1, null)))
-  );
+  var updateIpRestrictionStatus = function updateIpRestrictionStatus() {
+    return updateIpRestriction({
+      isIpRestrictionEnabled: isIpRestrictionVisible
+    }, {
+      onSuccess: function onSuccess() {
+        return setIsAlertOpen(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-md mx-auto mb-4 w-full 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-4"
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: isIpRestrictionVisible,
+    "data-cy": "enable-ip-restriction-checkbox",
+    disabled: isFetching || isUpdating,
+    label: 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-4 p-4"
+  }, /*#__PURE__*/React__default.createElement(CurrentIp$1, null), /*#__PURE__*/React__default.createElement(AllowedIpRanges$1, null), /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-3"
+  }, /*#__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, {
+    label: t("neetoMolecules.common.actions.submit"),
+    onClick: function onClick() {
+      return setIsAlertOpen(true);
+    }
+  })), /*#__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
+  })));
 };
 var index = /*#__PURE__*/React__default.memo(IpRestriction);