Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: allow currentRow for onClick in menuButton item in Table widget #35381

Conversation

SaiCharanChetpelly31
Copy link
Contributor

@SaiCharanChetpelly31 SaiCharanChetpelly31 commented Aug 2, 2024

Fixes #26052

Summary by CodeRabbit

  • New Features

    • Introduced a new property, customJSControl, for enhanced configuration in the Table Widget, allowing for dynamic table data handling.
    • Added a new test case to ensure the menu button's onClick property correctly accesses the currentRow context, improving the robustness of the component.
  • Bug Fixes

    • Enhanced testing coverage for the table menu button component to ensure correct behavior of dynamic properties.

Copy link
Contributor

coderabbitai bot commented Aug 2, 2024

Walkthrough

The recent changes enhance the functionality of a table widget by enabling the use of the currentRow context in menu button actions. Additionally, a new property, customJSControl, has been introduced to support more dynamic configurations within the widget. These updates collectively improve the component's usability and flexibility, addressing specific user-reported issues.

Changes

Files Change Summary
app/client/cypress/e2e/.../menubutton_spec.js Added a test case to verify that menu item actions can reference currentRow, enhancing coverage for dynamic behavior.
app/client/src/widgets/TableWidgetV2/widget/.../Basic.ts Introduced a new property customJSControl with the value "TABLE_COMPUTE_VALUE", allowing for custom JavaScript logic.

Assessment against linked issues

Objective Addressed Explanation
Use currentRow within menu items of a Menu Button (26052)
Enhance widget flexibility with custom controls (26052)

Possibly related PRs

Suggested labels

Bug, Enhancement, Table Widget, Widgets Product, ok-to-test, Widgets & Accelerators Pod

Suggested reviewers

  • sagar-qa007
  • ApekshaBhosale
  • rahulbarwal

Poem

In the realm of tables bright,
Menu buttons take to flight.
With currentRow, actions thrive,
Custom controls help us drive.
A widget's dance, so rich and bold,
In code we trust, new tales unfold! 🎉


📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 29251b4 and baadf6b.

📒 Files selected for processing (1)
  • app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ColumnTypeMenubutton_spec.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ColumnTypeMenubutton_spec.js (1)

Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:

  • Follow best practices for Cypress code and e2e automation.
  • Avoid using cy.wait in code.
  • Avoid using cy.pause in code.
  • Avoid using agHelper.sleep().
  • Use locator variables for locators and do not use plain strings.
  • Use data-* attributes for selectors.
  • Avoid Xpaths, Attributes and CSS path.
  • Avoid selectors like .btn.submit or button[type=submit].
  • Perform logins via API with LoginFromAPI.
  • Perform logout via API with LogOutviaAPI.
  • Perform signup via API with SignupFromAPI.
  • Avoid using it.only.
  • Avoid using after and aftereach in test cases.
  • Use multiple assertions for expect statements.
  • Avoid using strings for assertions.
  • Do not use duplicate filenames even with different paths.
  • Avoid using agHelper.Sleep, this.Sleep in any file in code.
🔇 Additional comments (1)
app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ColumnTypeMenubutton_spec.js (1)

166-175: Good job on adding a new test case, class! Let's review it together.

The new test case follows the structure of previous tests and adheres to many of our coding guidelines. Well done on avoiding cy.wait, using locator variables, and implementing multiple assertions!

However, I have a few suggestions to make it even better:

  1. Consider adding more descriptive assertions to clearly state what you're testing. For example:

    _.agHelper.GetNAssertElementText(
      _.locators._hints,
      "currentRow",
      "contain.text",
      "The autocomplete hints should include 'currentRow'"
    );
  2. It might be helpful to add a comment explaining the purpose of typing "{{currentR" - this is to trigger the autocomplete suggestions, right?

  3. Consider checking if the entire "currentRow" object is accessible, not just its existence in the hints.

Keep up the good work, and remember to always strive for clarity in your tests!


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
🪧 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 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (9)
app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/menubutton_spec.js (9)

Line range hint 14-14: Avoid using cy.wait in tests.

Using cy.wait can make tests flaky. Instead, use assertions to wait for elements to be in the desired state.

-  cy.wait(2000);

Line range hint 14-14: Use locator variables for selectors.

Avoid using plain strings for selectors. Use locator variables instead.

-  cy.get(".t--add-menu-item-btn").click();
+  cy.get(_.locators._addMenuItemBtn).click();

Line range hint 14-14: Avoid using cy.wait in tests.

Using cy.wait can make tests flaky. Instead, use assertions to wait for elements to be in the desired state.

-  cy.wait(2000);

Line range hint 14-14: Use locator variables for selectors.

Avoid using plain strings for selectors. Use locator variables instead.

-  cy.get(".t--property-control-textcolor .t--js-toggle").click();
+  cy.get(_.locators._propertyControlTextColorJsToggle).click();

Line range hint 14-14: Avoid using cy.wait in tests.

Using cy.wait can make tests flaky. Instead, use assertions to wait for elements to be in the desired state.

-  cy.wait(2000);

Line range hint 14-14: Use locator variables for selectors.

Avoid using plain strings for selectors. Use locator variables instead.

-  cy.get(".t--property-control-disabled .t--js-toggle").click();
+  cy.get(_.locators._propertyControlDisabledJsToggle).click();

Line range hint 14-14: Avoid using cy.wait in tests.

Using cy.wait can make tests flaky. Instead, use assertions to wait for elements to be in the desired state.

-  cy.wait(2000);

Line range hint 14-14: Use locator variables for selectors.

Avoid using plain strings for selectors. Use locator variables instead.

-  cy.get(".t--property-control-visible .t--js-toggle").click();
+  cy.get(_.locators._propertyControlVisibleJsToggle).click();

Line range hint 14-14: Use locator variables for selectors.

Avoid using plain strings for selectors. Use locator variables instead.

-  _.propPane.EnterJSContext("onClick", "");
-  _.propPane.TypeTextIntoField("onClick", "{{currentR");
-  _.agHelper.AssertElementExist(_.locators._hints);
-  _.agHelper.GetNAssertElementText(
-    _.locators._hints,
-    "currentRow",
-    "contain.text",
-  );
+  _.propPane.EnterJSContext(_.locators._onClick, "");
+  _.propPane.TypeTextIntoField(_.locators._onClick, "{{currentR");
+  _.agHelper.AssertElementExist(_.locators._hints);
+  _.agHelper.GetNAssertElementText(
+    _.locators._hints,
+    "currentRow",
+    "contain.text",
+  );
Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 6578bde and 29251b4.

Files selected for processing (2)
  • app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/menubutton_spec.js (1 hunks)
  • app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Basic.ts (1 hunks)
Additional context used
Path-based instructions (1)
app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/menubutton_spec.js (1)

Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:

  • Follow best practices for Cypress code and e2e automation.
  • Avoid using cy.wait in code.
  • Avoid using cy.pause in code.
  • Avoid using agHelper.sleep().
  • Use locator variables for locators and do not use plain strings.
  • Use data-* attributes for selectors.
  • Avoid Xpaths, Attributes and CSS path.
  • Avoid selectors like .btn.submit or button[type=submit].
  • Perform logins via API with LoginFromAPI.
  • Perform logout via API with LogOutviaAPI.
  • Perform signup via API with SignupFromAPI.
  • Avoid using it.only.
  • Avoid using after and aftereach in test cases.
  • Use multiple assertions for expect statements.
  • Avoid using strings for assertions.
  • Do not use duplicate filenames even with different paths.
  • Avoid using agHelper.Sleep, this.Sleep in any file in code.
Additional comments not posted (1)
app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Basic.ts (1)

254-254: LGTM!

The addition of the customJSControl property enhances the flexibility and usability of the widget by allowing custom JavaScript control mechanisms.

@sagar-qa007
Copy link
Contributor

@SaiCharanChetpelly31 Can you please explain me for the cypress test case requirement here? Can we test with Unit test ?

@SaiCharanChetpelly31
Copy link
Contributor Author

@SaiCharanChetpelly31 Can you please explain me for the cypress test case requirement here? Can we test with Unit test ?

@sagar-qa007 For other fields like visible and disabled, they are checking if currentRow is accessible in the Cypress tests itself. I didn't find any unit tests related to this in the Table widget code, which is why I have only written Cypress tests.

You can check the already existing cypress tests for visible and disable fields here
https://github.com/appsmithorg/appsmith/blob/486662a2ed37a9e616d478c5ce296426d522c9c8/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/menubutton_spec.js#L100C1-L165C8

Copy link

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

@github-actions github-actions bot added the Stale label Aug 12, 2024
@SaiCharanChetpelly31
Copy link
Contributor Author

@sagar-qa007 @ApekshaBhosale I hope you're well. I’m curious and excited to hear your thoughts on my pull request raised a while ago. Looking forward to your review!
Thank you.
cc: @ramsaptami

@github-actions github-actions bot removed the Stale label Aug 13, 2024
Copy link

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

@github-actions github-actions bot added the Stale label Aug 21, 2024
@SaiCharanChetpelly31
Copy link
Contributor Author

@sagar-qa007 @ApekshaBhosale I hope you're well. I’m curious and excited to hear your thoughts on my pull request raised a while ago. Looking forward to your review!
Thank you.
cc: @ramsaptami

@github-actions github-actions bot removed the Stale label Aug 22, 2024
@@ -163,5 +163,15 @@ describe(
});
cy.get(".table-menu-button-popover li a").should("not.exist");
});
it("5. should check that menuitems onClick property has access to currentRow", () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please help me understand the necessity of Cypress test cases in this context? I believe unit testing might be sufficient in this scenario.
Your insights would be appreciated.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sagar-qa007 I have mentioned the reason here.
#35381 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, this is an integration scenario(Table, property control and eval are involved), we need cypress tests.

Copy link

github-actions bot commented Sep 3, 2024

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

@github-actions github-actions bot added the Stale label Sep 3, 2024
@SaiCharanChetpelly31
Copy link
Contributor Author

@ApekshaBhosale Could you please review this PR?

@github-actions github-actions bot removed the Stale label Sep 4, 2024
Copy link

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

@rahulbarwal
Copy link
Contributor

@SaiCharanChetpelly31 Please fix merge conflicts.

@SaiCharanChetpelly31
Copy link
Contributor Author

@SaiCharanChetpelly31 Please fix merge conflicts.

sure, working on it

@SaiCharanChetpelly31
Copy link
Contributor Author

@rahulbarwal I resolved merge conflicts. can you please check?
Thanks in advance.

@ankitakinger ankitakinger removed their request for review September 27, 2024 06:09
@KelvinOm KelvinOm removed request for KelvinOm and a team September 27, 2024 11:02
@KelvinOm
Copy link
Collaborator

@jsartisan could you please review this PR?

@ayushpahwa ayushpahwa removed their request for review September 30, 2024 05:54
@jsartisan
Copy link
Contributor

@rahulbarwal can you check this PR?

@nidhi-nair nidhi-nair removed the request for review from a team November 4, 2024 13:04
@SaiCharanChetpelly31 SaiCharanChetpelly31 closed this by deleting the head repository Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Unable to use currentRow within a menu item of a Menu Button of a Table widget
5 participants