fix: table row selection using image cell

[saicharan-zemoso]

fixes issue: 16110

fixed the issue with the selection of row using image column cell

After the fix the user is able to select the table row by clicking on the image type column cell.

video:

image.cell.fix.mp4

Summary by CodeRabbit

• New Features

  • Enhanced the ImageCell component to allow click events to propagate to parent components, improving interaction capabilities.

• Tests

  • Introduced a new test suite for the ImageCell component to verify click event propagation and ensure reliable functionality.

[coderabbitai]

Walkthrough

The changes introduce a new test suite for the ImageCell component, ensuring its click event propagation behavior functions correctly. The test verifies that clicking the ImageCell triggers both its own click handler and an outer handler. Additionally, the ImageCell component's event handling is modified by removing the e.stopPropagation() call, allowing click events to propagate up the DOM tree, thereby affecting parent components' click handlers.

Changes

Files	Change Summary
app/client/src/widgets/TableWidgetV2/component/cellComponents/ImageCell.test.tsx	Added a test suite for the ImageCell component, including a test for click event propagation.
app/client/src/widgets/TableWidgetV2/component/cellComponents/ImageCell.tsx	Removed e.stopPropagation() from the onClick event handler, allowing click events to propagate to parent components.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ImageCell
    participant ParentComponent

    User->>ImageCell: Click
    ImageCell->>ImageCell: Trigger onClick
    ImageCell->>ParentComponent: Propagate click event
    ParentComponent->>ParentComponent: Trigger parent onClick

Loading

Poem

In the realm of clicks, a change did unfold,
The ImageCell now lets its story be told.
With events that rise, like a balloon in the sky,
Both handlers now dance, as they flutter on by.
A test was born to ensure all's well,
In the world of components, where interactions dwell! 🎉

---

Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 1c8712a and 66d1a80.

Files selected for processing (2)

• app/client/src/widgets/TableWidgetV2/component/cellComponents/ImageCell.test.tsx (1 hunks)
• app/client/src/widgets/TableWidgetV2/component/cellComponents/ImageCell.tsx (1 hunks)

Additional comments not posted (2)

app/client/src/widgets/TableWidgetV2/component/cellComponents/ImageCell.test.tsx (1)

10-39: Great job on adding this test! 👍

The test is well-structured and covers the desired behavior of click event propagation for the ImageCell component. It follows good practices by:

• Using the @testing-library/react library for rendering and firing events
• Checking for the existence of the image cell in the document before firing the click event
• Asserting that both the onClick prop of the ImageCell and the outer click handler are called

Keep up the good work! 🌟

app/client/src/widgets/TableWidgetV2/component/cellComponents/ImageCell.tsx (1)

Line range hint 103-105: Great work! The code change aligns with the PR objective.

Removing the e.stopPropagation() call from the onClick event handler allows the click event to propagate up the DOM tree. This fixes the issue where clicking on an image cell did not select the entire row.

The change has been verified through the provided video demonstration.

---

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 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 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 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 resolve resolve all the CodeRabbit review comments.
• @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.

[saicharan-zemoso]

Hello @appsmithorg/query-js-pod , can you assign someone to review this PR.??

[github-actions]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

[saicharan-zemoso]

Hello @appsmithorg/query-js-pod , can you assign someone to review this PR.??

[NilanshBansal]

Adding @rahulbarwal @jacquesikot from Widgets team to check this.

[github-actions]

This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected.

[github-actions]

This PR has been closed because of inactivity.