@bigbinary/neeto-molecules 1.0.90 → 1.0.91-beta

package/dist/IpRestriction.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useState } from 'react';
 import { useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Check, Close, MenuHorizontal, Plus, Warning } from '@bigbinary/neeto-icons';
+import { Check, Close, 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 { Form, Input, Button } from '@bigbinary/neetoui/formik';
@@ -3446,22 +3446,23 @@ var FormRow = function FormRow(_ref) {
   }, function (_ref2) {
     var isSubmitting = _ref2.isSubmitting;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-bg-white flex w-full flex-row justify-between px-2 py-2"
+      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: "w-5/12 flex-grow px-3 py-2 text-left",
+      className: "col-span-5 text-left",
       "data-cy": "ip-start-text-field",
       name: "ipStart",
       placeholder: t("neetoMolecules.ipRestriction.ipStart")
     }), /*#__PURE__*/React__default.createElement(Input, {
-      className: "w-5/12 flex-grow px-3 py-2 text-left",
+      className: "col-span-5 text-left",
       "data-cy": "ip-end-text-field",
       name: "ipEnd",
       placeholder: t("neetoMolecules.ipRestriction.ipEnd")
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "w-5/12 flex-grow px-3 py-2 text-center"
+      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",
@@ -3502,14 +3503,14 @@ var Row = function Row(_ref) {
     setIsDeleteIpRangeAlertOpen(false);
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-white flex w-full flex-row justify-between px-1 py-2",
+    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: "flex w-4/12 flex-grow items-center px-3 py-2 text-left",
+    className: "col-span-5",
     "data-cy": "ip-range-start-value",
     style: "body2"
   }, truncate(data.ipStart, TRUNCATE_LENGTH))), /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -3517,12 +3518,15 @@ var Row = function Row(_ref) {
     disabled: data.ipEnd.length < TRUNCATE_LENGTH,
     position: "top"
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "flex w-4/12 flex-grow items-center px-3 py-2 text-left",
+    className: "col-span-5",
     "data-cy": "ip-range-end-value",
     style: "body2"
   }, truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-4/12 flex-grow px-3 py-2 text-center"
+    className: "col-span-2 flex justify-center"
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
+    buttonProps: {
+      "data-testid": "ip-range-actions-dropdown"
+    },
     buttonStyle: "text",
     icon: MenuHorizontal,
     position: "bottom-end"
@@ -3571,43 +3575,27 @@ var AllowedIpRanges = function AllowedIpRanges() {
   var _useFetchAllowedIpRan = useFetchAllowedIpRanges(),
     allowedIpRanges = _useFetchAllowedIpRan.data;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4",
+    className: "space-y-6",
     "data-cy": "allowed-ip-range-container"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row items-center"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "allowed-ip-range-heading",
-    style: "h3"
-  }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React__default.createElement(Button$1, {
-    className: "ml-2",
-    "data-cy": "add-allowed-ip-range-button",
-    disabled: showAddNew,
-    icon: Plus,
-    size: "small",
-    tooltipProps: {
-      content: "Add",
-      position: "top"
-    },
-    onClick: function onClick() {
-      return setShowAddNew(true);
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-text-gray-500 flex w-full flex-row justify-between"
+    style: "h4"
+  }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-12 gap-4 px-3"
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "w-4/12 flex-grow px-3 py-2 text-left"
+    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    style: "h6"
   }, t("neetoMolecules.ipRestriction.ipStart")), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "w-4/12 flex-grow px-3 py-2 text-left"
+    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    style: "h6"
   }, t("neetoMolecules.ipRestriction.ipEnd")), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "w-4/12 flex-grow px-3 py-2 text-center"
+    className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
+    style: "h6"
   }, t("neetoMolecules.ipRestriction.actions"))), /*#__PURE__*/React__default.createElement("div", {
-    className: "items-between flex w-full flex-col space-y-2"
-  }, showAddNew && /*#__PURE__*/React__default.createElement(FormRow, {
-    isAddNew: true,
-    data: INITIAL_VALUES,
-    onCollapse: function onCollapse() {
-      return setShowAddNew(false);
-    }
-  }), allowedIpRanges === null || allowedIpRanges === void 0 ? void 0 : allowedIpRanges.map(function (allowedIpRange) {
+    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,
@@ -3620,6 +3608,20 @@ var AllowedIpRanges = function AllowedIpRanges() {
       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);
@@ -3647,15 +3649,16 @@ var CurrentIp = function CurrentIp() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-1",
+    className: "flex flex-wrap items-baseline gap-1",
     "data-cy": "current-ip-container"
   }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "current-ip-heading"
+    "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, {
-    className: "pt-2",
     "data-cy": "current-ip-description",
     style: "body2"
   }, t("neetoMolecules.ipRestriction.currentIpDescription")));
@@ -3738,24 +3741,25 @@ var IpRestriction = function IpRestriction() {
     }
   };
   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",
+    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-4"
+    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: t("neetoMolecules.ipRestriction.switchLabel"),
+    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-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, {
+    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", {
@@ -3763,11 +3767,11 @@ var IpRestriction = function IpRestriction() {
   }, /*#__PURE__*/React__default.createElement(Trans, {
     i18nKey: "neetoMolecules.ipRestriction.warningMessage"
   }))), /*#__PURE__*/React__default.createElement(Button$1, {
-    label: t("neetoMolecules.common.actions.submit"),
+    label: t("neetoMolecules.common.actions.saveChanges"),
     onClick: function onClick() {
       return setIsAlertOpen(true);
     }
-  })), /*#__PURE__*/React__default.createElement(Alert, {
+  }), /*#__PURE__*/React__default.createElement(Alert, {
     isOpen: isAlertOpen,
     isSubmitting: isUpdating,
     title: t("neetoMolecules.ipRestriction.enableAlert.title"),