Dashboard v2: Add the ability to configure sftp and ssh (#103783)

* Dashboard v2: Add sftp/ssh data and queries

* Dashboard v2: Add EnableSftpCard

* Dashboard v2: Add SftpCard

* Dashboard v2: Add SshCard

* Dashboard v2: Display sftp callout

* Make it work

* Dashboard v2: Implement ClipboardInputControl

* Add label to trash icon and use isBusy instead of disabled

* Fix types

* Update EnableSftpCard stypes

* Update SftpCard stypes

* Update SshCard styles

* Move permission check to site-features

* Address feedback

* Show snackbar when the value is copied

* Update density of the summary button

* Display error notices

* Use DataForm on SftpCard

* Use DataForm on SshCard

* Translate SFTP/SSH

* Use RequiredSelect

* Remove VStack inside PageLayout

* Move ClipboardInputControl to dashboard/components

* Add sucess notice when enabling/disabling ssh access

* Use lowercase for label

* Use SectionHeader

* Fix copy

* Change the size of SshKeyCard to small

* Handle empty user ssh keys

* Handle reauthorization_required

* Show confirm dialog for resetting password

* Fix types

* Use wpcom.req.post for delete method

* Fix the default value of the ssh_key

* Fix lint

* Fix notice

Author: arthur791004

.eslintrc.js

@@ -503,6 +503,7 @@ module.exports = {
 				'@wordpress/date': [ '__experimentalGetSettings' ],
 				'@wordpress/edit-post': [ '__experimentalMainDashboardButton' ],
 				'@wordpress/components': [
+					'__experimentalConfirmDialog',
 					'__experimentalDivider',
 					'__experimentalHStack',
 					'__experimentalVStack',

client/dashboard/app/queries.ts

@@ -40,6 +40,16 @@ import {
 	resetSite,
 	fetchSiteResetStatus,
 	launchSite,
+	fetchSftpUsers,
+	createSftpUser,
+	resetSftpPassword,
+	fetchSshAccessStatus,
+	enableSshAccess,
+	disableSshAccess,
+	fetchSiteSshKeys,
+	fetchProfileSshKeys,
+	attachSiteSshKey,
+	detachSiteSshKey,
 } from '../data';
 import { SITE_FIELDS, SITE_OPTIONS } from '../data/constants';
 import { queryClient } from './query-client';
@@ -51,6 +61,9 @@ import type {
 	DefensiveModeSettings,
 	DefensiveModeSettingsUpdate,
 	SiteTransferConfirmation,
+	SshAccessStatus,
+	SftpUser,
+	SiteSshKey,
 } from '../data/types';
 import type { Query } from '@tanstack/react-query';
 
@@ -182,6 +195,19 @@ export function profileMutation() {
 	};
 }
 
+export function profileSshKeysQuery() {
+	return {
+		queryKey: [ 'profile', 'ssh-keys' ],
+		queryFn: () => {
+			return fetchProfileSshKeys();
+		},
+		retry: false, // Don't retry on 401 errors
+		meta: {
+			persist: false,
+		},
+	};
+}
+
 export function siteSettingsQuery( siteId: string ) {
 	return {
 		queryKey: [ 'site-settings', siteId ],
@@ -409,3 +435,107 @@ export function launchSiteMutation( siteIdOrSlug: string ) {
 		},
 	};
 }
+
+export function siteSftpUsersQuery( siteId: string ) {
+	return {
+		queryKey: [ 'site', siteId, 'sftp-users' ],
+		queryFn: () => {
+			return fetchSftpUsers( siteId );
+		},
+		meta: {
+			persist: false,
+		},
+	};
+}
+
+const updateCurrentSftpUsers = ( currentSftpUsers: SftpUser[], sftpUser: SftpUser ) => {
+	const index = currentSftpUsers.findIndex(
+		( currentSftpUser ) => currentSftpUser.username === sftpUser.username
+	);
+	if ( index >= 0 ) {
+		return [ ...currentSftpUsers.slice( 0, index ), sftpUser, ...currentSftpUsers.slice( 0 + 1 ) ];
+	}
+
+	return [ ...currentSftpUsers, sftpUser ];
+};
+
+export function siteSftpUsersCreateMutation( siteId: string ) {
+	return {
+		mutationFn: () => createSftpUser( siteId ),
+		onSuccess: ( createdSftpUser: SftpUser ) => {
+			queryClient.setQueryData(
+				[ 'site', siteId, 'sftp-users' ],
+				( currentSftpUsers: SftpUser[] ) =>
+					updateCurrentSftpUsers( currentSftpUsers, createdSftpUser )
+			);
+		},
+	};
+}
+
+export function siteSftpUsersResetPasswordMutation( siteId: string ) {
+	return {
+		mutationFn: ( sshUsername: string ) => resetSftpPassword( siteId, sshUsername ),
+		onSuccess: ( updatedSftpUser: SftpUser ) => {
+			queryClient.setQueryData(
+				[ 'site', siteId, 'sftp-users' ],
+				( currentSftpUsers: SftpUser[] ) =>
+					updateCurrentSftpUsers( currentSftpUsers, updatedSftpUser )
+			);
+		},
+	};
+}
+
+export function siteSshAccessStatusQuery( siteId: string ) {
+	return {
+		queryKey: [ 'site', siteId, 'ssh-access' ],
+		queryFn: () => {
+			return fetchSshAccessStatus( siteId );
+		},
+	};
+}
+
+export function siteSshAccessEnableMutation( siteId: string ) {
+	return {
+		mutationFn: () => enableSshAccess( siteId ),
+		onSuccess: ( data: SshAccessStatus ) => {
+			queryClient.setQueryData( [ 'site', siteId, 'ssh-access' ], data );
+		},
+	};
+}
+
+export function siteSshAccessDisableMutation( siteId: string ) {
+	return {
+		mutationFn: () => disableSshAccess( siteId ),
+		onSuccess: ( data: SshAccessStatus ) => {
+			queryClient.setQueryData( [ 'site', siteId, 'ssh-access' ], data );
+		},
+	};
+}
+
+export function siteSshKeysQuery( siteId: string ) {
+	return {
+		queryKey: [ 'site', siteId, 'ssh-keys' ],
+		queryFn: () => {
+			return fetchSiteSshKeys( siteId );
+		},
+	};
+}
+
+export function siteSshKeysAttachMutation( siteId: string ) {
+	return {
+		mutationFn: ( name: string ) => attachSiteSshKey( siteId, name ),
+		onSuccess: () => {
+			queryClient.invalidateQueries( { queryKey: [ 'site', siteId, 'ssh-keys' ] } );
+		},
+	};
+}
+
+export function siteSshKeysDetachMutation( siteId: string ) {
+	return {
+		mutationFn: ( siteSshKey: SiteSshKey ) =>
+			detachSiteSshKey( siteId, siteSshKey.user_login, siteSshKey.name ),
+		onSuccess: () => {
+			queryClient.invalidateQueries( { queryKey: [ 'site', siteId, 'ssh-keys' ] } );
+		},
+	};
+}

client/dashboard/app/router.tsx

@@ -14,6 +14,8 @@ import {
 	canGetPrimaryDataCenter,
 	canSetStaticFile404Handling,
 	canUpdateCaching,
+	canUseSftp,
+	canUseSsh,
 } from '../utils/site-features';
 import NotFound from './404';
 import UnknownError from './500';
@@ -33,6 +35,8 @@ import {
 	siteEdgeCacheStatusQuery,
 	siteDefensiveModeQuery,
 	agencyBlogQuery,
+	siteSftpUsersQuery,
+	siteSshAccessStatusQuery,
 } from './queries';
 import { queryClient } from './query-client';
 import Root from './root';
@@ -315,6 +319,24 @@ const siteSettingsDefensiveModeRoute = createRoute( {
 	)
 );
 
+const siteSettingsSftpSshRoute = createRoute( {
+	getParentRoute: () => siteRoute,
+	path: 'settings/sftp-ssh',
+	loader: async ( { params: { siteSlug } } ) => {
+		const site = await queryClient.ensureQueryData( siteQuery( siteSlug ) );
+		return Promise.all( [
+			canUseSftp( site ) && queryClient.ensureQueryData( siteSftpUsersQuery( siteSlug ) ),
+			canUseSsh( site ) && queryClient.ensureQueryData( siteSshAccessStatusQuery( siteSlug ) ),
+		] );
+	},
+} ).lazy( () =>
+	import( '../sites/settings-sftp-ssh' ).then( ( d ) =>
+		createLazyRoute( 'site-settings-sftp-ssh' )( {
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
+		} )
+	)
+);
+
 const siteSettingsTransferSiteRoute = createRoute( {
 	getParentRoute: () => siteRoute,
 	path: 'settings/transfer-site',
@@ -501,6 +523,7 @@ const createRouteTree = ( config: AppConfig ) => {
 				siteSettingsCachingRoute,
 				siteSettingsDefensiveModeRoute,
 				siteSettingsTransferSiteRoute,
+				siteSettingsSftpSshRoute,
 			] )
 		);
 	}

client/dashboard/components/clipboard-input-control/index.tsx

@@ -0,0 +1,59 @@
+import {
+	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
+	__experimentalInputControl as InputControl,
+	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	Button,
+} from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import { copySmall } from '@wordpress/icons';
+import React, { useState, useEffect } from 'react';
+
+export default function ClipboardInputControl( {
+	onCopy,
+	...props
+}: Omit< React.ComponentProps< typeof InputControl >, 'onCopy' > & {
+	onCopy?: ( label?: React.ReactNode ) => void;
+} ) {
+	const [ isCopied, setCopied ] = useState( false );
+
+	const handleCopy = () => {
+		if ( props.value ) {
+			navigator.clipboard.writeText( props.value );
+			setCopied( true );
+			onCopy?.( props.label );
+		}
+	};
+
+	// toggle the `isCopied` flag back to `false` after 4 seconds
+	useEffect( () => {
+		if ( isCopied ) {
+			const timerId = window.setTimeout( () => setCopied( false ), 4000 );
+			return () => window.clearTimeout( timerId );
+		}
+	}, [ isCopied ] );
+
+	return (
+		<InputControl
+			{ ...props }
+			suffix={
+				<InputControlSuffixWrapper variant="control">
+					<Button
+						size="small"
+						icon={ copySmall }
+						label={
+							isCopied
+								? __( 'Copied' )
+								: sprintf(
+										/* translators: %s is the field to copy */
+										__( 'Copy %s' ),
+										props.label
+								  )
+						}
+						onClick={ handleCopy }
+					/>
+				</InputControlSuffixWrapper>
+			}
+		/>
+	);
+}

client/dashboard/data/constants.ts

@@ -3,6 +3,8 @@ export enum DotcomFeatures {
 	COPY_SITE = 'copy-site',
 	LEGACY_CONTACT = 'legacy-contact',
 	LOCKED_MODE = 'locked-mode',
+	SFTP = 'sftp',
+	SSH = 'ssh',
 }
 
 export const SITE_FIELDS = [