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/dashboard/AccountApiContainer.tsx

@@ -61,21 +61,19 @@ export default () => {
                 </ContentBox>
                 <ContentBox title={'API Keys'} css={tw`ml-10 flex-1`}>
                     <SpinnerOverlay visible={loading}/>
-                    {deleteIdentifier &&
                     <ConfirmationModal
-                        visible
+                        visible={!!deleteIdentifier}
                         title={'Confirm key deletion'}
                         buttonText={'Yes, delete key'}
                         onConfirmed={() => {
                             doDeletion(deleteIdentifier);
                             setDeleteIdentifier('');
                         }}
-                        onDismissed={() => setDeleteIdentifier('')}
+                        onModalDismissed={() => setDeleteIdentifier('')}
                     >
                         Are you sure you wish to delete this API key? All requests using it will immediately be
                         invalidated and will fail.
                     </ConfirmationModal>
-                    }
                     {
                         keys.length === 0 ?
                             <p css={tw`text-center text-sm`}>