From 4114234d8966e105430a62c29dd3c94ac03e394a Mon Sep 17 00:00:00 2001
From: Flawid DSouza <me@flawiddsouza.com>
Date: Mon, 4 Mar 2024 22:15:18 +0530
Subject: [PATCH] feat(ui): Request Panel > Highlight valid and invalid
 environment variables in all single line inputs (change input type text to
 CodeMirrorSingleLine)

---
 .../src/components/CodeMirrorSingleLine.vue   |  45 +++++-
 packages/ui/src/components/RequestPanel.vue   | 145 +++++++++++++++---
 2 files changed, 162 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
index 6518597b..193a3c6b 100644
--- a/packages/ui/src/components/CodeMirrorSingleLine.vue
+++ b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="code-mirror-single-line"></div>
+    <div class="code-mirror-single-line" :class="{ disabled }"></div>
 </template>
 
 <script>
@@ -9,7 +9,7 @@ import { history, historyKeymap } from '@codemirror/commands'
 import { envVarDecoration } from '@/utils/codemirror-extensions'
 
 function getExtensions(vueInstance) {
-    return [
+    const extensions = [
         history(),
         EditorView.updateListener.of(v => {
             if(v.docChanged) {
@@ -38,6 +38,12 @@ function getExtensions(vueInstance) {
         placeholder(vueInstance.placeholder),
         envVarDecoration(vueInstance.envVariables),
     ]
+
+    if(vueInstance.disabled) {
+        extensions.push(EditorView.editable.of(false))
+    }
+
+    return extensions
 }
 
 function createState(vueInstance) {
@@ -61,6 +67,14 @@ export default {
             type: Object,
             default: () => ({})
         },
+        inputTextCompatible: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
@@ -86,6 +100,13 @@ export default {
                 }
             }
         },
+        disabled() {
+            if (this.editor) {
+                this.editor.dispatch({
+                    effects: StateEffect.reconfigure.of(getExtensions(this))
+                })
+            }
+        },
     },
     mounted() {
         this.editor = new EditorView({
@@ -103,9 +124,14 @@ export default {
 
 .code-mirror-single-line .cm-scroller {
     font-family: inherit !important;
-    margin-left: 0.2rem;
-    margin-right: 0.5rem;
-    overflow-x: hidden !important;
+    margin-left: v-bind('inputTextCompatible ? "2px" : "0.2rem"');
+    margin-right: v-bind('inputTextCompatible ? "2px" : "0.5rem"');
+    overflow: hidden;
+    line-height: v-bind('inputTextCompatible ? "1.3" : "1.4"');
+}
+
+.code-mirror-single-line .cm-content {
+    padding: v-bind('inputTextCompatible ? "0" : "4px 0"');
 }
 
 .code-mirror-single-line .valid-env-var {
@@ -121,4 +147,13 @@ export default {
     padding: 2px 0;
     color: var(--invalid-env-highlight-color);
 }
+
+.code-mirror-single-line .cm-line {
+    padding: v-bind('inputTextCompatible ? "0" : "0 2px 0 4px"');
+}
+
+.code-mirror-single-line .cm-content[contenteditable="false"] {
+    background-color: var(--input-disabled-background-color);
+    color: var(--input-disabled-color);
+}
 </style>
diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue
index 7c025711..d736b2d3 100644
--- a/packages/ui/src/components/RequestPanel.vue
+++ b/packages/ui/src/components/RequestPanel.vue
@@ -36,13 +36,27 @@
                     <option value="application/octet-stream">Binary File</option>
                 </select>
                 <div v-if="activeTab.body.mimeType === 'application/x-www-form-urlencoded'">
-                    <table>
+                    <table style="table-layout: fixed;">
                         <tr v-for="(param, index) in activeTab.body.params">
                             <td>
-                                <input type="text" v-model="param.name" spellcheck="false" placeholder="name" :disabled="param.disabled">
+                                <CodeMirrorSingleLine
+                                    v-model="param.name"
+                                    placeholder="name"
+                                    :env-variables="activeTabEnvironmentResolved"
+                                    :input-text-compatible="true"
+                                    :disabled="param.disabled"
+                                    :key="'body-param-name-' + index"
+                                />
                             </td>
                             <td>
-                                <input type="text" v-model="param.value" spellcheck="false" placeholder="value" :disabled="param.disabled">
+                                <CodeMirrorSingleLine
+                                    v-model="param.value"
+                                    placeholder="value"
+                                    :env-variables="activeTabEnvironmentResolved"
+                                    :input-text-compatible="true"
+                                    :disabled="param.disabled"
+                                    :key="'body-param-value-' + index"
+                                />
                             </td>
                             <td>
                                 <input type="checkbox" :checked="param.disabled === undefined || param.disabled === false" @change="param.disabled = $event.target.checked ? false : true">
@@ -59,15 +73,30 @@
                     </table>
                 </div>
                 <div v-if="activeTab.body.mimeType === 'multipart/form-data'">
-                    <table>
+                    <table style="table-layout: fixed;">
                         <tr v-for="(param, index) in activeTab.body.params">
                             <td>
-                                <input type="text" v-model="param.name" spellcheck="false" placeholder="name" :disabled="param.disabled">
+                                <CodeMirrorSingleLine
+                                    v-model="param.name"
+                                    placeholder="name"
+                                    :env-variables="activeTabEnvironmentResolved"
+                                    :input-text-compatible="true"
+                                    :disabled="param.disabled"
+                                    :key="'body-param-name-' + index"
+                                />
                             </td>
                             <td>
                                 <div style="display: flex">
                                     <template v-if="param.type === 'text'">
-                                        <input type="text" v-model="param.value" spellcheck="false" placeholder="value" :disabled="param.disabled">
+                                        <CodeMirrorSingleLine
+                                            v-model="param.value"
+                                            placeholder="value"
+                                            :env-variables="activeTabEnvironmentResolved"
+                                            :input-text-compatible="true"
+                                            :disabled="param.disabled"
+                                            :key="'body-param-value-' + index"
+                                            style="flex: 1; overflow: auto;"
+                                        />
                                     </template>
                                     <template v-else>
                                         <label style="width: 100%; display: flex; align-items: center;">
@@ -165,13 +194,27 @@
                 </div>
             </div>
             <template v-if="activeRequestPanelTab === 'Query'">
-                <table>
+                <table style="table-layout: fixed;">
                     <tr v-for="(param, index) in activeTab.parameters">
                         <td>
-                            <input type="text" v-model="param.name" spellcheck="false" placeholder="name" :disabled="param.disabled">
+                            <CodeMirrorSingleLine
+                                v-model="param.name"
+                                placeholder="name"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :disabled="param.disabled"
+                                :key="'query-param-name-' + index"
+                            />
                         </td>
                         <td>
-                            <input type="text" v-model="param.value" spellcheck="false" placeholder="value" :disabled="param.disabled">
+                            <CodeMirrorSingleLine
+                                v-model="param.value"
+                                placeholder="value"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :disabled="param.disabled"
+                                :key="'query-param-value-' + index"
+                            />
                         </td>
                         <td>
                             <input type="checkbox" :checked="param.disabled === undefined || param.disabled === false" @change="param.disabled = $event.target.checked ? false : true">
@@ -192,13 +235,27 @@
                         <span> ({{ activeTab.pathParameters.filter(item => item.disabled === undefined || item.disabled === false).length }})</span>
                     </template>
                 </div>
-                <table>
+                <table style="table-layout: fixed;">
                     <tr v-for="(param, index) in activeTab.pathParameters">
                         <td>
-                            <input type="text" v-model="param.name" spellcheck="false" placeholder="name" :disabled="param.disabled">
+                            <CodeMirrorSingleLine
+                                v-model="param.name"
+                                placeholder="name"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :disabled="param.disabled"
+                                :key="'path-param-name-' + index"
+                            />
                         </td>
                         <td>
-                            <input type="text" v-model="param.value" spellcheck="false" placeholder="value" :disabled="param.disabled">
+                            <CodeMirrorSingleLine
+                                v-model="param.value"
+                                placeholder="value"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :disabled="param.disabled"
+                                :key="'path-param-value-' + index"
+                            />
                         </td>
                         <td>
                             <input type="checkbox" :checked="param.disabled === undefined || param.disabled === false" @change="param.disabled = $event.target.checked ? false : true">
@@ -215,13 +272,27 @@
                 </table>
             </template>
             <template v-if="activeRequestPanelTab === 'Header'">
-                <table>
+                <table style="table-layout: fixed;">
                     <tr v-for="(header, index) in activeTab.headers">
                         <td>
-                            <input type="text" v-model="header.name" spellcheck="false" placeholder="name" :disabled="header.disabled">
+                            <CodeMirrorSingleLine
+                                v-model="header.name"
+                                placeholder="name"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :disabled="header.disabled"
+                                :key="'header-name-' + index"
+                            />
                         </td>
                         <td>
-                            <input type="text" v-model="header.value" spellcheck="false" placeholder="value" :disabled="header.disabled">
+                            <CodeMirrorSingleLine
+                                v-model="header.value"
+                                placeholder="value"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :disabled="header.disabled"
+                                :key="'header-value-' + index"
+                            />
                         </td>
                         <td>
                             <input type="checkbox" :checked="header.disabled === undefined || header.disabled === false" @change="header.disabled = $event.target.checked ? false : true">
@@ -244,7 +315,7 @@
                     <option value="bearer">Bearer Token</option>
                 </select>
                 <div v-if="activeTab.authentication && activeTab.authentication.type !== 'No Auth'">
-                    <table>
+                    <table class="auth" style="table-layout: fixed;">
                         <tr>
                             <td style="min-width: 6rem; user-select: none;">
                                 <label for="basic-auth-enabled">Enabled</label>
@@ -259,7 +330,13 @@
                                     <label for="basic-auth-username" :class="{ disabled: activeTab.authentication.disabled }">Username</label>
                                 </td>
                                 <td style="width: 100%">
-                                    <input type="text" v-model="activeTab.authentication.username" id="basic-auth-username" :disabled="activeTab.authentication.disabled">
+                                    <CodeMirrorSingleLine
+                                        v-model="activeTab.authentication.username"
+                                        :env-variables="activeTabEnvironmentResolved"
+                                        :input-text-compatible="true"
+                                        :disabled="activeTab.authentication.disabled"
+                                        :key="'basic-auth-username'"
+                                    />
                                 </td>
                             </tr>
                             <tr>
@@ -267,17 +344,29 @@
                                     <label for="basic-auth-password" :class="{ disabled: activeTab.authentication.disabled }">Password</label>
                                 </td>
                                 <td style="width: 100%">
-                                    <input type="text" v-model="activeTab.authentication.password" id="basic-auth-password" :disabled="activeTab.authentication.disabled">
+                                    <CodeMirrorSingleLine
+                                        v-model="activeTab.authentication.password"
+                                        :env-variables="activeTabEnvironmentResolved"
+                                        :input-text-compatible="true"
+                                        :disabled="activeTab.authentication.disabled"
+                                        :key="'basic-auth-password'"
+                                    />
                                 </td>
                             </tr>
                         </template>
                         <template v-if="activeTab.authentication.type === 'bearer'">
                             <tr>
                                 <td style="user-select: none;">
-                                    <label for="basic-auth-token" :class="{ disabled: activeTab.authentication.disabled }">Token</label>
+                                    <label for="bearer-auth-token" :class="{ disabled: activeTab.authentication.disabled }">Token</label>
                                 </td>
                                 <td style="width: 100%">
-                                    <input type="text" v-model="activeTab.authentication.token" id="basic-auth-token" :disabled="activeTab.authentication.disabled">
+                                    <CodeMirrorSingleLine
+                                        v-model="activeTab.authentication.token"
+                                        :env-variables="activeTabEnvironmentResolved"
+                                        :input-text-compatible="true"
+                                        :disabled="activeTab.authentication.disabled"
+                                        :key="'bearer-auth-token'"
+                                    />
                                 </td>
                             </tr>
                             <tr>
@@ -285,7 +374,13 @@
                                     <label for="basic-auth-prefix" :class="{ disabled: activeTab.authentication.disabled }">Prefix</label>
                                 </td>
                                 <td style="width: 100%">
-                                    <input type="text" v-model="activeTab.authentication.prefix" id="basic-auth-prefix" :disabled="activeTab.authentication.disabled">
+                                    <CodeMirrorSingleLine
+                                        v-model="activeTab.authentication.prefix"
+                                        :env-variables="activeTabEnvironmentResolved"
+                                        :input-text-compatible="true"
+                                        :disabled="activeTab.authentication.disabled"
+                                        :key="'bearer-auth-prefix'"
+                                    />
                                 </td>
                             </tr>
                         </template>
@@ -658,8 +753,12 @@ export default {
     padding: 0.5rem;
 }
 
-.request-panel-tabs-context table td:nth-last-child(-n+2) {
-    width: 1px;
+.request-panel-tabs-context table:not(.auth) td:nth-last-child(-n+2) {
+    width: 29px;
+}
+
+.request-panel-tabs-context table.auth td:nth-last-child(-n+2) {
+    width: 96px;
 }
 
 .request-panel-tabs-context table input {