refactor: implement updated equality heuristics for hopprestrequest struct

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="
-            active &&
-            active.originLocation === 'user-collection' &&
-            active.folderPath === folderPath &&
-            active.requestIndex === requestIndex
-          "
+          v-if="isActive"
           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">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, computed } from "@nuxtjs/composition-api"
 import {
+  HoppRESTRequest,
   safelyExtractRESTRequest,
   translateToNewRequest,
+  isEqualHoppRESTRequest,
 } from "@hoppscotch/data"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+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({
-  props: {
-    request: { type: Object, default: () => {} },
-    collectionIndex: { type: Number, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
-    // eslint-disable-next-line vue/require-default-prop
-    requestIndex: [Number, String],
-    doc: Boolean,
-    saveRequest: Boolean,
-    collectionsType: { type: Object, default: () => {} },
-    folderPath: { type: String, default: null },
-    picked: { type: Object, default: () => {} },
-  },
-  setup() {
-    const active = useReadonlyStream(restSaveContext$, null)
-    return {
-      active,
-      tippyActions: ref<any | null>(null),
-      options: ref<any | null>(null),
-      edit: ref<any | null>(null),
-      duplicate: ref<any | null>(null),
-      deleteAction: ref<any | null>(null),
-    }
-  },
-  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", {
+const props = defineProps<{
+  request: HoppRESTRequest
+  collectionIndex: number
+  folderIndex: number
+  folderName: string
+  requestIndex: number
+  doc: boolean
+  saveRequest: boolean
+  collectionsType: object
+  folderPath: string
+  picked?: {
+    pickedType: string
+    collectionIndex: number
+    folderPath: string
+    folderName: string
+    requestIndex: number
+  }
+}>()
+
+const emit = defineEmits<{
+  (
+    e: "select",
+    data:
+      | {
           picked: {
-            pickedType: "my-request",
-            collectionIndex: this.collectionIndex,
-            folderPath: this.folderPath,
-            folderName: this.folderName,
-            requestIndex: this.requestIndex,
-          },
-        })
-      else {
-        setRESTRequest(
-          safelyExtractRESTRequest(
-            translateToNewRequest(this.request),
-            getDefaultRESTRequest()
-          ),
-          {
-            originLocation: "user-collection",
-            folderPath: this.folderPath,
-            requestIndex: this.requestIndex,
+            pickedType: string
+            collectionIndex: number
+            folderPath: string
+            folderName: string
+            requestIndex: number
           }
-        )
-      }
-    },
-    dragStart({ dataTransfer }) {
-      this.dragging = !this.dragging
-      dataTransfer.setData("folderPath", this.folderPath)
-      dataTransfer.setData("requestIndex", this.requestIndex)
-    },
-    removeRequest() {
-      this.$emit("remove-request", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folderName,
-        folderPath: this.folderPath,
-        requestIndex: this.$props.requestIndex,
+        }
+      | undefined
+  ): void
+
+  (
+    e: "remove-request",
+    data: {
+      collectionIndex: number
+      folderName: string
+      folderPath: string
+      requestIndex: number
+    }
+  ): void
+
+  (
+    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,
+        },
       })
-    },
-    getRequestLabelColor(method: string): string {
-      return (
-        this.requestMethodLabels[method.toLowerCase()] ||
-        this.requestMethodLabels.default
+  } else {
+    const currentReqWithNoChange = active.value.req
+    const currentFullReq = getRESTRequest()
+
+    // Check if whether user clicked the same request or not
+    if (!isActive.value && currentReqWithNoChange !== undefined) {
+      // Check if there is any changes done on the current request
+      if (isEqualHoppRESTRequest(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="
-            active &&
-            active.originLocation === 'team-collection' &&
-            active.requestID === requestIndex
-          "
+          v-if="isActive"
           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,287 @@
       @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">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, computed } from "@nuxtjs/composition-api"
 import {
+  HoppRESTRequest,
+  isEqualHoppRESTRequest,
   safelyExtractRESTRequest,
   translateToNewRequest,
 } from "@hoppscotch/data"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import * as E from "fp-ts/Either"
+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({
-  props: {
-    request: { type: Object, default: () => {} },
-    collectionIndex: { type: Number, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
-    // eslint-disable-next-line vue/require-default-prop
-    requestIndex: [Number, String],
-    doc: Boolean,
-    saveRequest: Boolean,
-    collectionsType: { type: Object, default: () => {} },
-    picked: { type: Object, default: () => {} },
-    collectionID: { type: String, default: null },
-  },
-  setup() {
-    const active = useReadonlyStream(restSaveContext$, null)
-    return {
-      active,
-      tippyActions: ref<any | null>(null),
-      options: ref<any | null>(null),
-      edit: ref<any | null>(null),
-      deleteAction: ref<any | null>(null),
-      duplicate: ref<any | null>(null),
-    }
-  },
-  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", {
+const props = defineProps<{
+  request: HoppRESTRequest
+  collectionIndex: number
+  folderIndex: number
+  folderName?: string
+  requestIndex: string
+  doc: boolean
+  saveRequest: boolean
+  collectionsType: {
+    type: "my-collections" | "team-collections"
+    selectedTeam: Team | undefined
+  }
+  collectionID: string
+  picked?: {
+    pickedType: string
+    requestID: string
+  }
+}>()
+
+const emit = defineEmits<{
+  (
+    e: "select",
+    data:
+      | {
           picked: {
-            pickedType: "teams-request",
-            requestID: this.requestIndex,
-          },
-        })
-      else
-        setRESTRequest(
-          safelyExtractRESTRequest(
-            translateToNewRequest(this.request),
-            getDefaultRESTRequest()
-          ),
-          {
-            originLocation: "team-collection",
-            requestID: this.requestIndex as string,
+            pickedType: string
+            requestID: string
           }
-        )
-    },
-    dragStart({ dataTransfer }) {
-      this.dragging = !this.dragging
-      dataTransfer.setData("requestIndex", this.requestIndex)
-    },
-    removeRequest() {
-      this.$emit("remove-request", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folderName,
-        requestIndex: this.$props.requestIndex,
+        }
+      | undefined
+  ): void
+
+  (
+    e: "remove-request",
+    data: {
+      collectionIndex: number
+      folderName: string | undefined
+      requestIndex: string
+    }
+  ): 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
+)
+
+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,
+        },
       })
-    },
-    getRequestLabelColor(method: any) {
-      return (
-        (this.requestMethodLabels as any)[method.toLowerCase()] ||
-        this.requestMethodLabels.default
+  } else {
+    const currentReqWithNoChange = active.value.req
+    const currentFullReq = getRESTRequest()
+
+    // Check if whether user clicked the same request or not
+    if (!isActive.value && currentReqWithNoChange) {
+      // Check if there is any changes done on the current request
+      if (isEqualHoppRESTRequest(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

@@ -36,7 +36,7 @@
         open
       >
         <summary
-          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
         >
           <span
             class="px-4 py-2 truncate transition group-hover:text-secondary capitalize-first"
@@ -97,16 +97,32 @@
       @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,
+  isEqualHoppRESTRequest,
+  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 {
   useI18n,
   useReadonlyStream,
@@ -124,17 +140,17 @@ import {
   RESTHistoryEntry,
   GQLHistoryEntry,
 } from "~/newstore/history"
-import { getDefaultRESTRequest, setRESTRequest } from "~/newstore/RESTSession"
-
-const props = defineProps<{
-  page: "rest" | "graphql"
-}>()
-
-const filterText = ref("")
-const showMore = ref(false)
-const confirmRemove = ref(false)
-const toast = useToast()
-const t = useI18n()
+import {
+  getDefaultRESTRequest,
+  getRESTRequest,
+  getRESTSaveContext,
+  setRESTRequest,
+  setRESTSaveContext,
+} 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"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -143,6 +159,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 +230,100 @@ const clearHistory = () => {
   toast.success(`${t("state.history_deleted")}`)
 }
 
-const useHistory = (entry: any) => {
-  if (props.page === "rest")
-    setRESTRequest(
-      safelyExtractRESTRequest(entry.request, getDefaultRESTRequest())
+const setRestReq = (request: HoppRESTRequest | null | undefined) => {
+  setRESTRequest(safelyExtractRESTRequest(request, getDefaultRESTRequest()))
+}
+
+// NOTE: For GQL, the HistoryGraphqlCard component already implements useEntry
+// (That is not a really good behaviour tho ¯\_(ツ)_/¯)
+const useHistory = (entry: RESTHistoryEntry) => {
+  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 (
+    !isEqualHoppRESTRequest(
+      currentFullReq,
+      clickedHistory.value.request as HoppRESTRequest
     )
+  ) {
+    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 +345,16 @@ const deleteBatchHistoryEntry = (entries: TimedHistoryEntry[]) => {
   toast.success(`${t("state.deleted")}`)
 }
 
-const deleteHistory = (entry: any) => {
-  if (props.page === "rest") deleteRESTHistoryEntry(entry)
-  else deleteGraphqlHistoryEntry(entry)
+const deleteHistory = (entry: HistoryEntry) => {
+  if (props.page === "rest") deleteRESTHistoryEntry(entry as RESTHistoryEntry)
+  else deleteGraphqlHistoryEntry(entry as GQLHistoryEntry)
   toast.success(`${t("state.deleted")}`)
 }
 
-const toggleStar = (entry: any) => {
-  if (props.page === "rest") toggleRESTHistoryEntryStar(entry)
-  else toggleGraphqlHistoryEntryStar(entry)
+const toggleStar = (entry: HistoryEntry) => {
+  // History entry type specified because function does not know the type
+  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?",

packages/hoppscotch-app/package.json

@@ -58,7 +58,7 @@
     "@codemirror/tooltip": "^0.19.16",
     "@codemirror/view": "^0.19.48",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
-    "@hoppscotch/data": "workspace:^0.4.0",
+    "@hoppscotch/data": "workspace:^0.4.2",
     "@hoppscotch/js-sandbox": "workspace:^2.0.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.32.0",

packages/hoppscotch-app/pages/index.vue

@@ -25,11 +25,11 @@ import {
   watch,
 } from "@nuxtjs/composition-api"
 import { Subscription } from "rxjs"
-import isEqual from "lodash/isEqual"
 import {
   HoppRESTRequest,
   HoppRESTAuthOAuth2,
   safelyExtractRESTRequest,
+  isEqualHoppRESTRequest,
 } from "@hoppscotch/data"
 import {
   getRESTRequest,
@@ -102,8 +102,7 @@ function setupRequestSync(
     ) {
       const request = await loadRequestFromSync()
       if (request) {
-        // setRESTRequest(request)
-        if (!isEqual(request, getRESTRequest())) {
+        if (!isEqualHoppRESTRequest(request, getRESTRequest())) {
           requestForSync.value = request
           confirmSync.value = true
         }

packages/hoppscotch-cli/package.json

@@ -35,7 +35,7 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
-    "@hoppscotch/data": "workspace:^0.4.1",
+    "@hoppscotch/data": "workspace:^0.4.2",
     "@hoppscotch/js-sandbox": "workspace:^2.0.0",
     "@swc/core": "^1.2.163",
     "@types/axios": "^0.14.0",

packages/hoppscotch-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/data",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Data Types, Validations and Migrations for Hoppscotch Public Data Structures",
   "main": "dist/index.js",
   "module": "true",

packages/hoppscotch-data/src/rest/index.ts

@@ -1,6 +1,9 @@
 import cloneDeep from "lodash/cloneDeep"
+import * as Eq from "fp-ts/Eq"
+import * as S from "fp-ts/string"
 import { ValidContentTypes } from "./content-types"
 import { HoppRESTAuth } from "./HoppRESTAuth"
+import { lodashIsEqualEq, mapThenEq, undefinedEq } from "../utils/eq"
 
 export * from "./content-types"
 export * from "./HoppRESTAuth"
@@ -57,6 +60,28 @@ export interface HoppRESTRequest {
   body: HoppRESTReqBody
 }
 
+export const HoppRESTRequestEq = Eq.struct<HoppRESTRequest>({
+  id: undefinedEq(S.Eq),
+  v: S.Eq,
+  auth: lodashIsEqualEq,
+  body: lodashIsEqualEq,
+  endpoint: S.Eq,
+  headers: mapThenEq(
+    (arr) => arr.filter((h) => h.key !== "" && h.value !== ""),
+    lodashIsEqualEq
+  ),
+  params: mapThenEq(
+    (arr) => arr.filter((p) => p.key !== "" && p.value !== ""),
+    lodashIsEqualEq
+  ),
+  method: S.Eq,
+  name: S.Eq,
+  preRequestScript: S.Eq,
+  testScript: S.Eq,
+})
+
+export const isEqualHoppRESTRequest = HoppRESTRequestEq.equals
+
 /**
  * Safely tries to extract REST Request data from an unknown value.
  * If we fail to detect certain bits, we just resolve it to the default value

packages/hoppscotch-data/src/utils/eq.ts

@@ -0,0 +1,50 @@
+import * as Eq from "fp-ts/Eq"
+import * as S from "fp-ts/string"
+import isEqual from "lodash/isEqual"
+
+/*
+ * Eq-s are fp-ts an interface (type class) that defines how the equality
+ * of 2 values of a certain type are matched as equal
+ */
+
+
+/**
+ * Create an Eq from a non-undefinable value and makes it accept undefined
+ * @param eq The non nullable Eq to add to
+ * @returns The updated Eq which accepts undefined
+ */
+export const undefinedEq = <T>(eq: Eq.Eq<T>): Eq.Eq<T | undefined> => ({
+  equals(x: T | undefined, y: T | undefined) {
+    if (x !== undefined && y !== undefined) {
+      return eq.equals(x, y)
+    }
+
+    return x === undefined && y === undefined
+  }
+})
+
+/**
+ * An Eq which compares by transforming based on a mapping function and then applying the Eq to it
+ * @param map The mapping function to map values to
+ * @param eq The Eq which takes the value which the map returns
+ * @returns An Eq which takes the input of the mapping function
+ */
+export const mapThenEq = <A, B>(map: (x: A) => B, eq: Eq.Eq<B>): Eq.Eq<A> => ({
+  equals(x: A, y: A) {
+    return eq.equals(map(x), map(y))
+  }
+})
+
+/**
+ * An Eq which checks equality of 2 string in a case insensitive way
+ */
+export const stringCaseInsensitiveEq: Eq.Eq<string> = mapThenEq(S.toLowerCase, S.Eq)
+
+/**
+ * An Eq that does equality check with Lodash's isEqual function
+ */
+export const lodashIsEqualEq: Eq.Eq<any> = {
+  equals(x: any, y: any) {
+    return isEqual(x, y)
+  }
+}

packages/hoppscotch-js-sandbox/package.json

@@ -40,7 +40,7 @@
   "author": "Hoppscotch (support@hoppscotch.io)",
   "license": "MIT",
   "dependencies": {
-    "@hoppscotch/data": "workspace:^0.4.0",
+    "@hoppscotch/data": "workspace:^0.4.2",
     "fp-ts": "^2.11.9",
     "lodash": "^4.17.21",
     "quickjs-emscripten": "^0.15.0",

pnpm-lock.yaml

@@ -76,7 +76,7 @@ importers:
       '@graphql-codegen/urql-introspection': ^2.1.1
       '@graphql-typed-document-node/core': ^3.1.1
       '@hoppscotch/codemirror-lang-graphql': workspace:^0.1.0
-      '@hoppscotch/data': workspace:^0.4.0
+      '@hoppscotch/data': workspace:^0.4.2
       '@hoppscotch/js-sandbox': workspace:^2.0.0
       '@nuxt/types': ^2.15.8
       '@nuxt/typescript-build': ^2.1.0
@@ -345,7 +345,7 @@ importers:
 
   packages/hoppscotch-cli:
     specifiers:
-      '@hoppscotch/data': workspace:^0.4.1
+      '@hoppscotch/data': workspace:^0.4.2
       '@hoppscotch/js-sandbox': workspace:^2.0.0
       '@swc/core': ^1.2.163
       '@types/axios': ^0.14.0
@@ -399,7 +399,7 @@ importers:
   packages/hoppscotch-js-sandbox:
     specifiers:
       '@digitak/esrun': ^3.1.2
-      '@hoppscotch/data': workspace:^0.4.0
+      '@hoppscotch/data': workspace:^0.4.2
       '@relmify/jest-fp-ts': ^2.0.1
       '@types/jest': ^27.4.1
       '@types/lodash': ^4.14.181
@@ -3909,11 +3909,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27494471.1091d45:
-    resolution: {integrity: sha512-aDN043C1VMsZfKq3FffDW/QofQY/aCDJfYgtnJOoGwkqNbe+KpFd/R9XFrqSh6rk7V41x9EVBMsoaHH6/H+Ctw==}
+  /@nuxt/kit-edge/3.0.0-27498764.32c798c:
+    resolution: {integrity: sha512-2Ikg0/XCpJR6AlX3y+rFJhLoVmmVPSrHKtrH0SFf/U3wrC36PNKB21804fhPFAXqTwfBgTtOiRa7fHYgYr2Pjw==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-27494471.1091d45
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-27498764.32c798c
       c12: 0.2.5
       consola: 2.15.3
       defu: 6.0.0
@@ -3927,9 +3927,9 @@ packages:
       pathe: 0.2.0
       pkg-types: 0.3.2
       scule: 0.2.1
-      semver: 7.3.6
+      semver: 7.3.7
       unctx: 1.1.4
-      unimport: 0.1.4
+      unimport: 0.1.5
       untyped: 0.4.4
     transitivePeerDependencies:
       - esbuild
@@ -3961,8 +3961,8 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-27494471.1091d45:
-    resolution: {integrity: sha512-2tokTe3YQYKxyiTGC7cgeKRSJif+xvx5pXl5cb7sx0Nwim2hJyTi6gE9U5YbCZ85Rqu5pnqVZ5c6bLNOtIdDRw==}
+  /@nuxt/schema-edge/3.0.0-27498764.32c798c:
+    resolution: {integrity: sha512-oJ6pARR1IIhVLIAZK5VIB5IMXF2IEbbDtlWRwHNYJc3nyPbFY/yIfgBYo5E6+XNk45VLt+Yme66H4oGLEl706g==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       c12: 0.2.5
@@ -3974,7 +3974,7 @@ packages:
       scule: 0.2.1
       std-env: 3.0.1
       ufo: 0.8.3
-      unimport: 0.1.4
+      unimport: 0.1.5
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -7170,15 +7170,6 @@ packages:
     resolution: {integrity: sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=}
     dev: false
 
-  /bundle-require/3.0.4_esbuild@0.14.30:
-    resolution: {integrity: sha512-VXG6epB1yrLAvWVQpl92qF347/UXmncQj7J3U8kZEbdVZ1ZkQyr4hYeL/9RvcE8vVVdp53dY78Fd/3pqfRqI1A==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    peerDependencies:
-      esbuild: '>=0.13'
-    dependencies:
-      esbuild: 0.14.30
-      load-tsconfig: 0.2.3
-
   /bundle-require/3.0.4_esbuild@0.14.34:
     resolution: {integrity: sha512-VXG6epB1yrLAvWVQpl92qF347/UXmncQj7J3U8kZEbdVZ1ZkQyr4hYeL/9RvcE8vVVdp53dY78Fd/3pqfRqI1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7187,7 +7178,6 @@ packages:
     dependencies:
       esbuild: 0.14.34
       load-tsconfig: 0.2.3
-    dev: true
 
   /bytes/3.0.0:
     resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=}
@@ -9174,29 +9164,12 @@ packages:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  /esbuild-android-64/0.14.30:
-    resolution: {integrity: sha512-vdJ7t8A8msPfKpYUGUV/KaTQRiZ0vDa2XSTlzXVkGGVHLKPeb85PBUtYJcEgw3htW3IdX5i1t1IMdQCwJJgNAg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
   /esbuild-android-64/0.14.34:
     resolution: {integrity: sha512-XfxcfJqmMYsT/LXqrptzFxmaR3GWzXHDLdFNIhm6S00zPaQF1TBBWm+9t0RZ6LRR7iwH57DPjaOeW20vMqI4Yw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-android-arm64/0.14.30:
-    resolution: {integrity: sha512-BdgGfxeA5hBQNErLr7BWJUA8xjflEfyaARICy8e0OJYNSAwDbEzOf8LyiKWSrDcgV129mWhi3VpbNQvOIDEHcg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
     optional: true
 
   /esbuild-android-arm64/0.14.34:
@@ -9205,15 +9178,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-64/0.14.30:
-    resolution: {integrity: sha512-VRaOXMMrsG5n53pl4qFZQdXy2+E0NoLP/QH3aDUI0+bQP+ZHDmbINKcDy2IX7GVFI9kqPS18iJNAs5a6/G2LZg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
     optional: true
 
   /esbuild-darwin-64/0.14.34:
@@ -9222,15 +9186,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-arm64/0.14.30:
-    resolution: {integrity: sha512-qDez+fHMOrO9Oc9qjt/x+sy09RJVh62kik5tVybKRLmezeV4qczM9/sAYY57YN0aWLdHbcCj2YqJUWYJNsgKnw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
     optional: true
 
   /esbuild-darwin-arm64/0.14.34:
@@ -9239,15 +9194,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-64/0.14.30:
-    resolution: {integrity: sha512-mec1jENcImVVagddZlGWsdAUwBnzR5cgnhzCxv+9fSMxKbx1uZYLLUAnLPp8m/i934zrumR1xGjJ5VoWdPlI2w==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
     optional: true
 
   /esbuild-freebsd-64/0.14.34:
@@ -9256,15 +9202,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-arm64/0.14.30:
-    resolution: {integrity: sha512-cpjbTs6Iok/AfeB0JgTzyUJTMStC1SQULmany5nHx6S4GTkSgaAHuJzZO0GcVWqghI4e0YL/bjXAhN5Mn6feNw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
     optional: true
 
   /esbuild-freebsd-arm64/0.14.34:
@@ -9273,15 +9210,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-32/0.14.30:
-    resolution: {integrity: sha512-liIONVT4F2kZmOMwtwASqZ8WkIjb5HHBR9HUffdHiuotSTF3CyZO+EJf+Og+SYYuuVIvt0qHNSFjBA/iSESteQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-32/0.14.34:
@@ -9290,15 +9218,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-64/0.14.30:
-    resolution: {integrity: sha512-LUnpzoMpRqFON5En4qEj6NWiyH6a1K+Y2qYNKrCy5qPTjDoG/EWeqMz69n8Uv7pRuvDKl3FNGJ1dufTrA5i0sw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-64/0.14.34:
@@ -9307,15 +9226,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm/0.14.30:
-    resolution: {integrity: sha512-97T+bbXnpqf7mfIG49UR7ZSJFGgvc22byn74qw3Kx2GDCBSQoVFjyWuKOHGXp8nXk3XYrdFF+mQ8yQ7aNsgQvg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-arm/0.14.34:
@@ -9324,15 +9234,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm64/0.14.30:
-    resolution: {integrity: sha512-DHZHn6FK5q/KL0fpNT/0jE38Nnyk2rXxKE9WENi95EXtqfOLPgE8tzjTZQNgpr61R95QX4ymQU26ni3IZk8buQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-arm64/0.14.34:
@@ -9341,15 +9242,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-mips64le/0.14.30:
-    resolution: {integrity: sha512-fLUzTFZ7uknC0aPTk7/lM7NmaG/9ZqE3SaHEphcaM009SZK/mDOvZugWi1ss6WGNhk13dUrhkfHcc4FSb9hYhg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-mips64le/0.14.34:
@@ -9358,15 +9250,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-ppc64le/0.14.30:
-    resolution: {integrity: sha512-2Oudm2WEfj0dNU9bzIl5L/LrsMEmHWsOsYgJJqu8fDyUDgER+J1d33qz3cUdjsJk7gAENayIxDSpsuCszx0w3A==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-ppc64le/0.14.34:
@@ -9375,15 +9258,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-riscv64/0.14.30:
-    resolution: {integrity: sha512-RPMucPW47rV4t2jlelaE948iCRtbZf5RhifxSwzlpM1Mqdyu99MMNK0w4jFreGTmLN+oGomxIOxD6n+2E/XqHw==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-riscv64/0.14.34:
@@ -9392,15 +9266,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-s390x/0.14.30:
-    resolution: {integrity: sha512-OZ68r7ok6qO7hdwrwQn2p5jbIRRcUcVaAykB7e0uCA0ODwfeGunILM6phJtq2Oz4dlEEFvd+tSuma3paQKwt+A==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
     optional: true
 
   /esbuild-linux-s390x/0.14.34:
@@ -9409,15 +9274,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-netbsd-64/0.14.30:
-    resolution: {integrity: sha512-iyejQUKn0TzpPkufq8pSCxOg9NheycQbMbPCmjefTe9wYuUlBt1TcHvdoJnYbQzsAhAh1BNq+s0ycRsIJFZzaQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
     optional: true
 
   /esbuild-netbsd-64/0.14.34:
@@ -9426,15 +9282,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-openbsd-64/0.14.30:
-    resolution: {integrity: sha512-UyK1MTMcy4j5fH260fsE1o6MVgWNhb62eCK2yCKCRazZv8Nqdc2WiP9ygjWidmEdCDS+A6MuVp9ozk9uoQtQpA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
     optional: true
 
   /esbuild-openbsd-64/0.14.34:
@@ -9443,15 +9290,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-sunos-64/0.14.30:
-    resolution: {integrity: sha512-aQRtRTNKHB4YuG+xXATe5AoRTNY48IJg5vjE8ElxfmjO9+KdX7MHFkTLhlKevCD6rNANtB3qOlSIeAiXTwHNqw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
     optional: true
 
   /esbuild-sunos-64/0.14.34:
@@ -9460,15 +9298,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-32/0.14.30:
-    resolution: {integrity: sha512-9/fb1tPtpacMqxAXp3fGHowUDg/l9dVch5hKmCLEZC6PdGljh6h372zMdJwYfH0Bd5CCPT0Wx95uycBLJiqpXA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
     optional: true
 
   /esbuild-windows-32/0.14.34:
@@ -9477,15 +9306,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-64/0.14.30:
-    resolution: {integrity: sha512-DHgITeUhPAnN9I5O6QBa1GVyPOhiYCn4S4TtQr7sO4+X0LNyqnlmA1M0qmGkUdDC1QQfjI8uQ4G/whdWb2pWIQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
     optional: true
 
   /esbuild-windows-64/0.14.34:
@@ -9494,15 +9314,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-arm64/0.14.30:
-    resolution: {integrity: sha512-F1kLyQH7zSgjh5eLxogGZN7C9+KNs9m+s7Q6WZoMmCWT/6j998zlaoECHyM8izJRRfsvw2eZlEa1jO6/IOU1AQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
     optional: true
 
   /esbuild-windows-arm64/0.14.34:
@@ -9511,7 +9322,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /esbuild/0.12.29:
@@ -9520,33 +9330,6 @@ packages:
     requiresBuild: true
     dev: true
 
-  /esbuild/0.14.30:
-    resolution: {integrity: sha512-wCecQSBkIjp2xjuXY+wcXS/PpOQo9rFh4NAKPh4Pm9f3fuLcnxkR0rDzA+mYP88FtXIUcXUyYmaIgfrzRl55jA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      esbuild-android-64: 0.14.30
-      esbuild-android-arm64: 0.14.30
-      esbuild-darwin-64: 0.14.30
-      esbuild-darwin-arm64: 0.14.30
-      esbuild-freebsd-64: 0.14.30
-      esbuild-freebsd-arm64: 0.14.30
-      esbuild-linux-32: 0.14.30
-      esbuild-linux-64: 0.14.30
-      esbuild-linux-arm: 0.14.30
-      esbuild-linux-arm64: 0.14.30
-      esbuild-linux-mips64le: 0.14.30
-      esbuild-linux-ppc64le: 0.14.30
-      esbuild-linux-riscv64: 0.14.30
-      esbuild-linux-s390x: 0.14.30
-      esbuild-netbsd-64: 0.14.30
-      esbuild-openbsd-64: 0.14.30
-      esbuild-sunos-64: 0.14.30
-      esbuild-windows-32: 0.14.30
-      esbuild-windows-64: 0.14.30
-      esbuild-windows-arm64: 0.14.30
-
   /esbuild/0.14.34:
     resolution: {integrity: sha512-QIWdPT/gFF6hCaf4m7kP0cJ+JIuFkdHibI7vVFvu3eJS1HpVmYHWDulyN5WXwbRA0SX/7ZDaJ/1DH8SdY9xOJg==}
     engines: {node: '>=12'}
@@ -9573,7 +9356,6 @@ packages:
       esbuild-windows-32: 0.14.34
       esbuild-windows-64: 0.14.34
       esbuild-windows-arm64: 0.14.34
-    dev: true
 
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -12898,7 +12680,7 @@ packages:
   /jsonfile/4.0.0:
     resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
     optionalDependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.10
     dev: false
 
   /jsonfile/6.1.0:
@@ -13940,10 +13722,6 @@ packages:
     resolution: {integrity: sha512-zMq5n3cOf4fOzA4WoeulxagbAgMChdev3MgP6K51k7M0u2whTXxupfIY4VVzws4vxkiWhwH1rVQcsw7zDGfRhA==}
     dev: true
 
-  /mlly/0.4.3:
-    resolution: {integrity: sha512-xezyv7hnfFPuiDS3AiJuWs0OxlvooS++3L2lURvmh/1n7UG4O2Ehz9UkwWgg3wyLEPKGVfJLlr2DjjTCl9UJTg==}
-    dev: true
-
   /mlly/0.5.1:
     resolution: {integrity: sha512-0axKqxbYyQvaAfi6BNqDluCJqg6RkjdsdFxSDoiP6l5HplSTr3ie5Vkxvw9U9ogdj65x56amTnAn+xSoP727Rg==}
     dependencies:
@@ -14317,7 +14095,7 @@ packages:
   /nuxt-windicss/2.2.10:
     resolution: {integrity: sha512-DCn0LWgeQ9PWSjSoVH6LB82P/sF8QMVNpFmjJAfe+V1EcNJIY/5RCmqRp3zItNibVsRNiyYTEWQa/SoI3ts6Hw==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27494471.1091d45
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27498764.32c798c
       '@windicss/plugin-utils': 1.8.3
       consola: 2.15.3
       defu: 6.0.0
@@ -16735,6 +16513,14 @@ packages:
     dependencies:
       lru-cache: 7.8.1
 
+  /semver/7.3.7:
+    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /send/0.17.1:
     resolution: {integrity: sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==}
     engines: {node: '>= 0.8.0'}
@@ -17690,18 +17476,6 @@ packages:
       - bufferutil
       - utf-8-validate
 
-  /sucrase/3.20.3:
-    resolution: {integrity: sha512-azqwq0/Bs6RzLAdb4dXxsCgMtAaD2hzmUr4UhSfsxO46JFPAwMnnb441B/qsudZiS6Ylea3JXZe3Q497lsgXzQ==}
-    engines: {node: '>=8'}
-    hasBin: true
-    dependencies:
-      commander: 4.1.1
-      glob: 7.1.6
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.5
-      ts-interface-checker: 0.1.13
-
   /sucrase/3.21.0:
     resolution: {integrity: sha512-FjAhMJjDcifARI7bZej0Bi1yekjWQHoEvWIXhLPwDhC6O4iZ5PtGb86WV56riW87hzpgB13wwBKO9vKAiWu5VQ==}
     engines: {node: '>=8'}
@@ -17713,7 +17487,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.5
       ts-interface-checker: 0.1.13
-    dev: true
 
   /supports-color/2.0.0:
     resolution: {integrity: sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=}
@@ -18419,11 +18192,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      bundle-require: 3.0.4_esbuild@0.14.30
+      bundle-require: 3.0.4_esbuild@0.14.34
       cac: 6.7.12
       chokidar: 3.5.3
       debug: 4.3.4
-      esbuild: 0.14.30
+      esbuild: 0.14.34
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
@@ -18431,7 +18204,7 @@ packages:
       resolve-from: 5.0.0
       rollup: 2.70.1
       source-map: 0.7.3
-      sucrase: 3.20.3
+      sucrase: 3.21.0
       tree-kill: 1.2.2
       typescript: 4.6.3
     transitivePeerDependencies:
@@ -18604,18 +18377,18 @@ packages:
     engines: {node: '>= 0.4.12'}
     dev: true
 
-  /unimport/0.1.4:
-    resolution: {integrity: sha512-vrqIM/YzAQZR9UDod94pAQmYRFA/3m88KiL/U91pN9m6BVFG0TplxLe6siGn1V3XwQb14UJHqj7hiATjwUwI9A==}
+  /unimport/0.1.5:
+    resolution: {integrity: sha512-Wv+CFdDJXkyiHD6yXeHdYMmD5LisII43o6q2ttw1s5mAhwfcBtZPRbZcqPvSkgHX4ZzMPTUIstMhVfC+tHrh6A==}
     dependencies:
       '@rollup/pluginutils': 4.2.0
       escape-string-regexp: 5.0.0
       globby: 13.1.1
       local-pkg: 0.4.1
       magic-string: 0.26.1
-      mlly: 0.4.3
+      mlly: 0.5.1
       pathe: 0.2.0
       scule: 0.2.1
-      unplugin: 0.3.3
+      unplugin: 0.6.1
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -18726,26 +18499,6 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: false
 
-  /unplugin/0.3.3:
-    resolution: {integrity: sha512-WjZWpUqqcYPQ/efR00Zm2m1+J1LitwoZ4uhHV4VdZ+IpW0Nh/qnDYtVf+nLhozXdGxslMPecOshVR7NiWFl4gA==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      webpack-virtual-modules: 0.4.3
-    dev: true
-
   /unplugin/0.6.1:
     resolution: {integrity: sha512-cQqRCgQ2v/Q4fPIWNVZ6sNIDdl5v8JXOnlsUOsGzT4fblTONoPWaytiYSpu5qJ9lvSDZYAQN6BRVo3XQoZMfUQ==}
     peerDependencies:
@@ -19585,7 +19338,7 @@ packages:
   /write-file-atomic/2.4.3:
     resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       imurmurhash: 0.1.4
       signal-exit: 3.0.7
     dev: false