@bigbinary/neeto-access-control-frontend 1.3.3 → 1.3.5

package/dist/index.js

@@ -1,16 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useRef, useState, createElement } from 'react';
+import { useRef, useState, createElement, Fragment as Fragment$1 } from 'react';
 import classNames from 'classnames';
 import { truncate, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import Container from '@bigbinary/neeto-molecules/Container';
 import Scrollable from '@bigbinary/neeto-molecules/Scrollable';
-import Label from '@bigbinary/neetoui/Label';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Form from '@bigbinary/neetoui/formik/Form';
 import Input from '@bigbinary/neetoui/formik/Input';
 import Radio from '@bigbinary/neetoui/formik/Radio';
+import { prop, pluck, mergeDeepRight, indexBy, values, isEmpty, equals, pick, reject, pipe, trim, mergeLeft, keys } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
 import { DEFAULT_STALE_TIME, DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-frontend/constants';
 import Delete from '@bigbinary/neeto-icons/Delete';
@@ -22,7 +22,6 @@ import NoData from '@bigbinary/neetoui/NoData';
 import Pane from '@bigbinary/neetoui/Pane';
 import Table from '@bigbinary/neetoui/Table';
 import Typography from '@bigbinary/neetoui/Typography';
-import { prop, pluck, mergeDeepRight, indexBy, values, isEmpty, equals, pick, reject, pipe, trim } from 'ramda';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useQuery } from '@tanstack/react-query';
 import { useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
@@ -35,6 +34,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import { FieldArray } from 'formik';
+import Label from '@bigbinary/neetoui/Label';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 
@@ -76,14 +76,14 @@ var QUERY_KEYS = {
 };
 
 var _excluded = ["ownerId", "ownerType"];
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ACCESS_CONTROL_CONFIGURATION_INVITATIONS$1 = QUERY_KEYS.ACCESS_CONTROL_CONFIGURATION_INVITATIONS;
 var useListInvitations = function useListInvitations(_ref, options) {
   var ownerId = _ref.ownerId,
     ownerType = _ref.ownerType,
     otherParams = _objectWithoutProperties(_ref, _excluded);
-  return useQuery(_objectSpread$3({
+  return useQuery(_objectSpread$5({
     queryKey: [ACCESS_CONTROL_CONFIGURATION_INVITATIONS$1, ownerType, ownerId, otherParams],
     queryFn: function queryFn() {
       return invitationsApi.list(otherParams);
@@ -100,7 +100,7 @@ var useBulkCreateInvitations = function useBulkCreateInvitations(_ref2, options)
       configurationId: configurationId,
       payload: payload
     });
-  }, _objectSpread$3({
+  }, _objectSpread$5({
     keysToInvalidate: [[ACCESS_CONTROL_CONFIGURATION_INVITATIONS$1, ownerType, ownerId]]
   }, options));
 };
@@ -113,7 +113,7 @@ var useBulkDestroyInvitations = function useBulkDestroyInvitations(_ref3, option
       configurationId: configurationId,
       payload: payload
     });
-  }, _objectSpread$3({
+  }, _objectSpread$5({
     keysToInvalidate: [[ACCESS_CONTROL_CONFIGURATION_INVITATIONS$1, ownerType, ownerId]]
   }, options));
 };
@@ -236,6 +236,8 @@ var renderColumnData = function renderColumnData(_ref2) {
   }), extraColumnsData);
 };
 
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Invitations$1 = function Invitations(_ref) {
   var _selectedEmails$;
   var _ref$extraColumnsData = _ref.extraColumnsData,
@@ -249,6 +251,8 @@ var Invitations$1 = function Invitations(_ref) {
     onClose = _ref.onClose,
     _ref$hideAddEmailsFor = _ref.hideAddEmailsForm,
     hideAddEmailsForm = _ref$hideAddEmailsFor === void 0 ? false : _ref$hideAddEmailsFor,
+    _ref$inviteButtonProp = _ref.inviteButtonProps,
+    inviteButtonProps = _ref$inviteButtonProp === void 0 ? {} : _ref$inviteButtonProp,
     _ref$onDestroyInvitat = _ref.onDestroyInvitationsSuccess,
     onDestroyInvitationsSuccess = _ref$onDestroyInvitat === void 0 ? noop : _ref$onDestroyInvitat;
   var _useState = useState([]),
@@ -321,8 +325,11 @@ var Invitations$1 = function Invitations(_ref) {
           children: t("neetoAccessControl.titles.invitations")
         })
       }), /*#__PURE__*/jsxs(Pane.Body, {
-        className: "pt-2",
-        children: [!hideAddEmailsForm && /*#__PURE__*/jsx(AddEmails, {
+        className: "space-y-4 pt-2",
+        children: [isNotEmpty(inviteButtonProps) && /*#__PURE__*/jsx("div", {
+          className: "flex w-full justify-end",
+          children: /*#__PURE__*/jsx(Button$1, _objectSpread$4({}, inviteButtonProps))
+        }), !hideAddEmailsForm && /*#__PURE__*/jsx(AddEmails, {
           configurationId: configurationId,
           ownerId: ownerId,
           ownerType: ownerType
@@ -433,8 +440,8 @@ var configurationsApi = {
   update: update
 };
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ACCESS_CONTROL_CONFIGURATION = QUERY_KEYS.ACCESS_CONTROL_CONFIGURATION,
   ACCESS_CONTROL_CONFIGURATION_INVITATIONS = QUERY_KEYS.ACCESS_CONTROL_CONFIGURATION_INVITATIONS;
 var useShowConfiguration = function useShowConfiguration(_ref) {
@@ -461,7 +468,7 @@ var useUpdateConfiguration = function useUpdateConfiguration(_ref2, options) {
       ownerType: ownerType,
       payload: payload
     });
-  }, _objectSpread$2({
+  }, _objectSpread$3({
     keysToInvalidate: [[ACCESS_CONTROL_CONFIGURATION, ownerType, ownerId], [ACCESS_CONTROL_CONFIGURATION_INVITATIONS, ownerType, ownerId]]
   }, options));
 };
@@ -473,27 +480,6 @@ var AUTH = {
   SESSION: "session",
   INVITED: "invited"
 };
-var AUTH_OPTIONS = [{
-  label: t("neetoAccessControl.auth.no"),
-  value: AUTH.NO,
-  "data-cy": "access-control-public-access-radio-input"
-}, {
-  label: t("neetoAccessControl.auth.basic"),
-  value: AUTH.BASIC,
-  "data-cy": "access-control-password-protected-radio-input"
-}, {
-  label: t("neetoAccessControl.auth.invited"),
-  value: AUTH.INVITED,
-  "data-cy": "access-control-only-invited-people-radio-input"
-}, {
-  label: t("neetoAccessControl.auth.email"),
-  value: AUTH.EMAIL,
-  "data-cy": "access-control-secure-by-email-patterns-radio-input"
-}, {
-  label: t("neetoAccessControl.auth.session"),
-  value: AUTH.SESSION,
-  "data-cy": "access-control-logged-in-members-only-radio-input"
-}];
 var CONFIGURATION_VALIDATION_SCHEMA = yup.object({
   auth: yup.string().required(t("neetoAccessControl.inputs.validation.authRequired")),
   password: yup.string().nullable().when("auth", {
@@ -511,6 +497,8 @@ var DEFAULT_CONFIGURATION_VALUES = {
   allowedKeywords: [""]
 };
 
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var buildConfigurationInitialValues = function buildConfigurationInitialValues(configuration) {
   if (configuration.auth === AUTH.NO) {
     return DEFAULT_CONFIGURATION_VALUES;
@@ -558,6 +546,46 @@ var renderLabelWithViewInvitation = function renderLabelWithViewInvitation(_ref2
     }
   });
 };
+var getAuthOptions = function getAuthOptions(_ref3) {
+  var translationContext = _ref3.translationContext,
+    transProps = _ref3.transProps;
+  return [{
+    label: /*#__PURE__*/jsx(Trans, _objectSpread$2({
+      context: translationContext,
+      i18nKey: "neetoAccessControl.auth.no"
+    }, transProps[AUTH.NO])),
+    value: AUTH.NO,
+    "data-cy": "access-control-public-access-radio-input"
+  }, {
+    label: /*#__PURE__*/jsx(Trans, _objectSpread$2({
+      context: translationContext,
+      i18nKey: "neetoAccessControl.auth.basic"
+    }, transProps[AUTH.BASIC])),
+    value: AUTH.BASIC,
+    "data-cy": "access-control-password-protected-radio-input"
+  }, {
+    label: /*#__PURE__*/jsx(Trans, _objectSpread$2({
+      context: translationContext,
+      i18nKey: "neetoAccessControl.auth.invited"
+    }, transProps[AUTH.INVITED])),
+    value: AUTH.INVITED,
+    "data-cy": "access-control-only-invited-people-radio-input"
+  }, {
+    label: /*#__PURE__*/jsx(Trans, _objectSpread$2({
+      context: translationContext,
+      i18nKey: "neetoAccessControl.auth.email"
+    }, transProps[AUTH.EMAIL])),
+    value: AUTH.EMAIL,
+    "data-cy": "access-control-secure-by-email-patterns-radio-input"
+  }, {
+    label: /*#__PURE__*/jsx(Trans, _objectSpread$2({
+      context: translationContext,
+      i18nKey: "neetoAccessControl.auth.session"
+    }, transProps[AUTH.SESSION])),
+    value: AUTH.SESSION,
+    "data-cy": "access-control-logged-in-members-only-radio-input"
+  }];
+};
 
 var AllowedKeywords = withT(function (_ref) {
   var t = _ref.t,
@@ -650,11 +678,20 @@ var Configuration = function Configuration(_ref) {
     hideAddEmailsFromInvitationPane = _ref$hideAddEmailsFro === void 0 ? false : _ref$hideAddEmailsFro,
     _ref$onDestroyInvitat = _ref.onDestroyInvitationsSuccess,
     onDestroyInvitationsSuccess = _ref$onDestroyInvitat === void 0 ? noop : _ref$onDestroyInvitat,
-    children = _ref.children;
+    _ref$inviteButtonProp = _ref.inviteButtonProps,
+    inviteButtonProps = _ref$inviteButtonProp === void 0 ? {} : _ref$inviteButtonProp,
+    _ref$additionalFields = _ref.additionalFieldsInitialValues,
+    additionalFieldsInitialValues = _ref$additionalFields === void 0 ? {} : _ref$additionalFields,
+    children = _ref.children,
+    fieldsWrapper = _ref.fieldsWrapper,
+    translationContext = _ref.translationContext,
+    _ref$transProps = _ref.transProps,
+    transProps = _ref$transProps === void 0 ? {} : _ref$transProps;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    showInviationsPane = _useState2[0],
-    setShowInviationsPane = _useState2[1];
+    showInvitationsPane = _useState2[0],
+    setShowInvitationsPane = _useState2[1];
+  var FieldsWrapper = fieldsWrapper || Fragment$1;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useShowConfiguration = useShowConfiguration({
@@ -665,7 +702,7 @@ var Configuration = function Configuration(_ref) {
     configuration = _useShowConfiguration2 === void 0 ? {} : _useShowConfiguration2,
     isLoading = _useShowConfiguration.isLoading,
     isFetching = _useShowConfiguration.isFetching;
-  var configurationInitialValues = buildConfigurationInitialValues(configuration);
+  var configurationInitialValues = mergeLeft(buildConfigurationInitialValues(configuration), additionalFieldsInitialValues);
   var _useUpdateConfigurati = useUpdateConfiguration({
       ownerId: ownerId,
       ownerType: ownerType
@@ -683,7 +720,7 @@ var Configuration = function Configuration(_ref) {
     updateConfiguration = _useUpdateConfigurati.mutate;
   var handleSubmit = function handleSubmit(values, _ref2) {
     var setSubmitting = _ref2.setSubmitting;
-    var payload = buildPayload(values);
+    var payload = mergeLeft(buildPayload(values), pick(keys(additionalFieldsInitialValues), values));
     updateConfiguration(payload, {
       onSettled: function onSettled() {
         return setSubmitting(false);
@@ -691,7 +728,7 @@ var Configuration = function Configuration(_ref) {
     });
   };
   var handleShowInvitations = onConfigurationChangedToInviteOnly === noop ? function () {
-    return setShowInviationsPane(true);
+    return setShowInvitationsPane(true);
   } : onConfigurationChangedToInviteOnly;
   return /*#__PURE__*/jsxs(Container, {
     children: [/*#__PURE__*/jsx(Header, {
@@ -713,44 +750,46 @@ var Configuration = function Configuration(_ref) {
         children: function children(_ref3) {
           var values = _ref3.values;
           return /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Label, {
-              className: "neeto-ui-text-base",
-              children: t("neetoAccessControl.inputs.labels.visibility")
-            }), /*#__PURE__*/jsx(Radio, {
-              stacked: true,
-              name: "auth",
-              children: AUTH_OPTIONS.map(function (props) {
-                return /*#__PURE__*/createElement(Radio.Item, _objectSpread(_objectSpread({}, props), {}, {
-                  key: props.value,
-                  className: classNames({
-                    "items-start": (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === props.value && (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === AUTH.INVITED
-                  }),
-                  label: (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === props.value && (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === AUTH.INVITED ? renderLabelWithViewInvitation({
-                    onViewInvites: function onViewInvites() {
-                      return setShowInviationsPane(true);
-                    }
-                  }) : props.label,
-                  labelProps: {
+            children: [/*#__PURE__*/jsxs(FieldsWrapper, {
+              children: [/*#__PURE__*/jsx(Radio, {
+                stacked: true,
+                name: "auth",
+                children: getAuthOptions({
+                  translationContext: translationContext,
+                  transProps: transProps
+                }).map(function (props) {
+                  return /*#__PURE__*/createElement(Radio.Item, _objectSpread(_objectSpread({}, props), {}, {
+                    key: props.value,
                     className: classNames({
-                      "flex flex-col items-start justify-start": (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === props.value && (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === AUTH.INVITED
-                    })
-                  }
-                }));
-              })
-            }), values.auth === AUTH.BASIC && /*#__PURE__*/jsx("div", {
-              className: "space-y-4 pb-2",
-              children: /*#__PURE__*/jsx(Input, {
-                autoFocus: true,
-                required: true,
-                unlimitedChars: true,
-                className: "w-7/12",
-                label: t("neetoAccessControl.inputs.labels.password"),
-                name: "password",
-                placeholder: t("neetoAccessControl.inputs.placeholders.enterPassword")
-              })
-            }), values.auth === AUTH.EMAIL && /*#__PURE__*/jsx(AllowedKeywords, {
-              label: t("neetoAccessControl.inputs.labels.keywords"),
-              name: "allowedKeywords"
+                      "items-start": (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === props.value && (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === AUTH.INVITED
+                    }),
+                    label: (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === props.value && (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === AUTH.INVITED ? renderLabelWithViewInvitation({
+                      onViewInvites: function onViewInvites() {
+                        return setShowInvitationsPane(true);
+                      }
+                    }) : props.label,
+                    labelProps: {
+                      className: classNames({
+                        "flex flex-col items-start justify-start": (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === props.value && (configuration === null || configuration === void 0 ? void 0 : configuration.auth) === AUTH.INVITED
+                      })
+                    }
+                  }));
+                })
+              }), values.auth === AUTH.BASIC && /*#__PURE__*/jsx("div", {
+                className: "space-y-4 pb-2",
+                children: /*#__PURE__*/jsx(Input, {
+                  autoFocus: true,
+                  required: true,
+                  unlimitedChars: true,
+                  className: "w-7/12",
+                  label: t("neetoAccessControl.inputs.labels.password"),
+                  name: "password",
+                  placeholder: t("neetoAccessControl.inputs.placeholders.enterPassword")
+                })
+              }), values.auth === AUTH.EMAIL && /*#__PURE__*/jsx(AllowedKeywords, {
+                label: t("neetoAccessControl.inputs.labels.keywords"),
+                name: "allowedKeywords"
+              })]
             }), /*#__PURE__*/jsx(ActionBlock, {
               cancelButtonProps: {
                 onClick: handleCancel
@@ -762,15 +801,16 @@ var Configuration = function Configuration(_ref) {
           });
         }
       }), /*#__PURE__*/jsx(Invitations$1, {
+        inviteButtonProps: inviteButtonProps,
         onDestroyInvitationsSuccess: onDestroyInvitationsSuccess,
         ownerId: ownerId,
         ownerType: ownerType,
         configurationId: configuration.id,
         extraColumnsData: invitationsTableExtraColumnsData,
         hideAddEmailsForm: hideAddEmailsFromInvitationPane,
-        isOpen: showInviationsPane && !isFetching,
+        isOpen: showInvitationsPane && !isFetching,
         onClose: function onClose() {
-          return setShowInviationsPane(false);
+          return setShowInvitationsPane(false);
         }
       }), children]
     })]