WPCOM SSH: Use <username>-<key-name> consistently in UI (#69220)

Automattic · Oct 19, 2022 · 0095d4e · 0095d4e
1 parent 00497c0
commit 0095d4e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/client/me/security-ssh-key/manage-ssh-keys.tsx b/client/me/security-ssh-key/manage-ssh-keys.tsx
@@ -8,14 +8,21 @@ import { SSHKeyData } from './use-ssh-key-query';
 
 type SSHKeyProps = { sshKey: SSHKeyData } & Pick<
 	ManageSSHKeyProps,
-	'onDelete' | 'keyBeingDeleted'
+	'userLogin' | 'onDelete' | 'keyBeingDeleted'
 >;
 
 const SSHKeyItemCard = styled( CompactCard )( {
 	display: 'flex',
 	alignItems: 'center',
 } );
 
+const SSHKeyName = styled.span( {
+	display: 'block',
+	fontWeight: 'bold',
+	overflow: 'hidden',
+	textOverflow: 'ellipsis',
+} );
+
 const SSHPublicKey = styled.code( {
 	flex: 1,
 	position: 'relative',
@@ -31,7 +38,7 @@ const SSHKeyAddedDate = styled.span( {
 	color: 'var( --color-text-subtle )',
 } );
 
-const SSHKey = ( { sshKey, onDelete, keyBeingDeleted }: SSHKeyProps ) => {
+const SSHKey = ( { userLogin, sshKey, onDelete, keyBeingDeleted }: SSHKeyProps ) => {
 	const { __ } = useI18n();
 	const handleDeleteClick = () => {
 		accept(
@@ -49,6 +56,9 @@ const SSHKey = ( { sshKey, onDelete, keyBeingDeleted }: SSHKeyProps ) => {
 	return (
 		<SSHKeyItemCard>
 			<div style={ { marginRight: '1rem' } }>
+				<SSHKeyName>
+					{ userLogin }-{ sshKey.name }
+				</SSHKeyName>
 				<SSHPublicKey>{ sshKey.sha256 }</SSHPublicKey>
 				<SSHKeyAddedDate>
 					{ sprintf(
@@ -80,14 +90,21 @@ interface ManageSSHKeyProps {
 	sshKeys: SSHKeyData[];
 	onDelete( name: string ): void;
 	keyBeingDeleted: string | null;
+	userLogin: string;
 }
 
-export const ManageSSHKeys = ( { sshKeys, onDelete, keyBeingDeleted }: ManageSSHKeyProps ) => {
+export const ManageSSHKeys = ( {
+	userLogin,
+	sshKeys,
+	onDelete,
+	keyBeingDeleted,
+}: ManageSSHKeyProps ) => {
 	return (
 		<>
 			{ sshKeys.map( ( sshKey ) => (
 				<SSHKey
 					key={ sshKey.key }
+					userLogin={ userLogin }
 					sshKey={ sshKey }
 					onDelete={ onDelete }
 					keyBeingDeleted={ keyBeingDeleted }

diff --git a/client/me/security-ssh-key/security-ssh-key.tsx b/client/me/security-ssh-key/security-ssh-key.tsx
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import DocumentHead from 'calypso/components/data/document-head';
 import FormattedHeader from 'calypso/components/formatted-header';
 import HeaderCake from 'calypso/components/header-cake';
@@ -14,6 +14,7 @@ import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import twoStepAuthorization from 'calypso/lib/two-step-authorization';
 import ReauthRequired from 'calypso/me/reauth-required';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { getCurrentUser } from 'calypso/state/current-user/selectors';
 import { errorNotice, removeNotice, successNotice } from 'calypso/state/notices/actions';
 import { AddSSHKeyForm } from './add-ssh-key-form';
 import { ManageSSHKeys } from './manage-ssh-keys';
@@ -46,6 +47,7 @@ const sshKeySaveFailureNoticeId = 'ssh-key-save-failure';
 export const SecuritySSHKey = () => {
 	const { data, isLoading } = useSSHKeyQuery();
 	const dispatch = useDispatch();
+	const currentUser = useSelector( getCurrentUser );
 	const { __ } = useI18n();
 
 	const { addSSHKey, isLoading: isAdding } = useAddSSHKeyMutation( {
@@ -153,8 +155,9 @@ export const SecuritySSHKey = () => {
 					/>
 				) : null }
 			</CompactCard>
-			{ hasKeys && (
+			{ hasKeys && currentUser?.username && (
 				<ManageSSHKeys
+					userLogin={ currentUser.username }
 					sshKeys={ data }
 					onDelete={ ( sshKeyName ) => deleteSSHKey( { sshKeyName } ) }
 					keyBeingDeleted={ keyBeingDeleted }

diff --git a/client/my-sites/hosting/sftp-card/ssh-key-card.tsx b/client/my-sites/hosting/sftp-card/ssh-key-card.tsx
@@ -18,7 +18,9 @@ function SshKeyCard( { deleteText, siteId, sshKey }: SshKeyCardProps ) {
 	return (
 		<Card className="ssh-keys-card">
 			<div className="ssh-keys-card__info">
-				<span className="ssh-keys-card__name">{ user_login }</span>
+				<span className="ssh-keys-card__name">
+					{ user_login }-{ name }
+				</span>
 				<code className="ssh-keys-card__fingerprint">{ sha256 }</code>
 				<span className="ssh-keys-card__date">
 					{ sprintf(

diff --git a/client/my-sites/hosting/sftp-card/ssh-keys.tsx b/client/my-sites/hosting/sftp-card/ssh-keys.tsx
@@ -70,7 +70,7 @@ function SshKeys( { siteId, username, disabled }: SshKeysProps ) {
 					>
 						{ userKeys?.map( ( key ) => (
 							<option value={ key.name } key={ key.sha256 }>
-								{ key.name }
+								{ username }-{ key.name }
 							</option>
 						) ) }
 					</FormSelect>