feat(ui): Socket Panel > Highlight valid and invalid environment vari…

…ables in the address bar of client
flawiddsouza · Mar 4, 2024 · 4ab368c · 4ab368c
1 parent 4114234
commit 4ab368c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -156,4 +156,13 @@ export default {
     background-color: var(--input-disabled-background-color);
     color: var(--input-disabled-color);
 }
+
+/* when editor transitions from empty to filled when you type something, the editor messes */
+/* with the size of the div container, causing a small layout shift - this fixes that */
+/* img.cm-widgetBuffers seems appear inside editor only when the editor is empty */
+/* without this fix, the ui jump can be seen in the socket panel address bar & the */
+/* request panel inputs of the auth tab, when moving from empty to filled */
+.code-mirror-single-line .cm-widgetBuffer {
+    vertical-align: inherit;
+}
 </style>
diff --git a/packages/ui/src/components/SocketPanel.vue b/packages/ui/src/components/SocketPanel.vue
@@ -39,12 +39,13 @@
                                 <option value="Socket.IO-v3">IO v3</option>
                                 <option value="Socket.IO-v2">IO v2</option>
                             </select>
-                            <input
-                                type="text"
+                            <CodeMirrorSingleLine
                                 v-model="client.url"
                                 :placeholder="`${client.type === undefined ? 'WebSocket URL' : 'Socket.IO URL'}`"
-                                class="ml-0_5rem w-100p"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
                                 :disabled="isClientConnected(client)"
+                                class="input ml-0_5rem w-100p"
                             />
                             <div class="ml-0_5rem">
                                 <button
@@ -241,6 +242,7 @@ import ioV2 from 'socket.io-client-v2'
 import { io as ioV3 } from 'socket.io-client-v3'
 import { io as ioV4 } from 'socket.io-client-v4'
 import { useStore } from 'vuex'
+import CodeMirrorSingleLine from './CodeMirrorSingleLine.vue'
 
 // Data Variables
 
@@ -257,6 +259,7 @@ function handleMessageContainerRef(ref: any, clientId: string) {
 // Computed
 const store = useStore()
 const activeTab = computed(() => store.state.activeTab)
+const activeTabEnvironmentResolved = computed(() => store.state.activeTabEnvironmentResolved)
 const sockets = store.state.sockets
 
 // Methods
@@ -866,7 +869,8 @@ button.icon > svg {
 
 textarea,
 input,
-select {
+select,
+.input {
     outline: 0;
     border: 1px solid var(--default-border-color);
     border-radius: 0.25rem;
@@ -879,7 +883,7 @@ textarea {
     resize: vertical;
 }
 
-input:disabled {
+input:disabled, .input.disabled {
     background-color: var(--socket-input-disabled-background-color);
 }