From ad7b3f05b1bd1153a1051e2573e5dd86523fe607 Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Mon, 4 Dec 2023 14:15:46 +0530
Subject: [PATCH] chore: update graphql with ts and setup

---
 .../components/collections/graphql/Add.vue    |  85 ++--
 .../collections/graphql/AddFolder.vue         |  78 +--
 .../components/collections/graphql/Edit.vue   |  13 +-
 .../collections/graphql/EditFolder.vue        |  83 ++--
 .../collections/graphql/EditRequest.vue       |  92 ++--
 .../components/collections/graphql/Folder.vue |  31 +-
 .../collections/graphql/Request.vue           |  51 +-
 .../components/collections/graphql/index.vue  | 450 ++++++++++--------
 .../src/components/graphql/Headers.vue        |  10 +-
 .../src/components/graphql/RequestOptions.vue |  17 +-
 10 files changed, 468 insertions(+), 442 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Add.vue b/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
index b5d287e22..c03c145fa 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Add.vue
@@ -32,58 +32,53 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { ref } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { HoppGQLRequest, makeCollection } from "@hoppscotch/data"
 import { addGraphqlCollection } from "~/newstore/collections"
 import { platform } from "~/platform"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  emits: ["hide-modal"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
-    }
-  },
-  data() {
-    return {
-      name: null as string | null,
-    }
-  },
-  methods: {
-    addNewCollection() {
-      if (!this.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
-        return
-      }
+const t = useI18n()
+const toast = useToast()
 
-      addGraphqlCollection(
-        makeCollection<HoppGQLRequest>({
-          name: this.name,
-          folders: [],
-          requests: [],
-        })
-      )
+defineProps<{
+  show: boolean
+}>()
 
-      this.hideModal()
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      platform.analytics?.logEvent({
-        type: "HOPP_CREATE_COLLECTION",
-        isRootCollection: true,
-        platform: "gql",
-        workspaceType: "personal",
-      })
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
-})
+const name = ref<string | null>(null)
+
+const addNewCollection = () => {
+  if (!name.value) {
+    toast.error(`${t("collection.invalid_name")}`)
+    return
+  }
+
+  addGraphqlCollection(
+    makeCollection<HoppGQLRequest>({
+      name: name.value,
+      folders: [],
+      requests: [],
+    })
+  )
+
+  hideModal()
+
+  platform.analytics?.logEvent({
+    type: "HOPP_CREATE_COLLECTION",
+    isRootCollection: true,
+    platform: "gql",
+    workspaceType: "personal",
+  })
+}
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue b/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
index 968ea8d30..71dd41a9c 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t('folder.new')"
-    @close="$emit('hide-modal')"
+    @close="hideModal"
   >
     <template #body>
       <HoppSmartInput
@@ -32,47 +32,49 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
-import { defineComponent } from "vue"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-    folderPath: { type: String, default: null },
-    collectionIndex: { type: Number, default: null },
-  },
-  emits: ["hide-modal", "add-folder"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+  collectionIndex: number
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (
+    e: "add-folder",
+    v: {
+      name: string
+      path: string | undefined
     }
-  },
-  data() {
-    return {
-      name: null,
-    }
-  },
-  methods: {
-    addFolder() {
-      if (!this.name) {
-        this.toast.error(`${this.t("folder.name_length_insufficient")}`)
-        return
-      }
+  ): void
+}>()
 
-      this.$emit("add-folder", {
-        name: this.name,
-        path: this.folderPath || `${this.collectionIndex}`,
-      })
+const name = ref<string | null>(null)
 
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
-})
+const addFolder = () => {
+  if (!name.value) {
+    toast.error(`${t("folder.name_length_insufficient")}`)
+    return
+  }
+
+  emit("add-folder", {
+    name: name.value,
+    path: props.folderPath || `${props.collectionIndex}`,
+  })
+
+  hideModal()
+}
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue b/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
index c6bc7c5a4..3cf1af32d 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Edit.vue
@@ -37,13 +37,14 @@ import { ref, watch } from "vue"
 import { editGraphqlCollection } from "~/newstore/collections"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
 
-const props = defineProps({
-  show: Boolean,
-  editingCollection: { type: Object, default: () => ({}) },
-  editingCollectionIndex: { type: Number, default: null },
-  editingCollectionName: { type: String, default: null },
-})
+const props = defineProps<{
+  show: boolean
+  editingCollectionIndex: number | null
+  editingCollection: HoppCollection<HoppGQLRequest> | null
+  editingCollectionName: string
+}>()
 
 const emit = defineEmits<{
   (e: "hide-modal"): void
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue b/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
index c6810a7a3..f9aef64aa 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue
@@ -32,52 +32,47 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { editGraphqlFolder } from "~/newstore/collections"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-    folder: { type: Object, default: () => ({}) },
-    folderPath: { type: String, default: null },
-    editingFolderName: { type: String, default: null },
-  },
-  emits: ["hide-modal"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
-    }
-  },
-  data() {
-    return {
-      name: "",
-    }
-  },
-  watch: {
-    editingFolderName(val) {
-      this.name = val
-    },
-  },
-  methods: {
-    editFolder() {
-      if (!this.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
-        return
-      }
-      editGraphqlFolder(this.folderPath, {
-        ...(this.folder as any),
-        name: this.name,
-      })
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = ""
-      this.$emit("hide-modal")
-    },
-  },
-})
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+  folder: any
+  editingFolderName: string
+}>()
+
+const emit = defineEmits(["hide-modal"])
+
+const name = ref("")
+
+watch(
+  () => props.editingFolderName,
+  (val) => {
+    name.value = val
+  }
+)
+
+const editFolder = () => {
+  if (!name.value) {
+    toast.error(`${t("collection.invalid_name")}`)
+    return
+  }
+  editGraphqlFolder(props.folderPath, {
+    ...(props.folder as any),
+    name: name.value,
+  })
+  hideModal()
+}
+
+const hideModal = () => {
+  name.value = ""
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue b/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
index 76c5295d2..38c087df9 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
@@ -32,61 +32,55 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppGQLRequest } from "@hoppscotch/data"
 import { editGraphqlRequest } from "~/newstore/collections"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-    folderPath: { type: String, default: null },
-    request: { type: Object as PropType<HoppGQLRequest>, default: () => ({}) },
-    requestIndex: { type: Number, default: null },
-    editingRequestName: { type: String, default: null },
-  },
-  emits: ["hide-modal"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
-    }
-  },
-  data() {
-    return {
-      requestUpdateData: {
-        name: null as any | null,
-      },
-    }
-  },
-  watch: {
-    editingRequestName(val) {
-      this.requestUpdateData.name = val
-    },
-  },
-  methods: {
-    saveRequest() {
-      if (!this.requestUpdateData.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
-        return
-      }
+const t = useI18n()
+const toast = useToast()
 
-      // TODO: Type safety goes brrrr. Proper typing plz
-      const requestUpdated = {
-        ...this.$props.request,
-        name: this.$data.requestUpdateData.name || this.$props.request.name,
-      }
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+  requestIndex: number | null
+  request: HoppGQLRequest | null
+  editingRequestName: string
+}>()
 
-      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      this.hideModal()
-    },
-    hideModal() {
-      this.requestUpdateData = { name: null }
-      this.$emit("hide-modal")
-    },
-  },
-})
+const requestUpdateData = ref({ name: null as string | null })
+
+watch(
+  () => props.editingRequestName,
+  (val) => {
+    requestUpdateData.value.name = val
+  }
+)
+
+const saveRequest = () => {
+  if (!requestUpdateData.value.name) {
+    toast.error(`${t("collection.invalid_name")}`)
+    return
+  }
+
+  const requestUpdated = {
+    ...(props.request as any),
+    name: requestUpdateData.value.name || (props.request as any).name,
+  }
+
+  editGraphqlRequest(props.folderPath, props.requestIndex, requestUpdated)
+
+  hideModal()
+}
+
+const hideModal = () => {
+  requestUpdateData.value = { name: null }
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
index 4735bde16..cb7cb9c23 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
@@ -10,24 +10,25 @@
       @dragend="dragging = false"
       @contextmenu.prevent="options.tippy.show()"
     >
-      <span
-        class="flex cursor-pointer items-center justify-center px-4"
+      <div
+        class="flex min-w-0 flex-1 items-center justify-center cursor-pointer"
         @click="toggleShowChildren()"
       >
-        <component
-          :is="collectionIcon"
-          class="svg-icons"
-          :class="{ 'text-accent': isSelected }"
-        />
-      </span>
-      <span
-        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
-        @click="toggleShowChildren()"
-      >
-        <span class="truncate" :class="{ 'text-accent': isSelected }">
-          {{ folder.name ? folder.name : folder.title }}
+        <span class="pointer-events-none flex items-center justify-center px-4">
+          <component
+            :is="collectionIcon"
+            class="svg-icons"
+            :class="{ 'text-accent': isSelected }"
+          />
         </span>
-      </span>
+        <span
+          class="pointer-events-none flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
+        >
+          <span class="truncate" :class="{ 'text-accent': isSelected }">
+            {{ folder.name ? folder.name : folder.title }}
+          </span>
+        </span>
+      </div>
       <div class="flex">
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Request.vue b/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
index 1d7337d48..1629624f1 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Request.vue
@@ -9,38 +9,41 @@
       @dragend="dragging = false"
       @contextmenu.prevent="options.tippy.show()"
     >
-      <span
-        class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
+      <div
+        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
         @click="selectRequest()"
       >
-        <component
-          :is="isSelected ? IconCheckCircle : IconFile"
-          class="svg-icons"
-          :class="{ 'text-accent': isSelected }"
-        />
-      </span>
-      <span
-        class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
-        @click="selectRequest()"
-      >
-        <span class="truncate" :class="{ 'text-accent': isSelected }">
-          {{ request.name }}
+        <span
+          class="pointer-events-none flex w-8 items-center justify-center truncate px-6"
+        >
+          <component
+            :is="isSelected ? IconCheckCircle : IconFile"
+            class="svg-icons"
+            :class="{ 'text-accent': isSelected }"
+          />
         </span>
         <span
-          v-if="isActive"
-          v-tippy="{ theme: 'tooltip' }"
-          class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
-          :title="`${t('collection.request_in_use')}`"
+          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
         >
-          <span
-            class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
-          >
+          <span class="truncate" :class="{ 'text-accent': isSelected }">
+            {{ request.name }}
           </span>
           <span
-            class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
-          ></span>
+            v-if="isActive"
+            v-tippy="{ theme: 'tooltip' }"
+            class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
+            :title="`${t('collection.request_in_use')}`"
+          >
+            <span
+              class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
+            >
+            </span>
+            <span
+              class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
+            ></span>
+          </span>
         </span>
-      </span>
+      </div>
       <div class="flex">
         <span>
           <tippy
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/index.vue b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
index a644e36f5..e1fe0500d 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -145,16 +145,14 @@
   </div>
 </template>
 
-<script lang="ts">
-// TODO: TypeScript + Script Setup this :)
-import { defineComponent } from "vue"
-import { cloneDeep, clone } from "lodash-es"
+<script setup lang="ts">
+import { ref } from "vue"
+import { clone, cloneDeep } from "lodash-es"
 import {
   graphqlCollections$,
   addGraphqlFolder,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
-
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
@@ -164,213 +162,251 @@ import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"
+import { computed } from "vue"
+import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
+import { Picked } from "~/helpers/types/HoppPicked"
 
-export default defineComponent({
-  props: {
-    // Whether to activate the ability to pick items (activates 'select' events)
-    saveRequest: { type: Boolean, default: false },
-    picked: { type: Object, default: null },
-  },
-  emits: ["select", "use-collection"],
-  setup() {
-    const collections = useReadonlyStream(graphqlCollections$, [], "deep")
-    const colorMode = useColorMode()
-    const t = useI18n()
-    const tabs = useService(GQLTabService)
+const t = useI18n()
 
-    return {
-      collections,
-      colorMode,
-      t,
-      tabs,
-      IconPlus,
-      IconHelpCircle,
-      IconImport,
+defineProps<{
+  // Whether to activate the ability to pick items (activates 'select' events)
+  saveRequest: boolean
+  picked: Picked
+}>()
+
+const collections = useReadonlyStream(graphqlCollections$, [], "deep")
+const colorMode = useColorMode()
+const tabs = useService(GQLTabService)
+
+const showModalAdd = ref(false)
+const showModalEdit = ref(false)
+const showModalImportExport = ref(false)
+const showModalAddRequest = ref(false)
+const showModalAddFolder = ref(false)
+const showModalEditFolder = ref(false)
+const showModalEditRequest = ref(false)
+
+const editingCollection = ref<HoppCollection<HoppGQLRequest> | null>(null)
+const editingCollectionIndex = ref<number | null>(null)
+const editingFolder = ref<HoppCollection<HoppGQLRequest> | null>(null)
+const editingFolderName = ref("")
+const editingFolderIndex = ref<number | null>(null)
+const editingFolderPath = ref("")
+const editingRequest = ref<HoppGQLRequest | null>(null)
+const editingRequestIndex = ref<number | null>(null)
+
+const filterText = ref("")
+
+const filteredCollections = computed(() => {
+  const collectionsClone = clone(collections.value)
+
+  if (!filterText.value) return collectionsClone
+
+  const filterTextLower = filterText.value.toLowerCase()
+  const filteredCollections = []
+
+  for (const collection of collectionsClone) {
+    const filteredRequests = []
+    const filteredFolders = []
+
+    for (const request of collection.requests) {
+      if (request.name.toLowerCase().includes(filterTextLower))
+        filteredRequests.push(request)
     }
-  },
-  data() {
-    return {
-      showModalAdd: false,
-      showModalEdit: false,
-      showModalImportExport: false,
-      showModalAddRequest: false,
-      showModalAddFolder: false,
-      showModalEditFolder: false,
-      showModalEditRequest: false,
-      editingCollection: undefined,
-      editingCollectionIndex: undefined,
-      editingFolder: undefined,
-      editingFolderName: undefined,
-      editingFolderIndex: undefined,
-      editingFolderPath: undefined,
-      editingRequest: undefined,
-      editingRequestIndex: undefined,
-      filterText: "",
+
+    for (const folder of collection.folders) {
+      const filteredFolderRequests = []
+      for (const request of folder.requests) {
+        if (request.name.toLowerCase().includes(filterTextLower))
+          filteredFolderRequests.push(request)
+      }
+      if (filteredFolderRequests.length > 0) {
+        const filteredFolder = { ...folder }
+        filteredFolder.requests = filteredFolderRequests
+        filteredFolders.push(filteredFolder)
+      }
     }
-  },
-  computed: {
-    filteredCollections() {
-      const collections = clone(this.collections)
 
-      if (!this.filterText) return collections
+    if (filteredRequests.length + filteredFolders.length > 0) {
+      const filteredCollection = { ...collection }
+      filteredCollection.requests = filteredRequests
+      filteredCollection.folders = filteredFolders
+      filteredCollections.push(filteredCollection)
+    }
+  }
 
-      const filterText = this.filterText.toLowerCase()
-      const filteredCollections = []
-
-      for (const collection of collections) {
-        const filteredRequests = []
-        const filteredFolders = []
-        for (const request of collection.requests) {
-          if (request.name.toLowerCase().includes(filterText))
-            filteredRequests.push(request)
-        }
-        for (const folder of collection.folders) {
-          const filteredFolderRequests = []
-          for (const request of folder.requests) {
-            if (request.name.toLowerCase().includes(filterText))
-              filteredFolderRequests.push(request)
-          }
-          if (filteredFolderRequests.length > 0) {
-            const filteredFolder = Object.assign({}, folder)
-            filteredFolder.requests = filteredFolderRequests
-            filteredFolders.push(filteredFolder)
-          }
-        }
-
-        if (filteredRequests.length + filteredFolders.length > 0) {
-          const filteredCollection = Object.assign({}, collection)
-          filteredCollection.requests = filteredRequests
-          filteredCollection.folders = filteredFolders
-          filteredCollections.push(filteredCollection)
-        }
-      }
-
-      return filteredCollections
-    },
-  },
-  methods: {
-    displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay
-    },
-    displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalImportExport(shouldDisplay) {
-      this.showModalImportExport = shouldDisplay
-    },
-    displayModalAddRequest(shouldDisplay) {
-      this.showModalAddRequest = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalAddFolder(shouldDisplay) {
-      this.showModalAddFolder = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalEditFolder(shouldDisplay) {
-      this.showModalEditFolder = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalEditRequest(shouldDisplay) {
-      this.showModalEditRequest = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    editCollection(collection, collectionIndex) {
-      this.$data.editingCollection = collection
-      this.$data.editingCollectionIndex = collectionIndex
-      this.displayModalEdit(true)
-    },
-    onAddRequest({ name, path, index }) {
-      const newRequest = {
-        ...this.tabs.currentActiveTab.value.document.request,
-        name,
-      }
-
-      saveGraphqlRequestAs(path, newRequest)
-
-      this.tabs.createNewTab({
-        saveContext: {
-          originLocation: "user-collection",
-          folderPath: path,
-          requestIndex: index,
-        },
-        request: newRequest,
-        isDirty: false,
-      })
-
-      platform.analytics?.logEvent({
-        type: "HOPP_SAVE_REQUEST",
-        platform: "gql",
-        createdNow: true,
-        workspaceType: "personal",
-      })
-
-      this.displayModalAddRequest(false)
-    },
-    addRequest(payload) {
-      const { path } = payload
-      this.$data.editingFolderPath = path
-      this.displayModalAddRequest(true)
-    },
-    onAddFolder({ name, path }) {
-      addGraphqlFolder(name, path)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_CREATE_COLLECTION",
-        isRootCollection: false,
-        platform: "gql",
-        workspaceType: "personal",
-      })
-
-      this.displayModalAddFolder(false)
-    },
-    addFolder(payload) {
-      const { path } = payload
-      this.$data.editingFolderPath = path
-      this.displayModalAddFolder(true)
-    },
-    editFolder(payload) {
-      const { folder, folderPath } = payload
-      this.editingFolder = folder
-      this.editingFolderPath = folderPath
-      this.displayModalEditFolder(true)
-    },
-    editRequest(payload) {
-      const {
-        collectionIndex,
-        folderIndex,
-        folderName,
-        request,
-        requestIndex,
-        folderPath,
-      } = payload
-      this.$data.editingFolderPath = folderPath
-      this.$data.editingCollectionIndex = collectionIndex
-      this.$data.editingFolderIndex = folderIndex
-      this.$data.editingFolderName = folderName
-      this.$data.editingRequest = request
-      this.$data.editingRequestIndex = requestIndex
-      this.displayModalEditRequest(true)
-    },
-    resetSelectedData() {
-      this.$data.editingCollection = undefined
-      this.$data.editingCollectionIndex = undefined
-      this.$data.editingFolder = undefined
-      this.$data.editingFolderIndex = undefined
-      this.$data.editingRequest = undefined
-      this.$data.editingRequestIndex = undefined
-    },
-    duplicateRequest({ folderPath, request }) {
-      saveGraphqlRequestAs(folderPath, {
-        ...cloneDeep(request),
-        name: `${request.name} - ${this.t("action.duplicate")}`,
-      })
-    },
-  },
+  return filteredCollections
 })
+
+const displayModalAdd = (shouldDisplay: boolean) => {
+  showModalAdd.value = shouldDisplay
+}
+
+const displayModalEdit = (shouldDisplay: boolean) => {
+  showModalEdit.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalImportExport = (shouldDisplay: boolean) => {
+  showModalImportExport.value = shouldDisplay
+}
+
+const displayModalAddRequest = (shouldDisplay: boolean) => {
+  showModalAddRequest.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalAddFolder = (shouldDisplay: boolean) => {
+  showModalAddFolder.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditFolder = (shouldDisplay: boolean) => {
+  showModalEditFolder.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditRequest = (shouldDisplay: boolean) => {
+  showModalEditRequest.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const editCollection = (
+  collection: HoppCollection<HoppGQLRequest>,
+  collectionIndex: number
+) => {
+  editingCollection.value = collection
+  editingCollectionIndex.value = collectionIndex
+  displayModalEdit(true)
+}
+
+const onAddRequest = ({
+  name,
+  path,
+  index,
+}: {
+  name: string
+  path: string
+  index: number
+}) => {
+  console.log("onAddRequest", name, path, index)
+  const newRequest = {
+    ...tabs.currentActiveTab.value.document.request,
+    name,
+  }
+
+  saveGraphqlRequestAs(path, newRequest)
+
+  tabs.createNewTab({
+    saveContext: {
+      originLocation: "user-collection",
+      folderPath: path,
+      requestIndex: index,
+    },
+    request: newRequest,
+    isDirty: false,
+  })
+
+  platform.analytics?.logEvent({
+    type: "HOPP_SAVE_REQUEST",
+    platform: "gql",
+    createdNow: true,
+    workspaceType: "personal",
+  })
+
+  displayModalAddRequest(false)
+}
+
+const addRequest = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+  displayModalAddRequest(true)
+}
+
+const onAddFolder = ({
+  name,
+  path,
+}: {
+  name: string
+  path: string | undefined
+}) => {
+  addGraphqlFolder(name, path ?? "0")
+
+  platform.analytics?.logEvent({
+    type: "HOPP_CREATE_COLLECTION",
+    isRootCollection: false,
+    platform: "gql",
+    workspaceType: "personal",
+  })
+
+  displayModalAddFolder(false)
+}
+
+const addFolder = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+  displayModalAddFolder(true)
+}
+
+const editFolder = (payload: {
+  folder: HoppCollection<HoppGQLRequest>
+  folderPath: string
+}) => {
+  const { folder, folderPath } = payload
+  editingFolder.value = folder
+  editingFolderPath.value = folderPath
+  displayModalEditFolder(true)
+}
+
+const editRequest = (payload: {
+  collectionIndex: number
+  folderIndex: number
+  folderName: string
+  request: HoppGQLRequest
+  requestIndex: number
+  folderPath: string
+}) => {
+  const {
+    collectionIndex,
+    folderIndex,
+    folderName,
+    request,
+    requestIndex,
+    folderPath,
+  } = payload
+  editingFolderPath.value = folderPath
+  editingCollectionIndex.value = collectionIndex
+  editingFolderIndex.value = folderIndex
+  editingFolderName.value = folderName
+  editingRequest.value = request
+  editingRequestIndex.value = requestIndex
+  displayModalEditRequest(true)
+}
+
+const duplicateRequest = ({
+  folderPath,
+  request,
+}: {
+  folderPath: string
+  request: HoppGQLRequest
+}) => {
+  saveGraphqlRequestAs(folderPath, {
+    ...cloneDeep(request),
+    name: `${request.name} - ${t("action.duplicate")}`,
+  })
+}
+
+const resetSelectedData = () => {
+  editingCollection.value = null
+  editingCollectionIndex.value = null
+  editingFolder.value = null
+  editingFolderIndex.value = null
+  editingRequest.value = null
+  editingRequestIndex.value = null
+}
 </script>
diff --git a/packages/hoppscotch-common/src/components/graphql/Headers.vue b/packages/hoppscotch-common/src/components/graphql/Headers.vue
index 7b9207b1f..03f0823e7 100644
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -271,6 +271,7 @@ import { useCodemirror } from "@composables/codemirror"
 import { objRemoveKey } from "~/helpers/functional/object"
 import { useVModel } from "@vueuse/core"
 import { HoppGQLHeader } from "~/helpers/graphql"
+import { throwError } from "~/helpers/functional/error"
 
 const colorMode = useColorMode()
 const t = useI18n()
@@ -386,7 +387,6 @@ watch(workingHeaders, (newWorkingHeaders) => {
     )
   )
 
-  console.log("not-equal", workingHeaders.value)
   if (!isEqual(request.value.headers, fixedHeaders)) {
     request.value.headers = cloneDeep(fixedHeaders)
   }
@@ -479,7 +479,11 @@ const deleteHeader = (index: number) => {
     })
   }
 
-  workingHeaders.value.splice(index, 1)
+  workingHeaders.value = pipe(
+    workingHeaders.value,
+    A.deleteAt(index),
+    O.getOrElseW(() => throwError("Working Headers Deletion Out of Bounds"))
+  )
 }
 
 const clearContent = () => {
@@ -577,6 +581,4 @@ const mask = (header: any) => {
 //   if (tab === "auth") emit("change-tab", "authorization")
 //   else emit("change-tab", "bodyParams")
 // }
-
-console.log("compoyed-header", computedHeaders.value)
 </script>
diff --git a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
index 77c674a59..aa82c2a32 100644
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -99,18 +99,15 @@ const props = withDefaults(
     optionTab: "query",
   }
 )
-const emit = defineEmits(["update:modelValue", "update:response"])
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppGQLRequest): void
+  (e: "update:optionTab", value: GQLOptionTabs): void
+  (e: "update:response", value: GQLResponseEvent[]): void
+}>()
+
 const selectedOptionTab = useVModel(props, "optionTab", emit)
 
-const request = ref(props.modelValue)
-
-watch(
-  () => request.value,
-  (newVal) => {
-    emit("update:modelValue", newVal)
-  },
-  { deep: true }
-)
+const request = useVModel(props, "modelValue", emit)
 
 const url = computedWithControl(
   () => tabs.currentActiveTab.value,