AI Logo Generator: prevent multiple feature data requests

[lhkowalski]

Fixes #38625.

Proposed changes:

The reported error was happening due to a sum of events:

• when managing the layout on the site editor, you can have the logo block inside a pattern with multiple variations (like a header with multiple variations)
• when you select the pattern, the block editor sidebar will list the multiple variations; the logo block on each preview is a working logo block, and therefore is extended by the AI Logo Generator; one example for the Twenty Twenty-Four theme:

• every instance of the logo generator requests it's own feature data, resulting on N feature data requests at the same time
• the logo generator code has an internal check to prevent an excess of multiple requests, limited to 5 requests at the same time
• this sequence of things would result on some requests failing, and setting the tool on an error state

I changed it to:

• Use the current requesting state boolean value to prevent a new request while a previous one is still in progress
• Addionally, added support for an onReload callback function on the GeneratorModal component, that can be called to close and open the modal again, allowing to retry when the feature data loading fails

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

First, let's confirm the start up error went away:

• Enable the Twenty Twenty-Four theme on your testing site (a reliable way to have a header with multiple variations on the editor)
• Clean your site's logo generation history, in case you have a history: delete the logo-history-SITE_ID key on the browser's local storage
• Open the browser's network console to inspect the network requests
• Open the site editor (needs to be tested there)
• A logo is probably present on the editor, inside a header pattern:

• Select the header pattern; click on the blank area so you don't select a child element instead of the header
• Confirm you can see the multiple variations of it on the sitebar:

• Confirm only one request was made to the ai-assistant-feature endpoint
• On the editor, select the logo block and click the AI extension button on it, to launch the logo generator
• Confirm the tool will generate the first logo as expected
• Confirm you can use the logo on the block
• Confirm you can close and open the tool multiple times without issues

Now, let's confirm the "Try again" button on the error message will work as expected:

• On the same site, clean the logo history again and refresh the site editor
• Open the browser's network console and change the throttling settings to Offline; the idea is to generate a request error on the next step
• Select the header pattern again; click on the blank area so you don't select a child element instead of the header
• Notice that a request to the ai-assistant-feature endpoint will fail on the network tab:

• Change the throttling settings back to "No throttling" and try to open the AI Logo Generator
• Confirm you see the "Generating logo…" window, and then an error message:

• Click the "Try again" button
• Confirm now the logo generator tool will start as expected:

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the update/ai-logo-generator-prevent-multiple-feature-data-requests branch.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack update/ai-logo-generator-prevent-multiple-feature-data-requests
  

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen daily.
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly. The next release is scheduled for August 6, 2024 (scheduled code freeze on August 5, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[dhasilva]

LGTM