@bigbinary/neeto-team-members-frontend 3.3.0 → 4.0.0

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');
@@ -36,18 +36,21 @@ var Table$1 = require('@bigbinary/neetoui/Table');
 var NoData = require('@bigbinary/neetoui/NoData');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var neetoImageUploaderFrontend = require('@bigbinary/neeto-image-uploader-frontend');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var ExternalLink = require('@bigbinary/neeto-icons/ExternalLink');
 var Callout = require('@bigbinary/neetoui/Callout');
 var Label = require('@bigbinary/neetoui/Label');
 var Radio = require('@bigbinary/neetoui/Radio');
 var Toastr = require('@bigbinary/neetoui/Toastr');
+var Delete$1 = require('@bigbinary/neeto-icons/Delete');
 var withImmutableActions = require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
 var zustand = require('zustand');
 var shallow = require('zustand/shallow');
-var devtools = require('react-query/devtools');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var classnames = require('classnames');
+var Search = require('@bigbinary/neeto-icons/Search');
 var Input$1 = require('@bigbinary/neetoui/Input');
+var Down = require('@bigbinary/neeto-icons/Down');
+var Up = require('@bigbinary/neeto-icons/Up');
 var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
 var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
 var Columns$1 = require('@bigbinary/neeto-molecules/Columns');
@@ -55,13 +58,18 @@ var reactRouterDom = require('react-router-dom');
 var require$$0$1 = require('util');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Tag = require('@bigbinary/neetoui/Tag');
+var Right$1 = require('@bigbinary/neeto-icons/Right');
+var Info = require('@bigbinary/neeto-icons/Info');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
 var useFetchNeetoApps = require('@bigbinary/neeto-commons-frontend/react-utils/useFetchNeetoApps');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
 var Modal = require('@bigbinary/neetoui/Modal');
 var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
 var Radio$1 = require('@bigbinary/neetoui/formik/Radio');
+var Warning = require('@bigbinary/neeto-icons/Warning');
 var Checkbox$1 = require('@bigbinary/neetoui/formik/Checkbox');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
+var UserCircle = require('@bigbinary/neeto-icons/UserCircle');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -107,24 +115,34 @@ var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table$1);
 var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+var ExternalLink__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLink);
 var Callout__default = /*#__PURE__*/_interopDefaultLegacy(Callout);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
 var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
+var Delete__default = /*#__PURE__*/_interopDefaultLegacy(Delete$1);
 var withImmutableActions__default = /*#__PURE__*/_interopDefaultLegacy(withImmutableActions);
 var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var Input__default$1 = /*#__PURE__*/_interopDefaultLegacy(Input$1);
+var Down__default = /*#__PURE__*/_interopDefaultLegacy(Down);
+var Up__default = /*#__PURE__*/_interopDefaultLegacy(Up);
 var require$$0__default$1 = /*#__PURE__*/_interopDefaultLegacy(require$$0$1);
 var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
 var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
+var Right__default = /*#__PURE__*/_interopDefaultLegacy(Right$1);
+var Info__default = /*#__PURE__*/_interopDefaultLegacy(Info);
+var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
 var useFetchNeetoApps__default = /*#__PURE__*/_interopDefaultLegacy(useFetchNeetoApps);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
 var MultiEmailInput__default = /*#__PURE__*/_interopDefaultLegacy(MultiEmailInput);
 var Radio__default$1 = /*#__PURE__*/_interopDefaultLegacy(Radio$1);
+var Warning__default = /*#__PURE__*/_interopDefaultLegacy(Warning);
 var Checkbox__default$1 = /*#__PURE__*/_interopDefaultLegacy(Checkbox$1);
 var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
+var UserCircle__default = /*#__PURE__*/_interopDefaultLegacy(UserCircle);
 
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -313,13 +331,16 @@ var useFetchGroups = function useFetchGroups(_ref) {
     pageSize = _ref.pageSize,
     _ref$searchTerm = _ref.searchTerm,
     searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
-  return reactQuery.useQuery([QUERY_KEYS.GROUPS, searchTerm, page, pageSize], function () {
-    return groupsApi.list({
-      searchTerm: searchTerm,
-      page: page,
-      pageSize: pageSize,
-      loadDetails: true
-    });
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.GROUPS, searchTerm, page, pageSize],
+    queryFn: function queryFn() {
+      return groupsApi.list({
+        searchTerm: searchTerm,
+        page: page,
+        pageSize: pageSize,
+        loadDetails: true
+      });
+    }
   });
 };
 var useCreateGroup = function useCreateGroup() {
@@ -328,7 +349,7 @@ var useCreateGroup = function useCreateGroup() {
   return reactUtils.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() {
@@ -337,13 +358,15 @@ var useDeleteGroup = function useDeleteGroup() {
   return reactUtils.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) {
-  return reactQuery.useQuery([QUERY_KEYS.GROUPS, id], function () {
-    return groupsApi.show(id);
-  }, {
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.GROUPS, id],
+    queryFn: function queryFn() {
+      return groupsApi.show(id);
+    },
     select: ramda.prop("group"),
     enabled: !!id
   });
@@ -356,7 +379,7 @@ var useUpdateGroup = function useUpdateGroup() {
       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 : []))
   });
 };
 
@@ -375,7 +398,10 @@ var usersApi = {
 };
 
 var useFetchUsers = function useFetchUsers() {
-  return reactQuery.useQuery([QUERY_KEYS.GROUP_MEMBERS], usersApi.list);
+  return reactQuery.useQuery({
+    queryKey: [QUERY_KEYS.USERS],
+    queryFn: usersApi.list
+  });
 };
 
 var MAXIMUM_NAME_LENGTH = 25;
@@ -540,10 +566,10 @@ var Form = function Form(_ref) {
     isLoading = _useFetchUsers.isLoading;
   var _useCreateGroup = useCreateGroup(config),
     create = _useCreateGroup.mutate,
-    isCreating = _useCreateGroup.isLoading;
+    isCreating = _useCreateGroup.isPending;
   var _useUpdateGroup = useUpdateGroup(config),
     update = _useUpdateGroup.mutate,
-    isUpdating = _useUpdateGroup.isLoading;
+    isUpdating = _useUpdateGroup.isPending;
   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) {
@@ -1361,7 +1387,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.isLoading;
+    isDeleting = _useDeleteGroup.isPending;
   var getGroupDetail = function getGroupDetail(id) {
     return neetoCist.findById(id, groups);
   };
@@ -1945,9 +1971,10 @@ 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([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$j({
-    staleTime: constants.DEFAULT_STALE_TIME,
-    refetchOnWindowFocus: true
+  return reactQuery.useQuery(_objectSpread$j({
+    queryKey: [QUERY_KEYS.USER_PROFILE],
+    queryFn: profileApi.fetchUserDetails,
+    staleTime: constants.DEFAULT_STALE_TIME
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
@@ -1980,7 +2007,9 @@ 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([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$i({
+  return reactQuery.useQuery(_objectSpread$i({
+    queryKey: [QUERY_KEYS.COUNTRIES_LIST],
+    queryFn: profileApi.fetchCountries,
     staleTime: constants.DEFAULT_STALE_TIME
   }, options));
 };
@@ -2136,7 +2165,7 @@ var ProfileImage = function ProfileImage() {
           className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full absolute right-0 top-0 cursor-pointer p-0.5",
           "data-cy": "profile-image-remove-button",
           onClick: handleRemoveImage,
-          children: /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Delete, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Delete__default["default"], {
             size: IMAGE_DELETE_BUTTON_SIZE
           })
         })
@@ -2234,7 +2263,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     handleTimeZoneChange = _useCountries$handleT === void 0 ? neetoCist.noop : _useCountries$handleT;
   var _useUpdateProfileMuta = useUpdateProfileMutation(),
     updateProfile = _useUpdateProfileMuta.mutate,
-    isUpdatingProfile = _useUpdateProfileMuta.isLoading;
+    isUpdatingProfile = _useUpdateProfileMuta.isPending;
   var initialFormValues = {
     firstName: firstName,
     lastName: lastName,
@@ -2406,7 +2435,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
               "data-cy": "ntm-visit-auth-button",
               "data-test-id": "ntm-visit-auth-button",
               href: MY_PROFILE_PATH,
-              icon: neetoIcons.ExternalLink,
+              icon: ExternalLink__default["default"],
               label: t("neetoTeamMembers.profile.common.neetoAuth"),
               style: "link",
               target: "_blank"
@@ -3877,12 +3906,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__*/jsxRuntime.jsxs(reactQuery.QueryClientProvider, {
+    return /*#__PURE__*/jsxRuntime.jsx(reactQuery.QueryClientProvider, {
       client: queryClient,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$g({}, props)), /*#__PURE__*/jsxRuntime.jsx(devtools.ReactQueryDevtools, {
-        initialIsOpen: false,
-        position: "bottom-right"
-      })]
+      children: /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$g({}, props))
     });
   };
   return QueryWrapper;
@@ -3899,7 +3925,9 @@ 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(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$f({
+  return reactQuery.useQuery(_objectSpread$f({
+    queryKey: [QUERY_KEYS.PERMISSIONS],
+    queryFn: permissionsApi.fetch,
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
     }
@@ -3975,7 +4003,9 @@ 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(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$e({
+  return reactQuery.useQuery(_objectSpread$e({
+    queryKey: [QUERY_KEYS.ROLES],
+    queryFn: organizationRolesApi.fetch,
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
     }
@@ -3983,15 +4013,17 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$e({}, options));
+  return reactQuery.useQuery(_objectSpread$e({
+    queryKey: [QUERY_KEYS.GLOBAL_ROLES],
+    queryFn: globalRolesApi.fetch
+  }, options));
 };
 var useCreateRole = function useCreateRole(_ref) {
   var _onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$3);
-  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$e({
+  return reactUtils.useMutationWithInvalidation(organizationRolesApi.create, _objectSpread$e({
+    keysToInvalidate: [[QUERY_KEYS.TEAMS_DEPENDENCIES], [QUERY_KEYS.ROLES]],
     onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
-      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
       _onSuccess === null || _onSuccess === void 0 || _onSuccess();
     }
   }, options));
@@ -3999,15 +4031,13 @@ var useCreateRole = function useCreateRole(_ref) {
 var useUpdateRole = function useUpdateRole(_ref2) {
   var _onSuccess2 = _ref2.onSuccess,
     options = _objectWithoutProperties(_ref2, _excluded2$2);
-  return reactQuery.useMutation(function (_ref3) {
+  return reactUtils.useMutationWithInvalidation(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));
@@ -4016,15 +4046,13 @@ var useDestroyRole = function useDestroyRole(_ref4) {
   var _ref4$onSuccess = _ref4.onSuccess,
     _onSuccess3 = _ref4$onSuccess === void 0 ? neetoCist.noop : _ref4$onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return reactQuery.useMutation(function (_ref5) {
+  return reactUtils.useMutationWithInvalidation(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));
@@ -4032,11 +4060,9 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$e({
+  return reactUtils.useMutationWithInvalidation(organizationRolesApi.bulkUpdate, _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);
       _onSuccess4 === null || _onSuccess4 === void 0 || _onSuccess4();
     }
   }, options));
@@ -4081,7 +4107,8 @@ var Header$3 = function Header(_ref) {
   var config = _ref.config,
     handleReset = _ref.handleReset,
     handleSubmit = _ref.handleSubmit,
-    isDirty = _ref.isDirty,
+    _ref$isDirty = _ref.isDirty,
+    isDirty = _ref$isDirty === void 0 ? false : _ref$isDirty,
     setIsNewRolePaneOpen = _ref.setIsNewRolePaneOpen,
     roles = _ref.roles;
   var _useTranslation = reactI18next.useTranslation(),
@@ -4124,7 +4151,7 @@ var Header$3 = function Header(_ref) {
         className: "neeto-ui-mt-1",
         "data-cy": "ntm-roles-permission-more-info-button",
         href: config === null || config === void 0 ? void 0 : config.helpUrl,
-        icon: neetoIcons.ExternalLink,
+        icon: ExternalLink__default["default"],
         label: t("neetoTeamMembers.helpers.moreInfoAboutPermissions"),
         style: "link",
         target: "_blank"
@@ -4429,12 +4456,12 @@ var ManageRoles = function ManageRoles(_ref) {
       onSuccess: onClose
     }),
     createRole = _useCreateRole.mutate,
-    isCreatingRole = _useCreateRole.isLoading;
+    isCreatingRole = _useCreateRole.isPending;
   var _useUpdateRole = useUpdateRole({
       onSuccess: onClose
     }),
     updateRole = _useUpdateRole.mutate,
-    isUpdatingRole = _useUpdateRole.isLoading;
+    isUpdatingRole = _useUpdateRole.isPending;
   var isEdit = neetoCist.isPresent(selectedRole);
   var isSubmitting = isCreatingRole || isUpdatingRole;
   var handleSubmit = function handleSubmit(formValues) {
@@ -4790,7 +4817,7 @@ var Delete = function Delete(_ref) {
       onSuccess: onClose
     }),
     deleteRole = _useDestroyRole.mutate,
-    isDeleting = _useDestroyRole.isLoading;
+    isDeleting = _useDestroyRole.isPending;
   var handleDelete = function handleDelete() {
     var _roles$find;
     var id = selectedRole.id;
@@ -4805,8 +4832,9 @@ var Delete = function Delete(_ref) {
     });
   };
   return /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
-    cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
     isOpen: isOpen,
+    onClose: onClose,
+    cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoTeamMembers.buttons.delete"),
     title: t("neetoTeamMembers.labels.deleteRole"),
@@ -4816,7 +4844,6 @@ var Delete = function Delete(_ref) {
         name: selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.name
       }
     }),
-    onClose: onClose,
     onSubmit: handleDelete
   });
 };
@@ -4886,12 +4913,12 @@ var Columns = function Columns(_ref) {
 
 var ToggleDropdown = function ToggleDropdown(_ref) {
   var isVisible = _ref.isVisible;
-  return isVisible ? /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Up, {
+  return isVisible ? /*#__PURE__*/jsxRuntime.jsx(Up__default["default"], {
     className: "ntm-roles-table-sidebar__drop-down-button",
     "data-cy": "ntm-permission-category-hide-button",
     size: 16,
     strokeWidth: 2
-  }) : /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Down, {
+  }) : /*#__PURE__*/jsxRuntime.jsx(Down__default["default"], {
     className: "ntm-roles-table-sidebar__drop-down-button",
     "data-cy": "ntm-permission-category-show-button",
     size: 16,
@@ -4959,7 +4986,7 @@ var Sidebar = function Sidebar(_ref) {
       style: searchWrapperStyle,
       children: /*#__PURE__*/jsxRuntime.jsx(Input__default$1["default"], {
         "data-cy": "ntm-search-permissions-input",
-        prefix: /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Search, {}),
+        prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
         type: "search",
         value: searchTerm,
         placeholder: t("neetoTeamMembers.placeholders.searchPermission", constants.PLURAL),
@@ -5117,12 +5144,12 @@ var Roles = function Roles(_ref) {
     isNewRolePaneOpen = _useState4[0],
     setIsNewRolePaneOpen = _useState4[1];
   var _useFetchRoles = useFetchRoles({
-      onSuccess: setModifiedRoles,
       enabled: isViewPermissionGranted
     }),
     _useFetchRoles$data = _useFetchRoles.data,
     roles = _useFetchRoles$data === void 0 ? [] : _useFetchRoles$data,
-    isRolesLoading = _useFetchRoles.isLoading;
+    isRolesLoading = _useFetchRoles.isLoading,
+    status = _useFetchRoles.status;
   var _useQueryParams = reactUtils.useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
@@ -5135,7 +5162,6 @@ var Roles = function Roles(_ref) {
       enabled: isUpdatePermissionGranted
     }),
     bulkUpdate = _useBulkUpdateRoles.mutate;
-  var isDirty = neetoCist.isPresent(getModifiedPermissions(roles, modifiedRoles));
   var permissions = sortPermissionsBySequence(permissionData);
   var permissionGroups = getPermissionGroups(permissions);
   var filteredRoles = ramda.filter(function (_ref2) {
@@ -5153,6 +5179,10 @@ var Roles = function Roles(_ref) {
   var handleReset = function handleReset() {
     return setModifiedRoles(roles);
   };
+  require$$0.useEffect(function () {
+    if (status !== "success") return;
+    setModifiedRoles(roles);
+  }, [roles, status]);
   if (isRolesLoading || isPermissionsLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "ntm-members-page-loader",
@@ -5167,7 +5197,6 @@ var Roles = function Roles(_ref) {
           config: config,
           handleReset: handleReset,
           handleSubmit: handleSubmit,
-          isDirty: isDirty,
           roles: roles,
           setIsNewRolePaneOpen: setIsNewRolePaneOpen
         }), /*#__PURE__*/jsxRuntime.jsx(Table, {
@@ -7288,27 +7317,33 @@ 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([QUERY_KEYS.TEAMS, params], function () {
-    return teamsApi.fetch(params);
-  }, _objectSpread$a(_objectSpread$a({
+  return reactQuery.useQuery(_objectSpread$a(_objectSpread$a({
+    queryKey: [QUERY_KEYS.TEAMS, params],
+    queryFn: function queryFn() {
+      return teamsApi.fetch(params);
+    },
     select: ramda.identity,
-    keepPreviousData: true
+    placeholderData: reactQuery.keepPreviousData
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useFetchMembersCountsPerCategory = function useFetchMembersCountsPerCategory() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery([QUERY_KEYS.TEAMS], teamsApi.fetchCountsPerCategory, _objectSpread$a(_objectSpread$a({
+  return reactQuery.useQuery(_objectSpread$a(_objectSpread$a({
+    queryKey: [QUERY_KEYS.TEAMS],
+    queryFn: teamsApi.fetchCountsPerCategory,
     select: ramda.identity,
-    keepPreviousData: true
+    placeholderData: reactQuery.keepPreviousData
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useCreateMember = function useCreateMember() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useMutation(teamsApi.create, options);
+  return reactQuery.useMutation(_objectSpread$a({
+    mutationFn: teamsApi.create
+  }, options));
 };
 var useUpdateMember = function useUpdateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
@@ -7318,7 +7353,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();
     }
@@ -7328,33 +7363,42 @@ var useBulkUpdateMembers = function useBulkUpdateMembers(_ref3) {
   var _onSuccess2 = _ref3.onSuccess,
     options = _objectWithoutProperties(_ref3, _excluded2$1);
   return reactUtils.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();
     }
   }, options));
 };
 var refetchMembers = function refetchMembers() {
-  queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
-  queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+  queryClient.invalidateQueries({
+    queryKey: [QUERY_KEYS.TEAMS]
+  });
+  queryClient.invalidateQueries({
+    queryKey: [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([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
-    return teamsApi.fetchFilterOptions(params);
-  }, _objectSpread$a(_objectSpread$a({
+  return reactQuery.useQuery(_objectSpread$a(_objectSpread$a({
+    queryKey: [QUERY_KEYS.TEAMS_DEPENDENCIES, params],
+    queryFn: function queryFn() {
+      return teamsApi.fetchFilterOptions(params);
+    },
     select: ramda.identity
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useMembersCreationStatus = function useMembersCreationStatus(jobId, options) {
-  return reactQuery.useQuery([QUERY_KEYS.CREATION_STATUS, jobId], function () {
-    return teamsApi.creationStatus(jobId);
-  }, options);
+  return reactQuery.useQuery(_objectSpread$a({
+    queryKey: [QUERY_KEYS.CREATION_STATUS, jobId],
+    queryFn: function queryFn() {
+      return teamsApi.creationStatus(jobId);
+    }
+  }, options));
 };
 
 var _getQueryParams = utils$3.getQueryParams(),
@@ -8039,7 +8083,7 @@ var RolesDropdown = function RolesDropdown(_ref) {
         position: "auto-end",
         customTarget: /*#__PURE__*/jsxRuntime.jsx(MenuItem$1.Button, {
           disabled: !isUpdatingAllowed,
-          suffix: /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Right, {
+          suffix: /*#__PURE__*/jsxRuntime.jsx(Right__default["default"], {
             size: 16
           }),
           children: t("neetoTeamMembers.buttons.changeRole")
@@ -8054,7 +8098,7 @@ var RolesDropdown = function RolesDropdown(_ref) {
             },
             children: /*#__PURE__*/jsxRuntime.jsx(Input__default$1["default"], {
               "data-cy": "ntm-members-roles-search-input",
-              prefix: /*#__PURE__*/jsxRuntime.jsx(neetoIcons.Search, {}),
+              prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
               type: "search",
               value: searchTerm,
               placeholder: t("neetoTeamMembers.placeholders.searchRole", constants.PLURAL),
@@ -8893,7 +8937,7 @@ var SubscriptionPlan = function SubscriptionPlan(_ref) {
       name: "isSubscriptionProPlan",
       onChange: handleChange
     }), isProPlan && /*#__PURE__*/jsxRuntime.jsx(Callout__default["default"], {
-      icon: neetoIcons.Warning,
+      icon: Warning__default["default"],
       style: "warning",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
         style: "body2",
@@ -9029,7 +9073,7 @@ var ManageMember = function ManageMember(_ref) {
       }
     }),
     updateMember = _useUpdateMember.mutate,
-    isUpdatingMember = _useUpdateMember.isLoading;
+    isUpdatingMember = _useUpdateMember.isPending;
   var hasRoleChanged = function hasRoleChanged(_ref4) {
     var submitted = _ref4.submitted,
       values = _ref4.values;
@@ -9129,7 +9173,7 @@ var ManageMember = function ManageMember(_ref) {
       }, (_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className]),
       children: [currentPage !== FORM_PAGES.MAIN && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "aria-label": "Back",
-        icon: neetoIcons.LeftArrow,
+        icon: LeftArrow__default["default"],
         size: "medium",
         style: "text",
         tooltipProps: {
@@ -9172,7 +9216,7 @@ var ManageMember = function ManageMember(_ref) {
             className: classnames__default["default"](["ntm-members-form__body", (_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className]),
             children: [isCreationStatusPollingEnabled && /*#__PURE__*/jsxRuntime.jsx(Callout__default["default"], {
               className: "w-full",
-              icon: neetoIcons.Info,
+              icon: Info__default["default"],
               style: "info",
               children: t("neetoTeamMembers.helpers.memberCreationStatus", {
                 count: emails.length,
@@ -9283,7 +9327,7 @@ var TeamMembers = function TeamMembers(_ref) {
       }
     }),
     updateMember = _useUpdateMember.mutate,
-    isUpdatingMember = _useUpdateMember.isLoading;
+    isUpdatingMember = _useUpdateMember.isPending;
   var filteredRoles = getFilteredRoles(roles, config);
   var _useTeams = useTeams({
       config: config,
@@ -9462,7 +9506,7 @@ var useMembersSidenav = function useMembersSidenav(_ref) {
     _useFetchMembersCount2 = _useFetchMembersCount.data,
     membersCategoryCounts = _useFetchMembersCount2 === void 0 ? {} : _useFetchMembersCount2;
   return {
-    icon: neetoIcons.UserCircle,
+    icon: UserCircle__default["default"],
     label: initializers.taxonomies.member.plural,
     isCountsLoading: isCountsLoading,
     isActive: function isActive() {