Consolidate accounts onboarding: Automatically preselect a Google Ads account when there is only one, as well as adjust the UI presentation

js/src/components/app-select-control/index.js

@@ -16,14 +16,29 @@
  * it will be added to the container div's `className`,
  * so that you can further control its style.
  *
- * @param {*} props
+ * @param {*} props The component props.
+ * @param {boolean} [props.selectSingleValue=false] Whether the select should show only one value.
  */
 const AppSelectControl = ( props ) => {
-	const { className, ...rest } = props;
+	const { className, options, selectSingleValue, ...rest } = props;
+	const showSingleValue = selectSingleValue && options?.length === 1;
+
+	const selectProps = showSingleValue
+		? {
+				suffix: ' ',
+				tabIndex: '-1',
+				style: {
+					pointerEvents: 'none',
+				},
+				readOnly: true,
+				options,
+				...rest,
+		  }
+		: { options, ...rest };
 
 	return (
 		<div className={ classNames( 'app-select-control', className ) }>
-			<SelectControl { ...rest } />
+			<SelectControl { ...selectProps } />
 		</div>
 	);
 };

js/src/components/google-ads-account-card/connect-ads/ads-account-select-control.js

@@ -27,7 +27,13 @@ const AdsAccountSelectControl = ( props ) => {
 		} ) ),
 	];
 
-	return <AppSelectControl options={ options } { ...rest } />;
+	return (
+		<AppSelectControl
+			selecSingleValue={ true }
+			options={ options }
+			{ ...rest }
+		/>
+	);
 };
 
 export default AdsAccountSelectControl;

js/src/components/merchant-center-select-control/index.js

@@ -48,6 +48,7 @@ const MerchantCenterSelectControl = ( {
 	return (
 		<AppSelectControl
 			options={ options }
+			selectSingleValue={ true }
 			onChange={ onChange }
 			value={ value }
 			{ ...props }