Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Added dirty state to user detail modal (#17824)

Browse source 
refs https://github.com/TryGhost/Product/issues/3349

---

Improved user experience for editing user details in the admin settings.
Added `dirty` state to track and handle unsaved changes in the
`UserDetailModal` component.
This commit is contained in:
Jono M 2023-08-24 16:49:37 +01:00 committed by GitHub
parent 44ae0dcbe1
commit 0b720c237c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
View file

@ -424,14 +424,19 @@ const UserMenuTrigger = () => (
const UserDetailModal:React.FC<UserDetailModalProps> = ({user}) => { const UserDetailModal:React.FC<UserDetailModalProps> = ({user}) => {
const {updateRoute} = useRouting(); const {updateRoute} = useRouting();
const {ownerUser} = useStaffUsers(); const {ownerUser} = useStaffUsers();
const [userData, setUserData] = useState(user); const [userData, _setUserData] = useState(user);
const [saveState, setSaveState] = useState(''); const [saveState, setSaveState] = useState<'' | 'unsaved' | 'saving' | 'saved'>('');
const [errors, setErrors] = useState<{ const [errors, setErrors] = useState<{
name?: string; name?: string;
email?: string; email?: string;
url?: string; url?: string;
}>({}); }>({});
const setUserData = (newUserData: User | ((current: User) => User)) => {
_setUserData(newUserData);
setSaveState('unsaved');
};
const mainModal = useModal(); const mainModal = useModal();
const {mutateAsync: uploadImage} = useUploadImage(); const {mutateAsync: uploadImage} = useUploadImage();
const {mutateAsync: updateUser} = useEditUser(); const {mutateAsync: updateUser} = useEditUser();
@ -645,6 +650,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user}) => {
return ( return (
<Modal <Modal
afterClose={() => updateRoute('users')} afterClose={() => updateRoute('users')}
dirty={saveState === 'unsaved'}
okLabel={okLabel} okLabel={okLabel}
size='lg' size='lg'
stickyFooter={true} stickyFooter={true}