@bigbinary/neeto-team-members-frontend 3.3.0 → 3.4.0-beta1

package/dist/index.js

@@ -6,8 +6,8 @@ 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 { 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 { useQuery, QueryClient, QueryCache, QueryClientProvider, useMutation } from '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, concat, equals, 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';
 import { DEFAULT_PAGE_INDEX, DEFAULT_STALE_TIME, PLURAL, SINGULAR, DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE$1 } from '@bigbinary/neeto-commons-frontend/constants';
@@ -33,18 +33,21 @@ import Table$1 from '@bigbinary/neetoui/Table';
 import NoData from '@bigbinary/neetoui/NoData';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import { useProfileImageUpload } from '@bigbinary/neeto-image-uploader-frontend';
-import { Delete as Delete$1, ExternalLink, Up, Down, Search, Right as Right$1, Warning, LeftArrow, Info, UserCircle } from '@bigbinary/neeto-icons';
+import ExternalLink from '@bigbinary/neeto-icons/ExternalLink';
 import Callout from '@bigbinary/neetoui/Callout';
 import Label from '@bigbinary/neetoui/Label';
 import Radio from '@bigbinary/neetoui/Radio';
 import Toastr from '@bigbinary/neetoui/Toastr';
+import Delete$1 from '@bigbinary/neeto-icons/Delete';
 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 'react-query/devtools';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import classnames from 'classnames';
+import Search from '@bigbinary/neeto-icons/Search';
 import Input$1 from '@bigbinary/neetoui/Input';
+import Down from '@bigbinary/neeto-icons/Down';
+import Up from '@bigbinary/neeto-icons/Up';
 import { getQueryParams, buildUrl, hyphenize, currencyFormat, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import { useHiddenColumns } from '@bigbinary/neeto-molecules/Columns';
@@ -52,13 +55,18 @@ import { useHistory, matchPath } from 'react-router-dom';
 import require$$0$1 from 'util';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tag from '@bigbinary/neetoui/Tag';
+import Right$1 from '@bigbinary/neeto-icons/Right';
+import Info from '@bigbinary/neeto-icons/Info';
+import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import useFetchNeetoApps from '@bigbinary/neeto-commons-frontend/react-utils/useFetchNeetoApps';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import Modal from '@bigbinary/neetoui/Modal';
 import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
 import Radio$1 from '@bigbinary/neetoui/formik/Radio';
+import Warning from '@bigbinary/neeto-icons/Warning';
 import Checkbox$1 from '@bigbinary/neetoui/formik/Checkbox';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
+import UserCircle from '@bigbinary/neeto-icons/UserCircle';
 
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -247,13 +255,16 @@ var useFetchGroups = function useFetchGroups(_ref) {
     pageSize = _ref.pageSize,
     _ref$searchTerm = _ref.searchTerm,
     searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
-  return useQuery([QUERY_KEYS.GROUPS, searchTerm, page, pageSize], function () {
-    return groupsApi.list({
-      searchTerm: searchTerm,
-      page: page,
-      pageSize: pageSize,
-      loadDetails: true
-    });
+  return 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() {
@@ -262,7 +273,7 @@ var useCreateGroup = function useCreateGroup() {
   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() {
@@ -271,13 +282,15 @@ var useDeleteGroup = function useDeleteGroup() {
   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) {
-  return useQuery([QUERY_KEYS.GROUPS, id], function () {
-    return groupsApi.show(id);
-  }, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.GROUPS, id],
+    queryFn: function queryFn() {
+      return groupsApi.show(id);
+    },
     select: prop("group"),
     enabled: !!id
   });
@@ -290,7 +303,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 : []))
   });
 };
 
@@ -309,7 +322,10 @@ var usersApi = {
 };
 
 var useFetchUsers = function useFetchUsers() {
-  return useQuery([QUERY_KEYS.GROUP_MEMBERS], usersApi.list);
+  return useQuery({
+    queryKey: [QUERY_KEYS.USERS],
+    queryFn: usersApi.list
+  });
 };
 
 var MAXIMUM_NAME_LENGTH = 25;
@@ -474,10 +490,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 : 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) {
@@ -1295,7 +1311,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 findById(id, groups);
   };
@@ -1879,9 +1895,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 useQuery([QUERY_KEYS.USER_PROFILE], profileApi.fetchUserDetails, _objectSpread$j({
-    staleTime: DEFAULT_STALE_TIME,
-    refetchOnWindowFocus: true
+  return useQuery(_objectSpread$j({
+    queryKey: [QUERY_KEYS.USER_PROFILE],
+    queryFn: profileApi.fetchUserDetails,
+    staleTime: DEFAULT_STALE_TIME
   }, options));
 };
 var useUpdateProfileMutation = function useUpdateProfileMutation(options) {
@@ -1914,7 +1931,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 useQuery([QUERY_KEYS.COUNTRIES_LIST], profileApi.fetchCountries, _objectSpread$i({
+  return useQuery(_objectSpread$i({
+    queryKey: [QUERY_KEYS.COUNTRIES_LIST],
+    queryFn: profileApi.fetchCountries,
     staleTime: DEFAULT_STALE_TIME
   }, options));
 };
@@ -2168,7 +2187,7 @@ var ChangeProfile = function ChangeProfile(_ref) {
     handleTimeZoneChange = _useCountries$handleT === void 0 ? noop : _useCountries$handleT;
   var _useUpdateProfileMuta = useUpdateProfileMutation(),
     updateProfile = _useUpdateProfileMuta.mutate,
-    isUpdatingProfile = _useUpdateProfileMuta.isLoading;
+    isUpdatingProfile = _useUpdateProfileMuta.isPending;
   var initialFormValues = {
     firstName: firstName,
     lastName: lastName,
@@ -3811,12 +3830,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: "bottom-right"
-      })]
+      children: /*#__PURE__*/jsx(Component, _objectSpread$g({}, props))
     });
   };
   return QueryWrapper;
@@ -3833,7 +3849,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 useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$f({
+  return useQuery(_objectSpread$f({
+    queryKey: [QUERY_KEYS.PERMISSIONS],
+    queryFn: permissionsApi.fetch,
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.permissions;
     }
@@ -3909,7 +3927,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 useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$e({
+  return useQuery(_objectSpread$e({
+    queryKey: [QUERY_KEYS.ROLES],
+    queryFn: organizationRolesApi.fetch,
     select: function select(response) {
       return response === null || response === void 0 ? void 0 : response.organizationRoles;
     }
@@ -3917,15 +3937,17 @@ var useFetchRoles = function useFetchRoles() {
 };
 var useFetchGlobalRoles = function useFetchGlobalRoles() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$e({}, options));
+  return 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 useMutation(organizationRolesApi.create, _objectSpread$e({
+  return 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));
@@ -3933,15 +3955,13 @@ var useCreateRole = function useCreateRole(_ref) {
 var useUpdateRole = function useUpdateRole(_ref2) {
   var _onSuccess2 = _ref2.onSuccess,
     options = _objectWithoutProperties(_ref2, _excluded2$2);
-  return useMutation(function (_ref3) {
+  return 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));
@@ -3950,15 +3970,13 @@ var useDestroyRole = function useDestroyRole(_ref4) {
   var _ref4$onSuccess = _ref4.onSuccess,
     _onSuccess3 = _ref4$onSuccess === void 0 ? noop : _ref4$onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return useMutation(function (_ref5) {
+  return 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));
@@ -3966,11 +3984,9 @@ var useDestroyRole = function useDestroyRole(_ref4) {
 var useBulkUpdateRoles = function useBulkUpdateRoles(_ref6) {
   var _onSuccess4 = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return useMutation(organizationRolesApi.bulkUpdate, _objectSpread$e({
+  return 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));
@@ -4015,7 +4031,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 = useTranslation(),
@@ -4363,12 +4380,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 = isPresent(selectedRole);
   var isSubmitting = isCreatingRole || isUpdatingRole;
   var handleSubmit = function handleSubmit(formValues) {
@@ -4724,7 +4741,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;
@@ -4739,8 +4756,9 @@ var Delete = function Delete(_ref) {
     });
   };
   return /*#__PURE__*/jsx(Alert, {
-    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"),
@@ -4750,7 +4768,6 @@ var Delete = function Delete(_ref) {
         name: selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.name
       }
     }),
-    onClose: onClose,
     onSubmit: handleDelete
   });
 };
@@ -5051,12 +5068,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 = useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
@@ -5069,7 +5086,6 @@ var Roles = function Roles(_ref) {
       enabled: isUpdatePermissionGranted
     }),
     bulkUpdate = _useBulkUpdateRoles.mutate;
-  var isDirty = isPresent(getModifiedPermissions(roles, modifiedRoles));
   var permissions = sortPermissionsBySequence(permissionData);
   var permissionGroups = getPermissionGroups(permissions);
   var filteredRoles = filter$1(function (_ref2) {
@@ -5087,6 +5103,10 @@ var Roles = function Roles(_ref) {
   var handleReset = function handleReset() {
     return setModifiedRoles(roles);
   };
+  useEffect(function () {
+    if (status !== "success") return;
+    setModifiedRoles(roles);
+  }, [roles, status]);
   if (isRolesLoading || isPermissionsLoading) {
     return /*#__PURE__*/jsx("div", {
       className: "ntm-members-page-loader",
@@ -5101,7 +5121,6 @@ var Roles = function Roles(_ref) {
           config: config,
           handleReset: handleReset,
           handleSubmit: handleSubmit,
-          isDirty: isDirty,
           roles: roles,
           setIsNewRolePaneOpen: setIsNewRolePaneOpen
         }), /*#__PURE__*/jsx(Table, {
@@ -7222,27 +7241,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 useQuery([QUERY_KEYS.TEAMS, params], function () {
-    return teamsApi.fetch(params);
-  }, _objectSpread$a(_objectSpread$a({
+  return useQuery(_objectSpread$a(_objectSpread$a({
+    queryKey: [QUERY_KEYS.TEAMS, params],
+    queryFn: function queryFn() {
+      return teamsApi.fetch(params);
+    },
     select: identity,
-    keepPreviousData: true
+    placeholderData: keepPreviousData
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useFetchMembersCountsPerCategory = function useFetchMembersCountsPerCategory() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery([QUERY_KEYS.TEAMS], teamsApi.fetchCountsPerCategory, _objectSpread$a(_objectSpread$a({
+  return useQuery(_objectSpread$a(_objectSpread$a({
+    queryKey: [QUERY_KEYS.TEAMS],
+    queryFn: teamsApi.fetchCountsPerCategory,
     select: identity,
-    keepPreviousData: true
+    placeholderData: keepPreviousData
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useCreateMember = function useCreateMember() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useMutation(teamsApi.create, options);
+  return useMutation(_objectSpread$a({
+    mutationFn: teamsApi.create
+  }, options));
 };
 var useUpdateMember = function useUpdateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
@@ -7252,7 +7277,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();
     }
@@ -7262,33 +7287,42 @@ 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();
     }
   }, 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 useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], function () {
-    return teamsApi.fetchFilterOptions(params);
-  }, _objectSpread$a(_objectSpread$a({
+  return useQuery(_objectSpread$a(_objectSpread$a({
+    queryKey: [QUERY_KEYS.TEAMS_DEPENDENCIES, params],
+    queryFn: function queryFn() {
+      return teamsApi.fetchFilterOptions(params);
+    },
     select: identity
   }, options), {}, {
     refetchOnWindowFocus: false
   }));
 };
 var useMembersCreationStatus = function useMembersCreationStatus(jobId, options) {
-  return useQuery([QUERY_KEYS.CREATION_STATUS, jobId], function () {
-    return teamsApi.creationStatus(jobId);
-  }, options);
+  return useQuery(_objectSpread$a({
+    queryKey: [QUERY_KEYS.CREATION_STATUS, jobId],
+    queryFn: function queryFn() {
+      return teamsApi.creationStatus(jobId);
+    }
+  }, options));
 };
 
 var _getQueryParams = getQueryParams(),
@@ -8963,7 +8997,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;
@@ -9217,7 +9251,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,