Merge pull request #15990 from Yoast/P3-144-adjust-multiselect

Use SingleSelect
Yoast · Sep 4, 2020 · 314c309 · 314c309
2 parents c6c51b1 + b0801b8
commit 314c309
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 58 deletions.
diff --git a/css/src/modal.css b/css/src/modal.css
@@ -572,6 +572,13 @@
 	position: relative;
 }
 
+ #yoast-semrush-country-selector {
+	 position: relative;
+	 border: none;
+	 padding: 0;
+	 margin: 0 0 24px 0;
+ }
+
 .yoast-related-keyphrases-modal__chart {
 	display: block;
 }
diff --git a/js/src/components/modals/SEMrushCountrySelector.js b/js/src/components/modals/SEMrushCountrySelector.js
@@ -6,29 +6,14 @@ import { addQueryArgs } from "@wordpress/url";
 import { __ } from "@wordpress/i18n";
 
 /* Yoast dependencies */
-import { ErrorBoundary, FieldGroup } from "@yoast/components";
+import { ErrorBoundary, SingleSelect } from "@yoast/components";
 
 /**
  * The ID of the SEMrush Country Selection component.
  *
  * @type {string} id The ID of the component.
  */
-const id = "semrush-country-selector";
-
-/**
- * Renders a HTML option based on a name and value.
- *
- * @param {string} name  The name of the option.
- * @param {string} value The value of the option.
- *
- * @returns {React.Component} An HTML option.
- */
-const Option = ( { name, value } ) => <option key={ value } value={ value }>{ name }</option>;
-
-Option.propTypes = {
-	name: PropTypes.string.isRequired,
-	value: PropTypes.string.isRequired,
-};
+const id = "yoast-semrush-country-selector";
 
 /**
  * List of all available database countries for the SEMrush API.
@@ -167,15 +152,10 @@ class SEMrushCountrySelector extends Component {
 	 * @returns {void}
 	 */
 	constructor( props ) {
-		// Make sure that both jQuery and select2 are defined on the global window.
-		if ( typeof window.jQuery().select2 === "undefined" ) {
-			throw new Error( "No Select2 found." );
-		}
-
 		super( props );
 
-		this.onChangeHandler = this.onChangeHandler.bind( this );
 		this.relatedKeyphrasesRequest = this.relatedKeyphrasesRequest.bind( this );
+		this.onChangeHandler = this.onChangeHandler.bind( this );
 	}
 
 	/**
@@ -184,31 +164,12 @@ class SEMrushCountrySelector extends Component {
 	 * @returns {void}
 	 */
 	componentDidMount() {
-		this.select2 = jQuery( `#${ id }` );
-		this.select2.select2( {
-			theme: "default yoast-select2--inline",
-			dropdownCssClass: "yoast-select__dropdown",
-			dropdownParent: jQuery( ".yoast-related-keyphrases-modal__content" ),
-		} );
-		this.select2.on( "change.select2", this.onChangeHandler );
-
 		//	Fire a new request when the modal is first opened
 		if ( ! this.props.response ) {
 			this.relatedKeyphrasesRequest();
 		}
 	}
 
-	/**
-	 * Handler for the onChange event.
-	 *
-	 * @returns {void}
-	 */
-	onChangeHandler() {
-		const selection = this.select2.select2( "data" ).map( option => option.id )[ 0 ];
-
-		this.props.setCountry( selection );
-	}
-
 	/**
 	 * Stores the country code via a REST API call.
 	 *
@@ -281,7 +242,7 @@ class SEMrushCountrySelector extends Component {
 	handleFailedResponse( response ) {
 		const { setRequestLimitReached, setRequestFailed } = this.props;
 
-		if ( "error" in response === false ) {
+		if ( ! ( "error" in response ) ) {
 			return;
 		}
 
@@ -315,32 +276,41 @@ class SEMrushCountrySelector extends Component {
 		} );
 	}
 
+	/**
+	 * Save the selected value in the store.
+	 *
+	 * @param {string} selected The user selection.
+	 *
+	 * @returns {void}
+	 */
+	onChangeHandler( selected ) {
+		this.props.setCountry( selected );
+	}
+
 	/**
 	 * Renders the SEMrush Country Selector.
 	 *
 	 * @returns {wp.Element} The SEMrush Country Selector.
 	 */
 	render() {
 		return (
-			<FieldGroup
-				htmlFor={ id }
-				label={ __( "Show results for:", "wordpress-seo" ) }
-				wrapperClassName="yoast-field-group"
-			>
-				<select
-					id={ id }
+			<div id={ id }>
+				<SingleSelect
+					id={ id + "-select" }
+					label={ __( "Show results for:", "wordpress-seo" ) }
 					name="semrush-country-code"
-					defaultValue={ this.props.countryCode }
-				>
-					{ countries.map( Option ) }
-				</select>
+					options={ countries }
+					selected={ this.props.countryCode }
+					onChange={ this.onChangeHandler }
+				/>
 				<button
+					id={ id + "-button" }
 					className="yoast-button yoast-button--secondary"
 					onClick={ this.relatedKeyphrasesRequest }
 				>
 					{ __( "Change Country", "wordpress-seo" ) }
 				</button>
-			</FieldGroup>
+			</div>
 		);
 	}
 }

diff --git a/js/tests/components/SEMrushCountrySelector.test.js b/js/tests/components/SEMrushCountrySelector.test.js
@@ -22,12 +22,15 @@ describe( "SEMrushCountrySelector", () => {
 
 		expect( onClickMock ).toHaveBeenCalled();
 	} );
-	it( "validates the amount of options loaded within the select", () => {
+	it( "successfully calls the associated setCountry function when the selected option has changed", () => {
+		const setCountryMock = jest.fn();
 		const component = shallow( <SEMrushCountrySelector
-			setCountry={ noop } newRequest={ noop } setNoResultsFoundnewRequest={ noop }
+			setCountry={ setCountryMock } newRequest={ noop } setNoResultsFoundnewRequest={ noop }
 			setRequestSucceeded={ noop } setRequestLimitReached={ noop } setRequestFailed={ noop } setNoResultsFound={ noop }
 		/> );
 
-		expect( component.find( "select" ).getElement().props.children.length ).toEqual( 117 );
+		component.find( "#yoast-semrush-country-selector-select" ).simulate( "change" );
+
+		expect( setCountryMock ).toHaveBeenCalled();
 	} );
 } );