Incorporated deleteConfirm

uselagoon · Jul 25, 2024 · 9f827ac · 9f827ac
1 parent 287c6de
commit 9f827ac
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/src/components/DeleteConfirm/index.js b/src/components/DeleteConfirm/index.js
@@ -11,6 +11,7 @@ import { color } from 'lib/variables';
 export const DeleteConfirm = ({
   deleteType,
   deleteName,
+  deleteMessage,
   icon,
   onDelete,
   inputValue,
@@ -28,11 +29,15 @@ export const DeleteConfirm = ({
       </Button>
       <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm delete ${deleteType}`}>
         <React.Fragment>
-          <p>
-            This will delete all resources associated with the {deleteType}{' '}
-            <span className="delete-name">{deleteName}</span> and cannot be undone. Make sure this is something you
-            really want to do!
-          </p>
+          {deleteMessage ? (
+            <p>{deleteMessage}</p>
+          ) : (
+            <p>
+              This will delete all resources associated with the {deleteType}{' '}
+              <span className="delete-name">{deleteName}</span> and cannot be undone. Make sure this is something you
+              really want to do!
+            </p>
+          )}
           <p>Type the name of the {deleteType} to confirm.</p>
           <div className="form-input">
             <input type="text" value={inputValue} onChange={setInputValue} data-cy="confirm-input" />

diff --git a/src/components/SshKeys/index.js b/src/components/SshKeys/index.js
@@ -4,9 +4,11 @@ import Skeleton from 'react-loading-skeleton';
 
 import { Col, Modal, Row, Space, notification } from 'antd';
 import Button from 'components/Button';
+import DeleteConfirm from 'components/DeleteConfirm';
 import DeleteUserSSHPublicKey from 'lib/mutation/DeleteUserSSHPublicKey';
 import UpdateUserSSHPublicKey from 'lib/mutation/UpdateUserSSHPublicKey';
 import Me from 'lib/query/Me';
+import { color } from 'lib/variables';
 import moment from 'moment';
 
 import { StyledKeys } from './StyledKeys';
@@ -19,21 +21,24 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
   const [editState, setEditState] = useState({
     id: '',
     name: '',
-    keyValue: '',
+    publicKey: '',
   });
 
   const closeModal = () => {
-    setEditState({ name: '', keyValue: '' });
+    setEditState({ name: '', publicKey: '' });
     setModalOpen(false);
   };
 
   const openModal = keyObject => {
-    setEditState(keyObject);
+    setEditState({ ...keyObject, publicKey: getPK(keyObject) });
     setModalOpen(true);
   };
 
   const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
 
+  const getPK = key => {
+    return key.keyType + ' ' + key.keyValue;
+  };
   const openNotificationWithIcon = errorMessage => {
     api['error']({
       message: 'There was a problem updating the SSH key.',
@@ -108,7 +113,7 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
                                               id: key.id,
                                               patch: {
                                                 name: editState.name,
-                                                publicKey: editState.keyValue,
+                                                publicKey: editState.publicKey,
                                               },
                                             },
                                           },
@@ -151,9 +156,9 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
                           <input
                             className="inputKey fullSize"
                             type="text"
-                            value={editState.keyValue}
+                            value={editState.publicKey}
                             onChange={e => {
-                              setEditState({ ...editState, keyValue: e.target.value });
+                              setEditState({ ...editState, publicKey: e.target.value });
                             }}
                           />
                         </Col>
@@ -172,12 +177,23 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
                           return <div>{error.message}</div>;
                         }
 
+                        const deleteMessage = (
+                          <>
+                            This action will delete the SSH key{' '}
+                            <span style={{ color: color.blue, fontWeight: 'bold' }}>{key.name}</span> and cannot be
+                            undone.
+                          </>
+                        );
+
                         return (
-                          <Button
+                          <DeleteConfirm
+                            deleteType="SSH Key"
+                            deleteMessage={deleteMessage}
+                            deleteName={key.name}
                             testId="deleteBtn"
                             loading={called}
                             variant="red"
-                            action={() =>
+                            onDelete={() =>
                               deleteUserSSHPublicKey({
                                 variables: {
                                   input: {
@@ -186,9 +202,7 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
                                 },
                               })
                             }
-                          >
-                            Delete
-                          </Button>
+                          />
                         );
                       }}
                     </Mutation>