a7886492b145fdf70261f7ca2cb0fbcb3562b15b

Committed 25 Nov 2024 01:47PM UTC coverage: 54.184% (-0.03%) from 54.215%

Build # a7886492b145fdf70261f7ca2cb0fbcb3562b15b

Build Type

Pull #21852

github

Committed by

web-flow

Commit Message

Merge b930e736a into 16577a01e

Pull Request Pull Request #21852: 339 dashboard use request to get the actual scores

Run Details

7593 of 13670 branches covered (55.54%)

Branch coverage included in aggregate %.

0 of 77 new or added lines in 15 files covered. (0.0%)

989 existing lines in 3 files now uncovered.

29764 of 55275 relevant lines covered (53.85%)

41521.03 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 ) => new URL( "?" + new URLSearchParams( {
        search: query,
        _fields: [ "id", "name" ],
} ), endpoint );

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

Yoast / wordpress-seo / a7886492b145fdf70261f7ca2cb0fbcb3562b15b

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