Merge pull request #290 from uselagoon/sshkey-modal-fix

Fix: Fixes SSHKey modal

cypress/support/actions/settings/SettingsAction.ts

@@ -17,7 +17,10 @@ export default class SettingAction {
   }
 
   deleteSshKey(name: string) {
-    settings.getDeleteBtn().should('be.visible').click({ force: true, multiple: true });
+    settings.getDeleteBtn(name);
+    cy.log('enter the  name and confirm');
+    cy.getBySel('confirm-input').type(name);
+    cy.getBySel('deleteConfirm').click();
     cy.contains(name).should('not.exist');
   }
 }

cypress/support/repositories/settings/SettingsRepository.ts

@@ -10,7 +10,16 @@ export default class SettingsRepository {
   getSubmitBtn() {
     return cy.getBySel('sshKey').parent().next();
   }
-  getDeleteBtn() {
-    return cy.getBySel('deleteKey').getBySel('deleteBtn');
+
+  getKeyToDelete() {
+    return cy.getBySel('data-row');
+  }
+  getDeleteBtn(name: string) {
+    this.getKeyToDelete()
+      .contains(name)
+      .parent()
+      .within(() => {
+        cy.getBySel('deleteKey').getBySel('delete').click();
+      });
   }
 }

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" />

src/components/DeleteConfirm/index.stories.tsx

@@ -45,6 +45,7 @@ export const WithConfirmationBlocked = ({
     icon={<DeleteOutlined />}
     deleteType="environment"
     deleteName="Forty-two"
+    deleteMessage
     onDelete={onDeleteFunction}
     inputValue=""
     setInputValue={setInputValueFunction}

src/components/SshKeys/index.js

@@ -2,11 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { Mutation } from 'react-apollo';
 import Skeleton from 'react-loading-skeleton';
 
-import { Col, Modal, Row, Space } from 'antd';
+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';
@@ -28,10 +30,25 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
   };
 
   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.',
+      description: errorMessage,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+
   useEffect(() => {
     setIsLoading(loading);
   }, [loading]);
@@ -52,7 +69,7 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
 
           {keys &&
             keys.map(key => (
-              <div className="data-row" key={key.id}>
+              <div className="data-row" key={key.id} data-cy="data-row">
                 <div className="name">
                   {key.id} - {key.name}
                 </div>
@@ -78,35 +95,35 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
                           <Space>
                             <Mutation mutation={UpdateUserSSHPublicKey} onError={e => console.error(e)}>
                               {(updateUserSSHPublicKey, { loading, called, error, data }) => {
-                                if (error) {
-                                  return <div>{error.message}</div>;
-                                }
-
                                 if (data) {
                                   handleRefetch();
                                   closeModal();
                                 }
 
                                 return (
-                                  <Button
-                                    loading={called || loading}
-                                    testId="updateKey"
-                                    action={() =>
-                                      updateUserSSHPublicKey({
-                                        variables: {
-                                          input: {
-                                            id: key.id,
-                                            patch: {
-                                              name: editState.name,
-                                              publicKey: editState.publicKey,
+                                  <>
+                                    {contextHolder}
+                                    <Button
+                                      loading={called || loading}
+                                      testId="updateKey"
+                                      action={() =>
+                                        updateUserSSHPublicKey({
+                                          variables: {
+                                            input: {
+                                              id: key.id,
+                                              patch: {
+                                                name: editState.name,
+                                                publicKey: editState.publicKey,
+                                              },
                                             },
                                           },
-                                        },
-                                      })
-                                    }
-                                  >
-                                    Update
-                                  </Button>
+                                        })
+                                      }
+                                    >
+                                      Update
+                                    </Button>
+                                    {error && openNotificationWithIcon(error.message)}
+                                  </>
                                 );
                               }}
                             </Mutation>
@@ -160,12 +177,22 @@ 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
-                            testId="deleteBtn"
+                          <DeleteConfirm
+                            deleteType="SSH Key"
+                            deleteMessage={deleteMessage}
+                            deleteName={key.name}
                             loading={called}
                             variant="red"
-                            action={() =>
+                            onDelete={() =>
                               deleteUserSSHPublicKey({
                                 variables: {
                                   input: {
@@ -174,9 +201,7 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) =
                                 },
                               })
                             }
-                          >
-                            Delete
-                          </Button>
+                          />
                         );
                       }}
                     </Mutation>

src/layouts/GlobalStyles/index.tsx

@@ -68,13 +68,18 @@ body {
   }
 }
 .ant-modal .ant-modal-content{
-  background: ${props => (props.theme.colorScheme === 'dark' ? '#eaeaea' : '#fff')};
+  background:${props => props.theme.backgrounds.primary};;
   .ant-modal-header{
     border-radius: 0;
     background-color: transparent;
+    
+    .ant-modal-title{
+      color: ${props => props.theme.texts.primary};
+    }
   }
   .ant-modal-body {
     margin-block: 1rem;
+    color: ${props => props.theme.texts.primary};
     > * {
       margin-bottom: 0.5rem;
     }

src/lib/query/Me.js

@@ -11,6 +11,7 @@ export default gql`
         id
         name
         keyType
+        keyValue
         created
         keyFingerprint
       }