@bigbinary/neeto-access-control-frontend 1.2.0 → 1.2.2

package/README.md

@@ -91,7 +91,10 @@ The engine is used to manage access control across neeto products.
     end
   ```
 - 7.2. invitations_controller_override.rb (Optional)
-  - If host app doesn't have an override method for the controller, then `neeto_access_control_configuration_id` parameter must be included in the request params.
+  - Methods
+    - `access_control_configuration`
+    - `after_invitations_created`
+  > If host app doesn't have an override method for the controller, then `neeto_access_control_configuration_id` parameter must be included in the request params.
 
   ```ruby
     NeetoAccessControlEngine::Api::V1::Configurations::InvitationsController.class_eval do
@@ -100,8 +103,17 @@ The engine is used to manage access control across neeto products.
         def access_control_configuration
           @_access_control_configuration ||= @organization.access_control_configuration
         end
+
+        # after_action callback, called after invitations are created.
+        # Use to send invitation emails or perform any post-invitation tasks.
+        def after_invitations_created
+          # @invited_emails is loaded in engine
+          invited_emails = @invited_emails.present? ? @invited_emails.rows.flatten : []
+          EmailInvitationsJob.perform_async(invited_emails, current_organization.id, current_user.id)
+        end
     end
   ```
+
 - 7.3. guest_sessions_controller_override.rb
 
   ```ruby

package/app/javascript/src/translations/en.json

@@ -24,12 +24,13 @@
     },
     "buttons": {
       "saveChangesAndInvite": "Save changes and invite via email",
-      "addEmails": "Add emails",
+      "invite": "Invite",
       "viewInvites": "View invites"
     },
     "addEmails": {
       "description": "Seperate multiple emails with comma.",
-      "placeholder": "Enter email(s)"
+      "placeholder": "Please enter the email addresses",
+      "helpText": "Press space, comma, tab or enter key to add multiple email addresses."
     },
     "auth": {
       "no": "Public, anyone can access",
@@ -56,7 +57,8 @@
         "passwordRequired": "Password is required",
         "authRequired": "Authentication type is required",
         "passwordMinLength": "Password must be at least ${min} characters",
-        "keywordRequired": "Keyword is required"
+        "keywordRequired": "Keyword is required",
+        "emailAddress": "Email address is invalid"
       }
     }
   }

package/dist/index.cjs.js

@@ -19,7 +19,7 @@ var Delete = require('@bigbinary/neeto-icons/Delete');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var Alert = require('@bigbinary/neetoui/Alert');
-var Button = require('@bigbinary/neetoui/Button');
+var Button$1 = require('@bigbinary/neetoui/Button');
 var NoData = require('@bigbinary/neetoui/NoData');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Table = require('@bigbinary/neetoui/Table');
@@ -28,14 +28,14 @@ var ramda = require('ramda');
 var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var axios = require('axios');
-var Modal = require('@bigbinary/neetoui/Modal');
 var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
-var jsxRuntime = require('react/jsx-runtime');
+var Button = require('@bigbinary/neetoui/formik/Button');
 var i18next = require('i18next');
+var yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var formik = require('formik');
-var yup = require('yup');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 
@@ -72,17 +72,17 @@ var Delete__default = /*#__PURE__*/_interopDefaultLegacy(Delete);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
-var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Button__default$1 = /*#__PURE__*/_interopDefaultLegacy(Button$1);
 var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
 var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
 var MultiEmailInput__default = /*#__PURE__*/_interopDefaultLegacy(MultiEmailInput);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
-var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 
@@ -295,11 +295,14 @@ var TRUNCATE_LENGTH = 45;
 var ADD_EMAILS_FORM_INIT_VALUES = {
   emails: []
 };
+var ADD_EMAILS_FORM_VALDATION_SCHEMA = yup__namespace.object().shape({
+  emails: yup__namespace.array().test("are-all-emails-valid", i18next.t("neetoAccessControl.inputs.validation.emailAddress"), function (emails) {
+    return emails.every(ramda.prop("valid"));
+  })
+});
 
 var AddEmails = function AddEmails(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    configurationId = _ref.configurationId,
+  var configurationId = _ref.configurationId,
     ownerType = _ref.ownerType,
     ownerId = _ref.ownerId;
   var _useTranslation = reactI18next.useTranslation(),
@@ -313,50 +316,41 @@ var AddEmails = function AddEmails(_ref) {
     addEmails = _useBulkCreateInvitat.mutate;
   var handleAddEmails = function handleAddEmails(_ref2, _ref3) {
     var emails = _ref2.emails;
-    var setSubmitting = _ref3.setSubmitting;
+    var setSubmitting = _ref3.setSubmitting,
+      resetForm = _ref3.resetForm;
     var payload = {
       emails: ramda.pluck("value", emails)
     };
     addEmails(payload, {
       onSuccess: function onSuccess() {
-        onClose();
+        setSubmitting(false);
+        resetForm();
       },
       onError: function onError() {
         return setSubmitting(false);
       }
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Modal__default["default"], {
-    isOpen: isOpen,
-    onClose: onClose,
-    initialFocusRef: emailsInputRef,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Header, {
-      description: t("neetoAccessControl.addEmails.description"),
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-        style: "h2",
-        children: t("neetoAccessControl.buttons.addEmails")
+  return /*#__PURE__*/jsxRuntime.jsxs(Form__default["default"], {
+    className: "mb-5 flex w-full space-x-5",
+    formikProps: {
+      initialValues: ADD_EMAILS_FORM_INIT_VALUES,
+      onSubmit: handleAddEmails,
+      validationSchema: ADD_EMAILS_FORM_VALDATION_SCHEMA
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-grow",
+      children: /*#__PURE__*/jsxRuntime.jsx(MultiEmailInput__default["default"], {
+        helpText: t("neetoAccessControl.addEmails.helpText"),
+        label: t("neetoAccessControl.titles.emails"),
+        name: "emails",
+        placeholder: t("neetoAccessControl.addEmails.placeholder"),
+        ref: emailsInputRef
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(Form__default["default"], {
-      formikProps: {
-        initialValues: ADD_EMAILS_FORM_INIT_VALUES,
-        onSubmit: handleAddEmails
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Body, {
-        children: /*#__PURE__*/jsxRuntime.jsx(MultiEmailInput__default["default"], {
-          name: "emails",
-          placeholder: t("neetoAccessControl.addEmails.placeholder"),
-          ref: emailsInputRef
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Footer, {
-        children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
-          cancelButtonProps: {
-            onClick: onClose
-          },
-          submitButtonProps: {
-            label: t("neetoAccessControl.buttons.addEmails")
-          }
-        })
-      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      className: "flex-shrink-0 self-center whitespace-nowrap",
+      label: t("neetoAccessControl.buttons.invite"),
+      type: "submit"
     })]
   });
 };
@@ -419,14 +413,10 @@ var Invitations = function Invitations(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showDeleteAlert = _useState4[0],
     setShowDeleteAlert = _useState4[1];
-  var _useState5 = react.useState(false),
+  var _useState5 = react.useState(constants.DEFAULT_PAGE_INDEX),
     _useState6 = _slicedToArray(_useState5, 2),
-    showAddEmails = _useState6[0],
-    setShowAddEmails = _useState6[1];
-  var _useState7 = react.useState(constants.DEFAULT_PAGE_INDEX),
-    _useState8 = _slicedToArray(_useState7, 2),
-    page = _useState8[0],
-    setPage = _useState8[1];
+    page = _useState6[0],
+    setPage = _useState6[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useListInvitations = useListInvitations({
@@ -453,9 +443,6 @@ var Invitations = function Invitations(_ref) {
     }),
     deleteEmailInvites = _useBulkDestroyInvita.mutate,
     isPending = _useBulkDestroyInvita.isPending;
-  var handleAddEmails = function handleAddEmails() {
-    setShowAddEmails(true);
-  };
   var handleOnClose = function handleOnClose() {
     onClose();
     setSelectedEmails([]);
@@ -486,25 +473,30 @@ var Invitations = function Invitations(_ref) {
           weight: "semibold",
           children: t("neetoAccessControl.titles.invitations")
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+      }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Body, {
         className: "pt-2",
-        children: neetoCist.isNotEmpty(invitations) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(AddEmails, {
+          configurationId: configurationId,
+          ownerId: ownerId,
+          ownerType: ownerType
+        }), neetoCist.isNotEmpty(invitations) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
             leftActionBlock: ramda.isEmpty(selectedEmails) ? /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              className: "min-h-8",
               component: "h4",
               style: "h4",
               children: t("neetoAccessControl.titles.emailsWithCount", {
                 count: totalCount
               })
             }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-4",
+              className: "flex items-center gap-x-4",
               children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
                 style: "h4",
                 children: t("neetoAccessControl.titles.selectedEmailsWithCount", {
                   count: selectedEmails.length,
                   totalCount: totalCount
                 })
-              }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              }), /*#__PURE__*/jsxRuntime.jsx(Button__default$1["default"], {
                 icon: Delete__default["default"],
                 style: "secondary",
                 tooltipProps: {
@@ -514,10 +506,6 @@ var Invitations = function Invitations(_ref) {
                   return setShowDeleteAlert(true);
                 }
               })]
-            }),
-            rightActionBlock: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-              label: t("neetoAccessControl.buttons.addEmails"),
-              onClick: handleAddEmails
             })
           }), /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
             hasPagination: totalCount > constants.DEFAULT_PAGE_SIZE,
@@ -541,22 +529,10 @@ var Invitations = function Invitations(_ref) {
         }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex h-full w-full justify-center",
           children: [!isLoading && /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
-            title: t("neetoAccessControl.labels.noInvitations"),
-            primaryButtonProps: {
-              label: t("neetoAccessControl.buttons.addEmails"),
-              onClick: handleAddEmails
-            }
+            title: t("neetoAccessControl.labels.noInvitations")
           }), isLoading && /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})]
-        })
+        })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(AddEmails, {
-      configurationId: configurationId,
-      ownerId: ownerId,
-      ownerType: ownerType,
-      isOpen: showAddEmails,
-      onClose: function onClose() {
-        return setShowAddEmails(false);
-      }
     }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
       isOpen: showDeleteAlert,
       isSubmitting: isPending,
@@ -721,7 +697,7 @@ var renderLabelWithViewInvitation = function renderLabelWithViewInvitation(_ref2
   return /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
     i18nKey: "neetoAccessControl.auth.invitedWithViewButton",
     components: {
-      button: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      button: /*#__PURE__*/jsxRuntime.jsx(Button__default$1["default"], {
         className: "mt-1",
         size: "small",
         style: "link",
@@ -752,7 +728,7 @@ var AllowedKeywords = reactUtils.withT(function (_ref) {
               className: "w-full",
               name: "".concat(name, ".").concat(index),
               placeholder: t("neetoAccessControl.inputs.placeholders.enterKeyword"),
-              suffix: showDeleteButton && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              suffix: showDeleteButton && /*#__PURE__*/jsxRuntime.jsx(Button__default$1["default"], {
                 "data-cy": "allowed-keyword-delete-button",
                 icon: Delete__default["default"],
                 size: "small",
@@ -766,7 +742,7 @@ var AllowedKeywords = reactUtils.withT(function (_ref) {
                 }
               })
             }, index);
-          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default$1["default"], {
             className: "pt-2",
             "data-cy": "add-allowed-keyword-button",
             label: t("neetoAccessControl.actions.addKeyword"),