Update/tracking fix inserter menu no results issue (#41168)

* tracking: track Inserter Menu search using Slot

* tracking: remove picker-search handler

* tracking: register track inserter menu plugin

* tracking: track no-results with a temp hacky fix

* tracking: add a 7.8.1 fallback

* tracking: fix checking plugin version bug

* tracking: debug plugin version

* tracking: update deendencies in Inserter Menu

* Update apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js

Co-Authored-By: Dave Smith <[email protected]>

* tracking: fix typo

Co-authored-by: Dave Smith <[email protected]>

apps/wpcom-block-editor/src/wpcom/editor.js

@@ -1,7 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+/**
+ * WordPress dependencies
+ */
+
+import { registerPlugin } from '@wordpress/plugins';
+
+/* eslint-enable import/no-extraneous-dependencies */
+
 /**
  * Internal dependencies
  */
 import './features/deprecate-coblocks-buttons';
 import './features/fix-block-invalidation-errors';
 import './features/reorder-block-categories';
 import './features/tracking';
+
+import InserterMenuTrackingEvent from './features/tracking/wpcom-navigation-menu-search-handler';
+
+registerPlugin( 'track-inserter-menu-events', {
+	render() {
+		return <InserterMenuTrackingEvent />;
+	},
+} );

apps/wpcom-block-editor/src/wpcom/features/tracking/delegate-event-tracking.js

@@ -6,7 +6,6 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import wpcomBlockPickerSearchTerm from './wpcom-block-picker-search-term-handler';
 import wpcomBlockEditorCloseClick from './wpcom-block-editor-close-click';
 import wpcomInserterInlineSearchTerm from './wpcom-inserter-inline-search-term';
 
@@ -19,11 +18,7 @@ const debug = debugFactory( 'wpcom-block-editor:tracking' );
  *
  * @type {Array}
  */
-const EVENTS_MAPPING = [
-	wpcomBlockEditorCloseClick(),
-	wpcomBlockPickerSearchTerm(),
-	wpcomInserterInlineSearchTerm(),
-];
+const EVENTS_MAPPING = [ wpcomBlockEditorCloseClick(), wpcomInserterInlineSearchTerm() ];
 
 /**
  * Checks the event for a selector which matches

apps/wpcom-block-editor/src/wpcom/features/tracking/wpcom-navigation-menu-search-handler.js

@@ -0,0 +1,121 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+import debugFactory from 'debug';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { __experimentalInserterMenuExtension as InserterMenuExtension } from '@wordpress/block-editor';
+
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import tracksRecordEvent from './track-record-event';
+
+// let's remove this line once the core version updates.
+const debug = debugFactory( 'wpcom-block-editor:tracking:inserter-menu' );
+
+const InserterMenuTrackingEvent = function() {
+	const [ searchTerm, setSearchTerm ] = useState( '' );
+	const { selectedBlock } = useSelect( select => ( {
+		selectedBlock: select( 'core/block-editor' ).getSelectedBlock(),
+	} ) );
+
+	const pluginVersion = window.wpcomGutenberg ? window.wpcomGutenberg.pluginVersion : null;
+
+	const debouncedSetFilterValue = debounce( ( search_term, has_items ) => {
+		setSearchTerm( search_term );
+
+		if ( search_term.length < 3 ) {
+			return;
+		}
+
+		const eventProperties = {
+			search_term,
+			context: 'inserter_menu',
+			selected_block: selectedBlock ? selectedBlock.name : null,
+		};
+
+		tracksRecordEvent( 'wpcom_block_picker_search_term', eventProperties );
+
+		/*
+		 * Let's delegate registering no-results search event
+		 * to the temporary solution below if the core version
+		 * is equal to 7.8.1.
+		 */
+		if ( pluginVersion && pluginVersion === '7.8.1' ) {
+			return null;
+		}
+
+		// let's remove this line once the core version updates.
+		debug( '%o: tracking with Slot parameter', pluginVersion );
+
+		if ( has_items ) {
+			return;
+		}
+
+		tracksRecordEvent( 'wpcom_block_picker_no_results', eventProperties );
+	}, 500 );
+
+	/*
+	 * Hacky temporal solution to detect no-results search result.
+	 * Unfortunately, __experimentalInserterMenuExtension has a bug
+	 * in the 7.8.1 core version.
+	 * The `hasItems` property is always true so it isn't possible
+	 * to rely on this value.
+	 *
+	 * @TODO: The following is a temporary solution and it should be removed
+	 *   and replaced by the usage of the `hasItems` property,
+	 *   once a new version of core is available in dotcom.
+	 */
+	useEffect( () => {
+		// Skip whether isn't the 7.8.1 version.
+		if ( pluginVersion && pluginVersion !== '7.8.1' ) {
+			return;
+		}
+		// let's remove this line once the core version updates.
+		debug( '%o: tracking inspecting DOM tree', pluginVersion );
+
+		if ( ! searchTerm || searchTerm.length < 3 ) {
+			return;
+		}
+
+		const eventProperties = {
+			search_term: searchTerm,
+			context: 'inserter_menu',
+			selected_block: selectedBlock ? selectedBlock.name : null,
+		};
+
+		const hasResultsEl = document.querySelectorAll( '.block-editor-inserter__results' );
+		const hasNoResultsEl =
+			document.querySelectorAll( '.block-editor-inserter__no-results' ).length !== 0;
+
+		if (
+			hasNoResultsEl ||
+			( hasResultsEl && hasResultsEl[ 0 ] && hasResultsEl[ 0 ].children.length === 0 )
+		) {
+			tracksRecordEvent( 'wpcom_block_picker_no_results', eventProperties );
+		}
+	}, [ searchTerm, pluginVersion, selectedBlock ] );
+
+	return (
+		<InserterMenuExtension>
+			{ ( { filterValue, hasItems } ) => {
+				if ( searchTerm !== filterValue ) {
+					debouncedSetFilterValue( filterValue, hasItems );
+				}
+
+				return null;
+			} }
+		</InserterMenuExtension>
+	);
+};
+
+export default InserterMenuTrackingEvent;