feat: show existing name while renaming collections/folders/requests - resolved #2006

packages/hoppscotch-app/components/collections/Edit.vue

@@ -38,13 +38,18 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
-    placeholderCollName: { type: String, default: null },
+    editingCollectionName: { type: String, default: null },
   },
   data() {
     return {
       name: null,
     }
   },
+  watch: {
+    editingCollectionName(val) {
+      this.name = val
+    },
+  },
   methods: {
     saveCollection() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/EditFolder.vue

@@ -39,12 +39,18 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
+    editingFolderName: { type: String, default: null },
   },
   data() {
     return {
       name: null,
     }
   },
+  watch: {
+    editingFolderName(val) {
+      this.name = val
+    },
+  },
   methods: {
     editFolder() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/EditRequest.vue

@@ -35,7 +35,7 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
-    placeholderReqName: { type: String, default: null },
+    editingRequestName: { type: String, default: null },
   },
   data() {
     return {
@@ -44,6 +44,11 @@ export default defineComponent({
       },
     }
   },
+  watch: {
+    editingRequestName(val) {
+      this.requestUpdateData.name = val
+    },
+  },
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {

packages/hoppscotch-app/components/collections/graphql/Edit.vue

@@ -45,12 +45,18 @@ export default defineComponent({
     show: Boolean,
     editingCollection: { type: Object, default: () => {} },
     editingCollectionIndex: { type: Number, default: null },
+    editingCollectionName: { type: String, default: null },
   },
   data() {
     return {
       name: null as string | null,
     }
   },
+  watch: {
+    editingCollectionName(val) {
+      this.name = val
+    },
+  },
   methods: {
     saveCollection() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/graphql/EditFolder.vue

@@ -45,12 +45,18 @@ export default defineComponent({
     show: Boolean,
     folder: { type: Object, default: () => {} },
     folderPath: { type: String, default: null },
+    editingFolderName: { type: String, default: null },
   },
   data() {
     return {
       name: "",
     }
   },
+  watch: {
+    editingFolderName(val) {
+      this.name = val
+    },
+  },
   methods: {
     editFolder() {
       if (!this.name) {

packages/hoppscotch-app/components/collections/graphql/EditRequest.vue

@@ -47,6 +47,7 @@ export default defineComponent({
     folderPath: { type: String, default: null },
     request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
     requestIndex: { type: Number, default: null },
+    editingRequestName: { type: String, default: null },
   },
   data() {
     return {
@@ -55,6 +56,11 @@ export default defineComponent({
       },
     }
   },
+  watch: {
+    editingRequestName(val) {
+      this.requestUpdateData.name = val
+    },
+  },
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -96,6 +96,7 @@
       :show="showModalEdit"
       :editing-collection="editingCollection"
       :editing-collection-index="editingCollectionIndex"
+      :editing-collection-name="editingCollection ? editingCollection.name : ''"
       @hide-modal="displayModalEdit(false)"
     />
     <CollectionsGraphqlAddFolder
@@ -110,6 +111,7 @@
       :folder="editingFolder"
       :folder-index="editingFolderIndex"
       :folder-path="editingFolderPath"
+      :editing-folder-name="editingFolder ? editingFolder.name : ''"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsGraphqlEditRequest
@@ -117,6 +119,7 @@
       :folder-path="editingFolderPath"
       :request="editingRequest"
       :request-index="editingRequestIndex"
+      :editing-request-name="editingRequest ? editingRequest.name : ''"
       @hide-modal="displayModalEditRequest(false)"
     />
     <CollectionsGraphqlImportExport

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

@@ -146,8 +146,11 @@
     />
     <CollectionsEdit
       :show="showModalEdit"
-      :editing-coll-name="editingCollection ? editingCollection.name : ''"
-      :placeholder-coll-name="editingCollection ? editingCollection.name : ''"
+      :editing-collection-name="
+        editingCollection
+          ? editingCollection.name || editingCollection.title
+          : ''
+      "
       @hide-modal="displayModalEdit(false)"
       @submit="updateEditingCollection"
     />
@@ -160,12 +163,15 @@
     />
     <CollectionsEditFolder
       :show="showModalEditFolder"
+      :editing-folder-name="
+        editingFolder ? editingFolder.name || editingFolder.title : ''
+      "
       @submit="updateEditingFolder"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsEditRequest
       :show="showModalEditRequest"
-      :placeholder-req-name="editingRequest ? editingRequest.name : ''"
+      :editing-request-name="editingRequest ? editingRequest.name : ''"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
     />

packages/hoppscotch-app/pages/profile.vue

@@ -186,7 +186,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useMeta, defineComponent } from "@nuxtjs/composition-api"
+import {
+  ref,
+  useMeta,
+  defineComponent,
+  watchEffect,
+} from "@nuxtjs/composition-api"
 import {
   currentUser$,
   setDisplayName,
@@ -210,8 +215,9 @@ const SYNC_ENVIRONMENTS = useSetting("syncEnvironments")
 const SYNC_HISTORY = useSetting("syncHistory")
 const currentUser = useReadonlyStream(currentUser$, null)
 
-const displayName = ref(currentUser$.value?.displayName)
+const displayName = ref(currentUser.value?.displayName)
 const updatingDisplayName = ref(false)
+watchEffect(() => (displayName.value = currentUser.value?.displayName))
 
 const updateDisplayName = () => {
   updatingDisplayName.value = true
@@ -227,8 +233,9 @@ const updateDisplayName = () => {
     })
 }
 
-const emailAddress = ref(currentUser$.value?.email)
+const emailAddress = ref(currentUser.value?.email)
 const updatingEmailAddress = ref(false)
+watchEffect(() => (emailAddress.value = currentUser.value?.email))
 
 const updateEmailAddress = () => {
   updatingEmailAddress.value = true