fix: slash menu command show all available queries and datasources fixed #33076

sneha122 · 2024-04-30T16:16:51Z

Description

The slash menu command popup that gets shown today for property pane only shows 5 queries and not all the queries that exist in my page. This PR solves that problem by adding Load more option in the popup which users can click to get full list of queries. This behaviour of load more is similar to load more of one click binding.

Note: Cypress test case have been added for this PR.

Before:

Even though I have 6 queries, it's only showing 5 and hiding Api1

After:
https://github.com/appsmithorg/appsmith/assets/30018882/e748534f-a842-4f9e-b54a-d86cbd1ae54e

Fixes #32896
or
Fixes Issue URL

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

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

🔍 Cypress test results

Tip

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

Communication

Should the DevRel and Marketing teams inform users about this change?

Yes
No

sneha122 · 2024-04-30T16:17:00Z

/build-deploy-preview skip-tests=true

github-actions · 2024-04-30T16:17:24Z

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

github-actions · 2024-04-30T16:31:25Z

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

sneha122 · 2024-05-01T13:56:04Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-01T13:56:27Z

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

github-actions · 2024-05-01T14:10:39Z

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

coderabbitai · 2024-05-03T06:39:22Z

Walkthrough

The recent update focuses on enhancing the autocomplete feature in a code editor to include a "load more" option when the number of queries exceeds five. This improvement allows users to access additional queries beyond the initial display, enhancing usability and convenience.

Changes

File Path	Changes
`.../PropertyPaneSlashCommand_spec.ts`	Added a new test case to validate the appearance of the 'load more' option in autocomplete when queries surpass five.
`.../CommonLocators.ts`	Introduced a new UI locator `_hints_apis` to target specific elements effectively.
`.../commandsHelper.ts`	Added and refactored functions to handle hint options generation and slash command logic efficiently.
`.../generateQuickCommands.tsx`	Enhanced enums and functions to support the integration of 'show more' commands within the UI.
`.../CodemirrorHintStyles.ts`	Implemented a new CSS style for the '.show-more-option' class to adjust opacity for improved visual presentation.

Assessment against linked issues

Objective	Addressed	Explanation
Implement show more option for Slash Menu (#32896)	✅
Ensure UI displays up to 4 queries and a 'load N more' option when there are more than 4 queries (#32896)	✅
On click of 'load N more', all queries should be visible in the menu (#32896)	✅

The code changes successfully fulfill the objectives outlined in the linked issue, ensuring the correct implementation of the 'load more' functionality as specified. This update enhances user interaction by accommodating additional queries beyond the initial display, meeting the requirements effectively.

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

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.
Please see the configuration documentation for more information.
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/schema.v2.json

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.

app/client/cypress/e2e/Regression/ClientSide/Autocomplete/PropertyPaneSlashCommand_spec.ts

app/client/src/components/editorComponents/CodeEditor/commandsHelper.ts

sneha122 · 2024-05-06T13:33:17Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-06T13:33:38Z

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

github-actions · 2024-05-06T13:46:52Z

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

…urces

sneha122 · 2024-05-07T08:00:35Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-07T08:00:56Z

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

coderabbitai

Actionable comments posted: 1

app/client/src/components/editorComponents/CodeEditor/generateQuickCommands.tsx

sneha122 · 2024-05-07T08:06:09Z

@rishabhrathod01 Please test for following different scenarios:

When number of queries/apis exceed more than 5, load more should be visible and functional
When you search for a specific query name and there are more than 5 matches available, load more should be visible and functional
When number of queries/apis less or equal to 5, load more should not be visible
When you search for a specific query name and there are less than or equal to 5 matches available, load more should not be visible.

github-actions · 2024-05-07T08:15:21Z

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

…urces

rishabhrathod01

Code LGTM

rishabhrathod01

Tested the DP, looks good.

fix: slash menu command show all available queries and datasources fixed

2d21832

github-actions bot added the Bug Something isn't working label Apr 30, 2024

fix: show more option added

482206d

fix: cypress test cases added

4a2d1fc

sneha122 marked this pull request as ready for review May 3, 2024 06:38

github-actions bot added the Activation for Activation group label May 3, 2024

sneha122 requested a review from rishabhrathod01 May 3, 2024 06:38

sneha122 added the ok-to-test Required label for CI label May 3, 2024

fix: failing cypress test case issue fixed

1033e18

sneha122 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 3, 2024

rishabhrathod01 reviewed May 3, 2024

View reviewed changes

app/client/cypress/e2e/Regression/ClientSide/Autocomplete/PropertyPaneSlashCommand_spec.ts Outdated Show resolved Hide resolved

app/client/src/components/editorComponents/CodeEditor/commandsHelper.ts Outdated Show resolved Hide resolved

“sneha122” added 3 commits May 6, 2024 15:26

release merge

34120d2

fix: code review updates

fe51a8f

fix: import json file

02c5b90

sneha122 requested a review from rishabhrathod01 May 6, 2024 13:31

sneha122 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 6, 2024

“sneha122” added 2 commits May 7, 2024 12:59

Merge branch 'release' into fix/slash-menu-popup-show-all-apis-dataso…

04b1ca1

…urces

fix: search text load more issue fixed

2e5776f

sneha122 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 7, 2024

coderabbitai bot reviewed May 7, 2024

View reviewed changes

app/client/src/components/editorComponents/CodeEditor/generateQuickCommands.tsx Show resolved Hide resolved

Merge branch 'release' into fix/slash-menu-popup-show-all-apis-dataso…

aadce19

…urces

sneha122 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 8, 2024

rishabhrathod01 reviewed May 8, 2024

View reviewed changes

rishabhrathod01 approved these changes May 8, 2024

View reviewed changes

sneha122 merged commit ee7a6be into release May 8, 2024
44 checks passed

sneha122 deleted the fix/slash-menu-popup-show-all-apis-datasources branch May 8, 2024 06:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: slash menu command show all available queries and datasources fixed #33076

fix: slash menu command show all available queries and datasources fixed #33076

sneha122 commented Apr 30, 2024 •

edited by github-actions bot

Loading

sneha122 commented Apr 30, 2024

github-actions bot commented Apr 30, 2024

github-actions bot commented Apr 30, 2024

sneha122 commented May 1, 2024

github-actions bot commented May 1, 2024

github-actions bot commented May 1, 2024

coderabbitai bot commented May 3, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

sneha122 commented May 6, 2024

github-actions bot commented May 6, 2024

github-actions bot commented May 6, 2024

sneha122 commented May 7, 2024

github-actions bot commented May 7, 2024

coderabbitai bot left a comment

sneha122 commented May 7, 2024

github-actions bot commented May 7, 2024

rishabhrathod01 left a comment

rishabhrathod01 left a comment

fix: slash menu command show all available queries and datasources fixed #33076

fix: slash menu command show all available queries and datasources fixed #33076

Conversation

sneha122 commented Apr 30, 2024 • edited by github-actions bot Loading

Description

Before:

Automation

🔍 Cypress test results

Communication

sneha122 commented Apr 30, 2024

github-actions bot commented Apr 30, 2024

github-actions bot commented Apr 30, 2024

sneha122 commented May 1, 2024

github-actions bot commented May 1, 2024

github-actions bot commented May 1, 2024

coderabbitai bot commented May 3, 2024 • edited Loading

Walkthrough

Changes

Assessment against linked issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

sneha122 commented May 6, 2024

github-actions bot commented May 6, 2024

github-actions bot commented May 6, 2024

sneha122 commented May 7, 2024

github-actions bot commented May 7, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

sneha122 commented May 7, 2024

github-actions bot commented May 7, 2024

rishabhrathod01 left a comment

Choose a reason for hiding this comment

rishabhrathod01 left a comment

Choose a reason for hiding this comment

sneha122 commented Apr 30, 2024 •

edited by github-actions bot

Loading

coderabbitai bot commented May 3, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)