Jetpack AI: Only display "turn list into table" menu item for top lev…

…el lists (#40177) * Jetpack AI: Only display "turn list into table" menu item for top level lists * changelog * Adding clientId prop to AiAssistantToolbarDropdownContentProps * Last fix for the js tests thinking getBlockParents doesn't exist (even though the code works?)
Automattic · Nov 15, 2024 · 4053cca · 4053cca
1 parent cd03f86
commit 4053cca
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 17 deletions.
diff --git a/projects/plugins/jetpack/changelog/change-jetpack-ai-list-to-table-top-level-only b/projects/plugins/jetpack/changelog/change-jetpack-ai-list-to-table-top-level-only
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack AI: Only display "turn list into table" menu item for top level lists
diff --git a/...ensions/blocks/ai-assistant/components/ai-assistant-toolbar-dropdown/dropdown-content.tsx b/...ensions/blocks/ai-assistant/components/ai-assistant-toolbar-dropdown/dropdown-content.tsx
@@ -3,6 +3,7 @@
  */
 import { aiAssistantIcon } from '@automattic/jetpack-ai-client';
 import { MenuItem, MenuGroup, Notice } from '@wordpress/components';
+import { select } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { post, postContent, postExcerpt, termDescription, blockTable } from '@wordpress/icons';
 import React from 'react';
@@ -160,6 +161,7 @@ if ( getFeatureAvailability( 'ai-list-to-table-transform' ) ) {
 		options: {
 			userPrompt: 'make a table from this list, do not enclose the response in a code block',
 			alwaysTransformToAIAssistant: true,
+			rootParentOnly: true,
 		},
 	} );
 }
@@ -169,6 +171,7 @@ export type AiAssistantDropdownOnChangeOptionsArgProps = {
 	language?: string;
 	userPrompt?: string;
 	alwaysTransformToAIAssistant?: boolean;
+	rootParentOnly?: boolean;
 };
 
 export type OnRequestSuggestion = (
@@ -182,6 +185,7 @@ type AiAssistantToolbarDropdownContentProps = {
 	disabled?: boolean;
 	onAskAiAssistant: () => void;
 	onRequestSuggestion: OnRequestSuggestion;
+	clientId: string;
 };
 
 /**
@@ -191,12 +195,18 @@ type AiAssistantToolbarDropdownContentProps = {
  */
 export default function AiAssistantToolbarDropdownContent( {
 	blockType,
+	clientId,
 	disabled = false,
 	onAskAiAssistant,
 	onRequestSuggestion,
 }: AiAssistantToolbarDropdownContentProps ): ReactElement {
 	const blockQuickActions = quickActionsList[ blockType ] ?? [];
 
+	const { getBlockParents } = select( 'core/block-editor' ) as unknown as {
+		getBlockParents: ( blockId: string ) => string[];
+	};
+	const blockParents = getBlockParents( clientId );
+
 	return (
 		<>
 			{ disabled && (
@@ -218,23 +228,29 @@ export default function AiAssistantToolbarDropdownContent( {
 					</div>
 				</MenuItem>
 
-				{ [ ...quickActionsList.default, ...blockQuickActions ].map( quickAction => (
-					<MenuItem
-						icon={ quickAction?.icon }
-						iconPosition="left"
-						key={ `key-${ quickAction.key }` }
-						onClick={ () => {
-							onRequestSuggestion(
-								quickAction.aiSuggestion,
-								{ ...( quickAction.options ?? {} ) },
-								quickAction.name
-							);
-						} }
-						disabled={ disabled }
-					>
-						<div className="jetpack-ai-assistant__menu-item">{ quickAction.name }</div>
-					</MenuItem>
-				) ) }
+				{ [ ...quickActionsList.default, ...blockQuickActions ]
+					.filter(
+						quickAction => ! ( quickAction.options?.rootParentOnly && blockParents.length > 0 )
+					)
+					.map( quickAction => {
+						return (
+							<MenuItem
+								icon={ quickAction?.icon }
+								iconPosition="left"
+								key={ `key-${ quickAction.key }` }
+								onClick={ () => {
+									onRequestSuggestion(
+										quickAction.aiSuggestion,
+										{ ...( quickAction.options ?? {} ) },
+										quickAction.name
+									);
+								} }
+								disabled={ disabled }
+							>
+								<div className="jetpack-ai-assistant__menu-item">{ quickAction.name }</div>
+							</MenuItem>
+						);
+					} ) }
 
 				<ToneDropdownMenu
 					onChange={ tone => {

diff --git a/...jetpack/extensions/blocks/ai-assistant/components/ai-assistant-toolbar-dropdown/index.tsx b/...jetpack/extensions/blocks/ai-assistant/components/ai-assistant-toolbar-dropdown/index.tsx
@@ -144,9 +144,12 @@ function AiAssistantBlockToolbarDropdownContent( {
 		tracks.recordEvent( 'jetpack_ai_assistant_prompt_show', { block_type: blockType } );
 	};
 
+	const [ clientId ] = getSelectedBlockClientIds();
+
 	return (
 		<AiAssistantToolbarDropdownContent
 			blockType={ blockType }
+			clientId={ clientId }
 			onRequestSuggestion={ requestSuggestion }
 			onAskAiAssistant={ replaceWithAiAssistantBlock }
 			disabled={ noContent }

diff --git a/...ensions/blocks/ai-assistant/extensions/components/ai-assistant-toolbar-dropdown/index.tsx b/...ensions/blocks/ai-assistant/extensions/components/ai-assistant-toolbar-dropdown/index.tsx
@@ -91,9 +91,12 @@ function AiAssistantExtensionToolbarDropdownContent( {
 		handleToolbarButtonClick();
 	};
 
+	const [ clientId ] = getSelectedBlockClientIds();
+
 	return (
 		<AiAssistantToolbarDropdownContent
 			blockType={ blockType }
+			clientId={ clientId }
 			onRequestSuggestion={ handleRequestSuggestion }
 			onAskAiAssistant={ handleAskAiAssistant }
 			disabled={ false }