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

fix: sse, refactor(ui): tabs, feat: help button

Browse Source
This commit is contained in:
liyasthomas
2021-08-05 11:06:37 +05:30
parent b2baeb0a5d
commit 20ffbe906f
10 changed files with 159 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/scss/styles.scss
View File

@@ -89,6 +89,9 @@ a {
@apply outline-none;
@apply transition;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
&.link {
@apply items-center;
@apply px-2 py-1;
@@ -151,7 +154,7 @@ a {
.tippy-content > div {
@apply flex flex-col;
@apply max-h-48;
@apply max-h-56;
@apply items-stretch;
@apply overflow-y-auto;
@@ -162,6 +165,7 @@ a {
hr {
@apply border-b border-dividerLight;
@apply my-2;
}
.heading {

61
components/app/Footer.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex justify-between">
<div>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
@@ -21,7 +21,64 @@
@click.native="toggleSetting('ZEN_MODE')"
/>
</div>
<div>
<div class="flex">
<span>
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="help_center"
:title="$t('app.help')"
:shortcut="['?']"
/>
</template>
<div class="flex flex-col">
<SmartItem
:label="$t('app.documentation')"
to="https://github.com/hoppscotch/hoppscotch/wiki"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
:label="$t('app.keyboard_shortcuts')"
@click.native="
showShortcuts = true
$refs.options.tippy().hide()
"
/>
<SmartItem
:label="$t('app.whats_new')"
to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
blank
@click.native="$refs.options.tippy().hide()"
/>
<hr />
<SmartItem
:label="$t('app.twitter')"
to="https://twitter.com/hoppscotch_io"
blank
@click.native="$refs.options.tippy().hide()"
/>
<SmartItem
:label="$t('app.terms_and_privacy')"
to="https://github.com/hoppscotch/hoppscotch/wiki/Privacy-Policy"
blank
@click.native="$refs.options.tippy().hide()"
/>
<!-- <SmartItem :label="$t('app.status')" /> -->
<div class="flex text-xs opacity-50 py-2 px-4">
{{ `${$t("app.name")} ${$t("app.version")}` }}
</div>
</div>
</tippy>
</span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
icon="keyboard"

6
components/collections/SaveRequest.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<template #header>
<h3 class="heading">{{ $t("save_request_as") }}</h3>
<h3 class="heading">{{ $t("collection.save_as") }}</h3>
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
@@ -15,7 +15,9 @@
class="input"
type="text"
/>
<label class="font-semibold px-4 pt-4 pb-4"> Select Location </label>
<label class="font-semibold px-4 pt-4 pb-4">
{{ $t("collection.select_location") }}
</label>
<CollectionsGraphql
v-if="mode === 'graphql'"
:doc="false"

2
components/profile/Picture.vue
View File

@@ -18,7 +18,7 @@
<span
v-if="indicator"
:class="[
'border-primary rounded-full border-2 h-3 -top-1 -right-1 w-3 absolute',
'border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute',
indicatorStyles,
]"
></span>

2
components/realtime/Log.vue
View File

@@ -21,7 +21,7 @@
v-for="(entry, index) in log"
:key="`entry-${index}`"
:style="{ color: entry.color }"
>@ {{ entry.ts }}{{ getSourcePrefix(entry.source)
>{{ entry.ts }}{{ getSourcePrefix(entry.source)
}}{{ entry.payload }}</span
>
</span>

36
components/realtime/Sse.vue
View File

@@ -12,7 +12,9 @@
bg-primaryLight
border border-divider
rounded-l
flex
font-semibold font-mono
flex-1
text-secondaryDark
w-full
py-2
@@ -24,6 +26,31 @@
:placeholder="$t('url')"
@keyup.enter="serverValid ? toggleSSEConnection() : null"
/>
<label
for="url"
class="bg-primaryLight border border-divider py-2 px-4 truncate"
>
{{ $t("event_type") }}
</label>
<input
id="event-type"
v-model="eventType"
class="
bg-primaryLight
border border-divider
flex
font-semibold font-mono
flex-1
text-secondaryDark
w-full
py-2
px-4
transition
truncate
focus:border-accent focus:outline-none
"
spellcheck="false"
/>
<ButtonPrimary
id="start"
:disabled="!serverValid"
@@ -68,6 +95,7 @@ export default {
log: null,
input: "",
},
eventType: "data",
}
},
computed: {
@@ -144,13 +172,13 @@ export default {
icon: "sync_disabled",
})
}
this.sse.onmessage = ({ data }) => {
this.sse.addEventListener(this.eventType, ({ data }) => {
this.events.log.push({
payload: data,
source: "server",
ts: new Date().toLocaleTimeString(),
})
}
})
} catch (ex) {
this.handleSSEError(ex)
this.$toast.error(this.$t("something_went_wrong"), {
@@ -169,7 +197,7 @@ export default {
}
logHoppRequestRunToAnalytics({
platform: "mqtt",
platform: "sse",
})
},
handleSSEError(error) {
@@ -190,8 +218,8 @@ export default {
})
},
stop() {
this.sse.onclose()
this.sse.close()
this.sse.onclose()
},
},
}

4
helpers/utils/string.js
View File

@@ -3,9 +3,9 @@ export function getSourcePrefix(source) {
// Source used for info messages.
info: "\tℹ️ [INFO]:\t",
// Source used for client to server messages.
client: "\t👽 [SENT]:\t",
client: "\t⬅️ [SENT]:\t",
// Source used for server to client messages.
server: "\t📥 [RECEIVED]:\t",
server: "\t➡️ [RECEIVED]:\t",
}
if (Object.keys(sourceEmojis).includes(source)) return sourceEmojis[source]
return ""

55
lang/en-US.json
View File

@@ -64,9 +64,20 @@
"preview": "Hide Preview"
},
"app": {
"new_version_found": "New version found. Refresh to update."
"name": "Hoppscotch",
"version": "v2.0",
"documentation": "Documentation",
"whats_new": "What's new?",
"keyboard_shortcuts": "Keyboard shortcuts",
"new_version_found": "New version found. Refresh to update.",
"twitter": "Twitter",
"terms_and_privacy": "Terms and privacy",
"status": "Status",
"help": "Help, feedback and</br>documentation"
},
"collection": {
"save_as": "Save as",
"select_location": "Select location",
"select": "Select a Collection",
"invalid_name": "Please provide a valid name for the collection",
"new": "New Collection",
@@ -162,7 +173,11 @@
"change_font_size": "Change font size",
"language": "Language",
"choose_language": "Choose language",
"accent_color": "Accent color"
"use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
"accent_color": "Accent color",
"telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
"experiments": "Experiments",
"experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, "
},
"layout": {
"zen_mode": "Zen mode"
@@ -171,6 +186,20 @@
"script": "Script",
"results": "Results"
},
"shortcut": {
"show_all": "Show all Shortcuts",
"send_request": "Send Request",
"save_to_collections": "Save to Collections",
"copy_request_link": "Copy Request Link",
"reset_request": "Reset Request",
"next_method": "Select Next method",
"previous_method": "Select Previous method",
"get_method": "Select GET method",
"head_method": "Select HEAD method",
"post_method": "Select POST method",
"put_method": "Select PUT method",
"delete_method": "Select DELETE method"
},
"options": "Options",
"communication": "Communication",
"endpoint": "Endpoint",
@@ -212,6 +241,7 @@
"server": "Server",
"events": "Events",
"url": "URL",
"event_type": "Event type",
"variables": "Variables",
"get_schema": "Get schema",
"header_list": "Header list",
@@ -275,7 +305,6 @@
"deleted": "Deleted",
"undo": "Undo",
"edit_request": "Edit Request",
"save_request_as": "Save Request As",
"connecting_to": "Connecting to {name}...",
"connected": "Connected",
"connected_to": "Connected to {name}",
@@ -373,23 +402,5 @@
"event_name": "Event Name",
"pre_request_script": "Pre-request Script",
"tests": "Tests",
"create_new_environment": "Create new environment",
"telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
"shortcut": {
"show_all": "Show all Shortcuts",
"send_request": "Send Request",
"save_to_collections": "Save to Collections",
"copy_request_link": "Copy Request Link",
"reset_request": "Reset Request",
"next_method": "Select Next method",
"previous_method": "Select Previous method",
"get_method": "Select GET method",
"head_method": "Select HEAD method",
"post_method": "Select POST method",
"put_method": "Select PUT method",
"delete_method": "Select DELETE method"
},
"experiments": "Experiments",
"experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
"use_experimental_url_bar": "Use experimental URL bar with environment highlighting"
"create_new_environment": "Create new environment"
}

20
pages/realtime.vue
View File

@@ -7,17 +7,29 @@
id="websocket"
:label="$t('tab.websocket')"
:selected="true"
class="h-full"
style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
>
<RealtimeWebsocket />
</SmartTab>
<SmartTab id="sse" :label="$t('sse')" class="h-full">
<SmartTab
id="sse"
:label="$t('sse')"
style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
>
<RealtimeSse />
</SmartTab>
<SmartTab id="socketio" :label="$t('socketio')" class="h-full">
<SmartTab
id="socketio"
:label="$t('socketio')"
style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
>
<RealtimeSocketio />
</SmartTab>
<SmartTab id="mqtt" :label="$t('tab.mqtt')" class="h-full">
<SmartTab
id="mqtt"
:label="$t('tab.mqtt')"
style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
>
<RealtimeMqtt />
</SmartTab>
</SmartTabs>

10
pages/settings.vue
View File

@@ -151,10 +151,10 @@
</section>
<section>
<h4 class="font-bold text-secondaryDark">
{{ $t("experiments") }}
{{ $t("settings.experiments") }}
</h4>
<div class="mt-1 text-secondaryLight">
{{ $t("experiments_notice") }}
{{ $t("settings.experiments_notice") }}
<SmartLink
class="link"
to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
@@ -177,7 +177,7 @@
:on="EXPERIMENTAL_URL_BAR_ENABLED"
@change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
>
{{ $t("use_experimental_url_bar") }}
{{ $t("settings.use_experimental_url_bar") }}
</SmartToggle>
</div>
<div class="flex items-center">
@@ -343,7 +343,9 @@
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
<SmartConfirmModal
:show="confirmRemove"
:title="`${$t('confirm.remove_telemetry')} ${$t('telemetry_helps_us')}`"
:title="`${$t('confirm.remove_telemetry')} ${$t(
'settings.telemetry_helps_us'
)}`"
@hide-modal="confirmRemove = false"
@resolve="
toggleSetting('TELEMETRY_ENABLED')