b7f8e039ea56db6f5ed5516a8af8c38a1f274509

Committed 26 Nov 2024 02:43PM UTC coverage: 54.162% (-0.004%) from 54.166%

Build # b7f8e039ea56db6f5ed5516a8af8c38a1f274509

Build Type

Pull #21863

github

Committed by

web-flow

Commit Message

Merge edefefe6e into 589303aed

Pull Request Pull Request #21863: Make score endpoints work in plain permalinks

Run Details

7593 of 13672 branches covered (55.54%)

Branch coverage included in aggregate %.

0 of 10 new or added lines in 2 files covered. (0.0%)

4 existing lines in 1 file now uncovered.

29764 of 55301 relevant lines covered (53.82%)

41501.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/js/src/dashboard/scores/components/term-filter.js

import { useCallback, useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { AutocompleteField, Spinner } from "@yoast/ui-library";
import { useFetch } from "../../fetch/use-fetch";

/**
 * @type {import("../index").Taxonomy} Taxonomy
 * @type {import("../index").Term} Term
 */

/**
 * @param {string|URL} endpoint The URL to fetch from.
 * @param {string} query The query.
 * @returns {URL} The URL to query for the terms.
 */
const createQueryUrl = ( endpoint, query ) => {
        const url = new URL( endpoint );

        url.searchParams.set( "search", query );
        url.searchParams.set( "_fields", [ "id", "name" ] );

        return url;
};

/**
 * @param {{id: number, name: string}} term The term from the response.
 * @returns {Term} The transformed term for internal usage.
 */
const transformTerm = ( term ) => ( { name: String( term.id ), label: term.name } );

/**
 * Renders either a list of terms or a message that nothing was found.
 * @param {Term[]} terms The terms.
 * @returns {JSX.Element} The element.
 */
const Content = ( { terms } ) => terms.length === 0
        ? (
                <div className="yst-autocomplete__option">
                        { __( "Nothing found", "wordpress-seo" ) }
                </div>
        )
        : terms.map( ( { name, label } ) => (
                <AutocompleteField.Option key={ name } value={ name }>
                        { label }
                </AutocompleteField.Option>
        ) )
;

/**
 * @param {string} idSuffix The suffix for the ID.
 * @param {Taxonomy} taxonomy The taxonomy.
 * @param {Term?} selected The selected term.
 * @param {function(Term?)} onChange The callback. Expects it changes the `selected` prop.
 * @returns {JSX.Element} The element.
 */
export const TermFilter = ( { idSuffix, taxonomy, selected, onChange } ) => {
        const [ query, setQuery ] = useState( "" );
        const { data: terms = [], error, isPending } = useFetch( {
                dependencies: [ taxonomy.links.search, query ],
                url: createQueryUrl( taxonomy.links.search, query ),
                options: {
                        headers: {
                                "Content-Type": "application/json",
                        },
                },
                prepareData: ( result ) => result.map( transformTerm ),
        } );

        const handleChange = useCallback( ( value ) => {
                if ( value === null ) {
                        // User indicated they want to clear the selection.
                        setQuery( "" );
                }
                onChange( terms.find( ( { name } ) => name === value ) );
        }, [ terms ] );

        const handleQueryChange = useCallback( ( event ) => {
                setQuery( event?.target?.value?.trim()?.toLowerCase() || "" );
        }, [] );

        return (
                <AutocompleteField
                        id={ `term--${ idSuffix }` }
                        label={ taxonomy.label }
                        value={ selected?.name || "" }
                        selectedLabel={ selected?.label || query }
                        onChange={ handleChange }
                        onQueryChange={ handleQueryChange }
                        placeholder={ __( "All", "wordpress-seo" ) }
                        nullable={ true }
                        validation={ error && {
                                variant: "error",
                                message: __( "Something went wrong.", "wordpress-seo" ),
                        } }
                >
                        { isPending && (
                                <div className="yst-autocomplete__option">
                                        <Spinner />
                                </div>
                        ) }
                        { ! isPending && <Content terms={ terms } /> }
                </AutocompleteField>
        );
};

1	import { useCallback, useState } from "@wordpress/element";
2	import { __ } from "@wordpress/i18n";
3	import { AutocompleteField, Spinner } from "@yoast/ui-library";
4	import { useFetch } from "../../fetch/use-fetch";
5
6	/**
7	* @type {import("../index").Taxonomy} Taxonomy
8	* @type {import("../index").Term} Term
9	*/
10
11	/**
12	* @param {string\|URL} endpoint The URL to fetch from.
13	* @param {string} query The query.
14	* @returns {URL} The URL to query for the terms.
15	*/
NEW 16	const createQueryUrl = ( endpoint, query ) => {	×
NEW 17	const url = new URL( endpoint );	×
18
NEW 19	url.searchParams.set( "search", query );	×
NEW 20	url.searchParams.set( "_fields", [ "id", "name" ] );	×
21
NEW 22	return url;	×
23	};
24
25	/**
26	* @param {{id: number, name: string}} term The term from the response.
27	* @returns {Term} The transformed term for internal usage.
28	*/
29	const transformTerm = ( term ) => ( { name: String( term.id ), label: term.name } );	×
30
31	/**
32	* Renders either a list of terms or a message that nothing was found.
33	* @param {Term[]} terms The terms.
34	* @returns {JSX.Element} The element.
35	*/
36	const Content = ( { terms } ) => terms.length === 0	×
37	? (
38	<div className="yst-autocomplete__option">
39	{ __( "Nothing found", "wordpress-seo" ) }
40	</div>
41	)
42	: terms.map( ( { name, label } ) => (
43	<AutocompleteField.Option key={ name } value={ name }>	×
44	{ label }
45	</AutocompleteField.Option>
46	) )
47	;
48
49	/**
50	* @param {string} idSuffix The suffix for the ID.
51	* @param {Taxonomy} taxonomy The taxonomy.
52	* @param {Term?} selected The selected term.
53	* @param {function(Term?)} onChange The callback. Expects it changes the `selected` prop.
54	* @returns {JSX.Element} The element.
55	*/
56	export const TermFilter = ( { idSuffix, taxonomy, selected, onChange } ) => {	×
57	const [ query, setQuery ] = useState( "" );	×
58	const { data: terms = [], error, isPending } = useFetch( {	×
59	dependencies: [ taxonomy.links.search, query ],
60	url: createQueryUrl( taxonomy.links.search, query ),
61	options: {
62	headers: {
63	"Content-Type": "application/json",
64	},
65	},
66	prepareData: ( result ) => result.map( transformTerm ),	×
67	} );
68
69	const handleChange = useCallback( ( value ) => {	×
70	if ( value === null ) {	×
71	// User indicated they want to clear the selection.
72	setQuery( "" );	×
73	}
74	onChange( terms.find( ( { name } ) => name === value ) );	×
75	}, [ terms ] );
76
77	const handleQueryChange = useCallback( ( event ) => {	×
78	setQuery( event?.target?.value?.trim()?.toLowerCase() \|\| "" );	×
79	}, [] );
80
81	return (	×
82	<AutocompleteField
83	id={ `term--${ idSuffix }` }
84	label={ taxonomy.label }
85	value={ selected?.name \|\| "" }	×
86	selectedLabel={ selected?.label \|\| query }	×
87	onChange={ handleChange }
88	onQueryChange={ handleQueryChange }
89	placeholder={ __( "All", "wordpress-seo" ) }
90	nullable={ true }
91	validation={ error && {	×
92	variant: "error",
93	message: __( "Something went wrong.", "wordpress-seo" ),
94	} }
95	>
96	{ isPending && (	×
97	<div className="yst-autocomplete__option">
98	<Spinner />
99	</div>
100	) }
101	{ ! isPending && <Content terms={ terms } /> }	×
102	</AutocompleteField>
103	);
104	};

Yoast / wordpress-seo / b7f8e039ea56db6f5ed5516a8af8c38a1f274509

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous