abc9c71c3d
# API Editor Query Parameters URL Auto-Update Fix ## Issue When adding or editing query parameters in the API editor, the URL wasn't automatically being updated to reflect these changes. This creates a disconnect between the parameters in the Params tab and the actual URL being used, as reported in issue #40045. ## Fix Implemented proper synchronization between query parameters and the URL in the API editor using a two-pronged approach: 1. **Component-level solution** with React hooks: - Added a `useSyncParamsToPath` hook that handles bidirectional synchronization - Ensures sync happens on component mount and when values change - Prevents update loops by checking if changes are needed 2. **Redux saga enhancement**: - Enhanced `syncApiParamsSaga` to ensure the action model is updated when params change - Provides a failsafe at the data layer in addition to the UI layer These changes ensure: - When query parameters are modified in the Params tab, the URL now updates automatically - When the URL is modified with query parameters, they are correctly extracted to the Params tab - Synchronization happens proactively rather than just reactively ## Changes - Added new React hook for bidirectional synchronization - Updated `syncApiParamsSaga` to handle API action data updates - Addressed potential edge cases like empty parameters and update loops ## Test Strategy No new test cases were added for the following reasons: - This fix primarily addresses UI synchronization between two components - The fix is easily verified through manual testing - The functionality is already covered by existing integration tests for the API editor - The changes are focused on visual state synchronization rather than core business logic - The bug is easily reproduced and fixed by the UI components working together correctly ## Related Issue Fixes #40045 ## 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/14332565088> > Commit: 6de39d58842493a4eb514278a7c6e8dc458dc635 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14332565088&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datasource` > Spec: > <hr>Tue, 08 Apr 2025 12:29:38 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved synchronization between URL parameters and form inputs, ensuring real-time, consistent updates during user interactions. - Enhanced the API configuration interface by automatically reflecting changes to action parameters for a smoother experience. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Aman Agarwal <aman@appsmith.com> |
||
|---|---|---|
| .. | ||
| .husky | ||
| .yarn | ||
| config | ||
| cypress | ||
| docker/templates | ||
| generators | ||
| packages | ||
| public | ||
| scripts | ||
| src | ||
| test | ||
| typings | ||
| .babelrc | ||
| .dockerignore | ||
| .editorconfig | ||
| .eslintrc.base.json | ||
| .eslintrc.js | ||
| .fork-ts-checkerrc | ||
| .gitignore | ||
| .lintstagedrc.json | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .sentryclirc | ||
| .yarnrc.yml | ||
| build.sh | ||
| cypress_ci_custom.config.ts | ||
| cypress_ci_hosted.config.ts | ||
| cypress_ci.config.ts | ||
| cypress-add-tags.js | ||
| cypress.config.ts | ||
| download-assets.js | ||
| jest.config.js | ||
| knip.json | ||
| package.json | ||
| README.md | ||
| README.old.md | ||
| start-caddy.sh | ||
| start-https.sh | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.path.json | ||
| vercel.json | ||
| yarn.lock | ||
Appsmith Client
This project was bootstrapped with Create React App.
For details on setting up your development machine, please refer to the Setup Guide