fix: Query Editor Routing in the redesign flow #37411
Conversation
WalkthroughThe changes involve updating the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx (1)
167-169: Consider preloading the AddQuery componentThe AddQuery component is loaded lazily with Suspense. Since this is a primary navigation path, consider preloading it to reduce the loading skeleton flash.
-const AddQuery = lazy(async () => +const AddQuery = lazy(async () => { + // Preload the component + window.requestIdleCallback(() => { + import( + /* webpackChunkName: "AddQuery" */ "pages/Editor/IDE/EditorPane/Query/Add" + ) + }) + return retryPromise( async () => import( /* webpackChunkName: "AddQuery" */ "pages/Editor/IDE/EditorPane/Query/Add" ), + ) +} );
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx(1 hunks)
🔇 Additional comments (2)
app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx (2)
171-171: Ensure path pattern consistency
The path pattern ${path}/:baseQueryId${ADD_PATH} matches the existing routing convention. However, verify that the baseQueryId parameter is handled consistently across the codebase.
#!/bin/bash
# Search for baseQueryId parameter usage
rg "baseQueryId" --type ts163-172: Verify route precedence with existing patterns
The AddQuery route is positioned first in the newComponents array, which affects route matching priority. Ensure this ordering doesn't conflict with more specific routes like PluginActionEditor.
✅ Verification successful
Let me analyze the route patterns and component ordering to verify if there are any conflicts. The previous search didn't work well with the template literal, so I'm adjusting the search pattern.
Route ordering is correctly implemented
The route ordering in the newComponents array follows the correct precedence pattern:
- AddQuery route with
${path}${ADD_PATH}and${path}/:baseQueryId${ADD_PATH}comes first - More specific routes like PluginActionEditor with
path + "/:baseQueryId"follow - Base path route
[path]comes last
This ordering ensures that more specific routes take precedence over generic ones, preventing any routing conflicts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for potential route pattern conflicts
rg -A 2 "path: \[.*${ADD_PATH}"
Length of output: 7261
Script:
#!/bin/bash
# Search for route patterns in the Query editor components
rg -A 5 "path: \[.*\]" app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
# Search for the order of components in the routes array
ast-grep --pattern 'const newComponents = [
$$$
]'
Length of output: 783
## Description Fixes the order of routes which caused issues in the redesign flow ## Automation /ok-to-test tags="@tag.Datasource" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11855933830> > Commit: db5e105 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11855933830&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datasource` > Spec: > <hr>Fri, 15 Nov 2024 12:53:11 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new component for adding queries, enhancing the query management experience. - Improved loading experience with a `Skeleton` display while the `AddQuery` component is being loaded. - **Bug Fixes** - Adjusted routing logic for query operations based on feature flags for better performance. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
Fixes the order of routes which caused issues in the redesign flow
Automation
/ok-to-test tags="@tag.Datasource"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11855933830
Commit: db5e105
Cypress dashboard.
Tags:
@tag.DatasourceSpec:
Fri, 15 Nov 2024 12:53:11 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Skeletondisplay while theAddQuerycomponent is being loaded.Bug Fixes