2593: Update AppSelectControl to single select

js/src/components/ads-account-select-control/index.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import AppSelectControl from '.~/components/app-select-control';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+
+/**
+ * @param {Object} props The component props
+ * @return {JSX.Element} An enhanced AppSelectControl component.
+ */
+const AdsAccountSelectControl = ( props ) => {
+	const { existingAccounts: accounts = [] } = useExistingGoogleAdsAccounts();
+
+	const options = accounts.map( ( acc ) => ( {
+		value: acc.id,
+		label: `${ acc.name } (${ acc.id })`,
+	} ) );
+
+	return (
+		<AppSelectControl
+			options={ options }
+			autoSelectFirstOption
+			{ ...props }
+		/>
+	);
+};
+
+export default AdsAccountSelectControl;

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

@@ -2,7 +2,9 @@
  * External dependencies
  */
 import { SelectControl } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
 import classNames from 'classnames';
+import { noop } from 'lodash';
 
 /**
  * Internal dependencies
@@ -12,18 +14,72 @@
 /**
  * Renders a `@wordpress/components`'s `SelectControl` with margin-bottom removed.
  *
- * If you provide `className` via props,
- * 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 {Array} props.options Array of options for the select dropdown. Each option should be an object containing `label` and `value` properties.
+ * @param {string} [props.className] Additional classname to further control the style of the component.
+ * @param {Function} [props.onChange=noop] Callback function triggered when the selected value changes. Receives the new value as an argument.
+ * @param {string} [props.value] The selected value. If no value is defined, the first option is selected and `onChange` is triggered when `autoSelectFirstOption` is true.
+ * @param {boolean} [props.autoSelectFirstOption=false] If true, automatically triggers the onChange callback with the first option as value when no value is provided. If only one option is available, the select is also disabled to prevent user interaction.
+ * @param {*} [props.rest] Additional props passed to the `SelectControl` component.
  */
 const AppSelectControl = ( props ) => {
-	const { className, ...rest } = props;
+	const {
+		options,
+		className,
+		onChange = noop,
+		value,
+		autoSelectFirstOption = false,
+		...rest
+	} = props;
+
+	// Maintain refs to prevent rerender
+	const onChangeRef = useRef();
+	const valueRef = useRef();
+	const autoSelectFirstOptionRef = useRef();
+	const optionsRef = useRef();
+
+	// Update refs if any of the dependencies change
+	useEffect( () => {
+		onChangeRef.current = onChange;
+		valueRef.current = value;
+		autoSelectFirstOptionRef.current = autoSelectFirstOption;
+		optionsRef.current = options;
+	}, [ onChange, value, autoSelectFirstOption, options ] );
+
+	useEffect( () => {
+		if (
+			autoSelectFirstOptionRef.current &&
+			optionsRef.current?.length > 0 &&
+			valueRef.current === undefined
+		) {
+			onChangeRef.current( optionsRef.current[ 0 ].value );
+		}
+	}, [] );
+
+	let selectProps = {
+		options,
+		value,
+		onChange,
+		...rest,
+	};
+
+	const hasSingleValueStyle = autoSelectFirstOption && options?.length === 1;
+	if ( hasSingleValueStyle ) {
+		selectProps = {
+			...selectProps,
+			suffix: ' ',
+			tabIndex: '-1',
+			readOnly: true,
+		};
+	}
 
 	return (
-		<div className={ classNames( 'app-select-control', className ) }>
-			<SelectControl { ...rest } />
+		<div
+			className={ classNames( 'app-select-control', className, {
+				'app-select-control--has-single-value': hasSingleValueStyle,
+			} ) }
+		>
+			<SelectControl { ...selectProps } />
 		</div>
 	);
 };

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

@@ -3,3 +3,7 @@
 		margin-bottom: 0;
 	}
 }
+
+.app-select-control--has-single-value {
+	pointer-events: none;
+}

js/src/components/google-ads-account-card/connect-ads/index.js

@@ -19,7 +19,7 @@ import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
-import AdsAccountSelectControl from './ads-account-select-control';
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
 import { useAppDispatch } from '.~/data';
 import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import './index.scss';
@@ -95,7 +95,7 @@ const ConnectAds = ( props ) => {
 			<Section.Card.Body>
 				<Subsection.Title>
 					{ __(
-						'Select an existing account',
+						'Connect to an existing account',
 						'google-listings-and-ads'
 					) }
 				</Subsection.Title>
@@ -120,7 +120,6 @@ const ConnectAds = ( props ) => {
 				) }
 				<ContentButtonLayout>
 					<AdsAccountSelectControl
-						accounts={ accounts }
 						value={ value }
 						onChange={ setValue }
 					/>

js/src/components/google-ads-account-card/connect-ads/index.test.js

@@ -15,6 +15,7 @@ import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import { useAppDispatch } from '.~/data';
 import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import expectComponentToRecordEventWithFilteredProperties from '.~/tests/expectComponentToRecordEventWithFilteredProperties';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 
 jest.mock( '.~/hooks/useApiFetchCallback', () =>
 	jest.fn().mockName( 'useApiFetchCallback' )
@@ -24,6 +25,10 @@ jest.mock( '.~/hooks/useGoogleAdsAccount', () =>
 	jest.fn().mockName( 'useGoogleAdsAccount' )
 );
 
+jest.mock( '.~/hooks/useExistingGoogleAdsAccounts', () =>
+	jest.fn().mockName( 'useExistingGoogleAdsAccounts' )
+);
+
 jest.mock( '.~/data', () => ( {
 	...jest.requireActual( '.~/data' ),
 	useAppDispatch: jest.fn(),
@@ -64,6 +69,10 @@ describe( 'ConnectAds', () => {
 				.mockName( 'refetchGoogleAdsAccount' ),
 		} );
 
+		useExistingGoogleAdsAccounts.mockReturnValue( {
+			existingAccounts: accounts,
+		} );
+
 		fetchGoogleAdsAccountStatus = jest
 			.fn()
 			.mockName( 'fetchGoogleAdsAccountStatus' );
@@ -76,11 +85,7 @@ describe( 'ConnectAds', () => {
 
 	it( 'should render the given accounts in a selection', () => {
 		render( <ConnectAds accounts={ accounts } /> );
-
 		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
-		expect(
-			screen.getByRole( 'option', { name: 'Select one' } )
-		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'option', { name: 'Account A (1)' } )
 		).toBeInTheDocument();
@@ -115,22 +120,15 @@ describe( 'ConnectAds', () => {
 		expect( onCreateNew ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should disable the "Connect" button when no account is selected', async () => {
-		const user = userEvent.setup();
+	it( 'should disable the "Connect" button when there are no accounts', async () => {
+		useExistingGoogleAdsAccounts.mockReturnValue( {
+			existingAccounts: [],
+		} );
 
-		render( <ConnectAds accounts={ accounts } /> );
-		const combobox = screen.getByRole( 'combobox' );
+		render( <ConnectAds accounts={ [] } /> );
 		const button = getConnectButton();
 
 		expect( button ).toBeDisabled();
-
-		await user.selectOptions( combobox, '1' );
-
-		expect( button ).toBeEnabled();
-
-		await user.selectOptions( combobox, '' );
-
-		expect( button ).toBeDisabled();
 	} );
 
 	it( 'should render a connecting state and disable the button to switch to account creation after clicking the "Connect" button', async () => {

js/src/components/google-mc-account-card/connect-mc/index.js

@@ -98,7 +98,7 @@ const ConnectMC = () => {
 			<Section.Card.Body>
 				<Subsection.Title>
 					{ __(
-						'Select an existing account',
+						'Connect to an existing account',
 						'google-listings-and-ads'
 					) }
 				</Subsection.Title>

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,15 +11,9 @@ import AppSelectControl from '.~/components/app-select-control';
 
 /**
  * @param {Object} props The component props
- * @param {string} [props.value] The selected value. IF no value is defined, then the first option is selected and onChange function is triggered.
- * @param {Function} [props.onChange] Callback when the select value changes.
  * @return {JSX.Element} An enhanced AppSelectControl component.
  */
-const MerchantCenterSelectControl = ( {
-	value,
-	onChange = () => {},
-	...props
-} ) => {
+const MerchantCenterSelectControl = ( props ) => {
 	const { data: existingAccounts = [] } = useExistingGoogleMCAccounts();
 	const options = existingAccounts.map( ( acc ) => {
 		return {
@@ -38,18 +31,10 @@ const MerchantCenterSelectControl = ( {
 		return a.label.localeCompare( b.label );
 	} );
 
-	useEffect( () => {
-		// Triggers the onChange event in order to pre-select the initial value
-		if ( value === undefined ) {
-			onChange( options[ 0 ]?.value );
-		}
-	}, [ options, onChange, value ] );
-
 	return (
 		<AppSelectControl
 			options={ options }
-			onChange={ onChange }
-			value={ value }
+			autoSelectFirstOption
 			{ ...props }
 		/>
 	);

tests/e2e/specs/add-paid-campaigns/add-paid-campaigns.test.js

@@ -246,18 +246,10 @@ test.describe( 'Set up Ads account', () => {
 		test( 'Select one existing account', async () => {
 			const adsAccountSelected = `${ ADS_ACCOUNTS[ 1 ].id }`;
 
-			await expect(
-				setupAdsAccounts.getConnectAdsButton()
-			).toBeDisabled();
-
 			await setupAdsAccounts.selectAnExistingAdsAccount(
 				adsAccountSelected
 			);
 
-			await expect(
-				setupAdsAccounts.getConnectAdsButton()
-			).toBeEnabled();
-
 			//Intercept Ads connection request
 			const connectAdsAccountRequest =
 				setupAdsAccounts.registerConnectAdsAccountRequests(