fix: [custom widget] remove stale keys from dynamicTriggerPathList

[sbalaji1192]

Description

1. Improve string pattern used to determine whether to show onReady function missing warning
2. Remove stale keys from dynamicTriggerPathList when user changes the event names
3. Clean up events when a custom widget unselected in editor

Fixes #31682
Fixes #30276
Fixes #30204

Automation

/ok-to-test tags="@tag.All"

🔍 Cypress test results

Important

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8337490694
Commit: 4fcb4cab6960c9a4a459a2b97261a112363901e2
Cypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉

Summary by CodeRabbit

• New Features
  • Introduced a new route for CustomWidgetBuilderLoader component, enhancing navigation and accessibility.
  • Enhanced the Custom Widget Builder with improved event handling and dynamic trigger path support.
  • Added a new styled Container for the Custom Widget component for better layout management.
• Refactor
  • Improved configuration settings readability and consistency for New Relic integration.
  • Refactored CustomWidgetBuilderService for clearer modularity and enhanced message handling.
  • Optimized property editing and update logic within the Property Pane of the Editor.
• Bug Fixes
  • Adjusted connection timeout in the Custom Widget Builder for a more responsive user experience.
  • Updated button sizes in the ConfirmationModal for consistency.
• Tests
  • Added comprehensive test cases for CustomWidgetBuilderService and Builder classes.
• Chores
  • Removed deprecated UPDATE_SRCDOC_ACK event, streamlining Custom Widget Builder events.

[coderabbitai]

Walkthrough

Walkthrough

The recent updates focus on enhancing the custom widget builder and property handling in the application. Key improvements include better event management in custom widgets, refined widget boundary visibility, and UI adjustments for modal components. Additionally, the introduction of a new deprecated path for custom widgets aims to streamline navigation and component loading. The refactoring of the CustomWidgetBuilderService and property update mechanisms in the Editor enhances performance and user experience. These changes collectively aim to improve the application's modularity, readability, and consistency in handling custom widgets and their properties.

Changes

File Path	Change Summary
app/client/.../jest.config.js	Updated newRelic object for better formatting and readability.
app/client/src/ce/.../AppRouter.tsx and app/client/src/ce/constants/routes/appRoutes.ts	Added route for CustomWidgetBuilderLoader component and constant CUSTOM_WIDGETS_DEPRECATED_EDITOR_ID_PATH.
app/client/src/ce/pages/common/AppHeader.tsx	Introduced a new route for CUSTOM_WIDGETS_DEPRECATED_EDITOR_ID_PATH.
app/client/src/components/.../CustomWidgetEditSourceButtonControl.tsx	Enhanced event handling with lodash xor, new methods, and refactoring.
app/client/src/pages/Editor/.../CodeTemplates/index.tsx	Changed button size in the ConfirmationModal from "sm" to "md".
app/client/src/pages/Editor/CustomWidgetBuilder/constants.ts	Removed UPDATE_SRCDOC_ACK event.
app/client/src/pages/Editor/CustomWidgetBuilder/useCustomBuilder.tsx	Reduced connection timeout from 20 seconds to 4 seconds.
app/client/src/pages/Editor/CustomWidgetBuilder/utility.ts	Improved checkForWarnings function with regex for onReady function call detection.
app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx	Updated property update logic for efficiency.
app/client/src/utils/.../CustomWidgetBuilderService.test.ts	Added test cases for CustomWidgetBuilderService and Builder.
app/client/src/utils/CustomWidgetBuilderService.ts	Refactored to introduce a Builder class for better message handling and window management.
app/client/src/widgets/CustomWidget/component/index.tsx	Added a new Container styled div.
app/client/src/widgets/CustomWidget/widget/index.tsx	Added dynamicTriggerPathList and updated onEdit method.

Assessment against linked issues

Objective	Addressed	Explanation
Remove the old name of the event from the dynamicTriggerPathList (#31682)	❓	The summary mentions modifications related to dynamicTriggerPathList and event handling, but it's unclear if the specific task of removing old event names is directly addressed.
Fix modal text spacing and button sizes inconsistency (#30276)	✅
Ensure widget boundary visibility on height decrease (#30204)	✅	The addition of a Container styled div in the CustomWidget component could address the boundary visibility issue, assuming it impacts how widget boundaries are rendered.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[somangshu]

@ashit-rath can you review this?