@bigbinary/neeto-team-members-frontend 3.2.0-beta3 → 3.2.1

package/dist/index.cjs.js

@@ -10,8 +10,8 @@ var Container = require('@bigbinary/neeto-molecules/Container');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var Button = require('@bigbinary/neetoui/Button');
 var reactI18next = require('react-i18next');
-var reactQuery = require('@tanstack/react-query');
 var ramda = require('ramda');
+var reactQuery = require('react-query');
 var axios = require('axios');
 var i18next = require('i18next');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
@@ -44,7 +44,7 @@ var Toastr = require('@bigbinary/neetoui/Toastr');
 var withImmutableActions = require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
 var zustand = require('zustand');
 var shallow = require('zustand/shallow');
-var reactQueryDevtools = require('@tanstack/react-query-devtools');
+var devtools = require('react-query/devtools');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var classnames = require('classnames');
 var Input$1 = require('@bigbinary/neetoui/Input');
@@ -313,16 +313,13 @@ var useFetchGroups = function useFetchGroups(_ref) {
     pageSize = _ref.pageSize,
     _ref$searchTerm = _ref.searchTerm,
     searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
-  return reactQuery.useQuery({
-    queryKey: [QUERY_KEYS.GROUPS, searchTerm, page, pageSize],
-    queryFn: function queryFn() {
-      return groupsApi.list({
-        searchTerm: searchTerm,
-        page: page,
-        pageSize: pageSize,
-        loadDetails: true
-      });
-    }
+  return reactQuery.useQuery([QUERY_KEYS.GROUPS, searchTerm, page, pageSize], function () {
+    return groupsApi.list({
+      searchTerm: searchTerm,
+      page: page,
+      pageSize: pageSize,
+      loadDetails: true
+    });
   });
 };
 var useCreateGroup = function useCreateGroup() {
@@ -344,11 +341,9 @@ var useDeleteGroup = function useDeleteGroup() {
   });
 };
 var useFetchGroup = function useFetchGroup(id) {
-  return reactQuery.useQuery({
-    queryKey: [QUERY_KEYS.GROUPS, id],
-    queryFn: function queryFn() {
-      return groupsApi.show(id);
-    },
+  return reactQuery.useQuery([QUERY_KEYS.GROUPS, id], function () {
+    return groupsApi.show(id);
+  }, {
     select: ramda.prop("group"),
     enabled: !!id
   });
@@ -380,10 +375,7 @@ var usersApi = {
 };
 
 var useFetchUsers = function useFetchUsers() {
-  return reactQuery.useQuery({
-    queryKey: [QUERY_KEYS.USERS],
-    queryFn: usersApi.list
-  });
+  return reactQuery.useQuery([QUERY_KEYS.GROUP_MEMBERS], usersApi.list);
 };
 
 var MAXIMUM_NAME_LENGTH = 25;
@@ -548,10 +540,10 @@ var Form = function Form(_ref) {
     isLoading = _useFetchUsers.isLoading;
   var _useCreateGroup = useCreateGroup(config),
     create = _useCreateGroup.mutate,
-    isCreating = _useCreateGroup.isPending;
+    isCreating = _useCreateGroup.isLoading;
   var _useUpdateGroup = useUpdateGroup(config),
     update = _useUpdateGroup.mutate,
-    isUpdating = _useUpdateGroup.isPending;
+    isUpdating = _useUpdateGroup.isLoading;
   var initialValues = isEdit ? group : ramda.mergeLeft(GROUP_FORM_INITIAL_VALUES, (_config$form$initialV = config === null || config === void 0 || (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.initialValues) !== null && _config$form$initialV !== void 0 ? _config$form$initialV : {});
   var validationSchema = GROUP_FORM_VALIDATION_SCHEMA.concat(config === null || config === void 0 || (_config$form2 = config.form) === null || _config$form2 === void 0 ? void 0 : _config$form2.validationSchema);
   var getUserIds = function getUserIds(members) {
@@ -1345,8 +1337,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,
@@ -1369,7 +1361,7 @@ var List = function List(_ref) {
   var totalCount = groups === null || groups === void 0 ? void 0 : groups.length;
   var _useDeleteGroup = useDeleteGroup(config),
     groupDelete = _useDeleteGroup.mutate,
-    isDeleting = _useDeleteGroup.isPending;
+    isDeleting = _useDeleteGroup.isLoading;
   var getGroupDetail = function getGroupDetail(id) {
     return neetoCist.findById(id, groups);
   };
@@ -1436,7 +1428,7 @@ var List = function List(_ref) {
       })]
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full flex-grow items-center justify-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$l({
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$k({
         title: t("neetoTeamMembers.helpers.emptyTable", {
           entity: initializers.taxonomies.group.plural
         })
@@ -1933,70 +1925,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 = reactQuery.useQueryClient();
-  var _onSuccess = options.onSuccess,
-    otherOptions = _objectWithoutProperties(options, _excluded2$3);
-  return reactQuery.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__default["default"].get("".concat(BASE_URL, "/profile/countries"));
 };
@@ -2017,14 +1945,13 @@ var profileApi = {
 function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchProfile = function useFetchProfile(options) {
-  return reactQuery.useQuery(_objectSpread$j({
-    queryKey: [QUERY_KEYS.USER_PROFILE],
-    queryFn: profileApi.fetchUserDetails,
-    staleTime: constants.DEFAULT_STALE_TIME
+  return reactQuery.useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$j({
+    staleTime: constants.DEFAULT_STALE_TIME,
+    refetchOnWindowFocus: true
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
-  return useMutationWithInvalidation(profileApi.updateUser, _objectSpread$j(_objectSpread$j({
+  return reactUtils.useMutationWithInvalidation(profileApi.updateUser, _objectSpread$j(_objectSpread$j({
     keysToInvalidate: [[QUERY_KEYS.USER_PROFILE]]
   }, options), {}, {
     onSuccess: function onSuccess() {
@@ -2053,9 +1980,7 @@ var VALIDATION_ERRORS = {
 function ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchCountries = function useFetchCountries(options) {
-  return reactQuery.useQuery(_objectSpread$i({
-    queryKey: [QUERY_KEYS.COUNTRIES_LIST],
-    queryFn: profileApi.fetchCountries,
+  return reactQuery.useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$i({
     staleTime: constants.DEFAULT_STALE_TIME
   }, options));
 };
@@ -2309,7 +2234,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     handleTimeZoneChange = _useCountries$handleT === void 0 ? neetoCist.noop : _useCountries$handleT;
   var _useUpdateProfileMuta = useUpdateProfileMutation(),
     updateProfile = _useUpdateProfileMuta.mutate,
-    isUpdatingProfile = _useUpdateProfileMuta.isPending;
+    isUpdatingProfile = _useUpdateProfileMuta.isLoading;
   var initialFormValues = {
     firstName: firstName,
     lastName: lastName,
@@ -2488,20 +2413,16 @@ var ChangeProfile = function ChangeProfile(_ref) {
             })]
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
-          className: "flex items-center space-x-2",
           children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+            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"
             }
           })
         })]
@@ -3958,9 +3879,9 @@ var withReactQuery = function withReactQuery(Component) {
   var QueryWrapper = function QueryWrapper(props) {
     return /*#__PURE__*/jsxRuntime.jsxs(reactQuery.QueryClientProvider, {
       client: queryClient,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$g({}, props)), /*#__PURE__*/jsxRuntime.jsx(reactQueryDevtools.ReactQueryDevtools, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$g({}, props)), /*#__PURE__*/jsxRuntime.jsx(devtools.ReactQueryDevtools, {
         initialIsOpen: false,
-        position: "left"
+        position: "bottom-right"
       })]
     });
   };
@@ -3978,15 +3899,42 @@ function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchPermissions = function useFetchPermissions() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(_objectSpread$f({
-    queryKey: [QUERY_KEYS.PERMISSIONS],
-    queryFn: permissionsApi.fetch,
+  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$f({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
     }
   }, 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__default["default"].get("".concat(BASE_URL, "/global_roles"));
 };
@@ -4027,9 +3975,7 @@ function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchRoles = function useFetchRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(_objectSpread$e({
-    queryKey: [QUERY_KEYS.ROLES],
-    queryFn: organizationRolesApi.fetch,
+  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$e({
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
     }
@@ -4037,17 +3983,15 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(_objectSpread$e({
-    queryKey: [QUERY_KEYS.GLOBAL_ROLES],
-    queryFn: globalRolesApi.fetch
-  }, options));
+  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$e({}, options));
 };
 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],
+  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$e({
     onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
       _onSuccess === null || _onSuccess === void 0 || _onSuccess();
     }
   }, options));
@@ -4055,13 +3999,15 @@ var useCreateRole = function useCreateRole(_ref) {
 var useUpdateRole = function useUpdateRole(_ref2) {
   var _onSuccess2 = _ref2.onSuccess,
     options = _objectWithoutProperties(_ref2, _excluded2$2);
-  return useMutationWithInvalidation(function (_ref3) {
+  return reactQuery.useMutation(function (_ref3) {
     var id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
   }, _objectSpread$e({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES, QUERY_KEYS.ROLES],
     onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
       _onSuccess2 === null || _onSuccess2 === void 0 || _onSuccess2();
     }
   }, options));
@@ -4070,13 +4016,15 @@ var useDestroyRole = function useDestroyRole(_ref4) {
   var _ref4$onSuccess = _ref4.onSuccess,
     _onSuccess3 = _ref4$onSuccess === void 0 ? neetoCist.noop : _ref4$onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return useMutationWithInvalidation(function (_ref5) {
+  return reactQuery.useMutation(function (_ref5) {
     var id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
   }, _objectSpread$e({
-    keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES, QUERY_KEYS.ROLES],
     onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
       _onSuccess3 === null || _onSuccess3 === void 0 || _onSuccess3();
     }
   }, options));
@@ -4084,9 +4032,11 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 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],
+  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$e({
     onSuccess: function onSuccess() {
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
       _onSuccess4 === null || _onSuccess4 === void 0 || _onSuccess4();
     }
   }, options));
@@ -4479,12 +4429,12 @@ var ManageRoles = function ManageRoles(_ref) {
       onSuccess: onClose
     }),
     createRole = _useCreateRole.mutate,
-    isCreatingRole = _useCreateRole.isPending;
+    isCreatingRole = _useCreateRole.isLoading;
   var _useUpdateRole = useUpdateRole({
       onSuccess: onClose
     }),
     updateRole = _useUpdateRole.mutate,
-    isUpdatingRole = _useUpdateRole.isPending;
+    isUpdatingRole = _useUpdateRole.isLoading;
   var isEdit = neetoCist.isPresent(selectedRole);
   var isSubmitting = isCreatingRole || isUpdatingRole;
   var handleSubmit = function handleSubmit(formValues) {
@@ -4556,20 +4506,17 @@ var ManageRoles = function ManageRoles(_ref) {
               })]
             })
           }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
-            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+              isSubmitting: isSubmitting,
               className: "ntm-roles-pane__footer",
-              children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-                "data-cy": "ntm-add-role-submit-button",
-                disabled: !dirty || isSubmitting || isDisabled,
-                label: t("neetoTeamMembers.buttons.saveChanges"),
-                loading: isSubmitting,
-                type: "submit"
-              }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              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
+              }
             })
           })]
         });
@@ -4843,7 +4790,7 @@ var Delete = function Delete(_ref) {
       onSuccess: onClose
     }),
     deleteRole = _useDestroyRole.mutate,
-    isDeleting = _useDestroyRole.isPending;
+    isDeleting = _useDestroyRole.isLoading;
   var handleDelete = function handleDelete() {
     var _roles$find;
     var id = selectedRole.id;
@@ -4858,9 +4805,8 @@ var Delete = function Delete(_ref) {
     });
   };
   return /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
-    isOpen: isOpen,
-    onClose: onClose,
     cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
+    isOpen: isOpen,
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoTeamMembers.buttons.delete"),
     title: t("neetoTeamMembers.labels.deleteRole"),
@@ -4870,6 +4816,7 @@ var Delete = function Delete(_ref) {
         name: selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.name
       }
     }),
+    onClose: onClose,
     onSubmit: handleDelete
   });
 };
@@ -5170,6 +5117,7 @@ var Roles = function Roles(_ref) {
     isNewRolePaneOpen = _useState4[0],
     setIsNewRolePaneOpen = _useState4[1];
   var _useFetchRoles = useFetchRoles({
+      onSuccess: setModifiedRoles,
       enabled: isViewPermissionGranted
     }),
     _useFetchRoles$data = _useFetchRoles.data,
@@ -5205,9 +5153,6 @@ var Roles = function Roles(_ref) {
   var handleReset = function handleReset() {
     return setModifiedRoles(roles);
   };
-  require$$0.useEffect(function () {
-    setModifiedRoles(roles);
-  }, [roles]);
   if (isRolesLoading || isPermissionsLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "ntm-members-page-loader",
@@ -7343,38 +7288,32 @@ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t
 var useFetchMembers = function useFetchMembers() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery(_objectSpread$a(_objectSpread$a({
-    queryKey: [QUERY_KEYS.TEAMS, params],
-    queryFn: function queryFn() {
-      return teamsApi.fetch(params);
-    },
+  return reactQuery.useQuery([QUERY_KEYS.TEAMS, params], function () {
+    return teamsApi.fetch(params);
+  }, _objectSpread$a(_objectSpread$a({
     select: ramda.identity,
-    placeholderData: reactQuery.keepPreviousData
+    keepPreviousData: true
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useFetchMembersCountsPerCategory = function useFetchMembersCountsPerCategory() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(_objectSpread$a(_objectSpread$a({
-    queryKey: [QUERY_KEYS.TEAMS],
-    queryFn: teamsApi.fetchCountsPerCategory,
+  return reactQuery.useQuery([QUERY_KEYS.TEAMS], teamsApi.fetchCountsPerCategory, _objectSpread$a(_objectSpread$a({
     select: ramda.identity,
-    placeholderData: reactQuery.keepPreviousData
+    keepPreviousData: true
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useCreateMember = function useCreateMember() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useMutation(_objectSpread$a({
-    mutationFn: teamsApi.create
-  }, options));
+  return reactQuery.useMutation(teamsApi.create, options);
 };
 var useUpdateMember = function useUpdateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$2);
-  return useMutationWithInvalidation(function (_ref2) {
+  return reactUtils.useMutationWithInvalidation(function (_ref2) {
     var id = _ref2.id,
       payload = _ref2.payload;
     return teamsApi.update(id, payload);
@@ -7388,7 +7327,7 @@ var useUpdateMember = function useUpdateMember(_ref) {
 var useBulkUpdateMembers = function useBulkUpdateMembers(_ref3) {
   var _onSuccess2 = _ref3.onSuccess,
     options = _objectWithoutProperties(_ref3, _excluded2$1);
-  return useMutationWithInvalidation(teamsApi.bulkUpdate, _objectSpread$a({
+  return reactUtils.useMutationWithInvalidation(teamsApi.bulkUpdate, _objectSpread$a({
     keysToInvalidate: [QUERY_KEYS.TEAMS, QUERY_KEYS.TEAMS_DEPENDENCIES],
     onSuccess: function onSuccess() {
       _onSuccess2 === null || _onSuccess2 === void 0 || _onSuccess2();
@@ -7396,35 +7335,26 @@ var useBulkUpdateMembers = function useBulkUpdateMembers(_ref3) {
   }, options));
 };
 var refetchMembers = function refetchMembers() {
-  queryClient.invalidateQueries({
-    queryKey: [QUERY_KEYS.TEAMS]
-  });
-  queryClient.invalidateQueries({
-    queryKey: [QUERY_KEYS.TEAMS_DEPENDENCIES]
-  });
+  queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
+  queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
 };
 var useFetchFilterOptions = function useFetchFilterOptions(_ref4) {
   var _ref4$params = _ref4.params,
     params = _ref4$params === void 0 ? {} : _ref4$params,
     _ref4$options = _ref4.options,
     options = _ref4$options === void 0 ? {} : _ref4$options;
-  return reactQuery.useQuery(_objectSpread$a(_objectSpread$a({
-    queryKey: [QUERY_KEYS.TEAMS_DEPENDENCIES, params],
-    queryFn: function queryFn() {
-      return teamsApi.fetchFilterOptions(params);
-    },
+  return reactQuery.useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
+    return teamsApi.fetchFilterOptions(params);
+  }, _objectSpread$a(_objectSpread$a({
     select: ramda.identity
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useMembersCreationStatus = function useMembersCreationStatus(jobId, options) {
-  return reactQuery.useQuery(_objectSpread$a({
-    queryKey: [QUERY_KEYS.CREATION_STATUS, jobId],
-    queryFn: function queryFn() {
-      return teamsApi.creationStatus(jobId);
-    }
-  }, options));
+  return reactQuery.useQuery([QUERY_KEYS.CREATION_STATUS, jobId], function () {
+    return teamsApi.creationStatus(jobId);
+  }, options);
 };
 
 var _getQueryParams = utils$3.getQueryParams(),
@@ -9098,7 +9028,7 @@ var ManageMember = function ManageMember(_ref) {
       }
     }),
     updateMember = _useUpdateMember.mutate,
-    isUpdatingMember = _useUpdateMember.isPending;
+    isUpdatingMember = _useUpdateMember.isLoading;
   var hasRoleChanged = function hasRoleChanged(_ref4) {
     var submitted = _ref4.submitted,
       values = _ref4.values;
@@ -9230,8 +9160,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;
@@ -9250,23 +9179,21 @@ var ManageMember = function ManageMember(_ref) {
                 completedCount: progress === null || progress === void 0 ? void 0 : progress.completedCount
               })
             }), renderFormPage(currentPage, emails, role)]
-          })), /*#__PURE__*/jsxRuntime.jsxs(Component.Footer, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.footerProps), {}, {
+          })), /*#__PURE__*/jsxRuntime.jsx(Component.Footer, _objectSpread$1(_objectSpread$1({}, manageMemberComponentConfig.footerProps), {}, {
             className: classnames__default["default"](["ntm-members-form__footer", (_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className]),
-            children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-              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__*/jsxRuntime.jsx(Button__default["default"], {
-              "data-cy": "ntm-manage-member-cancel-button",
-              label: t("neetoTeamMembers.buttons.cancel"),
-              style: "text",
-              onClick: function onClick() {
-                return handleClose(false);
+            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+              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")
               }
-            })]
+            })
           }))]
         });
       }
@@ -9355,7 +9282,7 @@ var TeamMembers = function TeamMembers(_ref) {
       }
     }),
     updateMember = _useUpdateMember.mutate,
-    isUpdatingMember = _useUpdateMember.isPending;
+    isUpdatingMember = _useUpdateMember.isLoading;
   var filteredRoles = getFilteredRoles(roles, config);
   var _useTeams = useTeams({
       config: config,