feat: migrate pre-request script, test script, settings to nuxt composition
This commit is contained in:
liyasthomas
141
pages/index.vue
141
pages/index.vue
@@ -31,19 +31,7 @@
|
||||
<span class="select-wrapper">
|
||||
<input
|
||||
id="contentType"
|
||||
class="
|
||||
bg-primary
|
||||
rounded-lg
|
||||
flex
|
||||
font-semibold font-mono
|
||||
text-xs
|
||||
w-full
|
||||
py-2
|
||||
px-4
|
||||
transition
|
||||
truncate
|
||||
focus:outline-none
|
||||
"
|
||||
class="bg-primary rounded-lg flex font-semibold font-mono text-xs w-full py-2 px-4 transition truncate focus:outline-none"
|
||||
v-model="contentType"
|
||||
readonly
|
||||
/>
|
||||
@@ -319,128 +307,11 @@
|
||||
:id="'pre_request_script'"
|
||||
:label="$t('pre_request_script')"
|
||||
>
|
||||
<AppSection v-if="showPreRequestScript" label="preRequest">
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-110px
|
||||
z-10
|
||||
sticky
|
||||
items-center
|
||||
justify-between
|
||||
"
|
||||
>
|
||||
<label class="font-semibold text-xs">
|
||||
{{ $t("javascript_code") }}
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
|
||||
blank
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
<SmartJsEditor
|
||||
v-model="preRequestScript"
|
||||
:options="{
|
||||
maxLines: '16',
|
||||
minLines: '8',
|
||||
fontSize: '14px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
completeMode="pre"
|
||||
/>
|
||||
</AppSection>
|
||||
<HttpPreRequestScript />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'tests'" :label="$t('tests')">
|
||||
<AppSection v-if="testsEnabled" label="postRequestTests">
|
||||
<div
|
||||
class="
|
||||
bg-primary
|
||||
border-b border-dividerLight
|
||||
flex flex-1
|
||||
pl-4
|
||||
top-110px
|
||||
z-10
|
||||
sticky
|
||||
items-center
|
||||
justify-between
|
||||
"
|
||||
>
|
||||
<label class="font-semibold text-xs">
|
||||
{{ $t("javascript_code") }}
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
|
||||
blank
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('wiki')"
|
||||
icon="help_outline"
|
||||
/>
|
||||
</div>
|
||||
<SmartJsEditor
|
||||
v-model="testScript"
|
||||
:options="{
|
||||
maxLines: '16',
|
||||
minLines: '8',
|
||||
fontSize: '14px',
|
||||
autoScrollEditorIntoView: true,
|
||||
showPrintMargin: false,
|
||||
useWorker: false,
|
||||
}"
|
||||
completeMode="test"
|
||||
/>
|
||||
<div v-if="testReports.length !== 0">
|
||||
<div class="flex flex-1 pl-4 items-center justify-between">
|
||||
<label class="font-semibold text-xs">
|
||||
Test Reports
|
||||
</label>
|
||||
<ButtonSecondary
|
||||
@click.native="clearContent('tests', $event)"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('clear')"
|
||||
icon="clear_all"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(testReport, index) in testReports"
|
||||
:key="`testReport-${index}`"
|
||||
class="px-4"
|
||||
>
|
||||
<div v-if="testReport.startBlock">
|
||||
<hr />
|
||||
<h4 class="heading">
|
||||
{{ testReport.startBlock }}
|
||||
</h4>
|
||||
</div>
|
||||
<p
|
||||
v-else-if="testReport.result"
|
||||
class="flex font-mono flex-1 text-xs info"
|
||||
>
|
||||
<span
|
||||
:class="testReport.styles.class"
|
||||
class="flex items-center"
|
||||
>
|
||||
<i class="text-sm material-icons">
|
||||
{{ testReport.styles.icon }}
|
||||
</i>
|
||||
<span> {{ testReport.result }}</span>
|
||||
<span v-if="testReport.message">
|
||||
<label>: {{ testReport.message }}</label>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<div v-else-if="testReport.endBlock"><hr /></div>
|
||||
</div>
|
||||
</div>
|
||||
</AppSection>
|
||||
<HttpTests />
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</Pane>
|
||||
@@ -615,8 +486,6 @@ export default defineComponent({
|
||||
return {
|
||||
showCurlImportModal: false,
|
||||
showPreRequestScript: true,
|
||||
testsEnabled: true,
|
||||
testScript: "// pw.expect('variable').toBe('value');",
|
||||
testReports: [],
|
||||
copyButton: '<i class="material-icons">content_copy</i>',
|
||||
downloadButton: '<i class="material-icons">save_alt</i>',
|
||||
@@ -731,7 +600,6 @@ export default defineComponent({
|
||||
this.preRequestScript = newValue.preRequestScript
|
||||
}
|
||||
if (newValue.testScript) {
|
||||
this.testsEnabled = true
|
||||
this.testScript = newValue.testScript
|
||||
}
|
||||
this.name = newValue.name
|
||||
@@ -1333,7 +1201,6 @@ export default defineComponent({
|
||||
contentType: this.contentType,
|
||||
requestType: this.requestType,
|
||||
testScript: this.testScript,
|
||||
usesPostScripts: this.testsEnabled,
|
||||
}
|
||||
|
||||
if (
|
||||
@@ -1678,7 +1545,7 @@ export default defineComponent({
|
||||
requestType: this.requestType,
|
||||
preRequestScript:
|
||||
this.showPreRequestScript == true ? this.preRequestScript : null,
|
||||
testScript: this.testsEnabled == true ? this.testScript : null,
|
||||
testScript: this.testScript,
|
||||
name: this.requestName,
|
||||
}
|
||||
this.showSaveRequestModal = true
|
||||
|
||||
@@ -182,6 +182,15 @@
|
||||
}}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<SmartToggle
|
||||
:on="HIDE_NAVBAR"
|
||||
@change="toggleSetting('HIDE_NAVBAR')"
|
||||
>
|
||||
{{ $t("navigation_sidebar") }}
|
||||
{{ HIDE_NAVBAR ? $t("enabled") : $t("disabled") }}
|
||||
</SmartToggle>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
@@ -302,21 +311,39 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from "vue"
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
|
||||
import {
|
||||
getSettingSubject,
|
||||
applySetting,
|
||||
toggleSetting,
|
||||
defaultSettings,
|
||||
useSetting,
|
||||
} from "~/newstore/settings"
|
||||
import type { KeysMatching } from "~/types/ts-utils"
|
||||
import { currentUser$ } from "~/helpers/fb/auth"
|
||||
import { getLocalConfig } from "~/newstore/localpersistence"
|
||||
import { useReadonlyStream } from "~/helpers/utils/composables"
|
||||
|
||||
type SettingsType = typeof defaultSettings
|
||||
|
||||
export default Vue.extend({
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
SCROLL_INTO_ENABLED: useSetting("SCROLL_INTO_ENABLED"),
|
||||
PROXY_ENABLED: useSetting("PROXY_ENABLED"),
|
||||
PROXY_URL: useSetting("PROXY_URL"),
|
||||
PROXY_KEY: useSetting("PROXY_KEY"),
|
||||
EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
|
||||
EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
|
||||
SYNC_COLLECTIONS: useSetting("syncCollections"),
|
||||
SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
|
||||
SYNC_HISTORY: useSetting("syncHistory"),
|
||||
TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
|
||||
SHORTCUTS_INDICATOR_ENABLED: useSetting("SHORTCUTS_INDICATOR_ENABLED"),
|
||||
HIDE_NAVBAR: useSetting("HIDE_NAVBAR"),
|
||||
currentUser: useReadonlyStream(currentUser$, currentUser$.value),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extensionVersion: hasExtensionInstalled()
|
||||
@@ -325,52 +352,10 @@ export default Vue.extend({
|
||||
|
||||
clearIcon: "clear_all",
|
||||
|
||||
SYNC_COLLECTIONS: true,
|
||||
SYNC_ENVIRONMENTS: true,
|
||||
SYNC_HISTORY: true,
|
||||
|
||||
PROXY_URL: "",
|
||||
PROXY_KEY: "",
|
||||
|
||||
EXTENSIONS_ENABLED: true,
|
||||
PROXY_ENABLED: true,
|
||||
|
||||
currentUser: null,
|
||||
|
||||
showLogin: false,
|
||||
|
||||
active: getLocalConfig("THEME_COLOR") || "green",
|
||||
confirmRemove: false,
|
||||
|
||||
TELEMETRY_ENABLED: null,
|
||||
|
||||
SHORTCUTS_INDICATOR_ENABLED: null,
|
||||
}
|
||||
},
|
||||
subscriptions() {
|
||||
return {
|
||||
SCROLL_INTO_ENABLED: getSettingSubject("SCROLL_INTO_ENABLED"),
|
||||
|
||||
PROXY_ENABLED: getSettingSubject("PROXY_ENABLED"),
|
||||
PROXY_URL: getSettingSubject("PROXY_URL"),
|
||||
PROXY_KEY: getSettingSubject("PROXY_KEY"),
|
||||
|
||||
EXTENSIONS_ENABLED: getSettingSubject("EXTENSIONS_ENABLED"),
|
||||
|
||||
EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
|
||||
"EXPERIMENTAL_URL_BAR_ENABLED"
|
||||
),
|
||||
|
||||
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
|
||||
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
|
||||
SYNC_HISTORY: getSettingSubject("syncHistory"),
|
||||
|
||||
TELEMETRY_ENABLED: getSettingSubject("TELEMETRY_ENABLED"),
|
||||
SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
|
||||
"SHORTCUTS_INDICATOR_ENABLED"
|
||||
),
|
||||
|
||||
currentUser: currentUser$,
|
||||
}
|
||||
},
|
||||
head() {
|
||||
@@ -421,7 +406,7 @@ export default Vue.extend({
|
||||
resetProxy() {
|
||||
applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
|
||||
this.clearIcon = "done"
|
||||
this.$toast.info(this.$t("cleared"), {
|
||||
this.$toast.info(this.$t("cleared").toString(), {
|
||||
icon: "clear_all",
|
||||
})
|
||||
setTimeout(() => (this.clearIcon = "clear_all"), 1000)
|
||||
|
||||
Reference in New Issue
Block a user