From 0095d4e8047648999c9987236e83aae345a3a357 Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel.bachhuber@automattic.com>
Date: Wed, 19 Oct 2022 06:33:20 -0700
Subject: [PATCH] WPCOM SSH: Use `<username>-<key-name>` consistently in UI
 (#69220)

---
 .../me/security-ssh-key/manage-ssh-keys.tsx   | 23 ++++++++++++++++---
 .../me/security-ssh-key/security-ssh-key.tsx  |  7 ++++--
 .../hosting/sftp-card/ssh-key-card.tsx        |  4 +++-
 .../my-sites/hosting/sftp-card/ssh-keys.tsx   |  2 +-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/client/me/security-ssh-key/manage-ssh-keys.tsx b/client/me/security-ssh-key/manage-ssh-keys.tsx
index 8b194d2957eb1..25dfb4bb09820 100644
--- a/client/me/security-ssh-key/manage-ssh-keys.tsx
+++ b/client/me/security-ssh-key/manage-ssh-keys.tsx
@@ -8,7 +8,7 @@ import { SSHKeyData } from './use-ssh-key-query';
 
 type SSHKeyProps = { sshKey: SSHKeyData } & Pick<
 	ManageSSHKeyProps,
-	'onDelete' | 'keyBeingDeleted'
+	'userLogin' | 'onDelete' | 'keyBeingDeleted'
 >;
 
 const SSHKeyItemCard = styled( CompactCard )( {
@@ -16,6 +16,13 @@ const SSHKeyItemCard = styled( CompactCard )( {
 	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
index c75682aaadfa4..17f50f2e5fc23 100644
--- 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
index 66e5f9a4c9d96..92998e470ff39 100644
--- 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
index 92aceb84e7fe9..31cc933fd5b29 100644
--- 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>