Modal cleanup, begin transitioning towards the new dialog

This commit is contained in:
DaneEveritt 2022-06-20 11:17:33 -04:00
parent 3834aca3fe
commit 7dd74ecc9d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
10 changed files with 121 additions and 96 deletions

View file

@ -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>
))
}

View file

@ -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}