@bigbinary/neeto-team-members-frontend 3.2.0-beta2 → 3.2.0-beta4

package/dist/index.js

@@ -1,12 +1,12 @@
 import { globalProps, taxonomies } from '@bigbinary/neeto-commons-frontend/initializers';
 import require$$0, { useState, createElement, useEffect, useMemo, useRef, Fragment as Fragment$1, memo, useCallback } from 'react';
 import { removeBy, nullSafe, noop, isPresent, findById, isNotEmpty, findBy, _findBy, replaceById, keysToSnakeCase, notEquals, toLabelAndValue, filterBy, slugify } from '@bigbinary/neeto-cist';
-import { useMutationWithInvalidation as useMutationWithInvalidation$1, withT, useQueryParams, withTitle, useFuncDebounce, useDebounce, useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useMutationWithInvalidation, withT, useQueryParams, withTitle, useFuncDebounce, useDebounce, useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import Button from '@bigbinary/neetoui/Button';
 import { useTranslation, Trans } from 'react-i18next';
-import { useQuery, useQueryClient, useMutation, QueryClient, QueryCache, QueryClientProvider, keepPreviousData } from '@tanstack/react-query';
+import { useQuery, QueryClient, QueryCache, QueryClientProvider, keepPreviousData, useMutation } from '@tanstack/react-query';
 import { prop, pluck, mergeLeft, includes, keys, isEmpty, replace as replace$1, is, append, equals, concat, groupBy, not, map, identical, modify, __, filter as filter$1, identity, clamp, curry, isNil, toLower, assoc, trim, isNotNil, pick, move, head, reverse } from 'ramda';
 import axios from 'axios';
 import i18next, { t as t$1 } from 'i18next';
@@ -41,7 +41,6 @@ import Toastr from '@bigbinary/neetoui/Toastr';
 import withImmutableActions from '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import { create as create$3 } from 'zustand';
 import { shallow } from 'zustand/shallow';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import classnames from 'classnames';
 import Input$1 from '@bigbinary/neetoui/Input';
@@ -262,19 +261,19 @@ var useFetchGroups = function useFetchGroups(_ref) {
 var useCreateGroup = function useCreateGroup() {
   var _config$form$otherKey, _config$form;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useMutationWithInvalidation$1(function (payload) {
+  return useMutationWithInvalidation(function (payload) {
     return groupsApi.create(payload);
   }, {
-    keysToInvalidate: [QUERY_KEYS.GROUPS].concat(_toConsumableArray((_config$form$otherKey = config === null || config === void 0 || (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.otherKeysToInvalidate) !== null && _config$form$otherKey !== void 0 ? _config$form$otherKey : []))
+    keysToInvalidate: [[QUERY_KEYS.GROUPS]].concat(_toConsumableArray((_config$form$otherKey = config === null || config === void 0 || (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.otherKeysToInvalidate) !== null && _config$form$otherKey !== void 0 ? _config$form$otherKey : []))
   });
 };
 var useDeleteGroup = function useDeleteGroup() {
   var _config$form$otherKey2, _config$form2;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useMutationWithInvalidation$1(function (id) {
+  return useMutationWithInvalidation(function (id) {
     return groupsApi.destroy(id);
   }, {
-    keysToInvalidate: [QUERY_KEYS.GROUPS].concat(_toConsumableArray((_config$form$otherKey2 = config === null || config === void 0 || (_config$form2 = config.form) === null || _config$form2 === void 0 ? void 0 : _config$form2.otherKeysToInvalidate) !== null && _config$form$otherKey2 !== void 0 ? _config$form$otherKey2 : []))
+    keysToInvalidate: [[QUERY_KEYS.GROUPS]].concat(_toConsumableArray((_config$form$otherKey2 = config === null || config === void 0 || (_config$form2 = config.form) === null || _config$form2 === void 0 ? void 0 : _config$form2.otherKeysToInvalidate) !== null && _config$form$otherKey2 !== void 0 ? _config$form$otherKey2 : []))
   });
 };
 var useFetchGroup = function useFetchGroup(id) {
@@ -290,12 +289,12 @@ var useFetchGroup = function useFetchGroup(id) {
 var useUpdateGroup = function useUpdateGroup() {
   var _config$form$otherKey3, _config$form3;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useMutationWithInvalidation$1(function (_ref2) {
+  return useMutationWithInvalidation(function (_ref2) {
     var id = _ref2.id,
       payload = _ref2.payload;
     return groupsApi.update(id, payload);
   }, {
-    keysToInvalidate: [QUERY_KEYS.GROUPS].concat(_toConsumableArray((_config$form$otherKey3 = config === null || config === void 0 || (_config$form3 = config.form) === null || _config$form3 === void 0 ? void 0 : _config$form3.otherKeysToInvalidate) !== null && _config$form$otherKey3 !== void 0 ? _config$form$otherKey3 : []))
+    keysToInvalidate: [[QUERY_KEYS.GROUPS]].concat(_toConsumableArray((_config$form$otherKey3 = config === null || config === void 0 || (_config$form3 = config.form) === null || _config$form3 === void 0 ? void 0 : _config$form3.otherKeysToInvalidate) !== null && _config$form$otherKey3 !== void 0 ? _config$form$otherKey3 : []))
   });
 };
 
@@ -1279,8 +1278,8 @@ var Edit = function Edit(_ref) {
   });
 };
 
-function ownKeys$l(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$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var List = function List(_ref) {
   var _config$table$deleteA, _config$table, _config$table$deleteA2;
   var config = _ref.config,
@@ -1370,7 +1369,7 @@ var List = function List(_ref) {
       })]
     }) : /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full flex-grow items-center justify-center",
-      children: /*#__PURE__*/jsx(NoData, _objectSpread$l({
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$k({
         title: t("neetoTeamMembers.helpers.emptyTable", {
           entity: taxonomies.group.plural
         })
@@ -1867,70 +1866,6 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var _excluded$4 = ["keysToInvalidate"],
-  _excluded2$3 = ["onSuccess"];
-function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useMutationWithInvalidation = function useMutationWithInvalidation(mutationFn, _ref) {
-  var keysToInvalidate = _ref.keysToInvalidate,
-    options = _objectWithoutProperties(_ref, _excluded$4);
-  var queryClient = useQueryClient();
-  var _onSuccess = options.onSuccess,
-    otherOptions = _objectWithoutProperties(options, _excluded2$3);
-  return useMutation(_objectSpread$k({
-    mutationFn: mutationFn,
-    onSuccess: function onSuccess(data, variables, context) {
-      keysToInvalidate.forEach(function (key) {
-        var result = key;
-        if (typeof key === "function") {
-          result = key(data, variables, context);
-        }
-        if (_typeof$1(result) === "object") {
-          queryClient.invalidateQueries(result);
-        }
-        if (typeof result === "string") {
-          queryClient.invalidateQueries({
-            queryKey: [key]
-          });
-        }
-        queryClient.invalidateQueries({
-          queryKey: key
-        });
-      });
-      _onSuccess === null || _onSuccess === void 0 || _onSuccess(data, variables, context);
-    }
-  }, otherOptions));
-};
-
 var fetchCountries = function fetchCountries() {
   return axios.get("".concat(BASE_URL, "/profile/countries"));
 };
@@ -2422,20 +2357,16 @@ var ChangeProfile = function ChangeProfile(_ref) {
             })]
           })]
         }), /*#__PURE__*/jsx(Pane.Footer, {
-          className: "flex items-center space-x-2",
           children: /*#__PURE__*/jsx(ActionBlock, {
+            isSubmitting: isUpdatingProfile || isUploading,
             cancelButtonProps: {
               "data-test-id": "ntm-profile-cancel-button",
               "data-cy": "ntm-profile-cancel-button",
-              disabled: false,
-              style: "text",
-              className: "ml-2",
               onClick: onClose
             },
             submitButtonProps: {
               "data-cy": "ntm-profile-submit-button",
-              "data-test-id": "ntm-profile-save-changes-button",
-              loading: isUpdatingProfile || isUploading
+              "data-test-id": "ntm-profile-save-changes-button"
             }
           })
         })]
@@ -3890,12 +3821,9 @@ function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var withReactQuery = function withReactQuery(Component) {
   var QueryWrapper = function QueryWrapper(props) {
-    return /*#__PURE__*/jsxs(QueryClientProvider, {
+    return /*#__PURE__*/jsx(QueryClientProvider, {
       client: queryClient,
-      children: [/*#__PURE__*/jsx(Component, _objectSpread$g({}, props)), /*#__PURE__*/jsx(ReactQueryDevtools, {
-        initialIsOpen: false,
-        position: "left"
-      })]
+      children: /*#__PURE__*/jsx(Component, _objectSpread$g({}, props))
     });
   };
   return QueryWrapper;
@@ -3921,6 +3849,35 @@ var useFetchPermissions = function useFetchPermissions() {
   }, options));
 };
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
 var fetch$2 = function fetch() {
   return axios.get("".concat(BASE_URL, "/global_roles"));
 };
@@ -3980,7 +3937,7 @@ var useCreateRole = function useCreateRole(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$3);
   return useMutationWithInvalidation(organizationRolesApi.create, _objectSpread$e({
-    keysToInvalidate: [QUERY_KEYS.TEAMS_DEPENDENCIES, QUERY_KEYS.ROLES],
+    keysToInvalidate: [[QUERY_KEYS.TEAMS_DEPENDENCIES], [QUERY_KEYS.ROLES]],
     onSuccess: function onSuccess() {
       _onSuccess === null || _onSuccess === void 0 || _onSuccess();
     }
@@ -3994,7 +3951,7 @@ var useUpdateRole = function useUpdateRole(_ref2) {
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
   }, _objectSpread$e({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES, QUERY_KEYS.ROLES],
+    keysToInvalidate: [[QUERY_KEYS.TEAMS], [QUERY_KEYS.TEAMS_DEPENDENCIES], [QUERY_KEYS.ROLES]],
     onSuccess: function onSuccess() {
       _onSuccess2 === null || _onSuccess2 === void 0 || _onSuccess2();
     }
@@ -4009,7 +3966,7 @@ var useDestroyRole = function useDestroyRole(_ref4) {
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
   }, _objectSpread$e({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES, QUERY_KEYS.ROLES],
+    keysToInvalidate: [[QUERY_KEYS.TEAMS], [QUERY_KEYS.TEAMS_DEPENDENCIES], [QUERY_KEYS.ROLES]],
     onSuccess: function onSuccess() {
       _onSuccess3 === null || _onSuccess3 === void 0 || _onSuccess3();
     }
@@ -4019,7 +3976,7 @@ var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
   return useMutationWithInvalidation(organizationRolesApi.bulkUpdate, _objectSpread$e({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES, QUERY_KEYS.ROLES],
+    keysToInvalidate: [[QUERY_KEYS.TEAMS], [QUERY_KEYS.TEAMS_DEPENDENCIES], [QUERY_KEYS.ROLES]],
     onSuccess: function onSuccess() {
       _onSuccess4 === null || _onSuccess4 === void 0 || _onSuccess4();
     }
@@ -4490,20 +4447,17 @@ var ManageRoles = function ManageRoles(_ref) {
               })]
             })
           }), /*#__PURE__*/jsx(Pane.Footer, {
-            children: /*#__PURE__*/jsxs("div", {
+            children: /*#__PURE__*/jsx(ActionBlock, {
+              isSubmitting: isSubmitting,
               className: "ntm-roles-pane__footer",
-              children: [/*#__PURE__*/jsx(Button, {
-                "data-cy": "ntm-add-role-submit-button",
-                disabled: !dirty || isSubmitting || isDisabled,
-                label: t("neetoTeamMembers.buttons.saveChanges"),
-                loading: isSubmitting,
-                type: "submit"
-              }), /*#__PURE__*/jsx(Button, {
+              cancelButtonProps: {
                 "data-cy": "ntm-add-role-cancel-button",
-                label: t("neetoTeamMembers.buttons.cancel"),
-                style: "text",
                 onClick: onClose
-              })]
+              },
+              submitButtonProps: {
+                "data-cy": "ntm-add-role-submit-button",
+                disabled: isSubmitting || isDisabled || !dirty
+              }
             })
           })]
         });
@@ -5104,7 +5058,6 @@ var Roles = function Roles(_ref) {
     isNewRolePaneOpen = _useState4[0],
     setIsNewRolePaneOpen = _useState4[1];
   var _useFetchRoles = useFetchRoles({
-      onSuccess: setModifiedRoles,
       enabled: isViewPermissionGranted
     }),
     _useFetchRoles$data = _useFetchRoles.data,
@@ -5140,6 +5093,9 @@ var Roles = function Roles(_ref) {
   var handleReset = function handleReset() {
     return setModifiedRoles(roles);
   };
+  useEffect(function () {
+    setModifiedRoles(roles);
+  }, [roles]);
   if (isRolesLoading || isPermissionsLoading) {
     return /*#__PURE__*/jsx("div", {
       className: "ntm-members-page-loader",
@@ -7311,7 +7267,7 @@ var useUpdateMember = function useUpdateMember(_ref) {
       payload = _ref2.payload;
     return teamsApi.update(id, payload);
   }, _objectSpread$a({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
+    keysToInvalidate: [[QUERY_KEYS.TEAMS], [QUERY_KEYS.TEAMS_DEPENDENCIES]],
     onSuccess: function onSuccess() {
       _onSuccess === null || _onSuccess === void 0 || _onSuccess();
     }
@@ -7321,7 +7277,7 @@ var useBulkUpdateMembers = function useBulkUpdateMembers(_ref3) {
   var _onSuccess2 = _ref3.onSuccess,
     options = _objectWithoutProperties(_ref3, _excluded2$1);
   return useMutationWithInvalidation(teamsApi.bulkUpdate, _objectSpread$a({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
+    keysToInvalidate: [[QUERY_KEYS.TEAMS], [QUERY_KEYS.TEAMS_DEPENDENCIES]],
     onSuccess: function onSuccess() {
       _onSuccess2 === null || _onSuccess2 === void 0 || _onSuccess2();
     }
@@ -9162,8 +9118,7 @@ var ManageMember = function ManageMember(_ref) {
       },
       children: function children(_ref5) {
         var _manageMemberComponen2, _manageMemberComponen3;
-        var values = _ref5.values,
-          dirty = _ref5.dirty;
+        var values = _ref5.values;
         var emails = values.emails,
           role = values.role;
         formikValues.current = values;
@@ -9182,23 +9137,21 @@ var ManageMember = function ManageMember(_ref) {
                 completedCount: progress === null || progress === void 0 ? void 0 : progress.completedCount
               })
             }), renderFormPage(currentPage, emails, role)]
-          })), /*#__PURE__*/jsxs(Component.Footer, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.footerProps), {}, {
+          })), /*#__PURE__*/jsx(Component.Footer, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.footerProps), {}, {
             className: classnames(["ntm-members-form__footer", (_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className]),
-            children: [/*#__PURE__*/jsx(Button, {
-              loading: isSubmitting || isCreationStatusPollingEnabled,
-              style: "primary",
-              type: "submit",
-              "data-cy": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
-              disabled: !dirty || isSubmitting || isCreationStatusPollingEnabled,
-              label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue")
-            }), /*#__PURE__*/jsx(Button, {
-              "data-cy": "ntm-manage-member-cancel-button",
-              label: t("neetoTeamMembers.buttons.cancel"),
-              style: "text",
-              onClick: function onClick() {
-                return handleClose(false);
+            children: /*#__PURE__*/jsx(ActionBlock, {
+              isSubmitting: isSubmitting || isCreationStatusPollingEnabled,
+              cancelButtonProps: {
+                "data-cy": "ntm-manage-member-cancel-button",
+                onClick: function onClick() {
+                  return handleClose(false);
+                }
+              },
+              submitButtonProps: {
+                "data-cy": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
+                label: isLastPage ? t("neetoTeamMembers.buttons.saveChanges") : t("neetoTeamMembers.buttons.continue")
               }
-            })]
+            })
           }))]
         });
       }