From 3e260aa41d3c50684efac9728bdbba918658d131 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 2 Oct 2023 14:24:12 +0300 Subject: [PATCH] Default suggested links to pages (#54622) * limit initial suggestions to pages * Revert "limit initial suggestions to pages" This reverts commit bedbd1f154e4bcc3a74b61b9ff88e6a46ee64965. * adds a special search options key that can override the search options for initial suggestions on link UI * Add test coverage for initial suggestions and fix bug * Rename var for consistency * Add e2e test coverage specifically for Nav block --------- Co-authored-by: Dave Smith --- .../src/navigation-link/link-ui.js | 10 ++- .../__experimental-fetch-link-suggestions.js | 15 +++- .../__experimental-fetch-link-suggestions.js | 81 +++++++++++++++---- .../blocks/navigation-list-view.spec.js | 31 ++++++- 4 files changed, 117 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js index 3a7b7d28f9e800..3c3d91e7b0a052 100644 --- a/packages/block-library/src/navigation-link/link-ui.js +++ b/packages/block-library/src/navigation-link/link-ui.js @@ -44,7 +44,15 @@ export function getSuggestionsQuery( type, kind ) { if ( kind === 'post-type' ) { return { type: 'post', subtype: type }; } - return {}; + return { + // for custom link which has no type + // always show pages as initial suggestions + initialSuggestionsSearchOptions: { + type: 'post', + subtype: 'page', + perPage: 20, + }, + }; } } diff --git a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js index bb1bf41d9e2cda..3bba760b20c459 100644 --- a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js +++ b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js @@ -85,17 +85,28 @@ const fetchLinkSuggestions = async ( ) => { const { isInitialSuggestions = false, + initialSuggestionsSearchOptions = undefined, + } = searchOptions; + + const { disablePostFormats = false } = settings; + + let { type = undefined, subtype = undefined, page = undefined, perPage = isInitialSuggestions ? 3 : 20, } = searchOptions; - const { disablePostFormats = false } = settings; - /** @type {Promise[]} */ const queries = []; + if ( isInitialSuggestions && initialSuggestionsSearchOptions ) { + type = initialSuggestionsSearchOptions.type || type; + subtype = initialSuggestionsSearchOptions.subtype || subtype; + page = initialSuggestionsSearchOptions.page || page; + perPage = initialSuggestionsSearchOptions.perPage || perPage; + } + if ( ! type || type === 'post' ) { queries.push( apiFetch( { diff --git a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js index 23e889344c0e45..d283226cca0909 100644 --- a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js +++ b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js @@ -231,22 +231,73 @@ describe( 'fetchLinkSuggestions', () => { ] ) ); } ); - it( 'initial search suggestions limits results', () => { - return fetchLinkSuggestions( '', { - type: 'post', - subtype: 'page', - isInitialSuggestions: true, - } ).then( ( suggestions ) => - expect( suggestions ).toEqual( [ - { - id: 11, - title: 'Limit Case', - url: 'http://wordpress.local/limit-case/', - type: 'page', - kind: 'post-type', + describe( 'Initial search suggestions', () => { + it( 'initial search suggestions limits results', () => { + return fetchLinkSuggestions( '', { + type: 'post', + subtype: 'page', + isInitialSuggestions: true, + } ).then( ( suggestions ) => + expect( suggestions ).toEqual( [ + { + id: 11, + title: 'Limit Case', + url: 'http://wordpress.local/limit-case/', + type: 'page', + kind: 'post-type', + }, + ] ) + ); + } ); + + it( 'should allow custom search options for initial suggestions', () => { + return fetchLinkSuggestions( '', { + type: 'term', + subtype: 'category', + page: 11, + isInitialSuggestions: true, + initialSuggestionsSearchOptions: { + type: 'post', + subtype: 'page', + perPage: 20, + page: 11, }, - ] ) - ); + } ).then( ( suggestions ) => + expect( suggestions ).toEqual( [ + { + id: 22, + title: 'Page Case', + url: 'http://wordpress.local/page-case/', + type: 'page', + kind: 'post-type', + }, + ] ) + ); + } ); + + it( 'should default any missing initial search options to those from the main search options', () => { + return fetchLinkSuggestions( '', { + type: 'post', + subtype: 'page', + page: 11, + perPage: 20, + isInitialSuggestions: true, + initialSuggestionsSearchOptions: { + // intentionally missing. + // expected to default to those from the main search options. + }, + } ).then( ( suggestions ) => + expect( suggestions ).toEqual( [ + { + id: 22, + title: 'Page Case', + url: 'http://wordpress.local/page-case/', + type: 'page', + kind: 'post-type', + }, + ] ) + ); + } ); } ); it( 'allows searching from a page', () => { return fetchLinkSuggestions( '', { diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js index 6490fbee97f1f3..fd7113fe170959 100644 --- a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js @@ -195,8 +195,8 @@ test.describe( 'Navigation block - List view editing', () => { await expect( blockResultOptions.nth( 1 ) ).toHaveText( 'Custom Link' ); // Select the Page Link option. - const pageLinkResult = blockResultOptions.nth( 0 ); - await pageLinkResult.click(); + const customLinkResult = blockResultOptions.nth( 1 ); + await customLinkResult.click(); // Expect to see the Link creation UI be focused. const linkUIInput = linkControl.getSearchInput(); @@ -209,7 +209,26 @@ test.describe( 'Navigation block - List view editing', () => { await expect( linkUIInput ).toBeFocused(); await expect( linkUIInput ).toBeEmpty(); + // Provides test coverage for feature whereby Custom Link type + // should default to `Pages` when displaying the "initial suggestions" + // in the Link UI. + // See https://github.com/WordPress/gutenberg/pull/54622. const firstResult = await linkControl.getNthSearchResult( 0 ); + const secondResult = await linkControl.getNthSearchResult( 1 ); + const thirdResult = await linkControl.getNthSearchResult( 2 ); + + const firstResultType = + await linkControl.getSearchResultType( firstResult ); + + const secondResultType = + await linkControl.getSearchResultType( secondResult ); + + const thirdResultType = + await linkControl.getSearchResultType( thirdResult ); + + expect( firstResultType ).toBe( 'Page' ); + expect( secondResultType ).toBe( 'Page' ); + expect( thirdResultType ).toBe( 'Page' ); // Grab the text from the first result so we can check (later on) that it was inserted. const firstResultText = @@ -573,4 +592,12 @@ class LinkControl { .locator( '.components-menu-item__item' ) // this is the only way to get the label text without the URL. .innerText(); } + + async getSearchResultType( result ) { + await expect( result ).toBeVisible(); + + return result + .locator( '.components-menu-item__shortcut' ) // this is the only way to get the type text. + .innerText(); + } }