Merge pull request #512 from alan-turing-institute/471-edit-panel-alert

Alert pop up changes
alan-turing-institute · Jun 25, 2024 · e682512 · e682512
2 parents 91d61da + 6d7aa63
commit e682512
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/next_frontend/components/common/NodeEdit.tsx b/next_frontend/components/common/NodeEdit.tsx
@@ -282,16 +282,19 @@ const NodeEdit = ({ node, isOpen, setEditOpen }: NodeEditProps) => {
             onClose={() => setDeleteOpen(false)}
             onConfirm={handleDelete}
             loading={loading}
-            confirmButtonText={'Delete'}
+            message={'Deleting this element will also remove all of the connected child elements. This cannot be undone.'}
+            confirmButtonText={'Yes, delete this element!'}
+            cancelButtonText={'No, keep the element'}
           />
 
           <AlertModal
             isOpen={alertOpen}
             onClose={() => setAlertOpen(false)}
             onConfirm={handleClose}
             loading={loading}
-            message={'There are unresolved changes, continue to discard these changes.'}
-            confirmButtonText={'Discard Changes'}
+            message={'You have changes that have not been updated, would you like to discard these changes?'}
+            confirmButtonText={'Yes, discard changes!'}
+            cancelButtonText={'No, keep editing'}
           />
         </>
       )}

diff --git a/next_frontend/components/modals/alertModal.tsx b/next_frontend/components/modals/alertModal.tsx
@@ -12,6 +12,7 @@ interface AlertModalProps {
   loading: boolean;
   message?: string
   confirmButtonText: string
+  cancelButtonText?: string | null
 }
 
 export const AlertModal: React.FC<AlertModalProps> = ({
@@ -20,7 +21,8 @@ export const AlertModal: React.FC<AlertModalProps> = ({
   onConfirm,
   loading,
   message,
-  confirmButtonText
+  confirmButtonText,
+  cancelButtonText
 }) => {
   const [isMounted, setIsMounted] = useState(false);
 
@@ -41,7 +43,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({
     >
       <div className="pt-6 space-x-2 flex items-center justify-end w-full">
         <Button disabled={loading} variant="outline" onClick={onClose}>
-          Cancel
+          {cancelButtonText ? cancelButtonText : 'Cancel'}
         </Button>
         <Button disabled={loading} variant="destructive" onClick={onConfirm}>
           {loading ? 'Deleting' : confirmButtonText}