[PR #5384] [MERGED] fix: prevent empty entries when dragging items past last row #5185

New issue

Closed

opened 2026-03-17 02:39:18 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:39:18 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5384
Author: @aakashsbhatia2
Created: 9/11/2025
Status: ✅ Merged
Merged: 9/18/2025
Merged by: @jamesgeorge007

Base: next ← Head: fix/reordering-http-graphql-header-param-issue

📝 Commits (5)

49fc4f5 fix: reordering issue causing empty entries when http header, graphQL header and http query param is moved below the last line
bd6bbe8 chore: resolve feedback by adding a helper function to limit repetitive code
18a4a44 chore: add checkmove function in other draggable components
5c58b50 chore: add function comment
1ac751d refactor: improve drag drop validation naming

📊 Changes

9 files changed (+316 additions, -0 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/graphql/Headers.vue (+5 -0)
📝 packages/hoppscotch-common/src/components/http/BodyParameters.vue (+4 -0)
📝 packages/hoppscotch-common/src/components/http/Headers.vue (+5 -0)
📝 packages/hoppscotch-common/src/components/http/Parameters.vue (+5 -0)
📝 packages/hoppscotch-common/src/components/http/RequestVariables.vue (+5 -0)
📝 packages/hoppscotch-common/src/components/http/URLEncodedParams.vue (+5 -0)
➕ packages/hoppscotch-common/src/helpers/__tests__/dragDropValidation.spec.ts (+244 -0)
➕ packages/hoppscotch-common/src/helpers/dragDropValidation.ts (+38 -0)
📝 packages/hoppscotch-common/src/pages/realtime/websocket.vue (+5 -0)

📄 Description

Closes #5380

When reordering http headers, query params, request variables, body parameters or graphQl headers, if the header is dragged passed the last row, additional empty rows are created.

What's changed

In this PR, I have:

Added a condition to check whether the row can be dragged to a particular index. If the new index is after the last row, do not allow the drag operation to be completed
By doing this, the last row will always remain an empty entry

Notes to reviewers

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5384 **Author:** [@aakashsbhatia2](https://github.com/aakashsbhatia2) **Created:** 9/11/2025 **Status:** ✅ Merged **Merged:** 9/18/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `fix/reordering-http-graphql-header-param-issue` --- ### 📝 Commits (5) - [`49fc4f5`](https://github.com/hoppscotch/hoppscotch/commit/49fc4f5138f663231b6d252f9c3e0994e3e02131) fix: reordering issue causing empty entries when http header, graphQL header and http query param is moved below the last line - [`bd6bbe8`](https://github.com/hoppscotch/hoppscotch/commit/bd6bbe85e8a8aac6c6b47977d5e8fce0e4698930) chore: resolve feedback by adding a helper function to limit repetitive code - [`18a4a44`](https://github.com/hoppscotch/hoppscotch/commit/18a4a44e009ed733621642472cda9522f2ba547c) chore: add checkmove function in other draggable components - [`5c58b50`](https://github.com/hoppscotch/hoppscotch/commit/5c58b509be9a6784abf35b2b404c3bb458a921c5) chore: add function comment - [`1ac751d`](https://github.com/hoppscotch/hoppscotch/commit/1ac751d5bd4ff620b4c71423979e97ac547a575f) refactor: improve drag drop validation naming ### 📊 Changes **9 files changed** (+316 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/graphql/Headers.vue` (+5 -0) 📝 `packages/hoppscotch-common/src/components/http/BodyParameters.vue` (+4 -0) 📝 `packages/hoppscotch-common/src/components/http/Headers.vue` (+5 -0) 📝 `packages/hoppscotch-common/src/components/http/Parameters.vue` (+5 -0) 📝 `packages/hoppscotch-common/src/components/http/RequestVariables.vue` (+5 -0) 📝 `packages/hoppscotch-common/src/components/http/URLEncodedParams.vue` (+5 -0) ➕ `packages/hoppscotch-common/src/helpers/__tests__/dragDropValidation.spec.ts` (+244 -0) ➕ `packages/hoppscotch-common/src/helpers/dragDropValidation.ts` (+38 -0) 📝 `packages/hoppscotch-common/src/pages/realtime/websocket.vue` (+5 -0) </details> ### 📄 Description   Closes #5380  When reordering http headers, query params, request variables, body parameters or graphQl headers, if the header is dragged passed the last row, additional empty rows are created. ### What's changed  In this PR, I have: - Added a condition to check whether the row can be dragged to a particular index. If the new index is after the last row, do not allow the drag operation to be completed - By doing this, the last row will always remain an empty entry  ### Notes to reviewers  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>