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

refactor: lint + minor ui fixes

Browse Source
This commit is contained in:
liyasthomas
2021-11-27 19:59:28 +05:30
parent da8c446ad7
commit 0bf856291c
68 changed files with 363 additions and 1691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,10 @@
<template>
<div>
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ $t("authorization.type") }}
</label>
<tippy
@@ -95,7 +83,7 @@
</div>
<div
v-if="authType === 'none'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/login.svg`"
@@ -116,16 +104,16 @@
class="mb-4"
/>
</div>
<div v-if="authType === 'basic'" class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div class="flex border-b border-dividerLight">
<div v-if="authType === 'basic'" class="border-dividerLight flex border-b">
<div class="border-dividerLight w-2/3 border-r">
<div class="border-dividerLight flex border-b">
<SmartEnvInput
v-model="basicUsername"
:placeholder="$t('authorization.username')"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div>
<div class="flex border-b border-dividerLight">
<div class="border-dividerLight flex border-b">
<SmartEnvInput
v-model="basicPassword"
:placeholder="$t('authorization.password')"
@@ -134,20 +122,10 @@
</div>
</div>
<div
class="
bg-primary
top-upperTertiaryStickyFold
min-w-46
max-w-1/3
z-9
sticky
h-full
p-4
overflow-auto
"
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
>
<div class="p-2">
<div class="pb-2 text-secondaryLight">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
@@ -159,9 +137,9 @@
</div>
</div>
</div>
<div v-if="authType === 'bearer'" class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div class="flex border-b border-dividerLight">
<div v-if="authType === 'bearer'" class="border-dividerLight flex border-b">
<div class="border-dividerLight w-2/3 border-r">
<div class="border-dividerLight flex border-b">
<SmartEnvInput
v-model="bearerToken"
placeholder="Token"
@@ -170,20 +148,10 @@
</div>
</div>
<div
class="
bg-primary
top-upperTertiaryStickyFold
min-w-46
max-w-1/3
z-9
sticky
h-full
p-4
overflow-auto
"
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
>
<div class="p-2">
<div class="pb-2 text-secondaryLight">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor
@@ -197,10 +165,10 @@
</div>
<div
v-if="authType === 'oauth-2'"
class="flex border-b border-dividerLight"
class="border-dividerLight flex border-b"
>
<div class="w-2/3 border-r border-dividerLight">
<div class="flex border-b border-dividerLight">
<div class="border-dividerLight w-2/3 border-r">
<div class="border-dividerLight flex border-b">
<SmartEnvInput
v-model="oauth2Token"
placeholder="Token"
@@ -210,20 +178,10 @@
<HttpOAuth2Authorization />
</div>
<div
class="
bg-primary
top-upperTertiaryStickyFold
min-w-46
max-w-1/3
z-9
sticky
h-full
p-4
overflow-auto
"
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
>
<div class="p-2">
<div class="pb-2 text-secondaryLight">
<div class="text-secondaryLight pb-2">
{{ $t("helpers.authorization") }}
</div>
<SmartAnchor

18
packages/hoppscotch-app/components/http/Body.vue
View File

@@ -1,22 +1,10 @@
<template>
<div>
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ $t("request.content_type") }}
</label>
<tippy
@@ -65,7 +53,7 @@
<HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
<div
v-if="contentType == null"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"

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

@@ -1,21 +1,9 @@
<template>
<AppSection label="bodyParameters">
<div
class="
bg-primary
border-dividerLight
top-upperTertiaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ $t("request.body") }}
</label>
<div class="flex">
@@ -43,7 +31,7 @@
<div
v-for="(param, index) in bodyParams"
:key="`param-${index}`"
class="flex border-b divide-dividerLight border-dividerLight divide-x"
class="divide-dividerLight border-dividerLight flex border-b divide-x"
>
<SmartEnvInput
v-model="param.key"
@@ -153,7 +141,7 @@
</div>
<div
v-if="bodyParams.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/upload_single_file.svg`"

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

@@ -1,21 +1,9 @@
<template>
<AppSection label="headers">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("request.header_list") }}
</label>
<div class="flex">
@@ -53,7 +41,7 @@
<div
v-for="(header, index) in headers$"
:key="`header-${index}`"
class="flex border-b divide-dividerLight border-dividerLight divide-x"
class="divide-dividerLight border-dividerLight flex border-b divide-x"
>
<SmartAutoComplete
:placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -137,27 +125,12 @@
</div>
<div
v-if="headers$.length === 0"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/add_category.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
my-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.headers')}`"
/>
<span class="pb-4 text-center">

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

@@ -1,21 +1,9 @@
<template>
<AppSection label="parameters">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("request.parameter_list") }}
</label>
<div class="flex">
@@ -53,7 +41,7 @@
<div
v-for="(param, index) in params$"
:key="`param-${index}`"
class="flex border-b divide-dividerLight border-dividerLight divide-x"
class="divide-dividerLight border-dividerLight flex border-b divide-x"
>
<SmartEnvInput
v-model="param.key"
@@ -130,27 +118,12 @@
</div>
<div
v-if="params$.length === 0"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
p-4
"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/add_files.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-16
h-16
my-4
"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.parameters')}`"
/>
<span class="pb-4 text-center">

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

@@ -1,21 +1,9 @@
<template>
<AppSection id="script" :label="`${t('preRequest.script')}`">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("preRequest.javascript_code") }}
</label>
<div class="flex">
@@ -41,24 +29,14 @@
/>
</div>
</div>
<div class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div class="border-dividerLight flex border-b">
<div class="border-dividerLight w-2/3 border-r">
<div ref="preRrequestEditor"></div>
</div>
<div
class="
bg-primary
top-upperTertiaryStickyFold
min-w-46
max-w-1/3
z-9
sticky
h-full
p-4
overflow-auto
"
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
>
<div class="pb-2 text-secondaryLight">
<div class="text-secondaryLight pb-2">
{{ t("helpers.pre_request_script") }}
</div>
<SmartAnchor
@@ -66,7 +44,7 @@
to="https://docs.hoppscotch.io/features/pre-request-script"
blank
/>
<h4 class="pt-6 font-bold text-secondaryLight">
<h4 class="text-secondaryLight pt-6 font-bold">
{{ t("preRequest.snippets") }}
</h4>
<div class="flex flex-col pt-4">

16
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -1,21 +1,9 @@
<template>
<div>
<div
class="
bg-primary
border-dividerLight
top-upperTertiaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("request.raw_body") }}
</label>
<div class="flex">

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

@@ -1,16 +1,6 @@
<template>
<div
class="
bg-primary
hide-scrollbar
sticky
top-0
z-10
flex
p-4
space-x-2
overflow-x-auto
"
class="bg-primary hide-scrollbar sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto"
>
<div class="flex flex-1">
<div class="relative flex">
@@ -26,22 +16,7 @@
<span class="select-wrapper">
<input
id="method"
class="
bg-primaryLight
border-divider
text-secondaryDark
w-26
hover:border-dividerDark
focus-visible:bg-transparent
focus-visible:border-dividerDark
flex
px-4
py-2
font-semibold
border
rounded-l
cursor-pointer
"
class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
:value="newMethod"
:readonly="!isCustomMethod"
:placeholder="`${t('request.method')}`"
@@ -83,7 +58,7 @@
<div class="flex">
<ButtonPrimary
id="send"
class="flex-1 rounded-r-none min-w-20"
class="min-w-20 flex-1 rounded-r-none"
:label="`${!loading ? t('action.send') : t('action.cancel')}`"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>
@@ -164,7 +139,7 @@
name="request-name"
type="text"
autocomplete="off"
class="mb-2 input"
class="input mb-2"
@keyup.enter="saveOptions.tippy().hide()"
/>
<SmartItem

38
packages/hoppscotch-app/components/http/ResponseMeta.vue
View File

@@ -1,31 +1,13 @@
<template>
<div
class="
bg-primary
hide-scrollbar
whitespace-nowrap
sticky
top-0
z-10
flex
items-center
p-4
overflow-auto
"
class="bg-primary hide-scrollbar whitespace-nowrap sticky top-0 z-10 flex items-center p-4 overflow-auto"
>
<div
v-if="response == null"
class="
flex
text-secondaryLight
flex-col
items-center
justify-center
flex-1
"
class="text-secondaryLight flex flex-col items-center justify-center flex-1"
>
<div class="flex pb-4 my-4 space-x-2">
<div class="flex flex-col items-end text-right space-y-4">
<div class="flex flex-col items-end space-y-4 text-right">
<span class="flex items-center flex-1">
{{ t("shortcut.request.send_request") }}
</span>
@@ -80,21 +62,13 @@
<img
:src="`/images/states/${$colorMode.value}/youre_lost.svg`"
loading="lazy"
class="
object-contain
inline-flex
flex-col
object-center
w-32
h-32
my-4
"
class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
:alt="`${t('error.network_fail')}`"
/>
<span class="mb-2 font-semibold text-center">
{{ t("error.network_fail") }}
</span>
<span class="max-w-sm mb-4 text-center text-secondaryLight">
<span class="text-secondaryLight max-w-sm mb-4 text-center">
{{ t("helpers.network_fail") }}
</span>
<AppInterceptor />
@@ -102,7 +76,7 @@
<div
v-if="response.type === 'success' || 'fail'"
:class="statusCategory.className"
class="font-semibold space-x-4"
class="space-x-4 font-semibold"
>
<span v-if="response.statusCode">
<span class="text-secondary"> {{ t("response.status") }}: </span>

22
packages/hoppscotch-app/components/http/TestResult.vue
View File

@@ -7,21 +7,9 @@
"
>
<div
class="
bg-primary
border-dividerLight
top-lowerSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("test.report") }}
</label>
<ButtonSecondary
@@ -31,7 +19,7 @@
@click.native="clearContent()"
/>
</div>
<div class="border-b divide-dividerLight border-dividerLight divide-y-4">
<div class="divide-dividerLight border-dividerLight border-b divide-y-4">
<div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
<HttpTestResultEntry
v-for="(result, index) in testResults.tests"
@@ -53,7 +41,7 @@
class="flex items-center px-4 py-2"
>
<i
class="mr-4 material-icons"
class="material-icons mr-4"
:class="
result.status === 'pass' ? 'text-green-500' : 'text-red-500'
"
@@ -76,7 +64,7 @@
</div>
<div
v-else
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
class="text-secondaryLight flex flex-col items-center justify-center p-4"
>
<img
:src="`/images/states/${$colorMode.value}/validation.svg`"

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

@@ -1,21 +1,9 @@
<template>
<AppSection id="script" :label="`${t('test.script')}`">
<div
class="
bg-primary
border-dividerLight
top-upperSecondaryStickyFold
sticky
z-10
flex
items-center
justify-between
flex-1
pl-4
border-b
"
class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
>
<label class="font-semibold text-secondaryLight">
<label class="text-secondaryLight font-semibold">
{{ t("test.javascript_code") }}
</label>
<div class="flex">
@@ -41,24 +29,14 @@
/>
</div>
</div>
<div class="flex border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight">
<div class="border-dividerLight flex border-b">
<div class="border-dividerLight w-2/3 border-r">
<div ref="testScriptEditor"></div>
</div>
<div
class="
bg-primary
top-upperTertiaryStickyFold
min-w-46
max-w-1/3
z-9
sticky
h-full
p-4
overflow-auto
"
class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
>
<div class="pb-2 text-secondaryLight">
<div class="text-secondaryLight pb-2">
{{ t("helpers.post_request_tests") }}
</div>
<SmartAnchor
@@ -66,7 +44,7 @@
to="https://docs.hoppscotch.io/features/tests"
blank
/>
<h4 class="pt-6 font-bold text-secondaryLight">
<h4 class="text-secondaryLight pt-6 font-bold">
{{ t("test.snippets") }}
</h4>
<div class="flex flex-col pt-4">