From 0b720c237ca66d600a43682075d19a6af802b573 Mon Sep 17 00:00:00 2001
From: Jono M <reason.koan@gmail.com>
Date: Thu, 24 Aug 2023 16:49:37 +0100
Subject: [PATCH] Added dirty state to user detail modal (#17824)

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.
---
 .../components/settings/general/UserDetailModal.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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