Modal cleanup, begin transitioning towards the new dialog

resources/scripts/components/dashboard/AccountApiContainer.tsx

@@ -5,46 +5,42 @@ import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faKey, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteApiKey from '@/api/account/deleteApiKey';
-import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { httpErrorToHuman } from '@/api/http';
 import { format } from 'date-fns';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import { Dialog } from '@/components/elements/dialog';
+import { useFlashKey } from '@/plugins/useFlash';
+import Code from '@/components/elements/Code';
 
 export default () => {
     const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
     const [ keys, setKeys ] = useState<ApiKey[]>([]);
     const [ loading, setLoading ] = useState(true);
-    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { clearAndAddHttpError } = useFlashKey('account');
 
     useEffect(() => {
-        clearFlashes('account');
         getApiKeys()
             .then(keys => setKeys(keys))
             .then(() => setLoading(false))
-            .catch(error => {
-                console.error(error);
-                addError({ key: 'account', message: httpErrorToHuman(error) });
-            });
+            .catch(error => clearAndAddHttpError(error));
     }, []);
 
     const doDeletion = (identifier: string) => {
         setLoading(true);
-        clearFlashes('account');
+
+        clearAndAddHttpError();
         deleteApiKey(identifier)
             .then(() => setKeys(s => ([
                 ...(s || []).filter(key => key.identifier !== identifier),
             ])))
-            .catch(error => {
-                console.error(error);
-                addError({ key: 'account', message: httpErrorToHuman(error) });
-            })
-            .then(() => setLoading(false));
+            .catch(error => clearAndAddHttpError(error))
+            .then(() => {
+                setLoading(false);
+                setDeleteIdentifier('');
+            });
     };
 
     return (
@@ -56,19 +52,15 @@ export default () => {
                 </ContentBox>
                 <ContentBox title={'API Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
                     <SpinnerOverlay visible={loading}/>
-                    <ConfirmationModal
-                        visible={!!deleteIdentifier}
-                        title={'Confirm key deletion'}
-                        buttonText={'Yes, delete key'}
-                        onConfirmed={() => {
-                            doDeletion(deleteIdentifier);
-                            setDeleteIdentifier('');
-                        }}
-                        onModalDismissed={() => setDeleteIdentifier('')}
+                    <Dialog.Confirm
+                        title={'Delete API Key'}
+                        confirm={'Delete Key'}
+                        open={!!deleteIdentifier}
+                        onClose={() => setDeleteIdentifier('')}
+                        onConfirmed={() => doDeletion(deleteIdentifier)}
                     >
-                        Are you sure you wish to delete this API key? All requests using it will immediately be
-                        invalidated and will fail.
-                    </ConfirmationModal>
+                        All requests using the <Code>{deleteIdentifier}</Code> key will be invalidated.
+                    </Dialog.Confirm>
                     {
                         keys.length === 0 ?
                             <p css={tw`text-center text-sm`}>

resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx

@@ -55,7 +55,7 @@ export default () => {
                                             {format(key.createdAt, 'MMM do, yyyy HH:mm')}
                                         </p>
                                     </div>
-                                    <DeleteSSHKeyButton fingerprint={key.fingerprint} />
+                                    <DeleteSSHKeyButton name={key.name} fingerprint={key.fingerprint} />
                                 </GreyRowBox>
                             ))
                     }

resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx

@@ -3,10 +3,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import React, { useState } from 'react';
 import { useFlashKey } from '@/plugins/useFlash';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import { deleteSSHKey, useSSHKeys } from '@/api/account/ssh-keys';
+import { Dialog } from '@/components/elements/dialog';
+import Code from '@/components/elements/Code';
 
-export default ({ fingerprint }: { fingerprint: string }) => {
+export default ({ name, fingerprint }: { name: string; fingerprint: string }) => {
     const { clearAndAddHttpError } = useFlashKey('account');
     const [ visible, setVisible ] = useState(false);
     const { mutate } = useSSHKeys();
@@ -19,22 +20,22 @@ export default ({ fingerprint }: { fingerprint: string }) => {
             deleteSSHKey(fingerprint),
         ])
             .catch((error) => {
-                mutate(undefined, true);
+                mutate(undefined, true).catch(console.error);
                 clearAndAddHttpError(error);
             });
     };
 
     return (
         <>
-            <ConfirmationModal
-                visible={visible}
-                title={'Confirm Key Deletion'}
-                buttonText={'Yes, Delete SSH Key'}
+            <Dialog.Confirm
+                open={visible}
+                title={'Delete SSH Key'}
+                confirm={'Delete Key'}
                 onConfirmed={onClick}
-                onModalDismissed={() => setVisible(false)}
+                onClose={() => setVisible(false)}
             >
-                Are you sure you wish to delete this SSH key?
-            </ConfirmationModal>
+                Removing the <Code>{name}</Code> SSH key will invalidate its usage across the Panel.
+            </Dialog.Confirm>
             <button css={tw`ml-4 p-2 text-sm`} onClick={() => setVisible(true)}>
                 <FontAwesomeIcon
                     icon={faTrashAlt}