fix(ui) Socket Panel > resized resizable payload input resets height …

…every time you type in it or when a message comes in
flawiddsouza · Jan 20, 2025 · b0b5dc2 · b0b5dc2
1 parent 6995ad0
commit b0b5dc2
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 8 deletions.
diff --git a/packages/ui/src/components/SocketPanel.vue b/packages/ui/src/components/SocketPanel.vue
@@ -112,7 +112,16 @@
                                 :allow-multiple-lines="true"
                                 lang="json"
                                 class="w-100p mt-0_5rem input o-a"
-                                style="height: 5.8rem; resize: vertical; margin-bottom: 0.2rem;"
+                                style="resize: vertical; margin-bottom: 0.2rem;"
+                                :style="{ height: clientMetadata[client.id].payloadEditorHeight }"
+                                :data-height="clientMetadata[client.id].payloadEditorHeight"
+                                :ref="
+                                    (element) =>
+                                        handlePayloadEditorRef(
+                                            element,
+                                            client.id
+                                        )
+                                "
                             />
                             <div class="d-f flex-jc-sb">
                                 <button
@@ -240,7 +249,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeMount, reactive, computed, inject, ref } from 'vue'
+import { nextTick, onBeforeMount, reactive, computed, inject, ref, onBeforeUnmount } from 'vue'
 import { Client, ClientPayload, ClientMessage } from './SocketPanel.types'
 import {
     formatTimestamp,
@@ -267,6 +276,47 @@ const props = defineProps<{
 
 const componentRoot = ref<HTMLElement | null>(null)
 
+const isMouseDown = ref(false)
+
+const payloadEditorRefs: any = reactive({})
+
+function handlePayloadEditorRef(codeMirrorSingleLineComponent: any, clientId: string) {
+    // element can suddenly become null when tab is switched to a request tab and switched back to a socket tab
+    if(codeMirrorSingleLineComponent === null) {
+        return
+    }
+
+    if (clientId in payloadEditorRefs) {
+        return
+    }
+
+    payloadEditorRefs[clientId] = codeMirrorSingleLineComponent.$el
+
+    let skipUpdate = true
+
+    // console.log(`Attaching ResizeObserver for client ${clientId}`, payloadEditorRefs[clientId])
+
+    new ResizeObserver(() => {
+        if (!isMouseDown.value) {
+            return
+        }
+
+        if (skipUpdate) {
+            skipUpdate = false
+            return
+        }
+
+        // if we don't wait for a while, the set height sometimes does not match the actual height
+        setTimeout(() => {
+            clientMetadata[clientId].payloadEditorHeight = payloadEditorRefs[clientId].style.height
+            // console.log(`Updating payload editor height for client ${clientId}`, clientMetadata[clientId].payloadEditorHeight)
+        }, 100)
+
+        // to avoid recursive updates
+        skipUpdate = true
+    }).observe(payloadEditorRefs[clientId])
+}
+
 const messageContainerRefs: any = reactive({})
 
 function handleMessageContainerRef(ref: any, clientId: string) {
@@ -281,6 +331,8 @@ const disconnectTriggered: { [key: string]: boolean } = reactive({})
 
 const clientUrlsEnvSubstituted: { [key: string]: string } = reactive({})
 
+const clientMetadata: { [key: string]: { payloadEditorHeight: string } } = reactive({})
+
 // Computed
 const store = useStore()
 const activeWorkspace = computed(() => store.state.activeWorkspace)
@@ -309,6 +361,14 @@ function addClient() {
         messages: [],
         visibility: 'shown'
     })
+
+    activeTab.value.clients.forEach((client: Client) => {
+        if (client.id in clientMetadata === false) {
+            clientMetadata[client.id] = {
+                payloadEditorHeight: '5.8rem'
+            }
+        }
+    })
 }
 
 async function removeClient(client: Client) {
@@ -613,6 +673,12 @@ function loadSavedClients() {
 
         activeTab.value.clients = [initialClient]
     }
+
+    activeTab.value.clients.forEach((client: Client) => {
+        clientMetadata[client.id] = {
+            payloadEditorHeight: '5.8rem'
+        }
+    })
 }
 
 function addNewPayload(client: Client) {
@@ -725,10 +791,26 @@ async function setSelectedTextAsEnvironmentVariable() {
     $toast.success(`Environment variable set: ${environmentVariableName}`)
 }
 
+function handleMouseDown() {
+    isMouseDown.value = true
+}
+
+function handleMouseUp() {
+    isMouseDown.value = false
+}
+
 // Lifecycle Events
 
 onBeforeMount(async() => {
     loadSavedClients()
+
+    document.addEventListener('mousedown', handleMouseDown)
+    document.addEventListener('mouseup', handleMouseUp)
+})
+
+onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', handleMouseDown)
+    document.removeEventListener('mouseup', handleMouseUp)
 })
 </script>
 
@@ -938,7 +1020,6 @@ button.icon > svg {
     display: block;
 }
 
-textarea,
 input,
 select,
 .input {
@@ -950,10 +1031,6 @@ select,
     background-color: var(--background-color);
 }
 
-textarea {
-    resize: vertical;
-}
-
 input:disabled, .input.disabled {
     background-color: var(--socket-input-disabled-background-color);
 }

diff --git a/packages/ui/src/components/Tab.vue b/packages/ui/src/components/Tab.vue
@@ -34,7 +34,9 @@
     </section>
 
     <section class="request-response-panels" v-if="collectionItem && collectionItem._type === 'socket'">
-        <SocketPanel :key="collectionItem._id" :active-tab="collectionItem" />
+        <KeepAlive>
+            <SocketPanel :key="collectionItem._id" :active-tab="collectionItem" />
+        </KeepAlive>
     </section>
 
     <section class="request-response-panels" v-show="collectionItem && collectionItem._type === 'request_group'">