fix: save context indicatior + added unplug save on double click

README.md

@@ -44,7 +44,7 @@
   </p>
 </div>
 
-#### **Contact**
+#### **Support**
 
 [![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=Telegram)](https://hoppscotch.io/telegram)
 
@@ -76,83 +76,47 @@
 
 ⚡️ **Fast:** Send requests and get/copy responses in real-time.
 
-<details>
+**HTTP Methods**
-  <summary><i>HTTP Methods</i></summary>
 
----
+- [x] `GET` - Requests retrieve resource information
+- [x] `POST` - The server creates a new entry in a database
+- [x] `PUT` - Updates an existing resource
+- [x] `PATCH` - Very similar to `PUT` but makes a partial update on a resource
+- [x] `DELETE` - Deletes resource or related component
+- [x] `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
+- [x] `CONNECT` - Establishes a tunnel to the server identified by the target resource
+- [x] `OPTIONS` - Describe the communication options for the target resource
+- [x] `TRACE` - Performs a message loop-back test along the path to the target resource
+- [x] `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.
 
-- `GET` - Requests retrieve resource information
+🌈 **Make it yours:** Customizable combinations for background, foreground and accent colors — [customize now ✨](https://hoppscotch.io/settings).
-- `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
-- `POST` - The server creates a new entry in a database
-- `PUT` - Updates an existing resource
-- `DELETE` - Deletes resource or related component
-- `CONNECT` - Establishes a tunnel to the server identified by the target resource
-- `OPTIONS` - Describe the communication options for the target resource
-- `TRACE` - Performs a message loop-back test along the path to the target resource
-- `PATCH` - Very similar to `PUT` but makes a partial update on a resource
-- `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.
 
----
+**Theming**
 
-</details>
+- [x] Choose theme: System (default), Light, Dark and Black
+- [x] Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
+- [x] Distraction free Zen mode
 
-🌈 **Make it yours:** Customizable combinations for background, foreground and accent colors. [Customize now ✨](https://hoppscotch.io/settings)
+_Customized themes are synced with cloud / local session_
-
-<details>
-  <summary><i>Theming</i></summary>
-
----
-
-- Choose theme: System (default), Light, Dark and Black
-- Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
-- Distraction free Zen mode
-
-<p>
-  <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/banner_light.png" alt="Screenshot" width="100%"></a>
-</p>
-
----
-
-</details>
-
-_Customized themes are synced with local session storage_
 
 🔥 **PWA:** Install as a [PWA](https://developers.google.com/web/progressive-web-apps) on your device.
 
-<details>
+- [x] Instant loading with Service Workers
-  <summary><i>Features</i></summary>
+- [x] Offline support
-
+- [x] Low RAM/memory and CPU usage
----
+- [x] Add to Home Screen
-
+- [x] Desktop PWA
-- Instant loading with Service Workers
-- Offline support
-- Low RAM/memory and CPU usage
-- Add to Home Screen
-- Desktop PWA
-
----
-
-</details>
 
 🚀 **Request:** Retrieve response from endpoint instantly.
 
-- Choose `method`
+1. Choose `method`
-- Enter `URL`
+2. Enter `URL`
-- Send
+3. Send
 
-<details>
+- [x] Copy/share public "Share URL"
-  <summary><i>Features</i></summary>
+- [x] Generate/copy request code snippets for 10+ languages and frameworks
-
+- [x] Import `cURL`
----
+- [x] Label requests
-
-- Copy/share public "Share URL"
-- Generate/copy request code snippets for 10+ languages and frameworks
-- Import `cURL`
-- Label requests
-
----
-
-</details>
 
 🔌 **WebSocket:** Establish full-duplex communication channels over a single TCP connection.
 
@@ -164,37 +128,19 @@ _Customized themes are synced with local session storage_
 
 🔮 **GraphQL:** GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
 
-<details>
+- [x] Set endpoint and get schema
-  <summary><i>Features</i></summary>
+- [x] Multi-column docs
+- [x] Set custom request headers
+- [x] Query schema
+- [x] Get query response
 
----
+🔐 **Authorization:** Allows to identify the end user.
 
-- Set endpoint and get schemas
+- [x] None
-- Multi-column docs
+- [x] Basic
-- Set custom request headers
+- [x] Bearer Token
-- Query schema
+- [x] OAuth 2.0
-- Get query response
+- [x] OIDC Access Token/PKCE
-
----
-
-</details>
-
-🔐 **Authentication:** Allows to identify the end user.
-
-<details>
-  <summary><i>Types</i></summary>
-
----
-
-- None
-- Basic
-- Bearer Token
-- OAuth 2.0
-- OIDC Access Token/PKCE
-
----
-
-</details>
 
 📢 **Headers:** Describes the format the body of your request is being sent as.
 
@@ -202,127 +148,55 @@ _Customized themes are synced with local session storage_
 
 📃 **Request Body:** Used to send and receive data via the REST API.
 
-<details>
+- [x] Set `Content Type`
-  <summary><i>Options</i></summary>
+- [x] FormData, JSON and many more
-
+- [x] Toggle between key-value and RAW input parameter list
----
-
-- Set `Content Type`
-- Add or remove Parameter list
-- Toggle between key-value and RAW input parameter list
-
----
-
-</details>
 
 👋 **Response:** Contains the status line, headers and the message/response body.
 
-<details>
+- [x] Copy response to clipboard
-  <summary><i>Features</i></summary>
+- [x] Download response as a file
-
+- [x] View response headers
----
+- [x] View raw and preview of HTML, image, JSON, XML responses
-
-- Copy response to clipboard
-- Download response as a file
-- View response headers
-- View raw and preview of HTML, image, JSON, XML responses
-
----
-
-</details>
 
 ⏰ **History:** Request entries are synced with cloud / local session storage to restore with a single click.
 
 📁 **Collections:** Keep your API requests organized with collections and folders. Reuse them with a single click.
 
-<details>
+- [x] Unlimited collections, folders and requests
-  <summary><i>Features</i></summary>
+- [x] Nested folders
-
+- [x] Export and import as file or GitHub gist
----
-
-- Unlimited collections, folders and requests
-- Nested folders
-- Export as / import from GitHub gist
-
----
-
-</details>
 
 _Collections are synced with cloud / local session storage_
 
 🌐 **Proxy:** Enable Proxy Mode from Settings to access blocked APIs.
 
-<details>
+- [x] Hide your IP address
-  <summary><i>Features</i></summary>
+- [x] Fixes [`CORS`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Resource Sharing) issues
-
+- [x] Access APIs served in non-HTTPS `[http://]` endpoints
----
+- [x] Use your own Proxy URL
-
-- Hide your IP address
-- Fixes [`CORS`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Resource Sharing) issues
-- Access APIs served in non-HTTPS (`http://`)
-- Use custom Proxy URL
-
----
-
-</details>
 
 _Official proxy server is hosted by Hoppscotch - **[GitHub](https://github.com/hoppscotch/proxyscotch)** - **[Privacy Policy](https://docs.hoppscotch.io/privacy)**_
 
 📜 **Pre-Request Scripts β:** Snippets of code associated with a request that are executed before the request is sent.
 
-<details>
+- [x] Set environment variables
-  <summary><i>Use-cases</i></summary>
+- [x] Include timestamp in the request headers
-
+- [x] Send a random alphanumeric string in the URL parameters
----
+- [x] Any JavaScript functions
-
-- Initialize environment variables
-- Include timestamp in the request headers
-- Send a random alphanumeric string in the URL parameters
-
----
-
-</details>
 
 📄 **API Documentation:** Create and share dynamic API documentation easily, quickly.
 
-<details>
-  <summary><i>Usage</i></summary>
-
----
-
 1. Add your requests to Collections and Folders
 2. Export Collections and easily share your APIs with the rest of your team
 3. Import Collections and Generate Documentation on-the-go
 
----
-
-</details>
-
 ⌨️ **Keyboard Shortcuts:** Optimized for efficiency.
 
 > **[Shortcuts](https://docs.hoppscotch.io/features/shortcuts)**
 
 🌎 **i18n:** Experience the app in your own language.
 
-<details>
-  <summary><i>Usage</i></summary>
-
----
-
-1. Scroll down to the footer
-2. Click "Choose Language" icon button
-3. Select your language from the menu
-
----
-
-</details>
-
-_Keep in mind: Translations aren't available for all source and target language combinations_
-
-**To provide a localized experience for users around the world, you can add you own translations.**
-
-_**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/hoppscotch/hoppscotch/tree/i18n) only!**_
-
 📦 **Add-ons:** Official add-ons for hoppscotch.
 
 - **[Proxy](https://github.com/hoppscotch/proxyscotch)** - A simple proxy server created for Hoppscotch
@@ -335,50 +209,35 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/ho
 
 - **[Hopp-Doc-Gen](https://github.com/hoppscotch/hopp-doc-gen)** - An API doc generator CLI for Hoppscotch
 
-_Add-ons are developed and maintained under **[Official Hoppscotch Organization](https://github.com/hoppscotch)**._
+_Add-ons are developed and maintained under **[Hoppscotch Organization](https://github.com/hoppscotch)**._
 
-☁️ **Auth + Sync:** Sign in and sync in real-time.
+☁️ **Auth + Sync:** Sign in and sync your data in real-time.
 
 **Sign in with**
 
-- Google
+- [x] GitHub
-- GitHub
+- [x] Google
+- [x] Email
 
-**Sync**
+**Synchronize your data**
 
-- History
+- [x] History
-- Collections
+- [x] Collections
-- Environments
+- [x] Environments
+- [x] Settings
 
 ✅ **Post-Request Tests β:** Write tests associated with a request that are executed after the request response.
 
-<details>
+- [x] Check the status code as an integer
-  <summary><i>Use-cases</i></summary>
+- [x] Filter response headers
-
+- [x] Parse the response data
----
+- [x] Any JavaScript functions
-
-- Check the status code as an integer
-- Filter response headers
-- Parse the response data
-
----
-
-</details>
 
 🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
 
-<details>
+- [x] Unlimited environments and variables
-  <summary><i>Features</i></summary>
+- [x] Initialize through pre-request script
-
+- [x] Export as / import from GitHub gist
----
-
-- Unlimited environments and variables
-- Initialize through pre-request script
-- Export as / import from GitHub gist
-
----
-
-</details>
 
 <details>
   <summary><i>Use-cases</i></summary>
@@ -395,20 +254,11 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 
 👨‍👩‍👧‍👦 **Teams β:** Helps you collaborate across your team to design, develop, and test APIs faster.
 
-<details>
+- [x] Unlimited team collections and shared requests
-  <summary><i>Features</i></summary>
+- [x] Unlimited team members
+- [x] User roles
 
----
+**For more features, please read our [documentation](https://docs.hoppscotch.io).**
-
-- Unlimited team collections and shared requests
-- Unlimited team members
-- User roles
-
----
-
-</details>
-
-**To find out more, please check out our [Documentation](https://docs.hoppscotch.io).**
 
 ## **Demo**
 
@@ -476,7 +326,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 
 ## **Continuous Integration**
 
-We use [GitHub Actions](https://github.com/features/actions) for continuous integration. Check out our [Build Workflows](https://github.com/hoppscotch/hoppscotch/actions).
+We use [GitHub Actions](https://github.com/features/actions) for continuous integration. Check out our [build workflows](https://github.com/hoppscotch/hoppscotch/actions).
 
 ## **Changelog**
 
@@ -484,7 +334,7 @@ See the [`CHANGELOG`](CHANGELOG.md) file for details.
 
 ## **Authors**
 
-This project exists thanks to all the people who contribute [[Contribute](CONTRIBUTING.md)].
+This project exists thanks to all the people who contribute — [make a contribution](CONTRIBUTING.md).
 
 <div align="center">
   <a href="https://github.com/hoppscotch/hoppscotch/graphs/contributors">

components/collections/my/Request.vue

@@ -49,8 +49,9 @@
         <span
           v-if="
             active &&
-            active.folderPath == folderPath &&
+            active.originLocation === 'user-collection' &&
-            active.requestIndex == requestIndex
+            active.folderPath === folderPath &&
+            active.requestIndex === requestIndex
           "
           class="rounded-full bg-green-500 h-1.5 mx-3 w-1.5"
         ></span>
@@ -120,7 +121,11 @@
 import { defineComponent } from "@nuxtjs/composition-api"
 import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
-import { restSaveContext$, setRESTRequest } from "~/newstore/RESTSession"
+import {
+  restSaveContext$,
+  setRESTRequest,
+  setRESTSaveContext,
+} from "~/newstore/RESTSession"
 
 export default defineComponent({
   props: {
@@ -137,7 +142,7 @@ export default defineComponent({
     picked: { type: Object, default: () => {} },
   },
   setup() {
-    const active = useReadonlyStream(restSaveContext$)
+    const active = useReadonlyStream(restSaveContext$, null)
     return {
       active,
     }
@@ -167,6 +172,15 @@ export default defineComponent({
   },
   methods: {
     selectRequest() {
+      if (
+        this.active &&
+        this.active.originLocation === "user-collection" &&
+        this.active.folderPath === this.folderPath &&
+        this.active.requestIndex === this.requestIndex
+      ) {
+        setRESTSaveContext(null)
+        return
+      }
       if (this.$props.saveRequest)
         this.$emit("select", {
           picked: {

components/collections/teams/Request.vue

@@ -40,7 +40,11 @@
       >
         <span class="truncate"> {{ request.name }} </span>
         <span
-          v-if="active && active.requestIndex == requestIndex"
+          v-if="
+            active &&
+            active.originLocation === 'team-collection' &&
+            active.requestID === requestIndex
+          "
           class="rounded-full bg-green-500 h-1.5 mx-3 w-1.5"
         ></span>
       </span>
@@ -109,7 +113,11 @@
 import { defineComponent } from "@nuxtjs/composition-api"
 import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
-import { restSaveContext$, setRESTRequest } from "~/newstore/RESTSession"
+import {
+  restSaveContext$,
+  setRESTRequest,
+  setRESTSaveContext,
+} from "~/newstore/RESTSession"
 
 export default defineComponent({
   props: {
@@ -125,7 +133,7 @@ export default defineComponent({
     picked: { type: Object, default: () => {} },
   },
   setup() {
-    const active = useReadonlyStream(restSaveContext$)
+    const active = useReadonlyStream(restSaveContext$, null)
     return {
       active,
     }
@@ -153,6 +161,14 @@ export default defineComponent({
   },
   methods: {
     selectRequest() {
+      if (
+        this.active &&
+        this.active.originLocation === "team-collection" &&
+        this.active.requestID === this.requestIndex
+      ) {
+        setRESTSaveContext(null)
+        return
+      }
       if (this.$props.saveRequest)
         this.$emit("select", {
           picked: {

locales/en.json

@@ -43,7 +43,6 @@
     "copy": "Copy",
     "documentation": "Documentation",
     "help": "Help & feedback",
-    "reload": "Reload",
     "home": "Home",
     "invite": "Invite",
     "invite_description": "Hoppscotch is an open source API development ecosystem. We designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
@@ -53,6 +52,7 @@
     "name": "Hoppscotch",
     "new_version_found": "New version found. Refresh to update.",
     "proxy_privacy_policy": "Proxy privacy policy",
+    "reload": "Reload",
     "search": "Search",
     "share": "Share",
     "shortcuts": "Shortcuts",
@@ -98,8 +98,8 @@
     "my_collections": "My Collections",
     "name": "My New Collection",
     "new": "New Collection",
-    "save_as": "Save as",
     "renamed": "Collection renamed",
+    "save_as": "Save as",
     "select": "Select a Collection",
     "select_location": "Select location",
     "select_team": "Select a team",
@@ -253,30 +253,30 @@
     "star": "Remove star"
   },
   "request": {
+    "added": "Request added",
     "authorization": "Authorization",
     "body": "Request Body",
     "choose_language": "Choose language",
     "content_type": "Content Type",
-    "invalid_name": "Please provide a name for the request",
     "copy_link": "Copy link",
     "duration": "Duration",
-    "added": "Request added",
     "enter_curl": "Enter cURL",
-    "renamed": "Request renamed",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
     "header_list": "Header List",
+    "invalid_name": "Please provide a name for the request",
     "method": "Method",
     "name": "Request name",
     "parameter_list": "Query Parameters",
     "parameters": "Parameters",
-    "saved": "Request saved",
     "payload": "Payload",
     "query": "Query",
     "raw_body": "Raw Request Body",
+    "renamed": "Request renamed",
     "run": "Run",
     "save": "Save",
     "save_as": "Save as",
+    "saved": "Request saved",
     "share": "Share",
     "title": "Request",
     "type": "Request type",