feat: unsaved change popup (#2239)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>

packages/hoppscotch-app/.gitignore

@@ -115,4 +115,4 @@ shims-volar.d.ts
 helpers/backend/backend-schema.json
 
 # GraphQL Type Generation
-helpers/backend/graphql.ts
+helpers/backend/graphql.ts

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -32,15 +32,10 @@
           {{ request.name }}
         </span>
         <span
-          v-if="
+          v-if="isActive"
-            active &&
-            active.originLocation === 'user-collection' &&
-            active.folderPath === folderPath &&
-            active.requestIndex === requestIndex
-          "
           v-tippy="{ theme: 'tooltip' }"
           class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
-          :title="`${$t('collection.request_in_use')}`"
+          :title="`${t('collection.request_in_use')}`"
         >
           <span
             class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
@@ -56,7 +51,7 @@
           v-if="!saveRequest && !doc"
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
-          :title="$t('action.restore')"
+          :title="t('action.restore')"
           class="hidden group-hover:inline-flex"
           @click.native="!doc ? selectRequest() : {}"
         />
@@ -72,7 +67,7 @@
             <template #trigger>
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.more')"
+                :title="t('action.more')"
                 svg="more-vertical"
               />
             </template>
@@ -89,11 +84,11 @@
               <SmartItem
                 ref="edit"
                 svg="edit"
-                :label="$t('action.edit')"
+                :label="t('action.edit')"
                 :shortcut="['E']"
                 @click.native="
                   () => {
-                    $emit('edit-request', {
+                    emit('edit-request', {
                       collectionIndex,
                       folderIndex,
                       folderName,
@@ -112,7 +107,7 @@
                 :shortcut="['D']"
                 @click.native="
                   () => {
-                    $emit('duplicate-request', {
+                    emit('duplicate-request', {
                       collectionIndex,
                       folderIndex,
                       folderName,
@@ -127,7 +122,7 @@
               <SmartItem
                 ref="deleteAction"
                 svg="trash-2"
-                :label="$t('action.delete')"
+                :label="t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
@@ -143,129 +138,312 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_request')"
+      :title="t('confirm.remove_request')"
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />
+    <HttpReqChangeConfirmModal
+      :show="confirmChange"
+      @hide-modal="confirmChange = false"
+      @save-change="saveRequestChange"
+      @discard-change="discardRequestChange"
+    />
+    <CollectionsSaveRequest
+      mode="rest"
+      :show="showSaveRequestModal"
+      @hide-modal="showSaveRequestModal = false"
+    />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { ref, computed } from "@nuxtjs/composition-api"
 import {
+  HoppRESTRequest,
   safelyExtractRESTRequest,
   translateToNewRequest,
 } from "@hoppscotch/data"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import isEqual from "lodash/isEqual"
+import * as E from "fp-ts/Either"
+import {
+  useI18n,
+  useToast,
+  useReadonlyStream,
+} from "~/helpers/utils/composables"
 import {
   getDefaultRESTRequest,
+  getRESTRequest,
   restSaveContext$,
   setRESTRequest,
   setRESTSaveContext,
+  getRESTSaveContext,
 } from "~/newstore/RESTSession"
+import { editRESTRequest } from "~/newstore/collections"
+import { runMutation } from "~/helpers/backend/GQLClient"
+import { UpdateRequestDocument } from "~/helpers/backend/graphql"
+import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
 
-export default defineComponent({
+const props = defineProps<{
-  props: {
+  request: HoppRESTRequest
-    request: { type: Object, default: () => {} },
+  collectionIndex: number
-    collectionIndex: { type: Number, default: null },
+  folderIndex: number
-    folderIndex: { type: Number, default: null },
+  folderName: string
-    folderName: { type: String, default: null },
+  requestIndex: number
-    // eslint-disable-next-line vue/require-default-prop
+  doc: boolean
-    requestIndex: [Number, String],
+  saveRequest: boolean
-    doc: Boolean,
+  collectionsType: object
-    saveRequest: Boolean,
+  folderPath: string
-    collectionsType: { type: Object, default: () => {} },
+  picked?: {
-    folderPath: { type: String, default: null },
+    pickedType: string
-    picked: { type: Object, default: () => {} },
+    collectionIndex: number
-  },
+    folderPath: string
-  setup() {
+    folderName: string
-    const active = useReadonlyStream(restSaveContext$, null)
+    requestIndex: number
-    return {
+  }
-      active,
+}>()
-      tippyActions: ref<any | null>(null),
+
-      options: ref<any | null>(null),
+const emit = defineEmits<{
-      edit: ref<any | null>(null),
+  (
-      duplicate: ref<any | null>(null),
+    e: "select",
-      deleteAction: ref<any | null>(null),
+    data:
-    }
+      | {
-  },
-  data() {
-    return {
-      dragging: false,
-      requestMethodLabels: {
-        get: "text-green-500",
-        post: "text-yellow-500",
-        put: "text-blue-500",
-        delete: "text-red-500",
-        default: "text-gray-500",
-      },
-      confirmRemove: false,
-    }
-  },
-  computed: {
-    isSelected(): boolean {
-      return (
-        this.picked &&
-        this.picked.pickedType === "my-request" &&
-        this.picked.folderPath === this.folderPath &&
-        this.picked.requestIndex === this.requestIndex
-      )
-    },
-  },
-  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: {
-            pickedType: "my-request",
+            pickedType: string
-            collectionIndex: this.collectionIndex,
+            collectionIndex: number
-            folderPath: this.folderPath,
+            folderPath: string
-            folderName: this.folderName,
+            folderName: string
-            requestIndex: this.requestIndex,
+            requestIndex: number
-          },
-        })
-      else {
-        setRESTRequest(
-          safelyExtractRESTRequest(
-            translateToNewRequest(this.request),
-            getDefaultRESTRequest()
-          ),
-          {
-            originLocation: "user-collection",
-            folderPath: this.folderPath,
-            requestIndex: this.requestIndex,
           }
-        )
+        }
-      }
+      | undefined
-    },
+  ): void
-    dragStart({ dataTransfer }) {
+
-      this.dragging = !this.dragging
+  (
-      dataTransfer.setData("folderPath", this.folderPath)
+    e: "remove-request",
-      dataTransfer.setData("requestIndex", this.requestIndex)
+    data: {
-    },
+      collectionIndex: number
-    removeRequest() {
+      folderName: string
-      this.$emit("remove-request", {
+      folderPath: string
-        collectionIndex: this.$props.collectionIndex,
+      requestIndex: number
-        folderName: this.$props.folderName,
+    }
-        folderPath: this.folderPath,
+  ): void
-        requestIndex: this.$props.requestIndex,
+
+  (
+    e: "duplicate-request",
+    data: {
+      collectionIndex: number
+      folderIndex: number
+      folderName: string
+      request: HoppRESTRequest
+      folderPath: string
+      requestIndex: number
+    }
+  ): void
+
+  (
+    e: "edit-request",
+    data: {
+      collectionIndex: number
+      folderIndex: number
+      folderName: string
+      request: HoppRESTRequest
+      folderPath: string
+      requestIndex: number
+    }
+  ): void
+}>()
+
+const t = useI18n()
+const toast = useToast()
+
+const dragging = ref(false)
+const requestMethodLabels = {
+  get: "text-green-500",
+  post: "text-yellow-500",
+  put: "text-blue-500",
+  delete: "text-red-500",
+  default: "text-gray-500",
+}
+const confirmRemove = ref(false)
+const confirmChange = ref(false)
+const showSaveRequestModal = ref(false)
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const options = ref<any | null>(null)
+const edit = ref<any | null>(null)
+const duplicate = ref<any | null>(null)
+const deleteAction = ref<any | null>(null)
+
+const active = useReadonlyStream(restSaveContext$, null)
+
+const isSelected = computed(
+  () =>
+    props.picked &&
+    props.picked.pickedType === "my-request" &&
+    props.picked.folderPath === props.folderPath &&
+    props.picked.requestIndex === props.requestIndex
+)
+
+const isActive = computed(
+  () =>
+    active.value &&
+    active.value.originLocation === "user-collection" &&
+    active.value.folderPath === props.folderPath &&
+    active.value.requestIndex === props.requestIndex
+)
+
+const dragStart = ({ dataTransfer }: DragEvent) => {
+  if (dataTransfer) {
+    dragging.value = !dragging.value
+    dataTransfer.setData("folderPath", props.folderPath)
+    dataTransfer.setData("requestIndex", props.requestIndex.toString())
+  }
+}
+
+const removeRequest = () => {
+  emit("remove-request", {
+    collectionIndex: props.collectionIndex,
+    folderName: props.folderName,
+    folderPath: props.folderPath,
+    requestIndex: props.requestIndex,
+  })
+}
+
+const getRequestLabelColor = (method: string) =>
+  requestMethodLabels[
+    method.toLowerCase() as keyof typeof requestMethodLabels
+  ] || requestMethodLabels.default
+
+const setRestReq = (request: any) => {
+  setRESTRequest(
+    safelyExtractRESTRequest(
+      translateToNewRequest(request),
+      getDefaultRESTRequest()
+    ),
+    {
+      originLocation: "user-collection",
+      folderPath: props.folderPath,
+      requestIndex: props.requestIndex,
+      req: request,
+    }
+  )
+}
+
+const selectRequest = () => {
+  if (!active.value) {
+    confirmChange.value = true
+
+    if (props.saveRequest)
+      emit("select", {
+        picked: {
+          pickedType: "my-request",
+          collectionIndex: props.collectionIndex,
+          folderPath: props.folderPath,
+          folderName: props.folderName,
+          requestIndex: props.requestIndex,
+        },
       })
-    },
+  } else {
-    getRequestLabelColor(method: string): string {
+    const currentReqWithNoChange = active.value.req
-      return (
+    const currentFullReq = getRESTRequest()
-        this.requestMethodLabels[method.toLowerCase()] ||
+
-        this.requestMethodLabels.default
+    // Check if whether user clicked the same request or not
+    if (!isActive.value) {
+      // Check if there is any changes done on the current request
+      if (isEqual(currentReqWithNoChange, currentFullReq)) {
+        setRestReq(props.request)
+        if (props.saveRequest)
+          emit("select", {
+            picked: {
+              pickedType: "my-request",
+              collectionIndex: props.collectionIndex,
+              folderPath: props.folderPath,
+              folderName: props.folderName,
+              requestIndex: props.requestIndex,
+            },
+          })
+      } else {
+        confirmChange.value = true
+      }
+    } else {
+      setRESTSaveContext(null)
+    }
+  }
+}
+
+/** Save current request to the collection */
+const saveRequestChange = () => {
+  const saveCtx = getRESTSaveContext()
+  saveCurrentRequest(saveCtx)
+  confirmChange.value = false
+}
+
+/** Discard changes and change the current request and context */
+const discardRequestChange = () => {
+  setRestReq(props.request)
+  if (props.saveRequest)
+    emit("select", {
+      picked: {
+        pickedType: "my-request",
+        collectionIndex: props.collectionIndex,
+        folderPath: props.folderPath,
+        folderName: props.folderName,
+        requestIndex: props.requestIndex,
+      },
+    })
+  if (!isActive.value) {
+    setRESTSaveContext({
+      originLocation: "user-collection",
+      folderPath: props.folderPath,
+      requestIndex: props.requestIndex,
+      req: props.request,
+    })
+  }
+
+  confirmChange.value = false
+}
+
+const saveCurrentRequest = (saveCtx: HoppRequestSaveContext | null) => {
+  if (!saveCtx) {
+    showSaveRequestModal.value = true
+    return
+  }
+  if (saveCtx.originLocation === "user-collection") {
+    try {
+      editRESTRequest(
+        saveCtx.folderPath,
+        saveCtx.requestIndex,
+        getRESTRequest()
       )
-    },
+      setRestReq(props.request)
-  },
+      toast.success(`${t("request.saved")}`)
-})
+    } catch (e) {
+      setRESTSaveContext(null)
+      saveCurrentRequest(saveCtx)
+    }
+  } else if (saveCtx.originLocation === "team-collection") {
+    const req = getRESTRequest()
+    try {
+      runMutation(UpdateRequestDocument, {
+        requestID: saveCtx.requestID,
+        data: {
+          title: req.name,
+          request: JSON.stringify(req),
+        },
+      })().then((result) => {
+        if (E.isLeft(result)) {
+          toast.error(`${t("profile.no_permission")}`)
+        } else {
+          toast.success(`${t("request.saved")}`)
+        }
+      })
+      setRestReq(props.request)
+    } catch (error) {
+      showSaveRequestModal.value = true
+      toast.error(`${t("error.something_went_wrong")}`)
+      console.error(error)
+    }
+  }
+}
 </script>

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -32,11 +32,7 @@
           {{ request.name }}
         </span>
         <span
-          v-if="
+          v-if="isActive"
-            active &&
-            active.originLocation === 'team-collection' &&
-            active.requestID === requestIndex
-          "
           v-tippy="{ theme: 'tooltip' }"
           class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
           :title="`${$t('collection.request_in_use')}`"
@@ -93,7 +89,7 @@
                 :shortcut="['E']"
                 @click.native="
                   () => {
-                    $emit('edit-request', {
+                    emit('edit-request', {
                       collectionIndex,
                       folderIndex,
                       folderName,
@@ -111,7 +107,7 @@
                 :shortcut="['D']"
                 @click.native="
                   () => {
-                    $emit('duplicate-request', {
+                    emit('duplicate-request', {
                       request,
                       requestIndex,
                       collectionID,
@@ -143,116 +139,288 @@
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />
+    <HttpReqChangeConfirmModal
+      :show="confirmChange"
+      @hide-modal="confirmChange = false"
+      @save-change="saveRequestChange"
+      @discard-change="discardRequestChange"
+    />
+    <CollectionsSaveRequest
+      mode="rest"
+      :show="showSaveRequestModal"
+      @hide-modal="showSaveRequestModal = false"
+    />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { ref, computed } from "@nuxtjs/composition-api"
 import {
+  HoppRESTRequest,
   safelyExtractRESTRequest,
   translateToNewRequest,
 } from "@hoppscotch/data"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import * as E from "fp-ts/Either"
+import isEqual from "lodash/isEqual"
+import {
+  useI18n,
+  useToast,
+  useReadonlyStream,
+} from "~/helpers/utils/composables"
 import {
   getDefaultRESTRequest,
   restSaveContext$,
   setRESTRequest,
   setRESTSaveContext,
+  getRESTSaveContext,
+  getRESTRequest,
 } from "~/newstore/RESTSession"
+import { editRESTRequest } from "~/newstore/collections"
+import { runMutation } from "~/helpers/backend/GQLClient"
+import { Team, UpdateRequestDocument } from "~/helpers/backend/graphql"
+import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
 
-export default defineComponent({
+const props = defineProps<{
-  props: {
+  request: HoppRESTRequest
-    request: { type: Object, default: () => {} },
+  collectionIndex: number
-    collectionIndex: { type: Number, default: null },
+  folderIndex: number
-    folderIndex: { type: Number, default: null },
+  folderName?: string
-    folderName: { type: String, default: null },
+  requestIndex: string
-    // eslint-disable-next-line vue/require-default-prop
+  doc: boolean
-    requestIndex: [Number, String],
+  saveRequest: boolean
-    doc: Boolean,
+  collectionsType: {
-    saveRequest: Boolean,
+    type: "my-collections" | "team-collections"
-    collectionsType: { type: Object, default: () => {} },
+    selectedTeam: Team | undefined
-    picked: { type: Object, default: () => {} },
+  }
-    collectionID: { type: String, default: null },
+  collectionID: string
-  },
+  picked?: {
-  setup() {
+    pickedType: string
-    const active = useReadonlyStream(restSaveContext$, null)
+    requestID: string
-    return {
+  }
-      active,
+}>()
-      tippyActions: ref<any | null>(null),
+
-      options: ref<any | null>(null),
+const emit = defineEmits<{
-      edit: ref<any | null>(null),
+  (
-      deleteAction: ref<any | null>(null),
+    e: "select",
-      duplicate: ref<any | null>(null),
+    data:
-    }
+      | {
-  },
-  data() {
-    return {
-      dragging: false,
-      requestMethodLabels: {
-        get: "text-green-500",
-        post: "text-yellow-500",
-        put: "text-blue-500",
-        delete: "text-red-500",
-        default: "text-gray-500",
-      },
-      confirmRemove: false,
-    }
-  },
-  computed: {
-    isSelected(): boolean {
-      return (
-        this.picked &&
-        this.picked.pickedType === "teams-request" &&
-        this.picked.requestID === this.requestIndex
-      )
-    },
-  },
-  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: {
-            pickedType: "teams-request",
+            pickedType: string
-            requestID: this.requestIndex,
+            requestID: string
-          },
-        })
-      else
-        setRESTRequest(
-          safelyExtractRESTRequest(
-            translateToNewRequest(this.request),
-            getDefaultRESTRequest()
-          ),
-          {
-            originLocation: "team-collection",
-            requestID: this.requestIndex as string,
           }
-        )
+        }
-    },
+      | undefined
-    dragStart({ dataTransfer }) {
+  ): void
-      this.dragging = !this.dragging
+
-      dataTransfer.setData("requestIndex", this.requestIndex)
+  (
-    },
+    e: "remove-request",
-    removeRequest() {
+    data: {
-      this.$emit("remove-request", {
+      collectionIndex: number
-        collectionIndex: this.$props.collectionIndex,
+      folderName: string | undefined
-        folderName: this.$props.folderName,
+      requestIndex: string
-        requestIndex: this.$props.requestIndex,
+    }
+  ): void
+
+  (
+    e: "edit-request",
+    data: {
+      collectionIndex: number
+      folderIndex: number
+      folderName: string | undefined
+      requestIndex: string
+      request: HoppRESTRequest
+    }
+  ): void
+
+  (
+    e: "duplicate-request",
+    data: {
+      collectionID: number | string
+      requestIndex: string
+      request: HoppRESTRequest
+    }
+  ): void
+}>()
+
+const t = useI18n()
+const toast = useToast()
+
+const dragging = ref(false)
+const requestMethodLabels = {
+  get: "text-green-500",
+  post: "text-yellow-500",
+  put: "text-blue-500",
+  delete: "text-red-500",
+  default: "text-gray-500",
+}
+const confirmRemove = ref(false)
+const confirmChange = ref(false)
+const showSaveRequestModal = ref(false)
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const options = ref<any | null>(null)
+const edit = ref<any | null>(null)
+const duplicate = ref<any | null>(null)
+const deleteAction = ref<any | null>(null)
+
+const active = useReadonlyStream(restSaveContext$, null)
+
+const isSelected = computed(
+  () =>
+    props.picked &&
+    props.picked.pickedType === "team-collection" &&
+    props.picked.requestID === props.requestIndex
+)
+
+const isActive = computed(
+  () =>
+    active.value &&
+    active.value.originLocation === "team-collection" &&
+    active.value.requestID === props.requestIndex &&
+    isEqual(active.value.req, props.request)
+)
+
+const dragStart = ({ dataTransfer }: DragEvent) => {
+  if (dataTransfer) {
+    dragging.value = !dragging.value
+    dataTransfer.setData("requestIndex", props.requestIndex)
+  }
+}
+
+const removeRequest = () => {
+  emit("remove-request", {
+    collectionIndex: props.collectionIndex,
+    folderName: props.folderName,
+    requestIndex: props.requestIndex,
+  })
+}
+
+const getRequestLabelColor = (method: string): string => {
+  return (
+    (requestMethodLabels as any)[method.toLowerCase()] ||
+    requestMethodLabels.default
+  )
+}
+
+const setRestReq = (request: HoppRESTRequest) => {
+  setRESTRequest(
+    safelyExtractRESTRequest(
+      translateToNewRequest(request),
+      getDefaultRESTRequest()
+    ),
+    {
+      originLocation: "team-collection",
+      requestID: props.requestIndex,
+      req: request,
+    }
+  )
+}
+
+const selectRequest = () => {
+  if (!active.value) {
+    confirmChange.value = true
+
+    if (props.saveRequest)
+      emit("select", {
+        picked: {
+          pickedType: "team-collection",
+          requestID: props.requestIndex,
+        },
       })
-    },
+  } else {
-    getRequestLabelColor(method: any) {
+    const currentReqWithNoChange = active.value.req
-      return (
+    const currentFullReq = getRESTRequest()
-        (this.requestMethodLabels as any)[method.toLowerCase()] ||
+
-        this.requestMethodLabels.default
+    // Check if whether user clicked the same request or not
+    if (!isActive.value) {
+      // Check if there is any changes done on the current request
+      if (isEqual(currentReqWithNoChange, currentFullReq)) {
+        setRestReq(props.request)
+        if (props.saveRequest)
+          emit("select", {
+            picked: {
+              pickedType: "team-collection",
+              requestID: props.requestIndex,
+            },
+          })
+      } else {
+        confirmChange.value = true
+      }
+    } else {
+      setRESTSaveContext(null)
+    }
+  }
+}
+
+/** Save current request to the collection */
+const saveRequestChange = () => {
+  const saveCtx = getRESTSaveContext()
+  saveCurrentRequest(saveCtx)
+  confirmChange.value = false
+}
+
+/** Discard changes and change the current request and context */
+const discardRequestChange = () => {
+  setRestReq(props.request)
+  if (props.saveRequest)
+    emit("select", {
+      picked: {
+        pickedType: "team-collection",
+        requestID: props.requestIndex,
+      },
+    })
+  if (!isActive.value) {
+    setRESTSaveContext({
+      originLocation: "team-collection",
+      requestID: props.requestIndex,
+      req: props.request,
+    })
+  }
+
+  confirmChange.value = false
+}
+
+const saveCurrentRequest = (saveCtx: HoppRequestSaveContext | null) => {
+  if (!saveCtx) {
+    showSaveRequestModal.value = true
+    return
+  }
+  if (saveCtx.originLocation === "team-collection") {
+    const req = getRESTRequest()
+    try {
+      runMutation(UpdateRequestDocument, {
+        requestID: saveCtx.requestID,
+        data: {
+          title: req.name,
+          request: JSON.stringify(req),
+        },
+      })().then((result) => {
+        if (E.isLeft(result)) {
+          toast.error(`${t("profile.no_permission")}`)
+        } else {
+          toast.success(`${t("request.saved")}`)
+        }
+      })
+      setRestReq(props.request)
+    } catch (error) {
+      showSaveRequestModal.value = true
+      toast.error(`${t("error.something_went_wrong")}`)
+      console.error(error)
+    }
+  } else if (saveCtx.originLocation === "user-collection") {
+    try {
+      editRESTRequest(
+        saveCtx.folderPath,
+        saveCtx.requestIndex,
+        getRESTRequest()
       )
-    },
+      setRestReq(props.request)
-  },
+      toast.success(`${t("request.saved")}`)
-})
+    } catch (e) {
+      setRESTSaveContext(null)
+      saveCurrentRequest(null)
+    }
+  }
+}
 </script>

packages/hoppscotch-app/components/history/index.vue

@@ -97,16 +97,29 @@
       @hide-modal="confirmRemove = false"
       @resolve="clearHistory"
     />
+    <HttpReqChangeConfirmModal
+      :show="confirmChange"
+      @hide-modal="confirmChange = false"
+      @save-change="saveRequestChange"
+      @discard-change="discardRequestChange"
+    />
+    <CollectionsSaveRequest
+      mode="rest"
+      :show="showSaveRequestModal"
+      @hide-modal="showSaveRequestModal = false"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, Ref } from "@nuxtjs/composition-api"
-import { safelyExtractRESTRequest } from "@hoppscotch/data"
+import { HoppRESTRequest, safelyExtractRESTRequest } from "@hoppscotch/data"
 import groupBy from "lodash/groupBy"
 import { useTimeAgo } from "@vueuse/core"
 import { pipe } from "fp-ts/function"
 import * as A from "fp-ts/Array"
+import * as E from "fp-ts/Either"
+import isEqual from "lodash/isEqual"
 import {
   useI18n,
   useReadonlyStream,
@@ -124,17 +137,17 @@ import {
   RESTHistoryEntry,
   GQLHistoryEntry,
 } from "~/newstore/history"
-import { getDefaultRESTRequest, setRESTRequest } from "~/newstore/RESTSession"
+import {
-
+  getDefaultRESTRequest,
-const props = defineProps<{
+  getRESTRequest,
-  page: "rest" | "graphql"
+  getRESTSaveContext,
-}>()
+  setRESTRequest,
-
+  setRESTSaveContext,
-const filterText = ref("")
+} from "~/newstore/RESTSession"
-const showMore = ref(false)
+import { editRESTRequest } from "~/newstore/collections"
-const confirmRemove = ref(false)
+import { runMutation } from "~/helpers/backend/GQLClient"
-const toast = useToast()
+import { UpdateRequestDocument } from "~/helpers/backend/graphql"
-const t = useI18n()
+import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -143,6 +156,21 @@ type TimedHistoryEntry = {
   timeAgo: Ref<string>
 }
 
+const props = defineProps<{
+  page: "rest" | "graphql"
+}>()
+
+const toast = useToast()
+const t = useI18n()
+
+const filterText = ref("")
+const showMore = ref(false)
+const confirmRemove = ref(false)
+
+const clickedHistory = ref<HistoryEntry | null>(null)
+const confirmChange = ref(false)
+const showSaveRequestModal = ref(false)
+
 const history = useReadonlyStream<RESTHistoryEntry[] | GQLHistoryEntry[]>(
   props.page === "rest" ? restHistory$ : graphqlHistory$,
   []
@@ -199,11 +227,93 @@ const clearHistory = () => {
   toast.success(`${t("state.history_deleted")}`)
 }
 
-const useHistory = (entry: any) => {
+const setRestReq = (request: HoppRESTRequest | null | undefined) => {
-  if (props.page === "rest")
+  setRESTRequest(safelyExtractRESTRequest(request, getDefaultRESTRequest()))
-    setRESTRequest(
+}
-      safelyExtractRESTRequest(entry.request, getDefaultRESTRequest())
+
-    )
+const useHistory = (entry: HistoryEntry) => {
+  const currentFullReq = getRESTRequest()
+  // Initial state trigers a popup
+  if (!clickedHistory.value) {
+    clickedHistory.value = entry
+    confirmChange.value = true
+    return
+  }
+  // Checks if there are any change done in current request and the history request
+  if (!isEqual(currentFullReq, clickedHistory.value.request)) {
+    clickedHistory.value = entry
+    confirmChange.value = true
+  } else {
+    props.page === "rest" && setRestReq(entry.request as HoppRESTRequest)
+    clickedHistory.value = entry
+  }
+}
+
+/** Save current request to the collection */
+const saveRequestChange = () => {
+  const saveCtx = getRESTSaveContext()
+  saveCurrentRequest(saveCtx)
+  confirmChange.value = false
+}
+
+/** Discard changes and change the current request and remove the collection context */
+const discardRequestChange = () => {
+  const saveCtx = getRESTSaveContext()
+  if (saveCtx) {
+    setRESTSaveContext(null)
+  }
+  clickedHistory.value &&
+    setRestReq(clickedHistory.value.request as HoppRESTRequest)
+  confirmChange.value = false
+}
+
+const saveCurrentRequest = (saveCtx: HoppRequestSaveContext | null) => {
+  if (!saveCtx) {
+    showSaveRequestModal.value = true
+    return
+  }
+  if (saveCtx.originLocation === "user-collection") {
+    try {
+      editRESTRequest(
+        saveCtx.folderPath,
+        saveCtx.requestIndex,
+        getRESTRequest()
+      )
+      clickedHistory.value &&
+        setRestReq(clickedHistory.value.request as HoppRESTRequest)
+      setRESTSaveContext(null)
+      toast.success(`${t("request.saved")}`)
+    } catch (e) {
+      console.error(e)
+      setRESTSaveContext(null)
+      saveCurrentRequest(null)
+    }
+  } else if (saveCtx.originLocation === "team-collection") {
+    const req = getRESTRequest()
+    try {
+      runMutation(UpdateRequestDocument, {
+        requestID: saveCtx.requestID,
+        data: {
+          title: req.name,
+          request: JSON.stringify(req),
+        },
+      })().then((result) => {
+        if (E.isLeft(result)) {
+          toast.error(`${t("profile.no_permission")}`)
+        } else {
+          toast.success(`${t("request.saved")}`)
+        }
+      })
+      clickedHistory.value &&
+        setRestReq(clickedHistory.value.request as HoppRESTRequest)
+      setRESTSaveContext(null)
+    } catch (error) {
+      showSaveRequestModal.value = true
+      toast.error(`${t("error.something_went_wrong")}`)
+      console.error(error)
+      setRESTSaveContext(null)
+    }
+  }
 }
 
 const isRESTHistoryEntry = (
@@ -225,14 +335,16 @@ const deleteBatchHistoryEntry = (entries: TimedHistoryEntry[]) => {
   toast.success(`${t("state.deleted")}`)
 }
 
-const deleteHistory = (entry: any) => {
+const deleteHistory = (entry: HistoryEntry) => {
-  if (props.page === "rest") deleteRESTHistoryEntry(entry)
+  if (props.page === "rest") deleteRESTHistoryEntry(entry as RESTHistoryEntry)
-  else deleteGraphqlHistoryEntry(entry)
+  else deleteGraphqlHistoryEntry(entry as GQLHistoryEntry)
   toast.success(`${t("state.deleted")}`)
 }
 
-const toggleStar = (entry: any) => {
+const toggleStar = (entry: HistoryEntry) => {
-  if (props.page === "rest") toggleRESTHistoryEntryStar(entry)
+  //History entry type specified because function does not know the type
-  else toggleGraphqlHistoryEntryStar(entry)
+  if (props.page === "rest")
+    toggleRESTHistoryEntryStar(entry as RESTHistoryEntry)
+  else toggleGraphqlHistoryEntryStar(entry as GQLHistoryEntry)
 }
 </script>

packages/hoppscotch-app/components/http/ReqChangeConfirmModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="$t('modal.confirm')"
+    aria-modal="true"
+    @close="hideModal"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <label>
+          {{ t("confirm.request_change") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          v-focus
+          :label="t('action.save')"
+          @click.native="saveApiChange"
+        />
+        <ButtonSecondary
+          :label="t('action.dont_save')"
+          @click.native="discardApiChange"
+        />
+      </span>
+      <ButtonSecondary :label="t('action.cancel')" @click.native="hideModal" />
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
+defineProps<{
+  show: Boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "save-change"): void
+  (e: "discard-change"): void
+  (e: "hide-modal"): void
+}>()
+
+const saveApiChange = () => {
+  emit("save-change")
+}
+
+const discardApiChange = () => {
+  emit("discard-change")
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>

packages/hoppscotch-app/helpers/types/HoppRequestSaveContext.ts

@@ -1,3 +1,5 @@
+import { HoppRESTRequest } from "@hoppscotch/data"
+
 /**
  * We use the save context to figure out
  * how a loaded request is to be saved.
@@ -18,6 +20,10 @@ export type HoppRequestSaveContext =
        * Index to the request
        */
       requestIndex: number
+      /**
+       * Current request
+       */
+      req?: HoppRESTRequest
     }
   | {
       /**
@@ -36,4 +42,8 @@ export type HoppRequestSaveContext =
        * ID of the collection loaded
        */
       collectionID?: string
+      /**
+       * Current request
+       */
+      req?: HoppRESTRequest
     }

packages/hoppscotch-app/locales/en.json

@@ -10,6 +10,7 @@
     "disconnect": "Disconnect",
     "dismiss": "Dismiss",
     "download_file": "Download file",
+    "dont_save": "Don't save",
     "duplicate": "Duplicate",
     "edit": "Edit",
     "go_back": "Go back",
@@ -121,6 +122,7 @@
     "team_collections": "Team Collections"
   },
   "confirm": {
+    "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
     "exit_team": "Are you sure you want to leave this team?",
     "logout": "Are you sure you want to logout?",
     "remove_collection": "Are you sure you want to permanently delete this collection?",