[PR #2813] [MERGED] Feat: Add inline environment variable edit #4084

New issue

Closed

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

kerem commented

2026-03-17 01:39:03 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2813
Author: @franciscoemanuel
Created: 10/23/2022
Status: ✅ Merged
Merged: 11/2/2022
Merged by: @liyasthomas

Base: main ← Head: feature/add-inline-variable-edit

📝 Commits (10+)

bf82c3b refactor: changes v-if render to v-show on Environments tabs
3e7dc6d feat: adds selectText prop to EnvInput
c41db19 feat: adds editing variable name to env Details modal
8930158 feat: adds actions to invoke edit env modals
45e80e8 feat: adds edit action to tooltip env
195110d refactor: adds destructuring assignment on action handlers for edit env modals
8b95cf7 refactor: fix comment on environment modals action
729e879 chore: minor ui improvements
7892427 refactor: change text selecion prop on EnvInput to something more meaningful
dcb5545 refactor: removes comment on HoppEnvironment extension

📊 Changes

10 files changed (+176 additions, -30 deletions)

View changed files

📝 packages/hoppscotch-app/assets/scss/styles.scss (+2 -2)
📝 packages/hoppscotch-app/src/components/environments/index.vue (+2 -2)
📝 packages/hoppscotch-app/src/components/environments/my/Details.vue (+2 -0)
📝 packages/hoppscotch-app/src/components/environments/my/index.vue (+17 -0)
📝 packages/hoppscotch-app/src/components/environments/teams/Details.vue (+2 -0)
📝 packages/hoppscotch-app/src/components/environments/teams/index.vue (+15 -1)
📝 packages/hoppscotch-app/src/components/smart/EnvInput.vue (+15 -1)
📝 packages/hoppscotch-app/src/helpers/actions.ts (+83 -8)
📝 packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts (+28 -12)
📝 packages/hoppscotch-app/src/helpers/editor/themes/baseTheme.ts (+10 -4)

📄 Description

Closes #2607

Description

Adds edit action on environment variable tooltip:
When the edit icon is clicked, the environment edit modal is opened with the variable value auto selected

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

Implements two new actions handler to invoke the environment edit modals;
Changes the approach on environments/index.vue to conditionally render env components to use v-show instead of v-if, so the modals can be called even when the correspondent tab is not active;
Adds option to pass parameters to invokeAction method
Adds selectText prop to EnvInput so it can auto select the text on the input when it's rendered

_{🔄 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/2813 **Author:** [@franciscoemanuel](https://github.com/franciscoemanuel) **Created:** 10/23/2022 **Status:** ✅ Merged **Merged:** 11/2/2022 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `main` ← **Head:** `feature/add-inline-variable-edit` --- ### 📝 Commits (10+) - [`bf82c3b`](https://github.com/hoppscotch/hoppscotch/commit/bf82c3bd53ea7eba7a21704f7a0c034959e675ab) refactor: changes v-if render to v-show on Environments tabs - [`3e7dc6d`](https://github.com/hoppscotch/hoppscotch/commit/3e7dc6d84ef38d03cd545ae16f99b7eb7d3a1672) feat: adds selectText prop to EnvInput - [`c41db19`](https://github.com/hoppscotch/hoppscotch/commit/c41db1992a0c38c8ef650bba7bdf34542e789f68) feat: adds editing variable name to env Details modal - [`8930158`](https://github.com/hoppscotch/hoppscotch/commit/8930158511230e73f669f111759b3c745c767f27) feat: adds actions to invoke edit env modals - [`45e80e8`](https://github.com/hoppscotch/hoppscotch/commit/45e80e874da0135fd200086b12cd6e30b70e2140) feat: adds edit action to tooltip env - [`195110d`](https://github.com/hoppscotch/hoppscotch/commit/195110d6db42a2462c7dadae74817eb2453a07a0) refactor: adds destructuring assignment on action handlers for edit env modals - [`8b95cf7`](https://github.com/hoppscotch/hoppscotch/commit/8b95cf76482594422f8dccb0ca50e1fd457ded92) refactor: fix comment on environment modals action - [`729e879`](https://github.com/hoppscotch/hoppscotch/commit/729e8796b220f7adcc7bc0715c6caae395b1dc08) chore: minor ui improvements - [`7892427`](https://github.com/hoppscotch/hoppscotch/commit/78924273779a11b4d19c01dcab5febcc70ed4dc7) refactor: change text selecion prop on EnvInput to something more meaningful - [`dcb5545`](https://github.com/hoppscotch/hoppscotch/commit/dcb5545a8783a8d4fa6074f6a85568ca48f8f254) refactor: removes comment on HoppEnvironment extension ### 📊 Changes **10 files changed** (+176 additions, -30 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-app/assets/scss/styles.scss` (+2 -2) 📝 `packages/hoppscotch-app/src/components/environments/index.vue` (+2 -2) 📝 `packages/hoppscotch-app/src/components/environments/my/Details.vue` (+2 -0) 📝 `packages/hoppscotch-app/src/components/environments/my/index.vue` (+17 -0) 📝 `packages/hoppscotch-app/src/components/environments/teams/Details.vue` (+2 -0) 📝 `packages/hoppscotch-app/src/components/environments/teams/index.vue` (+15 -1) 📝 `packages/hoppscotch-app/src/components/smart/EnvInput.vue` (+15 -1) 📝 `packages/hoppscotch-app/src/helpers/actions.ts` (+83 -8) 📝 `packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts` (+28 -12) 📝 `packages/hoppscotch-app/src/helpers/editor/themes/baseTheme.ts` (+10 -4) </details> ### 📄 Description   Closes #2607 ### Description - Adds edit action on environment variable tooltip: ![image](https://user-images.githubusercontent.com/15387723/197411817-4dd2b6f8-6ba4-4193-80ac-14075690caf2.png) - When the edit icon is clicked, the environment edit modal is opened with the variable value auto selected ![image](https://user-images.githubusercontent.com/15387723/197411851-20d422b7-8ecb-47c6-8142-b44332300229.png)  ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Additional Information - Implements two new actions handler to invoke the environment edit modals; - Changes the approach on `environments/index.vue` to conditionally render env components to use v-show instead of v-if, so the modals can be called even when the correspondent tab is not active; - Adds option to pass parameters to `invokeAction` method - Adds `selectText` prop to EnvInput so it can auto select the text on the input when it's rendered --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>