diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js
index 47017b92bc..5e9ec9920a 100644
--- a/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/DynamicTable/index.js
@@ -50,6 +50,7 @@ const Table = ({
try {
setIsConfirmButtonLoading(true);
await onConfirmDeleteAll(entriesToDelete);
+ handleToggleConfirmDeleteAll();
} catch (err) {
setIsConfirmButtonLoading(false);
handleToggleConfirmDeleteAll();
@@ -60,6 +61,7 @@ const Table = ({
try {
setIsConfirmButtonLoading(true);
await onConfirmDeleteAll(entriesToDelete);
+ handleToggleConfirmDelete();
} catch (err) {
setIsConfirmButtonLoading(false);
handleToggleConfirmDelete();
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles.js b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles/index.js
similarity index 97%
rename from packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles.js
rename to packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles/index.js
index 08d8bedd7b..f8b286dbdb 100644
--- a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles.js
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/SelectRoles/index.js
@@ -5,7 +5,7 @@ import { Select, Option } from '@strapi/parts';
import { useQuery } from 'react-query';
import styled, { keyframes } from 'styled-components';
import LoadingIcon from '@strapi/icons/LoadingIcon';
-import { axiosInstance } from '../../../../core/utils';
+import { axiosInstance } from '../../../../../core/utils';
const rotation = keyframes`
from {
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js
index 5b6ec036e7..da2956bd69 100644
--- a/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js
@@ -16,24 +16,54 @@ import {
H2,
} from '@strapi/parts';
import { Formik } from 'formik';
-import { Form, GenericInput } from '@strapi/helper-plugin';
+import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { useQueryClient, useMutation } from 'react-query';
import formDataModel from 'ee_else_ce/pages/Users/ListPage/ModalForm/utils/formDataModel';
import roleSettingsForm from 'ee_else_ce/pages/Users/ListPage/ModalForm/utils/roleSettingsForm';
import SelectRoles from './SelectRoles';
import layout from './utils/layout';
import schema from './utils/schema';
import stepper from './utils/stepper';
+import { axiosInstance } from '../../../../core/utils';
-const ModalForm = ({ onToggle }) => {
+const ModalForm = ({ queryName, onToggle }) => {
const [currentStep, setStep] = useState('create');
+ const [isSubmitting, setIsSubmiting] = useState(false);
+ const [registrationToken, setRegistrationToken] = useState(null);
+ const queryClient = useQueryClient();
const { formatMessage } = useIntl();
+ const toggleNotification = useNotification();
+ const { lockApp, unlockApp } = useOverlayBlocker();
+ const postMutation = useMutation(body => axiosInstance.post('/admin/users', body), {
+ onSuccess: async ({ data }) => {
+ setRegistrationToken(data.registrationToken);
+ await queryClient.invalidateQueries(queryName);
+ goNext();
+ setIsSubmiting(false);
+ },
+ onError: err => {
+ console.error(err.response);
+
+ toggleNotification({
+ type: 'warning',
+ message: { id: 'notification.error', defaultMessage: 'An error occured' },
+ });
+ },
+ onSettled: () => {
+ unlockApp();
+ },
+ });
+
const headerTitle = formatMessage({
id: 'Settings.permissions.users.create',
defaultMessage: 'Create new user',
});
- const handleSubmit = () => {
- goNext();
+ const handleSubmit = async body => {
+ lockApp();
+ setIsSubmiting(true);
+
+ postMutation.mutateAsync(body);
};
const goNext = () => {
@@ -45,6 +75,16 @@ const ModalForm = ({ onToggle }) => {
};
const { buttonSubmitLabel, isDisabled, next } = stepper[currentStep];
+ const endActions =
+ currentStep === 'create' ? (
+
+ ) : (
+
+ );
return (
@@ -138,13 +178,7 @@ const ModalForm = ({ onToggle }) => {
})}
}
- endActions={
- <>
-
- >
- }
+ endActions={endActions}
/>
);
@@ -156,6 +190,7 @@ const ModalForm = ({ onToggle }) => {
ModalForm.propTypes = {
onToggle: PropTypes.func.isRequired,
+ queryName: PropTypes.array.isRequired,
};
export default ModalForm;
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/index.js
index 0cabc8adc6..2808e465e5 100644
--- a/packages/core/admin/admin/src/pages/Users/ListPage/index.js
+++ b/packages/core/admin/admin/src/pages/Users/ListPage/index.js
@@ -23,7 +23,7 @@ import displayedFilters from './utils/displayedFilters';
import tableHeaders from './utils/tableHeaders';
const ListPage = () => {
- const [isModalOpened, setIsModalOpen] = useState(true);
+ const [isModalOpened, setIsModalOpen] = useState(false);
const {
allowedActions: { canCreate, canDelete, canRead, canUpdate },
} = useRBAC(adminPermissions.settings.users);
@@ -32,11 +32,13 @@ const ListPage = () => {
const { formatMessage } = useIntl();
const { search } = useLocation();
useFocusWhenNavigate();
+ const queryName = ['users', search];
- const { status, data, isFetching } = useQuery(['users', search], () => fetchData(search), {
+ const { status, data, isFetching } = useQuery(queryName, () => fetchData(search), {
enabled: canRead,
keepPreviousData: true,
retry: false,
+ staleTime: 5000,
onError: () => {
toggleNotification({
type: 'warning',
@@ -53,7 +55,7 @@ const ListPage = () => {
const deleteAllMutation = useMutation(ids => deleteData(ids), {
onSuccess: async () => {
- await queryClient.invalidateQueries(['users', search]);
+ await queryClient.invalidateQueries(queryName);
},
onError: err => {
if (err?.response?.data?.data) {
@@ -129,7 +131,7 @@ const ListPage = () => {
>
)}
- {isModalOpened && }
+ {isModalOpened && }
);