From 892bad937b77f3e864f8d8c34e4b723cc23e282d Mon Sep 17 00:00:00 2001 From: Luiz Kowalski Date: Tue, 30 Jul 2024 20:42:02 -0300 Subject: [PATCH] AI Logo Generator: prevent multiple feature data requests (#38630) * Prevent feature data requests when another one is already happening * Support modal reloads and handle error retry with a modal reload * changelog * Changelog --- ...tor-prevent-multiple-feature-data-requests | 4 ++++ .../components/generator-modal.tsx | 23 +++++++++++++++---- .../ai-client/src/logo-generator/types.ts | 1 + ...tor-prevent-multiple-feature-data-requests | 4 ++++ .../extended-blocks/core-site-logo/index.tsx | 6 +++++ 5 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 projects/js-packages/ai-client/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests create mode 100644 projects/plugins/jetpack/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests diff --git a/projects/js-packages/ai-client/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests b/projects/js-packages/ai-client/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests new file mode 100644 index 0000000000000..77d668a7d3337 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +AI Logo Generator: fix multiple feature requests error + retry handling. diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx index f683e2c0a720b..dd5c261c3db91 100644 --- a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx +++ b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx @@ -3,7 +3,7 @@ */ import { useAnalytics } from '@automattic/jetpack-shared-extension-utils'; import { Modal, Button } from '@wordpress/components'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, select } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { external, Icon } from '@wordpress/icons'; import clsx from 'clsx'; @@ -44,6 +44,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { isOpen, onClose, onApplyLogo, + onReload, siteDetails, context, placement, @@ -51,6 +52,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { const { tracks } = useAnalytics(); const { recordEvent: recordTracksEvent } = tracks; const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME ); + const { getIsRequestingAiAssistantFeature } = select( STORE_NAME ); const [ loadingState, setLoadingState ] = useState< 'loadingFeature' | 'analyzing' | 'generating' | null >( null ); @@ -177,10 +179,13 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { // When the site details are set, we need to fetch the feature data. if ( ! requestedFeatureData.current ) { - requestedFeatureData.current = true; - fetchAiAssistantFeature(); + const isRequestingFeature = getIsRequestingAiAssistantFeature(); + if ( ! isRequestingFeature ) { + requestedFeatureData.current = true; + fetchAiAssistantFeature(); + } } - }, [ siteId, siteDetails, setSiteDetails ] ); + }, [ siteId, siteDetails, setSiteDetails, getIsRequestingAiAssistantFeature ] ); // Handles modal opening logic useEffect( () => { @@ -201,7 +206,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { if ( loadingState ) { body = ; } else if ( featureFetchError || firstLogoPromptFetchError ) { - body = ; + body = ( + { + closeModal(); + onReload?.(); + } } + /> + ); } else if ( needsFeature || needsMoreRequests ) { body = ( void; onApplyLogo: ( mediaId: number ) => void; + onReload: () => void; context: string; placement: string; } diff --git a/projects/plugins/jetpack/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests b/projects/plugins/jetpack/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests new file mode 100644 index 0000000000000..d2c90abf1f8d1 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +AI Logo Generator: Fix the retry button when a feature request fails. diff --git a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx index d97f0a50f2207..e3bb7b5f4e72b 100644 --- a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx +++ b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx @@ -100,6 +100,11 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => { setIsLogoGeneratorModalVisible( false ); }, [] ); + const reloadModal = useCallback( () => { + closeModal(); + showModal(); + }, [ closeModal, showModal ] ); + const applyLogoHandler = useCallback( ( mediaId: number ) => { if ( mediaId ) { @@ -128,6 +133,7 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => { isOpen={ isLogoGeneratorModalVisible } onClose={ closeModal } onApplyLogo={ applyLogoHandler } + onReload={ reloadModal } context={ PLACEMENT_CONTEXT } placement={ TOOL_PLACEMENT } siteDetails={ siteDetails }