Remove redundant type badges in navigation link control (#24885)

WordPress · Sep 1, 2020 · a14796e · a14796e
1 parent dda3a9c
commit a14796e
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -81,6 +81,7 @@ const LinkControlSearchInput = forwardRef(
 				withCreateSuggestion,
 				currentInputValue: value,
 				createSuggestionButtonText,
+				suggestionsQuery,
 				handleSuggestionClick: ( suggestion ) => {
 					if ( props.handleSuggestionClick ) {
 						props.handleSuggestionClick( suggestion );

diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
@@ -18,6 +18,7 @@ export const LinkControlSearchItem = ( {
 	onClick,
 	isURL = false,
 	searchTerm = '',
+	shouldShowType = false,
 } ) => {
 	return (
 		<Button
@@ -54,7 +55,7 @@ export const LinkControlSearchItem = ( {
 					{ isURL && __( 'Press ENTER to add this link' ) }
 				</span>
 			</span>
-			{ suggestion.type && (
+			{ shouldShowType && suggestion.type && (
 				<span className="block-editor-link-control__search-item-type">
 					{ /* Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label. */ }
 					{ suggestion.type === 'post_tag' ? 'tag' : suggestion.type }

diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js
@@ -29,6 +29,7 @@ export default function LinkControlSearchResults( {
 	isLoading,
 	isInitialSuggestions,
 	createSuggestionButtonText,
+	suggestionsQuery,
 } ) {
 	const resultsListClasses = classnames(
 		'block-editor-link-control__search-results',
@@ -45,6 +46,8 @@ export default function LinkControlSearchResults( {
 		withCreateSuggestion &&
 		! isSingleDirectEntryResult &&
 		! isInitialSuggestions;
+	// If the query has a specified type, then we can skip showing them in the result. See #24839.
+	const shouldShowSuggestionsTypes = ! suggestionsQuery?.type;
 
 	// According to guidelines aria-label should be added if the label
 	// itself is not visible.
@@ -128,6 +131,7 @@ export default function LinkControlSearchResults( {
 								suggestion.type.toLowerCase()
 							) }
 							searchTerm={ currentInputValue }
+							shouldShowType={ shouldShowSuggestionsTypes }
 						/>
 					);
 				} ) }

diff --git a/packages/block-editor/src/components/link-control/test/fixtures/index.js b/packages/block-editor/src/components/link-control/test/fixtures/index.js
@@ -7,29 +7,29 @@ export const fauxEntitySuggestions = [
 	{
 		id: uniqueId(),
 		title: 'Hello Page',
-		type: 'Page',
+		type: 'page',
 		info: '2 days ago',
 		url: `?p=${ uniqueId() }`,
 	},
 	{
 		id: uniqueId(),
 		title: 'Hello Post',
-		type: 'Post',
+		type: 'post',
 		info: '19 days ago',
 		url: `?p=${ uniqueId() }`,
 	},
 	{
 		id: uniqueId(),
 		title: 'Hello Another One',
-		type: 'Page',
+		type: 'page',
 		info: '19 days ago',
 		url: `?p=${ uniqueId() }`,
 	},
 	{
 		id: uniqueId(),
 		title:
 			'This is another Post with a much longer title just to be really annoying and to try and break the UI',
-		type: 'Post',
+		type: 'post',
 		info: '1 month ago',
 		url: `?p=${ uniqueId() }`,
 	},

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
@@ -3,6 +3,7 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
+import { queryByText, queryByRole } from '@testing-library/react';
 import { first, last, nth, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
@@ -1217,10 +1218,9 @@ describe( 'Selecting links', () => {
 		expect( currentLinkHTML ).toEqual(
 			expect.stringContaining( selectedLink.title )
 		);
-		expect( currentLinkHTML ).toEqual(
-			expect.stringContaining( selectedLink.type )
-		);
-		expect( currentLinkHTML ).toEqual( expect.stringContaining( 'Edit' ) );
+		expect(
+			queryByRole( currentLink, 'button', { name: 'Edit' } )
+		).toBeTruthy();
 		expect( currentLinkAnchor ).not.toBeNull();
 	} );
 
@@ -1686,3 +1686,70 @@ describe( 'Addition Settings UI', () => {
 		expect( settingControlsInputs[ 1 ].checked ).toEqual( true );
 	} );
 } );
+
+describe( 'Post types', () => {
+	it( 'should display post type in search results of link', async () => {
+		const searchTerm = 'Hello world';
+
+		act( () => {
+			render( <LinkControl />, container );
+		} );
+
+		// Search Input UI
+		const searchInput = getURLInput();
+
+		// Simulate searching for a term
+		act( () => {
+			Simulate.change( searchInput, { target: { value: searchTerm } } );
+		} );
+
+		// fetchFauxEntitySuggestions resolves on next "tick" of event loop
+		await eventLoopTick();
+
+		const searchResultElements = getSearchResults();
+
+		searchResultElements.forEach( ( resultItem, index ) => {
+			expect(
+				queryByText( resultItem, fauxEntitySuggestions[ index ].type )
+			).toBeTruthy();
+		} );
+	} );
+
+	it.each( [ 'page', 'post', 'tag', 'post_tag', 'category' ] )(
+		'should NOT display post type in search results of %s',
+		async ( postType ) => {
+			const searchTerm = 'Hello world';
+
+			act( () => {
+				render(
+					<LinkControl suggestionsQuery={ { type: postType } } />,
+					container
+				);
+			} );
+
+			// Search Input UI
+			const searchInput = getURLInput();
+
+			// Simulate searching for a term
+			act( () => {
+				Simulate.change( searchInput, {
+					target: { value: searchTerm },
+				} );
+			} );
+
+			// fetchFauxEntitySuggestions resolves on next "tick" of event loop
+			await eventLoopTick();
+
+			const searchResultElements = getSearchResults();
+
+			searchResultElements.forEach( ( resultItem, index ) => {
+				expect(
+					queryByText(
+						resultItem,
+						fauxEntitySuggestions[ index ].type
+					)
+				).toBeFalsy();
+			} );
+		}
+	);
+} );