@bigbinary/neeto-molecules 1.1.11 → 1.1.12

package/dist/IpRestriction/AllowedIpRanges.js

@@ -30,12 +30,15 @@ var AllowedIpRanges = function AllowedIpRanges() {
   }, /*#__PURE__*/React.createElement("div", {
     className: "grid grid-cols-12 gap-4 px-3"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    className: "neeto-ui-text-gray-700 col-span-4 uppercase",
     style: "h6"
   }, t("neetoMolecules.ipRestriction.ipStart")), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 col-span-5 uppercase",
+    className: "neeto-ui-text-gray-700 col-span-4 uppercase",
     style: "h6"
   }, t("neetoMolecules.ipRestriction.ipEnd")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 col-span-2 uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.type")), /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
     style: "h6"
   }, t("neetoMolecules.ipRestriction.actions"))), /*#__PURE__*/React.createElement("div", {

package/dist/IpRestriction/FormRow.js

@@ -1,10 +1,12 @@
 import React from "react";
 import { Check, Close } from "@bigbinary/neeto-icons";
 import { Button } from "@bigbinary/neetoui";
-import { Input, Form, Button as FormikButton } from "@bigbinary/neetoui/formik";
+import { Input, Form, Button as FormikButton, Select } from "@bigbinary/neetoui/formik";
+import { assoc } from "ramda";
 import { useTranslation } from "react-i18next";
+import { ADDRESS_TYPE_SELECT_OPTIONS } from "./constants";
 import { useCreateAllowedIpRanges, useUpdateAllowedIpRanges } from "./hooks/reactQuery/useAllowedIpRanges";
-import { getIpRestrictionValidationSchema } from "./utils";
+import { buildInitialValue, getIpRestrictionValidationSchema } from "./utils";
 var FormRow = function FormRow(_ref) {
   var data = _ref.data,
     isAddNew = _ref.isAddNew,
@@ -16,12 +18,13 @@ var FormRow = function FormRow(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var handleSubmit = function handleSubmit(values) {
+    var payload = assoc("addressType", values.addressType.value, values);
     if (isAddNew) {
-      createAllowedIpRange(values);
+      createAllowedIpRange(payload);
     } else {
       updateAllowedIpRange({
         id: data.id,
-        payload: values
+        payload: payload
       });
     }
     onCollapse();
@@ -29,7 +32,7 @@ var FormRow = function FormRow(_ref) {
   return /*#__PURE__*/React.createElement(Form, {
     "data-cy": "allowed-ip-range-form",
     formikProps: {
-      initialValues: data,
+      initialValues: buildInitialValue(data),
       validationSchema: getIpRestrictionValidationSchema(),
       onSubmit: handleSubmit
     }
@@ -39,15 +42,19 @@ var FormRow = function FormRow(_ref) {
       className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-12 gap-4 p-3"
     }, /*#__PURE__*/React.createElement(Input, {
       autoFocus: true,
-      className: "col-span-5 text-left",
+      className: "col-span-4 text-left",
       "data-cy": "ip-start-text-field",
       name: "ipStart",
       placeholder: t("neetoMolecules.ipRestriction.ipStart")
     }), /*#__PURE__*/React.createElement(Input, {
-      className: "col-span-5 text-left",
+      className: "col-span-4 text-left",
       "data-cy": "ip-end-text-field",
       name: "ipEnd",
       placeholder: t("neetoMolecules.ipRestriction.ipEnd")
+    }), /*#__PURE__*/React.createElement(Select, {
+      className: "col-span-2 text-left",
+      name: "addressType",
+      options: ADDRESS_TYPE_SELECT_OPTIONS
     }), /*#__PURE__*/React.createElement("div", {
       className: "col-span-2 flex items-start justify-center gap-1"
     }, /*#__PURE__*/React.createElement(FormikButton, {

package/dist/IpRestriction/Row.js

@@ -6,6 +6,7 @@ import { useTranslation, Trans } from "react-i18next";
 import MoreDropdown from "../MoreDropdown";
 import { TRUNCATE_LENGTH } from "./constants";
 import { useDestroyAllowedIpRanges } from "./hooks/reactQuery/useAllowedIpRanges";
+import { humanizeIpAddressFormat } from "./utils";
 var Row = function Row(_ref) {
   var data = _ref.data,
     setEditingRow = _ref.setEditingRow;
@@ -29,7 +30,7 @@ var Row = function Row(_ref) {
     disabled: data.ipStart.length < TRUNCATE_LENGTH,
     position: "top"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "col-span-5",
+    className: "col-span-4",
     "data-cy": "ip-range-start-value",
     style: "body2"
   }, truncate(data.ipStart, TRUNCATE_LENGTH))), /*#__PURE__*/React.createElement(Tooltip, {
@@ -37,10 +38,14 @@ var Row = function Row(_ref) {
     disabled: data.ipEnd.length < TRUNCATE_LENGTH,
     position: "top"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "col-span-5",
+    className: "col-span-4",
     "data-cy": "ip-range-end-value",
     style: "body2"
-  }, truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React.createElement("div", {
+  }, truncate(data.ipEnd, TRUNCATE_LENGTH))), /*#__PURE__*/React.createElement(Typography, {
+    className: "col-span-2",
+    "data-cy": "ip-range-end-value",
+    style: "body2"
+  }, humanizeIpAddressFormat(data.addressType)), /*#__PURE__*/React.createElement("div", {
     className: "col-span-2 flex justify-center"
   }, /*#__PURE__*/React.createElement(MoreDropdown, {
     dropdownButtonProps: {

package/dist/IpRestriction/constants.js

@@ -1,11 +1,20 @@
+import { t } from "i18next";
 export var IP_RESTRICTIONS_ENGINE_BASE_URL = "ip_restrictions/api/v1";
-export var INITIAL_VALUES = {
-  ipStart: "",
-  ipEnd: ""
-};
 export var QUERY_KEYS = {
   IP_RESTRICTION: "IP_RESTRICTION",
   ALLOWED_IP_RANGES: "ALLOWED_IP_RANGES",
   CURRENT_IP: "CURRENT_IP"
 };
-export var TRUNCATE_LENGTH = 18;
+export var TRUNCATE_LENGTH = 18;
+export var ADDRESS_TYPE_SELECT_OPTIONS = [{
+  label: t("neetoMolecules.ipRestriction.ipv4"),
+  value: "ipv4"
+}, {
+  label: t("neetoMolecules.ipRestriction.ipv6"),
+  value: "ipv6"
+}];
+export var INITIAL_VALUES = {
+  ipStart: "",
+  ipEnd: "",
+  addressType: ADDRESS_TYPE_SELECT_OPTIONS[0].value
+};

package/dist/IpRestriction/utils.js

@@ -1,6 +1,6 @@
 import { t } from "i18next";
 import { IPv4, IPv6, Validator } from "ip-num";
-import { isNil, isNotNil } from "ramda";
+import { assoc, isNil, isNotNil } from "ramda";
 import * as yup from "yup";
 var isValidIPv4String = function isValidIPv4String(ip) {
   return isNotNil(ip) && Validator.isValidIPv4String(ip)[0];
@@ -62,6 +62,24 @@ export var getIpRestrictionValidationSchema = function getIpRestrictionValidatio
         },
         message: t("neetoMolecules.ipRestriction.validations.ipEndGreaterThanIpStart")
       });
-    }).required(t("neetoMolecules.ipRestriction.validations.ipEndRequired"))
+    }).required(t("neetoMolecules.ipRestriction.validations.ipEndRequired")),
+    addressType: yup.object().shape({
+      value: yup.string().required(),
+      label: yup.string().required()
+    }).nullable().required(t("neetoMolecules.ipRestriction.validations.addressTypeRequired"))
   });
+};
+export var humanizeIpAddressFormat = function humanizeIpAddressFormat(addressFormat) {
+  var addressFormats = {
+    ipv4: "IPv4",
+    ipv6: "IPv6"
+  };
+  return addressFormats[addressFormat];
+};
+export var buildInitialValue = function buildInitialValue(values) {
+  var labelAndValue = {
+    label: humanizeIpAddressFormat(values.addressType),
+    value: values.addressType
+  };
+  return assoc("addressType", labelAndValue, values);
 };

package/dist/Search/index.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "debounceTime", "onChange", "onSearch"];
+import React, { useEffect, useState } from "react";
+import { useDebounce } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Search as NeetoUISearchIcon } from "@bigbinary/neeto-icons";
+import { Input } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var Search = function Search(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$debounceTime = _ref.debounceTime,
+    debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
+    onChange = _ref.onChange,
+    onSearch = _ref.onSearch,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    untrimmedValue = _useState4[0],
+    setUntrimmedValue = _useState4[1];
+  useEffect(function () {
+    if (untrimmedValue && untrimmedValue.includes(value)) {
+      setInternalValue(untrimmedValue);
+    } else {
+      setInternalValue(value);
+    }
+  }, [value]);
+  var debouncedValue = useDebounce(internalValue, debounceTime);
+  useEffect(function () {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(debouncedValue.trim());
+  }, [debouncedValue, onSearch]);
+  var handleOnChange = function handleOnChange(e) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    setInternalValue(e.target.value);
+    setUntrimmedValue(e.target.value);
+  };
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/React.createElement(NeetoUISearchIcon, null),
+    type: "search",
+    value: internalValue,
+    onChange: handleOnChange
+  }, inputProps));
+};
+export default Search;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -66,6 +66,7 @@
     "@babel/runtime": "^7.19.0",
     "@bigbinary/babel-preset-neeto": "^1.0.3",
     "@bigbinary/eslint-plugin-neeto": "^1.1.14",
+    "@bigbinary/neeto-audit-frontend": "2.0.1",
     "@bigbinary/neeto-commons-frontend": "2.0.134",
     "@bigbinary/neeto-editor": "1.27.0-beta.1",
     "@bigbinary/neeto-filters-frontend": "^2.11.15",

package/src/translations/en.json

@@ -279,6 +279,9 @@
       "allowedIpRangeTitle": "Allowed IP range",
       "ipStart": "IP start",
       "ipEnd": "IP end",
+      "type": "Type",
+      "ipv4": "IPv4",
+      "ipv6": "IPv6",
       "actions": "Actions",
       "addNew": "Add new IP range",
       "allowedIpRangeConfirmationTitle": "allowed IP range",
@@ -288,7 +291,8 @@
         "ipEndGreaterThanIpStart": "IP end should be greater than or equal to IP start",
         "eitherIpv4OrIpv6": "IPs should be in either IPv6 or IPv4",
         "ipStartRequired": "IP start is required",
-        "ipEndRequired": "IP end is required"
+        "ipEndRequired": "IP end is required",
+        "addressTypeRequired": "Address type is required"
       },
       "currentIpTitle": "Your current IP is",
       "currentIpDescription": "and it will be added to the allowed IP range by default.",

package/types/Search.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { InputProps } from "neetoui";
+/**
+ *
+ * A common search component with search value debounced
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import Search from "@bigbinary/neeto-molecules/Search";
+ * 
+ * const Page = () => <Search debounceTime={500} onChange={e => noop} />;
+ * @endexample
+*/
+const Search: React.FC<{
+  debounceTime?: number;
+  onSearch?: (value: string) => void;
+} & InputProps>;
+export default Search;