Make modals programatically controllable via a HOC

This allows entire components to be unmounted when the modal is hidden without affecting the fade in/out of the modal itself.

This also makes it easier to programatically dismiss a modal without having to copy the visibility all over the place, and makes working with props much simpler in those modal components

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -65,18 +65,16 @@ export default ({ backup }: Props) => {
                 checksum={backup.sha256Hash}
             />
             }
-            {deleteVisible &&
             <ConfirmationModal
+                visible={deleteVisible}
                 title={'Delete this backup?'}
                 buttonText={'Yes, delete backup'}
                 onConfirmed={() => doDeletion()}
-                visible={deleteVisible}
-                onDismissed={() => setDeleteVisible(false)}
+                onModalDismissed={() => setDeleteVisible(false)}
             >
                 Are you sure you wish to delete this backup? This is a permanent operation and the backup cannot
                 be recovered once deleted.
             </ConfirmationModal>
-            }
             <SpinnerOverlay visible={loading} fixed/>
             <DropdownMenu
                 renderToggle={onClick => (

resources/scripts/components/server/files/MassActionsBar.tsx

@@ -72,7 +72,7 @@ const MassActionsBar = () => {
                     title={'Delete these files?'}
                     buttonText={'Yes, Delete Files'}
                     onConfirmed={onClickConfirmDeletion}
-                    onDismissed={() => setShowConfirm(false)}
+                    onModalDismissed={() => setShowConfirm(false)}
                 >
                     Deleting files is a permanent operation, you cannot undo this action.
                 </ConfirmationModal>

resources/scripts/components/server/schedules/DeleteScheduleButton.tsx

@@ -39,12 +39,12 @@ export default ({ scheduleId, onDeleted }: Props) => {
     return (
         <>
             <ConfirmationModal
-                showSpinnerOverlay={isLoading}
+                visible={visible}
                 title={'Delete schedule?'}
                 buttonText={'Yes, delete schedule'}
                 onConfirmed={onDelete}
-                visible={visible}
-                onDismissed={() => setVisible(false)}
+                showSpinnerOverlay={isLoading}
+                onModalDismissed={() => setVisible(false)}
             >
                 Are you sure you want to delete this schedule? All tasks will be removed and any running processes
                 will be terminated.

resources/scripts/components/server/schedules/ScheduleTaskRow.tsx

@@ -69,7 +69,7 @@ export default ({ schedule, task }: Props) => {
                 buttonText={'Delete Task'}
                 onConfirmed={onConfirmDeletion}
                 visible={visible}
-                onDismissed={() => setVisible(false)}
+                onModalDismissed={() => setVisible(false)}
             >
                 Are you sure you want to delete this task? This action cannot be undone.
             </ConfirmationModal>

resources/scripts/components/server/settings/ReinstallServerBox.tsx

@@ -46,10 +46,10 @@ export default () => {
             <ConfirmationModal
                 title={'Confirm server reinstallation'}
                 buttonText={'Yes, reinstall server'}
-                onConfirmed={() => reinstall()}
+                onConfirmed={reinstall}
                 showSpinnerOverlay={isSubmitting}
                 visible={modalVisible}
-                onDismissed={() => setModalVisible(false)}
+                onModalDismissed={() => setModalVisible(false)}
             >
                 Your server will be stopped and some files may be deleted or modified during this process, are you sure
                 you wish to continue?

resources/scripts/components/server/users/RemoveSubuserButton.tsx

@@ -35,19 +35,17 @@ export default ({ subuser }: { subuser: Subuser }) => {
 
     return (
         <>
-            {showConfirmation &&
             <ConfirmationModal
                 title={'Delete this subuser?'}
                 buttonText={'Yes, remove subuser'}
                 visible
                 showSpinnerOverlay={loading}
                 onConfirmed={() => doDeletion()}
-                onDismissed={() => setShowConfirmation(false)}
+                onModalDismissed={() => setShowConfirmation(false)}
             >
                 Are you sure you wish to remove this subuser? They will have all access to this server revoked
                 immediately.
             </ConfirmationModal>
-            }
             <button
                 type={'button'}
                 aria-label={'Delete subuser'}