Add search context to Help Center when stuck on migration (#103472)

Author: escapemanuele

client/sites/components/sites-dashboard-banners/use-migration-pending-sites-banner.tsx

@@ -20,7 +20,7 @@ export function useMigrationPendingSitesBanner( { sitesStatuses }: { sitesStatus
 	const { setShowHelpCenter } = useDataStoreDispatch( HELP_CENTER_STORE );
 
 	const openHelpCenter = useCallback( () => {
-		setShowHelpCenter( true );
+		setShowHelpCenter( true, false, { contextTerm: 'migration' } );
 	}, [ setShowHelpCenter ] );
 
 	return {

packages/data-stores/src/help-center/actions.ts

@@ -93,6 +93,12 @@ export const setMessage = ( message: string ) =>
 		message,
 	} ) as const;
 
+export const setContextTerm = ( contextTerm: string ) =>
+	( {
+		type: 'HELP_CENTER_SET_CONTEXT_TERM',
+		contextTerm,
+	} ) as const;
+
 export const setAllowPremiumSupport = ( allow: boolean ) =>
 	( {
 		type: 'HELP_CENTER_SET_ALLOW_PREMIUM_SUPPORT',
@@ -107,7 +113,7 @@ export const setHelpCenterOptions = ( options: HelpCenterOptions ) => ( {
 export const setShowHelpCenter = function* (
 	show: boolean,
 	allowPremiumSupport = false,
-	options: HelpCenterShowOptions = { hideBackButton: false, searchTerm: '' }
+	options: HelpCenterShowOptions = { hideBackButton: false, contextTerm: '' }
 ): Generator< unknown, { type: 'HELP_CENTER_SET_SHOW'; show: boolean }, unknown > {
 	const isMinimized = ( select( STORE_KEY ) as HelpCenterSelect ).getIsMinimized();
 
@@ -148,7 +154,7 @@ export const setShowHelpCenter = function* (
 		yield setShowMessagingWidget( false );
 	}
 
-	yield setMessage( options?.searchTerm || '' );
+	yield setContextTerm( options?.contextTerm || '' );
 	yield setIsMinimized( false );
 
 	if ( allowPremiumSupport ) {
@@ -229,6 +235,7 @@ export type HelpCenterAction =
 			| typeof setSubject
 			| typeof resetStore
 			| typeof setMessage
+			| typeof setContextTerm
 			| typeof setUserDeclaredSite
 			| typeof setUserDeclaredSiteUrl
 			| typeof setUnreadCount

packages/data-stores/src/help-center/reducer.ts

@@ -161,6 +161,13 @@ const allowPremiumSupport: Reducer< boolean, HelpCenterAction > = ( state = fals
 	return state;
 };
 
+const contextTerm: Reducer< string | undefined, HelpCenterAction > = ( state, action ) => {
+	if ( action.type === 'HELP_CENTER_SET_CONTEXT_TERM' ) {
+		return action.contextTerm;
+	}
+	return state;
+};
+
 const helpCenterOptions: Reducer< HelpCenterOptions, HelpCenterAction > = (
 	state = {},
 	action
@@ -190,6 +197,7 @@ const reducer = combineReducers( {
 	odieInitialPromptText,
 	odieBotNameSlug,
 	allowPremiumSupport,
+	contextTerm,
 	helpCenterOptions,
 } );
 

packages/data-stores/src/help-center/selectors.ts

@@ -20,3 +20,4 @@ export const getCurrentSupportInteraction = ( state: State ) => state.currentSup
 export const getAllowPremiumSupport = ( state: State ) => state.allowPremiumSupport;
 export const getHelpCenterOptions = ( state: State ) => state.helpCenterOptions;
 export const getOdieChatId = ( state: State ) => state.odieChatId;
+export const getContextTerm = ( state: State ) => state.contextTerm;

packages/data-stores/src/help-center/types.ts

@@ -11,7 +11,7 @@ export type Location = {
 };
 export interface HelpCenterShowOptions {
 	hideBackButton: boolean;
-	searchTerm: string;
+	contextTerm: string;
 }
 export interface SiteLogo {
 	id: number;

packages/help-center/src/components/help-center-search-results.tsx

@@ -12,7 +12,7 @@ import {
 import { localizeUrl, useLocale } from '@automattic/i18n-utils';
 import { speak } from '@wordpress/a11y';
 import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import {
@@ -35,7 +35,7 @@ import { HELP_CENTER_STORE } from '../stores';
 import HelpCenterRecentConversations from './help-center-recent-conversations';
 import PlaceholderLines from './placeholder-lines';
 import type { SearchResult } from '../types';
-
+import type { HelpCenterSelect } from '@automattic/data-stores';
 import './help-center-search-results.scss';
 
 const MAX_VISIBLE_RESULTS = 5;
@@ -202,6 +202,10 @@ function HelpSearchResults( {
 }: HelpSearchResultsProps ) {
 	const { hasPurchases, sectionName, site } = useHelpCenterContext();
 	const { setNavigateToRoute } = useDispatch( HELP_CENTER_STORE );
+	const contextTerm = useSelect(
+		( select ) => ( select( HELP_CENTER_STORE ) as HelpCenterSelect ).getContextTerm(),
+		[]
+	);
 
 	const adminResults = useAdminResults( searchQuery );
 
@@ -222,7 +226,7 @@ function HelpSearchResults( {
 	const { contextSearch } = useContextBasedSearchMapping( currentRoute );
 
 	const { data: searchData, isLoading: isSearching } = useHelpSearchQuery(
-		searchQuery || contextSearch, // If there's a query, we don't context search
+		searchQuery || contextTerm || contextSearch, // If there's a query, we don't context search
 		locale,
 		currentRoute
 	);

packages/help-center/src/components/help-center-search.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-imports */
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { NewThirdPartyCookiesNotice } from '@automattic/odie-client';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
@@ -14,7 +14,6 @@ import { SearchResult } from '../types';
 import { HelpCenterLaunchpad } from './help-center-launchpad';
 import { HelpCenterMoreResources } from './help-center-more-resources';
 import HelpCenterSearchResults from './help-center-search-results';
-import type { HelpCenterSelect } from '@automattic/data-stores';
 import './help-center-search.scss';
 import './help-center-launchpad.scss';
 
@@ -28,14 +27,8 @@ export const HelpCenterSearch = ( { onSearchChange, currentRoute }: HelpCenterSe
 	const { search } = useLocation();
 	const params = new URLSearchParams( search );
 	const { sectionName, site, canConnectToZendesk } = useHelpCenterContext();
-	const { searchTerm } = useSelect( ( select ) => {
-		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
-		return {
-			searchTerm: helpCenterSelect.getMessage(),
-		};
-	}, [] );
 	const query = params.get( 'query' );
-	const [ searchQuery, setSearchQuery ] = useState( query || searchTerm || '' );
+	const [ searchQuery, setSearchQuery ] = useState( query || '' );
 	const { setSubject, setMessage } = useDispatch( HELP_CENTER_STORE );
 
 	// when the user sets the search query, let's also populate the email subject and body