chore: bug fixes agents

[jsartisan]

• Bug in the select widget that makes it always show Please select an option even when an option is selected
• Add documentation link to the help modal in the editor
• Share Modal update

Summary by CodeRabbit

• New Features
  • Enhanced the non-public application view by grouping content with an added banner for improved layout.
  • Updated the documentation link to conditionally use a tailored URL based on the active AI flow.
  • Streamlined the help menu by removing the bug reporting option.
• Refactor
  • Optimized the internal processing of widget options for clearer and more efficient handling.

[jsartisan]

/build-deploy-preview skip-tests=true

[coderabbitai]

Walkthrough

This pull request makes a series of UI and code refactoring updates across multiple components. In the embed snippet tab, the structure is updated to wrap content with a flex container and include a new banner component. The documentation menu now conditionally uses a new AI-specific URL based on a feature flag. The Help menu items have been refactored to use a cleaner filtering approach, and the widget code has been improved by streamlining the derived properties retrieval via a new parsing module.

Changes

File(s)	Change Summary
app/.../EmbedSnippetTab.tsx	Wrapped PrivateEmbeddingContent in a flex container and added the new ChromeExtensionBanner component for improved UI grouping.
app/.../Editor/EditorName/useNavigationMenuData.ts	Added DOCS_AI_BASE_URL constant and updated the "Documentation" menu item onClick handler to conditionally open either the AI-specific or default documentation URL based on the isAiAgentFlowEnabled flag.
app/.../Editor/HelpButton.tsx	Changed HELP_MENU_ITEMS from a constant to a mutable variable and replaced the splice method with a filter method to remove the "Report a bug" item, simplifying array manipulation.
app/.../WDSSelectWidget/widget/derived.js app/.../WDSSelectWidget/widget/index.tsx app/.../WDSSelectWidget/widget/parseDerivedProperties.ts	Removed outdated comment examples in derived.js, updated the widget to import derived properties from a new parsing module in index.tsx, and introduced parseDerivedProperties.ts to extract and export widget derived property functions using regex.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant M as MenuHandler
    participant Doc as Documentation Server
    U->>M: Click "Documentation" menu item
    M->>M: Check isAiAgentFlowEnabled flag
    alt AI Agent Flow Enabled
        M->>Doc: Open DOCS_AI_BASE_URL
    else
        M->>Doc: Open DOCS_BASE_URL
    end

Loading

sequenceDiagram
    participant W as WDSSelectWidget
    participant DP as DerivedProperties Module
    W->>DP: Request derived properties
    DP-->>W: Return {getOptions, getIsValid, ...}

Loading

Possibly related PRs

• chore: Add chrome extension link in embed #40179: Involved the introduction of the ChromeExtensionBanner component, which is now integrated into the EmbedSnippetTab.

Suggested reviewers

• hetunandu
• ankitakinger

Poem

In code we weave our art anew,
With banners, docs, and widgets too.
Filters replace the splice of old,
Flex layouts in the screen unfold.
A clever dance of code and cheer –
May bugs be few and reviews be clear!
🚀 Happy coding!

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e805fca and 61f2646.

📒 Files selected for processing (6)

• app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx (1 hunks)
• app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts (2 hunks)
• app/client/src/pages/Editor/HelpButton.tsx (2 hunks)
• app/client/src/widgets/wds/WDSSelectWidget/widget/derived.js (1 hunks)
• app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx (2 hunks)
• app/client/src/widgets/wds/WDSSelectWidget/widget/parseDerivedProperties.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx (1)

app/client/src/ce/pages/Applications/ChromeExtensionBanner.tsx (1)

• ChromeExtensionBanner (1-3)

app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts (1)

app/client/src/constants/ThirdPartyConstants.tsx (2)

• DOCS_AI_BASE_URL (4-4)
• DOCS_BASE_URL (3-3)

🔇 Additional comments (7)

app/client/src/pages/Editor/EditorName/useNavigationMenuData.ts (2)

24-24: Appropriate import addition for conditional documentation URL.

The addition of DOCS_AI_BASE_URL import is clean and well-placed alongside the existing URL constant.

---

154-157: Good implementation of conditional documentation URL selection.

The ternary operator approach provides a clean way to direct users to different documentation URLs based on whether the AI agent flow is enabled.

app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx (1)

220-227: Improved component structure with flex container.

The refactoring improves the UI structure by:

1. Wrapping the content in a flex container for better layout management
2. Adding the ChromeExtensionBanner component in preparation for future functionality

Note that currently the ChromeExtensionBanner returns null (as seen in the relevant snippet), so there's no visual impact yet, but the structure is now ready for when this component is implemented.

app/client/src/pages/Editor/HelpButton.tsx (2)

77-77: Changed array declaration from const to let for reassignment.

Changing from const to let is appropriate here since the array is reassigned later in the code.

---

204-206: Improved array filtering with declarative approach.

Replacing the imperative splice/findIndex approach with a declarative filter method is cleaner and more maintainable.

Benefits:

• More readable and less error-prone
• Creates a new array instead of modifying the existing one
• Eliminates potential issues if an item isn't found

app/client/src/widgets/wds/WDSSelectWidget/widget/derived.js (1)

36-36: Improve code organization with descriptive comments.

The addition of comment separators helps visually distinguish between the different methods, which improves code readability.

Also applies to: 42-42

app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx (1)

24-24:

✅ Verification successful

Improved derived properties implementation.

The refactoring to use a separate module for parsing derived properties is a good architectural change. It removes string manipulation from the widget class and centralizes the parsing logic.

Verify that the string manipulation in parseDerivedProperties.ts (replacing props. with this.) doesn't change the behavior of the derived properties in this context.

Also applies to: 70-73

---

🏁 Script executed:

#!/bin/bash
# Check if any derived property actually uses this. correctly
rg "this\." app/client/src/widgets/wds/WDSSelectWidget/widget/index.tsx -A 3 -B 3

Length of output: 1748

---

Attention: Verification Complete – No Behavioral Changes Detected

After reviewing the file and running the grep command, there is no evidence that the substitution of props. with this. in the derived properties parsing has affected the widget’s behavior. The usage of this.props in the widget remains consistent, and no unexpected changes were observed in the context of derived properties.

Please proceed with this improved refactoring, ensuring the centralized parsing logic in parseDerivedProperties.ts works as intended without introducing side effects.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ 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>, please review it.
  • Generate unit testing code 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 testing code 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/14360109171.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 40206.
recreate: .

[github-actions]

Deploy-Preview-URL: https://ce-40206.dp.appsmith.com