Change: ssh keys in the UI (#279)

* ssh keys

* change mutation

src/components/SshKeys/AddSshKey.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { Mutation } from 'react-apollo';
 
+import { Space } from 'antd';
 import Button from 'components/Button';
 import Me from 'lib/query/Me';
 
-import AddSshKeyMutation from '../../lib/mutation/AddSshKey';
+import AddUserSSHPublicKey from '../../lib/mutation/AddUserSSHPublicKey';
 
 const AddSshKey = ({ me: { id, email } }) => {
   const defaultValues = { sshKeyName: '', sshKey: '' };
@@ -15,42 +16,29 @@ const AddSshKey = ({ me: { id, email } }) => {
     setValues({ ...values, [name]: value });
   };
 
-  const regex = /\s*(ssh-rsa|ssh-ed25519|ecdsa-sha2-nistp256|ecdsa-sha2-nistp384|ecdsa-sha2-nistp521)\s(\S+)/;
-  // First capture group is the type of the ssh key
-  // Second capture group is the actual ssh key
-  // Whitespace and comments are ignored
-
-  const isFormValid = values.sshKeyName !== '' && !values.sshKey.includes('\n') && values.sshKey.match(regex);
-
   return (
     <div className="addSshKey">
-      <Mutation mutation={AddSshKeyMutation} refetchQueries={[{ query: Me }]}>
-        {(addSshKey, { loading, called, error, data }) => {
+      <Mutation mutation={AddUserSSHPublicKey} refetchQueries={[{ query: Me }]} onError={e => console.error(e)}>
+        {(addUserSSHPublicKey, { loading, called, error, data }) => {
           const addSshKeyHandler = () => {
-            addSshKey({
+            addUserSSHPublicKey({
               variables: {
                 input: {
                   name: values.sshKeyName,
-                  keyValue: values.sshKey.match(regex)[2],
-                  keyType: values.sshKey.match(regex)[1].replace(/-/g, '_').toUpperCase(),
+                  publicKey: values.sshKey,
                   user: {
                     id,
                     email,
                   },
                 },
               },
             });
+
             setValues(defaultValues);
           };
 
-          if (!error && called && loading) {
-            return <div>Adding SSH Key...</div>;
-          }
-
           return (
             <div className="addNew">
-              {error ? <div className="error">{error.message.replace('GraphQL error:', '').trim()}</div> : ''}
-
               <div>
                 <label htmlFor="sshKeyName">SSH Key Name</label>
                 <input
@@ -77,14 +65,17 @@ const AddSshKey = ({ me: { id, email } }) => {
                   placeholder="Begins with 'ssh-rsa', 'ssh-ed25519', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', 'ecdsa-sha2-nistp521'"
                 />
               </div>
-              <Button disabled={!isFormValid} action={addSshKeyHandler}>
-                Add
-              </Button>
-              <div className="sshKeyError">
-                <span className={values.sshKey == '' || isFormValid ? 'fade' : 'fade-in'}>
-                  {values.sshKeyName == '' ? 'Please enter a SSH Key name' : 'The SSH Key entered is invalid'}
-                </span>
-              </div>
+              <Space direction="vertical" size="large">
+                <Button
+                  loading={!error && called && loading}
+                  disabled={!values.sshKey || !values.sshKeyName}
+                  action={addSshKeyHandler}
+                >
+                  Add
+                </Button>
+
+                {error ? <div className="error">{error.message.replace('GraphQL error:', '').trim()}</div> : ''}
+              </Space>
             </div>
           );
         }}

src/components/SshKeys/index.js

@@ -2,16 +2,36 @@ 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 Button from 'components/Button';
-import DeleteSshKeyById from 'lib/mutation/DeleteSshKeyById';
+import DeleteUserSSHPublicKey from 'lib/mutation/DeleteUserSSHPublicKey';
+import UpdateUserSSHPublicKey from 'lib/mutation/UpdateUserSSHPublicKey';
 import Me from 'lib/query/Me';
 import moment from 'moment';
 
 import { StyledKeys } from './StyledKeys';
 
-const SshKeys = ({ me: { id, email, sshKeys: keys }, loading }) => {
+const SshKeys = ({ me: { id, email, sshKeys: keys }, loading, handleRefetch }) => {
   const [isLoading, setIsLoading] = useState(loading);
 
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const [editState, setEditState] = useState({
+    id: '',
+    name: '',
+    publicKey: '',
+  });
+
+  const closeModal = () => {
+    setEditState({ name: '', publicKey: '' });
+    setModalOpen(false);
+  };
+
+  const openModal = keyObject => {
+    setEditState(keyObject);
+    setModalOpen(true);
+  };
+
   useEffect(() => {
     setIsLoading(loading);
   }, [loading]);
@@ -41,36 +61,127 @@ const SshKeys = ({ me: { id, email, sshKeys: keys }, loading }) => {
                 <div className="created chromatic-ignore">
                   {moment.utc(key.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
                 </div>
-                <div className="delete" data-cy="deleteKey">
-                  <Mutation mutation={DeleteSshKeyById} refetchQueries={[{ query: Me }]}>
-                    {(deleteSshKeyById, { loading, called, error, data }) => {
-                      if (error) {
-                        return <div>{error.message}</div>;
-                      }
-
-                      if (called) {
-                        return <div>Deleting SSH Key...</div>;
-                      }
-                      return (
-                        <Button
-                          testId="deleteBtn"
-                          variant="red"
-                          action={() =>
-                            deleteSshKeyById({
-                              variables: {
-                                input: {
-                                  id: key.id,
+
+                <Space>
+                  <div className="edit" data-cy="editKey">
+                    <Button testId="editBtn" action={() => openModal(key)}>
+                      Edit
+                    </Button>
+                    <Modal
+                      open={modalOpen && editState.id === key.id}
+                      title="Edit SSH Key"
+                      onCancel={closeModal}
+                      destroyOnClose
+                      className="sshmodal"
+                      footer={() => (
+                        <>
+                          <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,
+                                            },
+                                          },
+                                        },
+                                      })
+                                    }
+                                  >
+                                    Update
+                                  </Button>
+                                );
+                              }}
+                            </Mutation>
+
+                            <Button variant="white" testId="cancelBtn" action={closeModal}>
+                              Cancel
+                            </Button>
+                          </Space>
+                        </>
+                      )}
+                    >
+                      <Row>
+                        <Col span={24}>SSH KEY NAME:</Col>
+
+                        <Col span={24}>
+                          <input
+                            className="inputKeyName fullSize"
+                            type="text"
+                            value={editState.name}
+                            onChange={e => {
+                              setEditState({ ...editState, name: e.target.value });
+                            }}
+                          />
+                        </Col>
+                      </Row>
+
+                      <Row>
+                        <Col span={24}>SSH KEY: </Col>
+                        <Col span={24}>
+                          <input
+                            className="inputKey fullSize"
+                            type="text"
+                            value={editState.publicKey}
+                            onChange={e => {
+                              setEditState({ ...editState, publicKey: e.target.value });
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                    </Modal>
+                  </div>
+
+                  <div className="delete" data-cy="deleteKey">
+                    <Mutation
+                      mutation={DeleteUserSSHPublicKey}
+                      refetchQueries={[{ query: Me }]}
+                      onError={e => console.error(e)}
+                    >
+                      {(deleteUserSSHPublicKey, { loading, called, error, data }) => {
+                        if (error) {
+                          return <div>{error.message}</div>;
+                        }
+
+                        return (
+                          <Button
+                            testId="deleteBtn"
+                            loading={called}
+                            variant="red"
+                            action={() =>
+                              deleteUserSSHPublicKey({
+                                variables: {
+                                  input: {
+                                    id: key.id,
+                                  },
                                 },
-                              },
-                            })
-                          }
-                        >
-                          Delete
-                        </Button>
-                      );
-                    }}
-                  </Mutation>
-                </div>
+                              })
+                            }
+                          >
+                            Delete
+                          </Button>
+                        );
+                      }}
+                    </Mutation>
+                  </div>
+                </Space>
               </div>
             ))}
         </div>

src/layouts/GlobalStyles/index.tsx

@@ -67,6 +67,24 @@ body {
   background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
   }
 }
+.ant-modal .ant-modal-content{
+  background: ${props => (props.theme.colorScheme === 'dark' ? '#eaeaea' : '#fff')};
+  .ant-modal-header{
+    border-radius: 0;
+    background-color: transparent;
+  }
+  .ant-modal-body {
+    margin-block: 1rem;
+    > * {
+      margin-bottom: 0.5rem;
+    }
+  } 
+
+  input.fullSize{
+    width: 100%;
+    padding: 0.25rem 0.5rem;
+  }
+}
 
 #__next {
   display: flex;

src/lib/mutation/AddUserSSHPublicKey.js

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  mutation addUserSSHPublicKey($input: AddUserSSHPublicKeyInput!) {
+    addUserSSHPublicKey(input: $input) {
+      id
+      name
+      keyValue
+      created
+    }
+  }
+`;

src/lib/mutation/DeleteUserSSHPublicKey.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  mutation deleteUserSSHPublicKey($input: DeleteUserSSHPublicKeyByIdInput!) {
+    deleteUserSSHPublicKey(input: $input)
+  }
+`;

src/lib/mutation/UpdateUserSSHPublicKey.js

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  mutation updateUserSSHPublicKey($input: UpdateUserSSHPublicKeyInput!) {
+    updateUserSSHPublicKey(input: $input) {
+      id
+      name
+      keyValue
+    }
+  }
+`;

src/pages/settings/index.js

@@ -15,10 +15,13 @@ import { CommonWrapper } from '../../styles/commonPageStyles';
  * Displays the user settings page.
  */
 const SettingsPage = () => {
-  const { data, loading, error } = useQuery(Me, {
+  const queryVars = {
     displayName: 'Me',
     fetchPolicy: 'cache-and-network',
-  });
+  };
+  const { data, loading, error, refetch } = useQuery(Me, queryVars);
+
+  const handleRefetch = async () => await refetch(queryVars);
 
   if (error) {
     return <QueryError error={error} />;
@@ -33,7 +36,7 @@ const SettingsPage = () => {
         <CommonWrapper>
           <h2>SSH keys</h2>
           <div className="content">
-            <SshKeys me={data?.me || {}} loading={loading} />
+            <SshKeys me={data?.me || {}} loading={loading} handleRefetch={handleRefetch} />
             <AddSshKey me={data?.me || {}} />
           </div>
         </CommonWrapper>