Skip to content

Commit

Permalink
feat(ui): Request Panel > Highlight valid and invalid environment var…
Browse files Browse the repository at this point in the history 
…iables in all single line inputs (change input type text to CodeMirrorSingleLine)
  • Loading branch information
@flawiddsouza
flawiddsouza committed Mar 4, 2024
1 parent 4382878 commit 1bb60fe
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 27 deletions.
43 changes: 39 additions & 4 deletions packages/ui/src/components/CodeMirrorSingleLine.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="code-mirror-single-line"></div>
<div class="code-mirror-single-line" :class="{ disabled }"></div>
</template>

<script>
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -61,6 +67,14 @@ export default {
type: Object,
default: () => ({})
},
inputTextCompatible: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
},
data() {
return {
Expand All @@ -86,6 +100,13 @@ export default {
}
}
},
disabled() {
if (this.editor) {
this.editor.dispatch({
effects: StateEffect.reconfigure.of(getExtensions(this))
})
}
},
},
mounted() {
this.editor = new EditorView({
Expand All @@ -103,9 +124,14 @@ export default {
.code-mirror-single-line .cm-scroller {
font-family: inherit !important;
margin-left: 0.2rem;
margin-right: 0.5rem;
margin-left: v-bind('inputTextCompatible ? "2px" : "0.2rem"');
margin-right: v-bind('inputTextCompatible ? "2px" : "0.5rem"');
overflow-x: hidden !important;
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 {
Expand All @@ -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>
145 changes: 122 additions & 23 deletions packages/ui/src/components/RequestPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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;">
Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -259,33 +330,57 @@
<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>
<td style="user-select: none;">
<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>
<td style="user-select: none;">
<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>
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 1bb60fe

Please sign in to comment.