btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: promote environment aware input to stable

Browse Source
This commit is contained in:
liyasthomas
2021-10-14 13:00:32 +05:30
parent 3f513f2f4d
commit c1ec5dc60d
9 changed files with 18 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -109,48 +109,19 @@
</div> </div>
<div v-if="authType === 'basic'" class="border-b border-dividerLight flex"> <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3"> <div class="border-r border-dividerLight w-2/3">
<div <div class="border-b border-dividerLight flex">
class="divide-x divide-dividerLight border-b border-dividerLight flex"
>
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="basicUsername" v-model="basicUsername"
class="bg-transparent flex flex-1 py-1 px-4"
:placeholder="$t('authorization.username')" :placeholder="$t('authorization.username')"
/> styles="bg-transparent flex flex-1 py-1 px-4"
<input
v-else
id="http_basic_user"
v-model="basicUsername"
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('authorization.username')"
name="http_basic_user"
/> />
</div> </div>
<div <div class="border-b border-dividerLight flex">
class="divide-x divide-dividerLight border-b border-dividerLight flex"
>
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="basicPassword" v-model="basicPassword"
class="bg-transparent flex flex-1 py-1 px-4"
:placeholder="$t('authorization.password')" :placeholder="$t('authorization.password')"
styles="bg-transparent flex flex-1 py-1 px-4"
/> />
<input
v-else
id="http_basic_passwd"
v-model="basicPassword"
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('authorization.password')"
name="http_basic_passwd"
:type="passwordFieldType"
/>
<span>
<ButtonSecondary
:svg="passwordFieldType === 'text' ? 'eye' : 'eye-off'"
@click.native="switchVisibility"
/>
</span>
</div> </div>
</div> </div>
<div <div
@@ -181,22 +152,11 @@
</div> </div>
<div v-if="authType === 'bearer'" class="border-b border-dividerLight flex"> <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
<div class="border-r border-dividerLight w-2/3"> <div class="border-r border-dividerLight w-2/3">
<div <div class="border-b border-dividerLight flex">
class="divide-x divide-dividerLight border-b border-dividerLight flex"
>
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="bearerToken" v-model="bearerToken"
class="bg-transparent flex flex-1 py-1 px-4"
placeholder="Token" placeholder="Token"
/> styles="bg-transparent flex flex-1 py-1 px-4"
<input
v-else
id="bearer_token"
v-model="bearerToken"
class="bg-transparent flex flex-1 py-2 px-4"
placeholder="Token"
name="bearer_token"
/> />
</div> </div>
</div> </div>
@@ -231,22 +191,11 @@
class="border-b border-dividerLight flex" class="border-b border-dividerLight flex"
> >
<div class="border-r border-dividerLight w-2/3"> <div class="border-r border-dividerLight w-2/3">
<div <div class="border-b border-dividerLight flex">
class="divide-x divide-dividerLight border-b border-dividerLight flex"
>
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="oauth2Token" v-model="oauth2Token"
class="bg-transparent flex flex-1 py-1 px-4"
placeholder="Token" placeholder="Token"
/> styles="bg-transparent flex flex-1 py-1 px-4"
<input
v-else
id="oauth2_token"
v-model="oauth2Token"
class="bg-transparent flex flex-1 py-2 px-4"
placeholder="Token"
name="oauth2_token"
/> />
</div> </div>
<HttpOAuth2Authorization /> <HttpOAuth2Authorization />
@@ -281,7 +230,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, Ref, ref } from "@nuxtjs/composition-api" import { computed, defineComponent, Ref } from "@nuxtjs/composition-api"
import { import {
HoppRESTAuthBasic, HoppRESTAuthBasic,
HoppRESTAuthBearer, HoppRESTAuthBearer,
@@ -317,8 +266,6 @@ export default defineComponent({
const URLExcludes = useSetting("URL_EXCLUDES") const URLExcludes = useSetting("URL_EXCLUDES")
const passwordFieldType = ref("password")
const clearContent = () => { const clearContent = () => {
auth.value = { auth.value = {
authType: "none", authType: "none",
@@ -326,12 +273,6 @@ export default defineComponent({
} }
} }
const switchVisibility = () => {
if (passwordFieldType.value === "text")
passwordFieldType.value = "password"
else passwordFieldType.value = "text"
}
return { return {
auth, auth,
authType, authType,
@@ -342,10 +283,7 @@ export default defineComponent({
bearerToken, bearerToken,
oauth2Token, oauth2Token,
URLExcludes, URLExcludes,
passwordFieldType,
clearContent, clearContent,
switchVisibility,
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
} }
}, },
}) })

35
packages/hoppscotch-app/components/http/BodyParameters.vue
View File

@@ -44,7 +44,6 @@
class="divide-x divide-dividerLight border-b border-dividerLight flex" class="divide-x divide-dividerLight border-b border-dividerLight flex"
> >
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="param.key" v-model="param.key"
:placeholder="`${$t('count.parameter', { count: index + 1 })}`" :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
styles=" styles="
@@ -63,22 +62,6 @@
}) })
" "
/> />
<input
v-else
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${$t('count.parameter', { count: index + 1 })}`"
:name="'param' + index"
:value="param.key"
autofocus
@change="
updateBodyParam(index, {
key: $event.target.value,
value: param.value,
active: param.active,
isFile: param.isFile,
})
"
/>
<div v-if="param.isFile" class="file-chips-container hide-scrollbar"> <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
<div class="space-x-2 file-chips-wrapper"> <div class="space-x-2 file-chips-wrapper">
<SmartDeletableChip <SmartDeletableChip
@@ -92,7 +75,6 @@
</div> </div>
<span v-else class="flex flex-1"> <span v-else class="flex flex-1">
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="param.value" v-model="param.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`" :placeholder="`${$t('count.value', { count: index + 1 })}`"
styles=" styles="
@@ -111,21 +93,6 @@
}) })
" "
/> />
<input
v-else
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:name="'value' + index"
:value="param.value"
@change="
updateBodyParam(index, {
key: param.key,
value: $event.target.value,
active: param.active,
isFile: param.isFile,
})
"
/>
</span> </span>
<span> <span>
<label for="attachment" class="p-0"> <label for="attachment" class="p-0">
@@ -210,7 +177,6 @@ import {
updateFormDataEntry, updateFormDataEntry,
useRESTRequestBody, useRESTRequestBody,
} from "~/newstore/RESTSession" } from "~/newstore/RESTSession"
import { useSetting } from "~/newstore/settings"
export default defineComponent({ export default defineComponent({
setup() { setup() {
@@ -291,7 +257,6 @@ export default defineComponent({
clearContent, clearContent,
setRequestAttachment, setRequestAttachment,
chipDelete, chipDelete,
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
} }
}, },
}) })

19
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -68,7 +68,7 @@
px-4 px-4
truncate truncate
" "
:class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }" class="!flex flex-1"
@input=" @input="
updateHeader(index, { updateHeader(index, {
key: $event, key: $event,
@@ -78,7 +78,6 @@
" "
/> />
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="header.value" v-model="header.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`" :placeholder="`${$t('count.value', { count: index + 1 })}`"
styles=" styles="
@@ -96,20 +95,6 @@
}) })
" "
/> />
<input
v-else
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:name="'value' + index"
:value="header.value"
@change="
updateHeader(index, {
key: header.key,
value: $event.target.value,
active: header.active,
})
"
/>
<span> <span>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -185,7 +170,6 @@ import {
updateRESTHeader, updateRESTHeader,
} from "~/newstore/RESTSession" } from "~/newstore/RESTSession"
import { commonHeaders } from "~/helpers/headers" import { commonHeaders } from "~/helpers/headers"
import { useSetting } from "~/newstore/settings"
import { useReadonlyStream } from "~/helpers/utils/composables" import { useReadonlyStream } from "~/helpers/utils/composables"
import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest" import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
@@ -254,5 +238,4 @@ const deleteHeader = (index: number) => {
const clearContent = () => { const clearContent = () => {
deleteAllRESTHeaders() deleteAllRESTHeaders()
} }
const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
</script> </script>

10
packages/hoppscotch-app/components/http/OAuth2Authorization.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="divide-x divide-dividerLight border-b border-dividerLight flex"> <div class="border-b border-dividerLight flex">
<input <input
id="oidcDiscoveryURL" id="oidcDiscoveryURL"
v-model="oidcDiscoveryURL" v-model="oidcDiscoveryURL"
@@ -9,7 +9,7 @@
name="oidcDiscoveryURL" name="oidcDiscoveryURL"
/> />
</div> </div>
<div class="divide-x divide-dividerLight border-b border-dividerLight flex"> <div class="border-b border-dividerLight flex">
<input <input
id="authURL" id="authURL"
v-model="authURL" v-model="authURL"
@@ -18,7 +18,7 @@
name="authURL" name="authURL"
/> />
</div> </div>
<div class="divide-x divide-dividerLight border-b border-dividerLight flex"> <div class="border-b border-dividerLight flex">
<input <input
id="accessTokenURL" id="accessTokenURL"
v-model="accessTokenURL" v-model="accessTokenURL"
@@ -27,7 +27,7 @@
name="accessTokenURL" name="accessTokenURL"
/> />
</div> </div>
<div class="divide-x divide-dividerLight border-b border-dividerLight flex"> <div class="border-b border-dividerLight flex">
<input <input
id="clientID" id="clientID"
v-model="clientID" v-model="clientID"
@@ -36,7 +36,7 @@
name="clientID" name="clientID"
/> />
</div> </div>
<div class="divide-x divide-dividerLight border-b border-dividerLight flex"> <div class="border-b border-dividerLight flex">
<input <input
id="scope" id="scope"
v-model="scope" v-model="scope"

36
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -55,7 +55,6 @@
class="divide-x divide-dividerLight border-b border-dividerLight flex" class="divide-x divide-dividerLight border-b border-dividerLight flex"
> >
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="param.key" v-model="param.key"
:placeholder="`${$t('count.parameter', { count: index + 1 })}`" :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
styles=" styles="
@@ -73,25 +72,7 @@
}) })
" "
/> />
<input
v-else
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${$t('count.parameter', {
count: index + 1,
})}`"
:name="'param' + index"
:value="param.key"
autofocus
@change="
updateParam(index, {
key: $event.target.value,
value: param.value,
active: param.active,
})
"
/>
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="param.value" v-model="param.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`" :placeholder="`${$t('count.value', { count: index + 1 })}`"
styles=" styles="
@@ -109,20 +90,6 @@
}) })
" "
/> />
<input
v-else
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:name="'value' + index"
:value="param.value"
@change="
updateParam(index, {
key: param.key,
value: $event.target.value,
active: param.active,
})
"
/>
<span> <span>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -197,7 +164,6 @@ import {
deleteAllRESTParams, deleteAllRESTParams,
setRESTParams, setRESTParams,
} from "~/newstore/RESTSession" } from "~/newstore/RESTSession"
import { useSetting } from "~/newstore/settings"
import "codemirror/mode/yaml/yaml" import "codemirror/mode/yaml/yaml"
const { const {
@@ -266,6 +232,4 @@ const deleteParam = (index: number) => {
const clearContent = () => { const clearContent = () => {
deleteAllRESTParams() deleteAllRESTParams()
} }
const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
</script> </script>

29
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -59,7 +59,6 @@
</div> </div>
<div class="flex flex-1"> <div class="flex flex-1">
<SmartEnvInput <SmartEnvInput
v-if="EXPERIMENTAL_URL_BAR_ENABLED"
v-model="newEndpoint" v-model="newEndpoint"
:placeholder="`${$t('request.url')}`" :placeholder="`${$t('request.url')}`"
styles=" styles="
@@ -78,32 +77,6 @@
" "
@enter="newSendRequest()" @enter="newSendRequest()"
/> />
<input
v-else
id="url"
v-model="newEndpoint"
v-focus
class="
bg-primaryLight
border border-divider
rounded-r
flex
text-secondaryDark
w-full
min-w-32
py-2
px-4
hover:border-dividerDark
focus-visible:bg-transparent focus-visible:border-dividerDark
"
name="url"
type="text"
autocomplete="off"
spellcheck="false"
:placeholder="`${$t('request.url')}`"
autofocus
@keyup.enter="newSendRequest()"
/>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
@@ -451,8 +424,6 @@ const isCustomMethod = computed(() => {
const requestName = useRESTRequestName() const requestName = useRESTRequestName()
const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
const windowInnerWidth = useWindowSize() const windowInnerWidth = useWindowSize()
const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT") const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
</script> </script>

2
packages/hoppscotch-app/components/smart/EnvInput.vue
View File

@@ -480,7 +480,7 @@ export default defineComponent({
@apply font-medium; @apply font-medium;
&:empty { &:empty {
line-height: 1.9; @apply leading-loose;
&::before { &::before {
@apply text-secondary; @apply text-secondary;

2
packages/hoppscotch-app/newstore/settings.ts
View File

@@ -37,7 +37,6 @@ export type SettingsType = {
PROXY_URL: string PROXY_URL: string
PROXY_KEY: string PROXY_KEY: string
EXTENSIONS_ENABLED: boolean EXTENSIONS_ENABLED: boolean
EXPERIMENTAL_URL_BAR_ENABLED: boolean
URL_EXCLUDES: { URL_EXCLUDES: {
auth: boolean auth: boolean
httpUser: boolean httpUser: boolean
@@ -64,7 +63,6 @@ export const defaultSettings: SettingsType = {
PROXY_URL: "https://proxy.hoppscotch.io/", PROXY_URL: "https://proxy.hoppscotch.io/",
PROXY_KEY: "", PROXY_KEY: "",
EXTENSIONS_ENABLED: true, EXTENSIONS_ENABLED: true,
EXPERIMENTAL_URL_BAR_ENABLED: true,
URL_EXCLUDES: { URL_EXCLUDES: {
auth: true, auth: true,
httpUser: true, httpUser: true,

13
packages/hoppscotch-app/pages/settings.vue
View File

@@ -167,14 +167,6 @@
>. >.
</div> </div>
<div class="space-y-4 py-4"> <div class="space-y-4 py-4">
<div class="flex items-center">
<SmartToggle
:on="EXPERIMENTAL_URL_BAR_ENABLED"
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
>
{{ $t("settings.use_experimental_url_bar") }}
</SmartToggle>
</div>
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal"> <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
{{ $t("settings.telemetry") }} {{ $t("settings.telemetry") }}
@@ -185,7 +177,7 @@
}} }}
</SmartToggle> </SmartToggle>
</div> </div>
<!-- <div class="flex items-center"> <div class="flex items-center">
<SmartToggle <SmartToggle
:on="LEFT_SIDEBAR" :on="LEFT_SIDEBAR"
@change="toggleSetting('LEFT_SIDEBAR')" @change="toggleSetting('LEFT_SIDEBAR')"
@@ -195,7 +187,7 @@
LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled") LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled")
}} }}
</SmartToggle> </SmartToggle>
</div> --> </div>
<div class="flex items-center"> <div class="flex items-center">
<SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')"> <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
{{ $t("layout.zen_mode") }} {{ $t("layout.zen_mode") }}
@@ -370,7 +362,6 @@ export default defineComponent({
PROXY_URL: useSetting("PROXY_URL"), PROXY_URL: useSetting("PROXY_URL"),
PROXY_KEY: useSetting("PROXY_KEY"), PROXY_KEY: useSetting("PROXY_KEY"),
EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"), EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
SYNC_COLLECTIONS: useSetting("syncCollections"), SYNC_COLLECTIONS: useSetting("syncCollections"),
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"), SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
SYNC_HISTORY: useSetting("syncHistory"), SYNC_HISTORY: useSetting("syncHistory"),