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

refactor : migrate components to script setup on ts (#2267)

Browse Source 
* refactor: migrate buttons to script setup on ts

* refactor: migrate env components to script setup on ts

* fix: reference sharing when requests are opened from the sidebar

* ci: deploy to prod from actions

* chore: type updation

* chore: update

* refactor: update types

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>
This commit is contained in:
Nivedin
2022-04-17 22:29:32 +05:30
committed by GitHub
parent f1c42f28de
commit 01acbc8db6
5 changed files with 330 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
packages/hoppscotch-app/components/button/Primary.vue
View File

@@ -25,7 +25,6 @@
]"
:disabled="disabled"
:tabindex="loading ? '-1' : '0'"
:type="type"
role="button"
>
<span
@@ -67,79 +66,41 @@
</SmartLink>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
export default defineComponent({
props: {
to: {
type: String,
default: "",
},
exact: {
type: Boolean,
default: true,
},
blank: {
type: Boolean,
default: false,
},
label: {
type: String,
default: "",
},
icon: {
type: String,
default: "",
},
svg: {
type: String,
default: "",
},
color: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
shadow: {
type: Boolean,
default: false,
},
reverse: {
type: Boolean,
default: false,
},
rounded: {
type: Boolean,
default: false,
},
gradient: {
type: Boolean,
default: false,
},
outline: {
type: Boolean,
default: false,
},
shortcut: {
type: Array,
default: () => [],
},
type: {
type: String,
default: "button",
},
},
<script setup lang="ts">
interface Props {
to: string
exact: boolean
blank: boolean
label: string
icon: string
svg: string
color: string
disabled: boolean
loading: boolean
large: boolean
shadow: boolean
reverse: boolean
rounded: boolean
gradient: boolean
outline: boolean
shortcut: string[]
}
withDefaults(defineProps<Props>(), {
to: "",
exact: true,
blank: false,
label: "",
icon: "",
svg: "",
color: "",
disabled: false,
loading: false,
large: false,
shadow: false,
reverse: false,
rounded: false,
gradient: false,
outline: false,
shortcut: () => [],
})
</script>

100
packages/hoppscotch-app/components/button/Secondary.vue
View File

@@ -66,71 +66,39 @@
</SmartLink>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
export default defineComponent({
props: {
to: {
type: String,
default: "",
},
exact: {
type: Boolean,
default: true,
},
blank: {
type: Boolean,
default: false,
},
label: {
type: String,
default: "",
},
icon: {
type: String,
default: "",
},
svg: {
type: String,
default: "",
},
color: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
reverse: {
type: Boolean,
default: false,
},
rounded: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
outline: {
type: Boolean,
default: false,
},
shortcut: {
type: Array,
default: () => [],
},
filled: {
type: Boolean,
default: false,
},
},
<script setup lang="ts">
interface Props {
to: string
exact: boolean
blank: boolean
label: string
icon: string
svg: string
color: string
disabled: boolean
loading: boolean
reverse: boolean
rounded: boolean
large: boolean
outline: boolean
shortcut: string[]
filled: boolean
}
withDefaults(defineProps<Props>(), {
to: "",
exact: true,
blank: false,
label: "",
icon: "",
svg: "",
color: "",
disabled: false,
loading: false,
reverse: false,
rounded: false,
large: false,
outline: false,
shortcut: () => [],
filled: false,
})
</script>

290
packages/hoppscotch-app/components/environments/Details.vue
View File

@@ -2,7 +2,7 @@
<SmartModal
v-if="show"
dialog
:title="$t(`environment.${action}`)"
:title="t(`environment.${action}`)"
@close="hideModal"
>
<template #body>
@@ -20,24 +20,24 @@
@keyup.enter="saveEnvironment"
/>
<label for="selectLabelEnvEdit">
{{ $t("action.label") }}
{{ t("action.label") }}
</label>
</div>
<div class="flex items-center justify-between flex-1">
<label for="variableList" class="p-4">
{{ $t("environment.variable_list") }}
{{ t("environment.variable_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear_all')"
:title="t('action.clear_all')"
:svg="clearIcon"
@click.native="clearContent()"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
svg="plus"
:title="$t('add.new')"
:title="t('add.new')"
@click.native="addEnvironmentVariable"
/>
</div>
@@ -46,7 +46,7 @@
v-if="evnExpandError"
class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
>
{{ $t("environment.nested_overflow") }}
{{ t("environment.nested_overflow") }}
</div>
<div class="border rounded divide-y divide-dividerLight border-divider">
<div
@@ -57,12 +57,12 @@
<input
v-model="variable.key"
class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${$t('count.variable', { count: index + 1 })}`"
:placeholder="`${t('count.variable', { count: index + 1 })}`"
:name="'param' + index"
/>
<SmartEnvInput
v-model="variable.value"
:placeholder="`${$t('count.value', { count: index + 1 })}`"
:placeholder="`${t('count.value', { count: index + 1 })}`"
:envs="liveEnvs"
:name="'value' + index"
/>
@@ -70,7 +70,7 @@
<ButtonSecondary
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeEnvironmentVariable(index)"
@@ -85,13 +85,13 @@
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.environments')}`"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-4 text-center">
{{ $t("empty.environments") }}
{{ t("empty.environments") }}
</span>
<ButtonSecondary
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
filled
class="mb-4"
@click.native="addEnvironmentVariable"
@@ -103,11 +103,11 @@
<template #footer>
<span>
<ButtonPrimary
:label="`${$t('action.save')}`"
:label="`${t('action.save')}`"
@click.native="saveEnvironment"
/>
<ButtonSecondary
:label="`${$t('action.cancel')}`"
:label="`${t('action.cancel')}`"
@click.native="hideModal"
/>
</span>
@@ -115,9 +115,9 @@
</SmartModal>
</template>
<script lang="ts">
<script setup lang="ts">
import clone from "lodash/clone"
import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
import { computed, ref, watch } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either"
import { Environment, parseTemplateStringE } from "@hoppscotch/data"
import {
@@ -130,136 +130,144 @@ import {
setGlobalEnvVariables,
updateEnvironment,
} from "~/newstore/environments"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
useReadonlyStream,
useI18n,
useToast,
} from "~/helpers/utils/composables"
export default defineComponent({
props: {
show: Boolean,
action: {
type: String as PropType<"new" | "edit">,
default: "edit",
},
editingEnvironmentIndex: {
type: [Number, String] as PropType<number | "Global" | null>,
default: null,
},
envVars: {
type: Function as PropType<() => Environment["variables"]>,
default: () => [],
},
},
setup(props) {
const globalVars = useReadonlyStream(globalEnv$, [])
const t = useI18n()
const toast = useToast()
const workingEnv = computed(() => {
if (props.editingEnvironmentIndex === "Global") {
return {
name: "Global",
variables: getGlobalVariables(),
} as Environment
} else if (props.action === "new") {
return {
name: "",
variables: props.envVars(),
}
} else if (props.editingEnvironmentIndex !== null) {
return getEnviroment(props.editingEnvironmentIndex)
} else {
return null
}
})
const props = withDefaults(
defineProps<{
show: boolean
action: "edit" | "new"
editingEnvironmentIndex: number | "Global" | null
envVars: () => Environment["variables"]
}>(),
{
show: false,
action: "edit",
editingEnvironmentIndex: null,
envVars: () => [],
}
)
const emit = defineEmits<{
(e: "hide-modal"): void
}>()
const name = ref<string | null>(null)
const vars = ref([{ key: "", value: "" }])
const clearIcon = ref("trash-2")
const globalVars = useReadonlyStream(globalEnv$, [])
const workingEnv = computed(() => {
if (props.editingEnvironmentIndex === "Global") {
return {
globalVars,
workingEnv,
envList: useReadonlyStream(environments$, []) || props.envVars(),
}
},
data() {
name: "Global",
variables: getGlobalVariables(),
} as Environment
} else if (props.action === "new") {
return {
name: null as string | null,
vars: [] as { key: string; value: string }[],
clearIcon: "trash-2",
name: "",
variables: props.envVars(),
}
},
computed: {
evnExpandError(): boolean {
for (const variable of this.vars) {
const result = parseTemplateStringE(variable.value, this.vars)
if (E.isLeft(result)) {
console.error("error", result.left)
return true
}
}
return false
},
liveEnvs(): Array<{ key: string; value: string; source: string }> {
if (this.evnExpandError) {
return []
}
if (this.$props.editingEnvironmentIndex === "Global") {
return [...this.vars.map((x) => ({ ...x, source: this.name! }))]
} else {
return [
...this.vars.map((x) => ({ ...x, source: this.name! })),
...this.globalVars.map((x) => ({ ...x, source: "Global" })),
]
}
},
},
watch: {
show() {
this.name = this.workingEnv?.name ?? null
this.vars = clone(this.workingEnv?.variables ?? [])
},
},
methods: {
clearContent() {
this.vars = []
this.clearIcon = "check"
this.$toast.success(`${this.$t("state.cleared")}`)
setTimeout(() => (this.clearIcon = "trash-2"), 1000)
},
addEnvironmentVariable() {
this.vars.push({
key: "",
value: "",
})
},
removeEnvironmentVariable(index: number) {
this.vars.splice(index, 1)
},
saveEnvironment() {
if (!this.name) {
this.$toast.error(`${this.$t("environment.invalid_name")}`)
return
}
if (this.action === "new") {
createEnvironment(this.name)
setCurrentEnvironment(this.envList.length - 1)
}
const environmentUpdated: Environment = {
name: this.name,
variables: this.vars,
}
if (this.editingEnvironmentIndex === "Global")
setGlobalEnvVariables(environmentUpdated.variables)
else if (this.action === "new") {
updateEnvironment(this.envList.length - 1, environmentUpdated)
} else {
updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
}
this.hideModal()
},
hideModal() {
this.name = null
this.$emit("hide-modal")
},
},
} else if (props.editingEnvironmentIndex !== null) {
return getEnviroment(props.editingEnvironmentIndex)
} else {
return null
}
})
const envList = useReadonlyStream(environments$, []) || props.envVars()
const evnExpandError = computed(() => {
for (const variable of vars.value) {
const result = parseTemplateStringE(variable.value.toString(), vars.value)
if (E.isLeft(result)) {
console.error("error", result.left)
return true
}
}
return false
})
const liveEnvs = computed(() => {
if (evnExpandError) {
return []
}
if (props.editingEnvironmentIndex === "Global") {
return [...vars.value.map((x) => ({ ...x, source: name.value! }))]
} else {
return [
...vars.value.map((x) => ({ ...x, source: name.value! })),
...globalVars.value.map((x) => ({ ...x, source: "Global" })),
]
}
})
watch(
() => props.show,
(show) => {
if (show) {
name.value = workingEnv.value?.name ?? null
vars.value = clone(workingEnv.value?.variables ?? [])
}
}
)
const clearContent = () => {
vars.value = []
clearIcon.value = "check"
toast.success(`${t("state.cleared")}`)
setTimeout(() => (clearIcon.value = "trash-2"), 1000)
}
const addEnvironmentVariable = () => {
vars.value.push({
key: "",
value: "",
})
}
const removeEnvironmentVariable = (index: number) => {
vars.value.splice(index, 1)
}
const saveEnvironment = () => {
if (!name.value) {
toast.error(`${t("environment.invalid_name")}`)
return
}
if (props.action === "new") {
createEnvironment(name.value)
setCurrentEnvironment(envList.value.length - 1)
}
const environmentUpdated: Environment = {
name: name.value,
variables: vars.value,
}
if (props.editingEnvironmentIndex === null) return
if (props.editingEnvironmentIndex === "Global")
setGlobalEnvVariables(environmentUpdated.variables)
else if (props.action === "new") {
updateEnvironment(envList.value.length - 1, environmentUpdated)
} else {
updateEnvironment(props.editingEnvironmentIndex!, environmentUpdated)
}
hideModal()
}
const hideModal = () => {
name.value = null
emit("hide-modal")
}
</script>

104
packages/hoppscotch-app/components/environments/Environment.vue
View File

@@ -5,13 +5,13 @@
>
<span
class="flex items-center justify-center px-4 cursor-pointer"
@click="$emit('edit-environment')"
@click="emit('edit-environment')"
>
<SmartIcon class="svg-icons" name="layers" />
</span>
<span
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
@click="$emit('edit-environment')"
@click="emit('edit-environment')"
>
<span class="truncate">
{{ environment.name }}
@@ -29,7 +29,7 @@
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
:title="t('action.more')"
svg="more-vertical"
/>
</template>
@@ -48,11 +48,11 @@
<SmartItem
ref="edit"
svg="edit"
:label="`${$t('action.edit')}`"
:label="`${t('action.edit')}`"
:shortcut="['E']"
@click.native="
() => {
$emit('edit-environment')
emit('edit-environment')
options.tippy().hide()
}
"
@@ -60,11 +60,11 @@
<SmartItem
ref="duplicate"
svg="copy"
:label="`${$t('action.duplicate')}`"
:label="`${t('action.duplicate')}`"
:shortcut="['D']"
@click.native="
() => {
duplicateEnvironment()
duplicateEnvironments()
options.tippy().hide()
}
"
@@ -73,7 +73,7 @@
v-if="!(environmentIndex === 'Global')"
ref="deleteAction"
svg="trash-2"
:label="`${$t('action.delete')}`"
:label="`${t('action.delete')}`"
:shortcut="['⌫']"
@click.native="
() => {
@@ -87,15 +87,17 @@
</span>
<SmartConfirmModal
:show="confirmRemove"
:title="`${$t('confirm.remove_environment')}`"
:title="`${t('confirm.remove_environment')}`"
@hide-modal="confirmRemove = false"
@resolve="removeEnvironment"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
<script setup lang="ts">
import { ref } from "@nuxtjs/composition-api"
import { Environment } from "@hoppscotch/data"
import cloneDeep from "lodash/cloneDeep"
import {
deleteEnvironment,
duplicateEnvironment,
@@ -104,47 +106,43 @@ import {
getGlobalVariables,
environmentsStore,
} from "~/newstore/environments"
import { useI18n, useToast } from "~/helpers/utils/composables"
export default defineComponent({
props: {
environment: { type: Object, default: () => {} },
environmentIndex: {
type: [Number, String] as PropType<number | "Global">,
default: null,
},
},
setup() {
return {
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
edit: ref<any | null>(null),
duplicate: ref<any | null>(null),
deleteAction: ref<any | null>(null),
}
},
data() {
return {
confirmRemove: false,
}
},
methods: {
removeEnvironment() {
if (this.environmentIndex !== "Global")
deleteEnvironment(this.environmentIndex)
this.$toast.success(`${this.$t("state.deleted")}`)
},
duplicateEnvironment() {
if (this.environmentIndex === "Global") {
createEnvironment(`Global - ${this.$t("action.duplicate")}`)
setEnvironmentVariables(
environmentsStore.value.environments.length - 1,
getGlobalVariables().reduce((gVars, gVar) => {
gVars.push({ key: gVar.key, value: gVar.value })
return gVars
}, [])
)
} else duplicateEnvironment(this.environmentIndex)
},
},
})
const t = useI18n()
const toast = useToast()
const props = defineProps<{
environment: Environment
environmentIndex: number | "Global" | null
}>()
const emit = defineEmits<{
(e: "edit-environment"): void
}>()
const confirmRemove = ref(false)
const tippyActions = ref<any | null>(null)
const options = ref<any | null>(null)
const edit = ref<any | null>(null)
const duplicate = ref<any | null>(null)
const deleteAction = ref<any | null>(null)
const removeEnvironment = () => {
if (props.environmentIndex === null) return
if (props.environmentIndex !== "Global")
deleteEnvironment(props.environmentIndex)
toast.success(`${t("state.deleted")}`)
}
const duplicateEnvironments = () => {
if (props.environmentIndex === null) return
if (props.environmentIndex === "Global") {
createEnvironment(`Global - ${t("action.duplicate")}`)
setEnvironmentVariables(
environmentsStore.value.environments.length - 1,
cloneDeep(getGlobalVariables())
)
} else duplicateEnvironment(props.environmentIndex)
}
</script>

122
packages/hoppscotch-app/components/environments/index.vue
View File

@@ -5,7 +5,7 @@
<template #trigger>
<span
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('environment.select')}`"
:title="`${t('environment.select')}`"
class="flex-1 bg-transparent border-b border-dividerLight select-wrapper"
>
<ButtonSecondary
@@ -15,20 +15,20 @@
/>
<ButtonSecondary
v-else
:label="`${$t('environment.select')}`"
:label="`${t('environment.select')}`"
class="flex-1 !justify-start pr-8 rounded-none"
/>
</span>
</template>
<div class="flex flex-col" role="menu">
<SmartItem
:label="`${$t('environment.no_environment')}`"
:label="`${t('environment.no_environment')}`"
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
:active-info-icon="selectedEnvironmentIndex === -1"
@click.native="
() => {
selectedEnvironmentIndex = -1
$refs.options.tippy().hide()
options.tippy().hide()
}
"
/>
@@ -42,7 +42,7 @@
@click.native="
() => {
selectedEnvironmentIndex = index
$refs.options.tippy().hide()
options.tippy().hide()
}
"
/>
@@ -51,7 +51,7 @@
<div class="flex justify-between flex-1 border-b border-dividerLight">
<ButtonSecondary
svg="plus"
:label="`${$t('action.new')}`"
:label="`${t('action.new')}`"
class="!rounded-none"
@click.native="displayModalAdd(true)"
/>
@@ -60,13 +60,13 @@
v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/environments"
blank
:title="$t('app.wiki')"
:title="t('app.wiki')"
svg="help-circle"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
svg="archive"
:title="$t('modal.import_export')"
:title="t('modal.import_export')"
@click.native="displayModalImportExport(true)"
/>
</div>
@@ -95,13 +95,13 @@
:src="`/images/states/${$colorMode.value}/blockchain.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.environments')}`"
:alt="`${t('empty.environments')}`"
/>
<span class="pb-4 text-center">
{{ $t("empty.environments") }}
{{ t("empty.environments") }}
</span>
<ButtonSecondary
:label="`${$t('add.new')}`"
:label="`${t('add.new')}`"
filled
class="mb-4"
@click.native="displayModalAdd(true)"
@@ -120,9 +120,13 @@
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from "@nuxtjs/composition-api"
import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
<script setup lang="ts">
import { computed, ref } from "@nuxtjs/composition-api"
import {
useReadonlyStream,
useStream,
useI18n,
} from "~/helpers/utils/composables"
import {
environments$,
setCurrentEnvironment,
@@ -130,55 +134,49 @@ import {
globalEnv$,
} from "~/newstore/environments"
export default defineComponent({
setup() {
const globalEnv = useReadonlyStream(globalEnv$, [])
const t = useI18n()
const globalEnvironment = computed(() => ({
name: "Global",
variables: globalEnv.value,
}))
const options = ref<any | null>(null)
return {
environments: useReadonlyStream(environments$, []),
globalEnvironment,
selectedEnvironmentIndex: useStream(
selectedEnvIndex$,
-1,
setCurrentEnvironment
),
}
},
data() {
return {
showModalImportExport: false,
showModalDetails: false,
action: "edit" as "new" | "edit",
editingEnvironmentIndex: undefined as number | "Global" | undefined,
}
},
methods: {
displayModalAdd(shouldDisplay: boolean) {
this.action = "new"
this.showModalDetails = shouldDisplay
},
displayModalEdit(shouldDisplay: boolean) {
this.action = "edit"
this.showModalDetails = shouldDisplay
const globalEnv = useReadonlyStream(globalEnv$, [])
if (!shouldDisplay) this.resetSelectedData()
},
displayModalImportExport(shouldDisplay: boolean) {
this.showModalImportExport = shouldDisplay
},
editEnvironment(environmentIndex: number | "Global") {
this.$data.editingEnvironmentIndex = environmentIndex
this.action = "edit"
this.displayModalEdit(true)
},
resetSelectedData() {
this.$data.editingEnvironmentIndex = undefined
},
},
})
const globalEnvironment = computed(() => ({
name: "Global",
variables: globalEnv.value,
}))
const environments = useReadonlyStream(environments$, [])
const selectedEnvironmentIndex = useStream(
selectedEnvIndex$,
-1,
setCurrentEnvironment
)
const showModalImportExport = ref(false)
const showModalDetails = ref(false)
const action = ref<"new" | "edit">("edit")
const editingEnvironmentIndex = ref<number | "Global" | null>(null)
const displayModalAdd = (shouldDisplay: boolean) => {
action.value = "new"
showModalDetails.value = shouldDisplay
}
const displayModalEdit = (shouldDisplay: boolean) => {
action.value = "edit"
showModalDetails.value = shouldDisplay
if (!shouldDisplay) resetSelectedData()
}
const displayModalImportExport = (shouldDisplay: boolean) => {
showModalImportExport.value = shouldDisplay
}
const editEnvironment = (environmentIndex: number | "Global") => {
editingEnvironmentIndex.value = environmentIndex
action.value = "edit"
displayModalEdit(true)
}
const resetSelectedData = () => {
editingEnvironmentIndex.value = null
}
</script>