feat: rename request by double clicking its name on tabs (#3057)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/components/collections/EditRequest.vue

@@ -42,9 +42,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import { useVModel } from "@vueuse/core"
 
 const toast = useToast()
 const t = useI18n()
@@ -53,28 +53,22 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     loadingState: boolean
-    editingRequestName: string
+    modelValue?: string
   }>(),
   {
     show: false,
     loadingState: false,
-    editingRequestName: "",
+    modelValue: "",
   }
 )
 
 const emit = defineEmits<{
   (e: "submit", name: string): void
   (e: "hide-modal"): void
+  (e: "update:modelValue", value: string): void
 }>()
 
-const name = ref("")
+const name = useVModel(props, "modelValue")
-
-watch(
-  () => props.editingRequestName,
-  (newName) => {
-    name.value = newName
-  }
-)
 
 const editRequest = () => {
   if (name.value.trim() === "") {

packages/hoppscotch-common/src/components/collections/index.vue

@@ -126,7 +126,7 @@
     />
     <CollectionsEditRequest
       :show="showModalEditRequest"
-      :editing-request-name="editingRequest ? editingRequest.name : ''"
+      v-bind:model-value="editingRequest ? editingRequest.name : ''"
       :loading-state="modalLoadingState"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"

packages/hoppscotch-common/src/pages/index.vue

@@ -23,6 +23,7 @@
                 v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
                 :title="tab.document.request.name"
                 class="truncate px-2"
+                @dblclick="openReqRenameModal()"
               >
                 <span
                   class="font-semibold text-tiny"
@@ -61,6 +62,12 @@
         <HttpSidebar />
       </template>
     </AppPaneLayout>
+    <CollectionsEditRequest
+      :show="showRenamingReqNameModal"
+      v-model="reqName"
+      @submit="renameReqName"
+      @hide-modal="showRenamingReqNameModal = false"
+    />
     <HoppSmartConfirmModal
       :show="confirmingCloseForTabID !== null"
       :confirm="t('modal.close_unsaved_tab')"
@@ -116,6 +123,8 @@ import { oauthRedirect } from "~/helpers/oauth"
 
 const savingRequest = ref(false)
 const confirmingCloseForTabID = ref<string | null>(null)
+const showRenamingReqNameModal = ref(false)
+const reqName = ref<string>("")
 
 const t = useI18n()
 const toast = useToast()
@@ -166,6 +175,20 @@ const removeTab = (tabID: string) => {
   }
 }
 
+const openReqRenameModal = () => {
+  showRenamingReqNameModal.value = true
+  reqName.value = currentActiveTab.value.document.request.name
+}
+
+const renameReqName = () => {
+  const tab = getTabRef(currentTabID.value)
+  if (tab.value) {
+    tab.value.document.request.name = reqName.value
+    updateTab(tab.value)
+  }
+  showRenamingReqNameModal.value = false
+}
+
 /**
  * This function is closed when the confirm tab is closed by some means (even saving triggers close)
  */