Merge pull request #9076 from google/fix/8837-publication-select-layout

Fix: Add publication ID in publicationSelect component.

assets/js/modules/reader-revenue-manager/components/common/PublicationSelect.js

@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
 
 /**
@@ -130,7 +130,13 @@ export default function PublicationSelect( props ) {
 				( { publicationId, displayName } ) => (
 					// eslint-disable-next-line sitekit/acronym-case
 					<Option key={ publicationId } value={ publicationId }>
-						{ displayName }
+						{ sprintf(
+							/* translators: 1: Publication display name, 2: Publication ID */
+							__( '%1$s (%2$s)', 'google-site-kit' ),
+							displayName,
+							// eslint-disable-next-line sitekit/acronym-case
+							publicationId
+						) }
 					</Option>
 				)
 			) }

assets/js/modules/reader-revenue-manager/components/common/PublicationSelect.test.js

@@ -85,6 +85,11 @@ describe( 'PublicationSelect', () => {
 				// eslint-disable-next-line sitekit/acronym-case
 				publications[ index ].publicationId
 			);
+
+			expect( listItem.textContent ).toEqual(
+				// eslint-disable-next-line sitekit/acronym-case
+				`${ publications[ index ].displayName } (${ publications[ index ].publicationId })`
+			);
 		} );
 	} );
 

assets/js/modules/reader-revenue-manager/components/setup/SetupMain.js

@@ -45,8 +45,10 @@ export default function SetupMain() {
 
 			<div>
 				<p>
-					This is just added as a placeholder component to assist with
-					testing.
+					{ __(
+						'Select your preferred publication to connect with Site Kit',
+						'google-site-kit'
+					) }
 				</p>
 				<PublicationSelect />
 			</div>

assets/js/modules/reader-revenue-manager/components/setup/SetupMain.test.js

@@ -70,7 +70,7 @@ describe( 'SetupMain', () => {
 		// TODO: Adjust the tests once #8800 is implemented.
 		expect(
 			getByText(
-				/This is just added as a placeholder component to assist with testing./i
+				/Select your preferred publication to connect with Site Kit/i
 			)
 		).toBeInTheDocument();
 	} );