Update AppSelectControl when only one account is available

[joemcgill]

Related to of #2509

To provide a consistent user experience in all places where a user might be selecting a Google account to connect from a list of existing accounts, we'll update AppSelectControl that is used in both MerchantCenterSelectControl and AdsAccountSelectControl so that any time there is only one account to select from, that account will immediately shown and the select/dropdown UI will be hidden.

Screenshot:

Acceptance Criteria

• When either MerchantCenterSelectControl or AdsAccountSelectControl components are rendered with only one account, no dropdown icon is shown and the account is automatically selected.
• When either MerchantCenterSelectControl or AdsAccountSelectControl components are rendered with more than one account, the current SelectControl behavior is retained (i.e., users can select the account from a dropdown, and if a value is already set, that value will be selected).

Implementation Brief

Per this suggestion, The current AppSelectControl component should be updated to be able to show a simplified UI whenever there is only one account to connect. The simplified UI should be controllable by a new selectSingleValue prop that defaults to false.

The MerchantCenterSelectControl and AdsAccountSelectControl components will both be updated to pass selectSingleValue:true.

The AdsAccountSelectControl is currently located in /js/src/components/google-ads-account-card/connect-ads/ads-account-select-control.js, as part of the GoogleAdsAccountCard component. Since this will be reused, it should be moved to js/src/components to be consistent with the location of the MerchantCenterSelectControl.

A nice to have would be to make these two controls consistent in that if no accounts are passed to the AdsAccountSelectControl component, then it will make use of the useExistingGoogleAdsAccounts() hook to automatically populate the dropdown, similar to the way MerchantCenterSelectControl handles this here, as this consistency should make reusing this control in the new GoogleComboAccountsCard component easier to implement.

Test Coverage

• Existing Jest tests for either component should be updated to pass if needed.

Definition Questions

Is there a reason that the logic between MerchantCenterSelectControl and AdsAccountSelectControl is not consistent? For example, the MC version handles fetching the existing MC accounts, sorting and setting the initial value (ref) while the Ads version requires the account fetching logic to happen by the consuming component.

• Answered here

[joemcgill]

@eason9487 and @asvinb I've stubbed this out as a follow up to #2592. Would appreciate your thoughts.

[eason9487]

Is there a reason that the logic between MerchantCenterSelectControl and AdsAccountSelectControl is not consistent?

They were more consistent in their initial implementation. I don't recall any particular reason for this. They should have just been changed individually as per the later requirements. See:

• Add blurb to inform users to connect Google Ads child account and not a parent MCC account #1359
• Preselect first existing merchant account during onboarding #1850

[asvinb]

@joemcgill I made a few updates to the PR. Can you kindly take a look please?
Thanks!

[mikkamp]

Closing this as completed since it was part of the 2.9 release.