Application passwords: small UI improvements. (#97260)

* Application passwords: small UI improvements. * Update tests * Fix margin-top of first form field.
Automattic · Dec 10, 2024 · 6bb1e7a · 6bb1e7a
1 parent 5dc7b06
commit 6bb1e7a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/...internals/steps-repository/site-migration-credentials/components/access-method-picker.tsx b/...internals/steps-repository/site-migration-credentials/components/access-method-picker.tsx
@@ -1,4 +1,7 @@
+import { isEnabled } from '@automattic/calypso-config';
 import { FormLabel } from '@automattic/components';
+import { useLocale } from '@automattic/i18n-utils';
+import { hasTranslation } from '@wordpress/i18n';
 import { useTranslate } from 'i18n-calypso';
 import { FC } from 'react';
 import { Controller } from 'react-hook-form';
@@ -7,6 +10,16 @@ import { CredentialsFormFieldProps } from '../types';
 
 export const AccessMethodPicker: FC< CredentialsFormFieldProps > = ( { control } ) => {
 	const translate = useTranslate();
+	const locale = useLocale();
+
+	const applicationPasswordEnabled = isEnabled( 'automated-migration/application-password' );
+	const hasLabelTranslation =
+		locale.startsWith( 'en' ) || hasTranslation( 'WordPress site credentials' );
+
+	const credentialsLabel =
+		applicationPasswordEnabled && hasLabelTranslation
+			? translate( 'WordPress site credentials' )
+			: translate( 'WordPress credentials' );
 
 	return (
 		<div>
@@ -20,7 +33,7 @@ export const AccessMethodPicker: FC< CredentialsFormFieldProps > = ( { control }
 						<FormRadio
 							id="site-migration-credentials__radio-credentials"
 							htmlFor="site-migration-credentials__radio-credentials"
-							label={ translate( 'WordPress credentials' ) }
+							label={ credentialsLabel }
 							checked={ value === 'credentials' }
 							{ ...props }
 							value="credentials"

diff --git a/...per/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx b/...per/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx
@@ -51,7 +51,10 @@ const siteAddressInput = () =>
 const usernameInput = () => getByLabelText( 'WordPress admin username' );
 const passwordInput = () => getByLabelText( 'Password' );
 const backupOption = () => getByRole( 'radio', { name: 'Backup file' } );
-const credentialsOption = () => getByRole( 'radio', { name: 'WordPress credentials' } );
+const credentialsOption = () =>
+	isEnabled( 'automated-migration/application-password' )
+		? getByRole( 'radio', { name: 'WordPress site credentials' } )
+		: getByRole( 'radio', { name: 'WordPress credentials' } );
 const backupFileInput = () => getByLabelText( 'Backup file location' );
 //TODO: it requires a testid because there is no accessible name, it is an issue with the component
 const specialInstructionsInput = () => getByTestId( 'special-instructions-textarea' );

diff --git a/...eclarative-flow/internals/steps-repository/site-migration-fallback-credentials/style.scss b/...eclarative-flow/internals/steps-repository/site-migration-fallback-credentials/style.scss
@@ -1,7 +1,7 @@
 @import "@wordpress/base-styles/breakpoints";
 $blueberry-color: #3858e9;
 
-.site-migration-credentials {
+.site-migration-fallback-credentials {
 	#site-migration-credentials-header {
 		.formatted-header__subtitle {
 			text-align: center;
@@ -31,6 +31,9 @@ $blueberry-color: #3858e9;
 			margin-bottom: 16px;
 		}
 
+		max-width: 400px;
+		margin: auto;
+
 		hr {
 			margin-top: 1em;
 			background: var(--color-border-subtle);
@@ -52,8 +55,8 @@ $blueberry-color: #3858e9;
 			margin-top: 1em;
 			flex: 1;
 		}
-		.site-migration-credentials__form-field--notes {
-			margin-top: 5px;
+		.site-migration-credentials__form-field:nth-of-type(1) {
+			margin-top: 0;
 		}
 
 		.site-migration-credentials__form-note {