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

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-19 10:24:57 +05:30
parent 40ddfa8def
commit 44df9b3be8
20 changed files with 1080 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@@ -37,6 +37,8 @@ module.exports = {
],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/require-default-prop": "warn",
"vue/require-prop-types": "warn",
"prettier/prettier": ["warn", { semi: false }],
"import/no-named-as-default": "off",
"no-undef": "off",

52
components/collections/SaveRequest.vue
View File

@@ -12,15 +12,20 @@
</div>
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("token_req_name") }}</label>
<input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
<input
id="selectLabel"
v-model="requestData.name"
type="text"
@keyup.enter="saveRequestAs"
/>
<label for="selectLabel">Select location</label>
<!-- <input readonly :value="path" /> -->
<Collections
:picked="picked"
:save-request="true"
@select="onSelect"
@update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType"
:picked="picked"
:saveRequest="true"
/>
</div>
<div slot="footer">
@@ -42,12 +47,12 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
import * as teamUtils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
editingRequest: Object,
editingRequest: { type: Object, default: () => {} },
},
data() {
return {
@@ -71,20 +76,6 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
watch: {
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user has chosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderName` won't be reseted
this.$data.requestData.folderName = undefined
this.$data.requestData.requestIndex = undefined
},
"requestData.folderName": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined
},
editingRequest({ name }) {
this.$data.requestData.name = name || this.$data.defaultRequestName
},
},
computed: {
folders() {
const collections = this.$store.state.postwoman.collections
@@ -107,7 +98,8 @@ export default {
return []
}
const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
const userSelectedAnyFolder =
folderName !== undefined && folderName !== ""
if (userSelectedAnyFolder) {
const collection = collections[collectionIndex]
@@ -125,6 +117,20 @@ export default {
}
},
},
watch: {
"requestData.collectionIndex": function resetFolderAndRequestIndex() {
// if user has chosen some folder, than selected other collection, which doesn't have any folders
// than `requestUpdateData.folderName` won't be reseted
this.$data.requestData.folderName = undefined
this.$data.requestData.requestIndex = undefined
},
"requestData.folderName": function resetRequestIndex() {
this.$data.requestData.requestIndex = undefined
},
editingRequest({ name }) {
this.$data.requestData.name = name || this.$data.defaultRequestName
},
},
methods: {
onUpdateCollType(newCollType) {
this.collectionsType = newCollType
@@ -188,14 +194,14 @@ export default {
this.syncCollections()
} else if (this.picked.pickedType === "teams-request") {
team_utils.overwriteRequestTeams(
teamUtils.overwriteRequestTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.picked.requestID
)
} else if (this.picked.pickedType === "teams-folder") {
team_utils.saveRequestAsTeams(
teamUtils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
@@ -203,7 +209,7 @@ export default {
this.picked.folderID
)
} else if (this.picked.pickedType === "teams-collection") {
team_utils.saveRequestAsTeams(
teamUtils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,

71
components/collections/graphql/index.vue
View File

@@ -1,15 +1,23 @@
<template>
<AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend>
<AppSection
ref="collections"
class="yellow"
:label="$t('collections')"
no-legend
>
<div class="show-on-large-screen">
<input
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
<CollectionsGraphqlAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<CollectionsGraphqlAdd
:show="showModalAdd"
@hide-modal="displayModalAdd(false)"
/>
<CollectionsGraphqlEdit
:show="showModalEdit"
:editing-collection="editingCollection"
@@ -53,17 +61,21 @@
</button>
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
<div class="virtual-list">
<ul class="flex-col">
<li v-for="(collection, index) in filteredCollections" :key="collection.name">
<li
v-for="(collection, index) in filteredCollections"
:key="collection.name"
>
<CollectionsGraphqlCollection
:name="collection.name"
:collection-index="index"
:collection="collection"
:doc="doc"
:isFiltered="filterText.length > 0"
:is-filtered="filterText.length > 0"
@edit-collection="editCollection(collection, index)"
@add-folder="addFolder($event)"
@edit-folder="editFolder($event)"
@@ -74,17 +86,13 @@
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"
</p>
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>
<script>
import { fb } from "~/helpers/fb"
@@ -128,15 +136,16 @@ export default {
const filterText = this.filterText.toLowerCase()
const filteredCollections = []
for (let collection of collections) {
for (const collection of collections) {
const filteredRequests = []
const filteredFolders = []
for (let request of collection.requests) {
if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
for (const request of collection.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredRequests.push(request)
}
for (let folder of collection.folders) {
for (const folder of collection.folders) {
const filteredFolderRequests = []
for (let request of folder.requests) {
for (const request of folder.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredFolderRequests.push(request)
}
@@ -158,7 +167,7 @@ export default {
return filteredCollections
},
},
async mounted() {
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
@@ -173,6 +182,9 @@ export default {
}
document.addEventListener("keydown", this._keyListener.bind(this))
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
@@ -232,7 +244,13 @@ export default {
this.syncCollections()
},
editRequest(payload) {
const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
const {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
} = payload
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolderIndex = folderIndex
this.$data.editingFolderName = folderName
@@ -253,15 +271,20 @@ export default {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

202
components/collections/index.vue
View File

@@ -1,17 +1,17 @@
<template>
<AppSection :label="$t('collections')" ref="collections" no-legend>
<AppSection ref="collections" :label="$t('collections')" no-legend>
<div class="show-on-large-screen">
<input
v-if="!saveRequest"
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-if="!saveRequest"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
<CollectionsChooseType
:collectionsType="collectionsType"
:collections-type="collectionsType"
:show="showTeamCollections"
:doc="doc"
@update-collection-type="updateCollectionType"
@@ -48,7 +48,7 @@
/>
<CollectionsImportExport
:show="showModalImportExport"
:collectionsType="collectionsType"
:collections-type="collectionsType"
@hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections"
/>
@@ -61,22 +61,27 @@
!saveRequest
"
class="icon"
@click="displayModalAdd(true)"
disabled
@click="displayModalAdd(true)"
>
<i class="material-icons">add</i>
<div v-tooltip.left="$t('disable_new_collection')">
<span>{{ $t("new") }}</span>
</div>
</button>
<button v-else-if="!saveRequest" class="icon" @click="displayModalAdd(true)">
<button
v-else-if="!saveRequest"
class="icon"
@click="displayModalAdd(true)"
>
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
<button
v-if="!saveRequest"
:disabled="
collectionsType.type == 'team-collections' && collectionsType.selectedTeam == undefined
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam == undefined
"
class="icon"
@click="displayModalImportExport(true)"
@@ -85,11 +90,15 @@
</button>
</div>
<p v-if="collections.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
<i class="material-icons">help_outline</i>
{{ $t("create_new_collection") }}
</p>
<div class="virtual-list">
<ul class="flex-col">
<li v-for="(collection, index) in filteredCollections" :key="collection.name">
<li
v-for="(collection, index) in filteredCollections"
:key="collection.name"
>
<component
:is="
collectionsType.type == 'my-collections'
@@ -100,10 +109,10 @@
:collection-index="index"
:collection="collection"
:doc="doc"
:isFiltered="filterText.length > 0"
:is-filtered="filterText.length > 0"
:selected="selected.some((coll) => coll == collection)"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-collection="editCollection(collection, index)"
@add-folder="addFolder($event)"
@@ -112,25 +121,6 @@
@update-team-collections="updateTeamCollections"
@select-collection="$emit('use-collection', collection)"
@unselect-collection="$emit('remove-collection', collection)"
@select-folder="
$emit('select-folder', {
folderName:
(collectionsType.type == 'my-collections' ? collection.name : collection.title) +
'/' +
$event.name,
collectionIndex: collectionsType.type == 'my-collections' ? index : $event.id,
reqIdx: $event.reqIdx,
collectionsType: collectionsType,
folderId: $event.id,
})
if (collectionsType.type == 'my-collections') {
if ($event.folderPath) {
picked = $event.folderPath
} else picked = index
} else {
picked = $event.id
}
"
@select="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-collection="removeCollection"
@@ -140,31 +130,27 @@
</ul>
</div>
<p v-if="filterText && filteredCollections.length === 0" class="info">
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
<i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
filterText
}}"
</p>
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>
<script>
import gql from "graphql-tag"
import cloneDeep from "lodash/cloneDeep"
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import gql from "graphql-tag"
import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
import * as team_utils from "~/helpers/teams/utils"
import cloneDeep from "lodash/cloneDeep"
import * as teamUtils from "~/helpers/teams/utils"
export default {
props: {
doc: Boolean,
selected: { type: Array, default: () => [] },
saveRequest: Boolean,
picked: Object,
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -196,20 +182,12 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
},
"collectionsType.selectedTeam": function (value) {
if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
},
},
computed: {
showTeamCollections() {
if (fb.currentUser == null) {
this.collectionsType.type = "my-collections"
return false
}
return fb.currentUser !== null
return true
},
collections() {
return fb.currentUser !== null
@@ -218,9 +196,11 @@ export default {
},
filteredCollections() {
let collections = null
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
collections =
fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
fb.currentUser !== null
? fb.currentCollections
: this.$store.state.postwoman.collections
} else {
collections = this.teamCollectionsNew
}
@@ -229,24 +209,25 @@ export default {
return collections
}
if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.type === "team-collections") {
return []
}
const filterText = this.filterText.toLowerCase()
const filteredCollections = []
for (let collection of collections) {
for (const collection of collections) {
const filteredRequests = []
const filteredFolders = []
for (let request of collection.requests) {
if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
for (const request of collection.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredRequests.push(request)
}
for (let folder of this.collectionsType.type === "team-collections"
for (const folder of this.collectionsType.type === "team-collections"
? collection.children
: collection.folders) {
const filteredFolderRequests = []
for (let request of folder.requests) {
for (const request of folder.requests) {
if (request.name.toLowerCase().includes(filterText))
filteredFolderRequests.push(request)
}
@@ -271,7 +252,15 @@ export default {
return filteredCollections
},
},
async mounted() {
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
},
"collectionsType.selectedTeam"(value) {
if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
},
},
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
@@ -290,6 +279,9 @@ export default {
this.teamCollectionsNew = cloneDeep(colls)
})
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
updateTeamCollections() {
// TODO: Remove this at some point
@@ -319,8 +311,12 @@ export default {
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
.createNewRootCollection(this.$apollo, name, this.collectionsType.selectedTeam.id)
teamUtils
.createNewRootCollection(
this.$apollo,
name,
this.collectionsType.selectedTeam.id
)
.then(() => {
this.$toast.success(this.$t("collection_added"), {
icon: "done",
@@ -356,7 +352,7 @@ export default {
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
teamUtils
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => {
// TODO: $t translations ?
@@ -375,20 +371,20 @@ export default {
},
// Intended to be called by CollectionEditFolder modal submit event
updateEditingFolder(name) {
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.editingCollectionIndex,
folder: { ...this.editingFolder, name: name },
folder: { ...this.editingFolder, name },
folderIndex: this.editingFolderIndex,
folderName: this.editingFolder.name,
flag: "rest",
})
this.syncCollections()
} else if (
this.collectionsType.type == "team-collections" &&
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
teamUtils
.renameCollection(this.$apollo, name, this.editingFolder.id)
.then(() => {
// Result
@@ -414,7 +410,7 @@ export default {
name: requestUpdateData.name || this.editingRequest.name,
}
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/editRequest", {
requestCollectionIndex: this.editingCollectionIndex,
requestFolderName: this.editingFolderName,
@@ -428,9 +424,14 @@ export default {
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
let requestName = requestUpdateData.name || this.editingRequest.name
team_utils
.updateRequest(this.$apollo, requestUpdated, requestName, this.editingRequestIndex)
const requestName = requestUpdateData.name || this.editingRequest.name
teamUtils
.updateRequest(
this.$apollo,
requestUpdated,
requestName,
this.editingRequestIndex
)
.then(() => {
this.$toast.success("Request Renamed", {
icon: "done",
@@ -489,12 +490,18 @@ export default {
})
this.syncCollections()
} else if (this.collectionsType.type === "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
this.$apollo
.mutate({
mutation: gql`
mutation CreateChildCollection($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
mutation CreateChildCollection(
$childTitle: String!
$collectionID: String!
) {
createChildCollection(
childTitle: $childTitle
collectionID: $collectionID
) {
id
}
}
@@ -540,7 +547,13 @@ export default {
this.syncCollections()
},
editRequest(payload) {
const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
const {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
} = payload
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolderIndex = folderIndex
this.$data.editingFolderName = folderName
@@ -570,17 +583,17 @@ export default {
this.teamCollectionAdapter.expandCollection(collectionID)
},
removeCollection({ collectionsType, collectionIndex, collectionID }) {
if (collectionsType.type == "my-collections") {
if (collectionsType.type === "my-collections") {
this.$store.commit("postwoman/removeCollection", {
collectionIndex: collectionIndex,
collectionIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (collectionsType.type == "team-collections") {
if (collectionsType.selectedTeam.myRole != "VIEWER") {
} else if (collectionsType.type === "team-collections") {
if (collectionsType.selectedTeam.myRole !== "VIEWER") {
this.$apollo
.mutate({
// Query
@@ -591,10 +604,10 @@ export default {
`,
// Parameters
variables: {
collectionID: collectionID,
collectionID,
},
})
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
@@ -611,21 +624,21 @@ export default {
}
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
if (this.collectionsType.type == "my-collections") {
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/removeRequest", {
collectionIndex: collectionIndex,
folderName: folderName,
requestIndex: requestIndex,
collectionIndex,
folderName,
requestIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
team_utils
} else if (this.collectionsType.type === "team-collections") {
teamUtils
.deleteRequest(this.$apollo, requestIndex)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
@@ -641,8 +654,11 @@ export default {
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
}
</style>

71
components/collections/my/Collection.vue
View File

@@ -1,7 +1,10 @@
<template>
<div>
<div
:class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -10,10 +13,16 @@
@dragend="dragging = false"
>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
@@ -21,43 +30,56 @@
<div>
<button
v-if="doc && !selected"
v-tooltip.left="$t('import')"
class="icon"
@click="$emit('select-collection')"
v-tooltip.left="$t('import')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
v-if="doc && selected"
v-tooltip.left="$t('delete')"
class="icon"
@click="$emit('unselect-collection')"
v-tooltip.left="$t('delete')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
class="icon"
@click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
v-close-popover
class="icon"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button class="icon" @click="$emit('edit-collection')" v-close-popover>
<button
v-close-popover
class="icon"
@click="$emit('edit-collection')"
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button
v-close-popover
class="icon"
@click="confirmRemove = true"
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -79,9 +101,9 @@
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
:save-request="saveRequest"
:collections-type="collectionsType"
:is-filtered="isFiltered"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@@ -105,8 +127,8 @@
:folder-path="collectionIndex.toString()"
:request-index="index"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@@ -117,13 +139,16 @@
<ul>
<li
v-if="
(collection.folders == undefined || collection.folders.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0)
(collection.folders == undefined ||
collection.folders.length === 0) &&
(collection.requests == undefined ||
collection.requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
<i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
<i class="material-icons">not_interested</i>
{{ $t("collection_empty") }}
</p>
</li>
</ul>
@@ -143,14 +168,14 @@ import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
collectionIndex: Number,
collection: Object,
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {

56
components/collections/my/Folder.vue
View File

@@ -1,7 +1,10 @@
<template>
<div>
<div
:class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
]"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@@ -11,23 +14,29 @@
>
<div>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon"
@click="$emit('add-folder', { folder, path: folderPath })"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
@@ -35,16 +44,18 @@
</div>
<div>
<button
class="icon"
@click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
v-close-popover
class="icon"
@click="
$emit('edit-folder', { folder, folderIndex, collectionIndex })
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -64,8 +75,8 @@
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@@ -92,8 +103,8 @@
:folder-path="folderPath"
:doc="doc"
:picked="picked"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
@@ -109,7 +120,10 @@
"
>
<li class="flex ml-8 border-l border-brdColor">
<p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
<p class="info">
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}
</p>
</li>
</ul>
</div>
@@ -127,17 +141,17 @@ import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
name: "folder",
name: "Folder",
props: {
folder: Object,
folderIndex: Number,
collectionIndex: Number,
folderPath: String,
folder: { type: Object, default: () => {} },
folderIndex: { type: Number, default: null },
collectionIndex: { type: Number, default: null },
folderPath: { type: String, default: null },
doc: Boolean,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {

64
components/collections/my/Request.vue
View File

@@ -1,7 +1,10 @@
<template>
<div>
<div
:class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
:class="[
'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging },
]"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@@ -10,23 +13,28 @@
>
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip="$t('more')">
<button v-tooltip="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon"
@click="
$emit('edit-request', {
@@ -37,14 +45,13 @@
requestIndex,
})
"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -64,26 +71,17 @@
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
// eslint-disable-next-line vue/require-default-prop
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
folderPath: String,
picked: Object,
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === this.requestIndex
)
},
collectionsType: { type: Object, default: () => {} },
folderPath: { type: String, default: null },
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -98,6 +96,16 @@ export default {
confirmRemove: false,
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === this.requestIndex
)
},
},
methods: {
selectRequest() {
if (this.$props.saveRequest)
@@ -110,7 +118,8 @@ export default {
requestIndex: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
else
this.$store.commit("postwoman/selectRequest", { request: this.request })
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging
@@ -127,7 +136,10 @@ export default {
})
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
return (
this.requestMethodLabels[method.toLowerCase()] ||
this.requestMethodLabels.default
)
},
},
}

58
components/collections/teams/Collection.vue
View File

@@ -2,10 +2,16 @@
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder</i>
<span>{{ collection.title }}</span>
@@ -13,25 +19,25 @@
<div>
<button
v-if="doc && !selected"
v-tooltip.left="$t('import')"
class="icon"
@click="$emit('select-collection')"
v-tooltip.left="$t('import')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
v-if="doc && selected"
v-tooltip.left="$t('delete')"
class="icon"
@click="$emit('unselect-collection')"
v-tooltip.left="$t('delete')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip.left="$t('more')"
class="tooltip-target icon"
>
<i class="material-icons">more_vert</i>
</button>
@@ -39,9 +45,14 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
v-close-popover
class="icon"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
@@ -50,9 +61,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="$emit('edit-collection')"
v-close-popover
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
@@ -61,9 +72,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="confirmRemove = true"
v-close-popover
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
@@ -86,9 +97,9 @@
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
:save-request="saveRequest"
:collections-type="collectionsType"
:is-filtered="isFiltered"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@@ -112,8 +123,8 @@
:folder-name="collection.name"
:request-index="request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@@ -124,13 +135,16 @@
<ul>
<li
v-if="
(collection.children == undefined || collection.children.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0)
(collection.children == undefined ||
collection.children.length === 0) &&
(collection.requests == undefined ||
collection.requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
<i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
<i class="material-icons">not_interested</i>
{{ $t("collection_empty") }}
</p>
</li>
</ul>
@@ -147,14 +161,14 @@
<script>
export default {
props: {
collectionIndex: Number,
collection: Object,
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {

59
components/collections/teams/Folder.vue
View File

@@ -3,10 +3,16 @@
<div class="transition duration-150 ease-in-out row-wrapper">
<div>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-show="!showChildren && !isFiltered" class="material-icons"
>arrow_right</i
>
<i v-show="showChildren || isFiltered" class="material-icons"
>arrow_drop_down</i
>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="text-green-400 material-icons"
>check_circle</i
>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
@@ -15,8 +21,8 @@
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip.left="$t('more')"
class="tooltip-target icon"
>
<i class="material-icons">more_vert</i>
</button>
@@ -24,9 +30,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="$emit('add-folder', { folder, path: folderPath })"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
@@ -35,9 +41,11 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
v-close-popover
class="icon"
@click="
$emit('edit-folder', { folder, folderIndex, collectionIndex })
"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
@@ -46,9 +54,9 @@
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
v-close-popover
class="icon"
@click="confirmRemove = true"
v-close-popover
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
@@ -69,8 +77,8 @@
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@@ -96,8 +104,8 @@
:folder-name="folder.name"
:request-index="request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:save-request="saveRequest"
:collections-type="collectionsType"
:picked="picked"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@@ -112,7 +120,10 @@
"
>
<li class="flex ml-8 border-l border-brdColor">
<p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
<p class="info">
<i class="material-icons">not_interested</i>
{{ $t("folder_empty") }}
</p>
</li>
</ul>
</div>
@@ -126,20 +137,20 @@
</template>
<script>
import * as team_utils from "~/helpers/teams/utils"
import * as teamUtils from "~/helpers/teams/utils"
export default {
name: "folder",
name: "Folder",
props: {
folder: Object,
folderIndex: Number,
collectionIndex: Number,
folderPath: String,
folder: { type: Object, default: () => {} },
folderIndex: { type: Number, default: null },
collectionIndex: { type: Number, default: null },
folderPath: { type: String, default: null },
doc: Boolean,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -172,10 +183,10 @@ export default {
this.showChildren = !this.showChildren
},
removeFolder() {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
team_utils
if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
teamUtils
.deleteCollection(this.$apollo, this.folder.id)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",

37
components/collections/teams/Request.vue
View File

@@ -3,27 +3,32 @@
<div class="transition duration-150 ease-in-out row-wrapper">
<div>
<button
v-tooltip="!doc ? $t('use_request') : ''"
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
>check_circle</i
>
<span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<span v-else :class="getRequestLabelColor(request.method)">{{
request.method
}}</span>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip="$t('more')"
class="tooltip-target icon"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon"
@click="
$emit('edit-request', {
@@ -34,14 +39,13 @@
requestIndex,
})
"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button v-close-popover class="icon" @click="confirmRemove = true">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -61,15 +65,16 @@
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
// eslint-disable-next-line vue/require-default-prop
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {
@@ -102,7 +107,8 @@ export default {
requestID: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
else
this.$store.commit("postwoman/selectRequest", { request: this.request })
},
removeRequest() {
this.$emit("remove-request", {
@@ -112,7 +118,10 @@ export default {
})
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
return (
this.requestMethodLabels[method.toLowerCase()] ||
this.requestMethodLabels.default
)
},
},
}

42
components/graphql/Field.vue
View File

@@ -6,17 +6,24 @@
(
<span v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}:
<GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
<GraphqlTypeLink
:gql-type="field.type"
:jump-type-callback="jumpTypeCallback"
/>
<span v-if="index !== fieldArgs.length - 1"> , </span>
</span>
) </span
>:
<GraphqlTypeLink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
<GraphqlTypeLink
:gql-type="gqlField.type"
:jump-type-callback="jumpTypeCallback"
/>
</div>
<div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
<div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc">
{{ gqlField.description }}
</div>
<div
v-if="gqlField.isDeprecated"
class="
inline-block
px-4
@@ -29,7 +36,6 @@
rounded-lg
field-deprecated
"
v-if="gqlField.isDeprecated"
>
{{ $t("deprecated") }}
</div>
@@ -38,8 +44,14 @@
<div class="px-4 border-l-2 border-acColor">
<div v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}:
<GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
<div class="mt-2 text-fgLightColor field-desc" v-if="field.description">
<GraphqlTypeLink
:gql-type="field.type"
:jump-type-callback="jumpTypeCallback"
/>
<div
v-if="field.description"
class="mt-2 text-fgLightColor field-desc"
>
{{ field.description }}
</div>
</div>
@@ -48,18 +60,11 @@
</div>
</template>
<style scoped lang="scss">
.field-highlighted {
@apply border-b-2;
@apply border-acColor;
}
</style>
<script>
export default {
props: {
gqlField: Object,
jumpTypeCallback: Function,
gqlField: { type: Object, default: () => {} },
jumpTypeCallback: { type: Function, default: () => {} },
isHighlighted: { type: Boolean, default: false },
},
computed: {
@@ -73,3 +78,10 @@ export default {
},
}
</script>
<style scoped lang="scss">
.field-highlighted {
@apply border-b-2;
@apply border-acColor;
}
</style>

81
components/graphql/QueryEditor.vue
View File

@@ -4,27 +4,15 @@
</div>
</template>
<style scoped lang="scss">
.show-if-initialized {
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/ext-language_tools"
import "ace-builds/src-noconflict/mode-graphqlschema"
import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
import * as gql from "graphql"
import { getAutocompleteSuggestions } from "graphql-language-service-interface"
import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
import debounce from "~/helpers/utils/debounce"
export default {
@@ -44,7 +32,7 @@ export default {
},
options: {
type: Object,
default: {},
default: () => {},
},
styles: {
type: String,
@@ -84,7 +72,7 @@ export default {
mounted() {
defineGQLLanguageMode(ace)
let langTools = ace.require("ace/ext/language_tools")
const langTools = ace.require("ace/ext/language_tools")
const editor = ace.edit(this.$refs.editor, {
mode: `ace/mode/gql-query`,
@@ -108,12 +96,22 @@ export default {
})
const completer = {
getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
getCompletions: (
editor,
_session,
{ row, column },
_prefix,
callback
) => {
if (this.validationSchema) {
const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), {
line: row,
character: column,
})
const completions = getAutocompleteSuggestions(
this.validationSchema,
editor.getValue(),
{
line: row,
character: column,
}
)
callback(
null,
@@ -165,10 +163,14 @@ export default {
this.parseContents(this.value)
},
beforeDestroy() {
this.editor.destroy()
},
methods: {
prettifyQuery() {
try {
this.value = gql.print(gql.parse(this.editor.getValue()))
this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
} catch (e) {
this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
icon: "error",
@@ -180,9 +182,12 @@ export default {
if (this.theme) {
return this.theme
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
const strip = (str) =>
str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--editor-theme")
)
},
@@ -198,12 +203,14 @@ export default {
if (this.validationSchema) {
this.editor.session.setAnnotations(
gql.validate(this.validationSchema, doc).map(({ locations, message }) => ({
row: locations[0].line - 1,
column: locations[0].column - 1,
text: message,
type: "error",
}))
gql
.validate(this.validationSchema, doc)
.map(({ locations, message }) => ({
row: locations[0].line - 1,
column: locations[0].column - 1,
text: message,
type: "error",
}))
)
}
} catch (e) {
@@ -221,9 +228,17 @@ export default {
}
}, 2000),
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style scoped lang="scss">
.show-if-initialized {
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>

76
components/graphql/Type.vue
View File

@@ -1,65 +1,79 @@
<template>
<div :id="`type_${gqlType.name}`" class="p-2 m-2">
<div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
<div
class="font-bold type-title"
:class="{ 'type-highlighted': isHighlighted }"
>
<span v-if="isInput" class="font-normal text-acColor">input </span>
<span v-else-if="isInterface" class="font-normal text-acColor">interface </span>
<span v-else-if="isInterface" class="font-normal text-acColor"
>interface
</span>
<span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
{{ gqlType.name }}
</div>
<div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
<div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0" class="mb-2">
<h5>{{ $t("interfaces") }}</h5>
<div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
<GraphqlTypeLink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
<div
v-for="gqlInterface in interfaces"
:key="gqlInterface.name"
class="m-2 ml-4"
>
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
/>
</div>
</div>
<div v-if="children.length > 0" class="mb-2">
<h5>{{ $t("children") }}</h5>
<div v-for="child in children" :key="child.name" class="m-2 ml-4">
<GraphqlTypeLink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
<GraphqlTypeLink
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
/>
</div>
</div>
<div v-if="gqlType.getFields">
<h5>{{ $t("fields") }}</h5>
<div v-for="field in gqlType.getFields()" :key="field.name">
<GraphqlField
:gqlField="field"
:isHighlighted="isFieldHighlighted({ field })"
:jumpTypeCallback="jumpTypeCallback"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
/>
</div>
</div>
<div v-if="isEnum">
<h5>{{ $t("values") }}</h5>
<div :key="value.name" v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
<div
v-for="value in gqlType.getValues()"
:key="value.name"
class="m-4"
v-text="value.name"
></div>
</div>
</div>
</template>
<style scoped lang="scss">
.type-highlighted {
@apply text-acColor;
}
</style>
<script>
import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
import {
GraphQLEnumType,
GraphQLInputObjectType,
GraphQLInterfaceType,
} from "graphql"
export default {
props: {
// eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
gqlType: {},
gqlTypes: Array,
jumpTypeCallback: Function,
gqlTypes: { type: Array, default: () => [] },
jumpTypeCallback: { type: Function, default: () => {} },
isHighlighted: { type: Boolean, default: false },
highlightedFields: { type: Array, default: () => [] },
},
methods: {
isFieldHighlighted({ field }) {
return !!this.highlightedFields.find(({ name }) => name === field.name)
},
},
computed: {
isInput() {
return this.gqlType instanceof GraphQLInputObjectType
@@ -75,9 +89,21 @@ export default {
},
children() {
return this.gqlTypes.filter(
(type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
(type) =>
type.getInterfaces && type.getInterfaces().includes(this.gqlType)
)
},
},
methods: {
isFieldHighlighted({ field }) {
return !!this.highlightedFields.find(({ name }) => name === field.name)
},
},
}
</script>
<style scoped lang="scss">
.type-highlighted {
@apply text-acColor;
}
</style>

258
components/history/index.vue
View File

@@ -1,11 +1,11 @@
<template>
<AppSection icon="history" :label="$t('history')" ref="history" no-legend>
<AppSection ref="history" icon="history" :label="$t('history')" no-legend>
<div class="show-on-large-screen">
<input
v-model="filterText"
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
@@ -16,9 +16,9 @@
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
<HistoryRestCard
v-if="page == 'rest'"
:entry="entry"
:id="index"
:showMore="showMore"
:entry="entry"
:show-more="showMore"
@toggle-star="toggleStar(entry)"
@delete-entry="deleteHistory(entry)"
@use-entry="useHistory(entry)"
@@ -26,21 +26,24 @@
<HistoryGraphqlCard
v-if="page == 'graphql'"
:entry="entry"
:showMore="showMore"
:show-more="showMore"
@toggle-star="toggleStar(entry)"
@delete-entry="deleteHistory(entry)"
@use-entry="useHistory(entry)"
/>
</ul>
</div>
<p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }" class="info">
<p
:class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
class="info"
>
{{ $t("nothing_found") }} "{{ filterText }}"
</p>
<p v-if="history.length === 0" class="info">
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
<div class="row-wrapper" v-if="!isClearingHistory">
<div v-if="!isClearingHistory" class="row-wrapper">
<button
data-testid="clear_history"
class="icon"
@@ -60,22 +63,24 @@
</i>
</button>
</div>
<div class="row-wrapper" v-else>
<p class="info"><i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}</p>
<div v-else class="row-wrapper">
<p class="info">
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
</p>
<div>
<button
v-tooltip="$t('yes')"
data-testid="confirm_clear_history"
class="icon"
@click="clearHistory"
v-tooltip="$t('yes')"
>
<i class="material-icons">done</i>
</button>
<button
v-tooltip="$t('no')"
data-testid="reject_clear_history"
class="icon"
@click="disableHistoryClearing"
v-tooltip="$t('no')"
>
<i class="material-icons">close</i>
</button>
@@ -85,6 +90,134 @@
</AppSection>
</template>
<script>
import { fb } from "~/helpers/fb"
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property))
export default {
props: {
page: { type: String, default: null },
},
data() {
return {
history:
fb.currentUser !== null
? this.page === "rest"
? fb.currentHistory
: fb.currentGraphqlHistory
: JSON.parse(
window.localStorage.getItem(
this.page === "rest" ? "history" : "graphqlHistory"
)
) || [],
filterText: "",
showFilter: false,
isClearingHistory: false,
showMore: false,
}
},
computed: {
filteredHistory() {
const filteringHistory =
fb.currentUser !== null
? this.page === "rest"
? fb.currentHistory
: fb.currentGraphqlHistory
: JSON.parse(
window.localStorage.getItem(
this.page === "rest" ? "history" : "graphqlHistory"
)
) || []
return filteringHistory.filter((entry) => {
const filterText = this.filterText.toLowerCase()
return Object.keys(entry).some((key) => {
let value = entry[key]
value = typeof value !== "string" ? value.toString() : value
return value.toLowerCase().includes(filterText)
})
})
},
},
methods: {
async clearHistory() {
if (fb.currentUser !== null) {
this.page === "rest"
? await fb.clearHistory()
: await fb.clearGraphqlHistory()
}
this.history = []
this.filterText = ""
this.disableHistoryClearing()
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
this.$toast.error(this.$t("history_deleted"), {
icon: "delete",
})
},
useHistory(entry) {
this.$emit("useHistory", entry)
},
async deleteHistory(entry) {
if (this.history.length === 0) {
this.filterText = ""
}
if (fb.currentUser !== null) {
await (this.page === "rest"
? fb.deleteHistory(entry)
: fb.deleteGraphqlHistory(entry))
this.history = fb.currentHistory
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
} else {
this.history.splice(this.history.indexOf(entry), 1)
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
}
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
},
addEntry(entry) {
this.history.push(entry)
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return
this.isClearingHistory = true
},
disableHistoryClearing() {
this.isClearingHistory = false
},
toggleCollapse() {
this.showMore = !this.showMore
},
async toggleStar(entry) {
if (fb.currentUser !== null) {
this.page === "rest"
? await fb.toggleStar(entry, !entry.star)
: await fb.toggleGraphqlHistoryStar(entry, !entry.star)
}
entry.star = !entry.star
updateOnLocalStorage(
this.page === "rest" ? "history" : "graphqlHistory",
this.history
)
},
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 270px);
@@ -105,106 +238,3 @@ ol {
}
}
</style>
<script>
import { fb } from "~/helpers/fb"
const updateOnLocalStorage = (propertyName, property) =>
window.localStorage.setItem(propertyName, JSON.stringify(property))
export default {
props: {
page: String,
},
data() {
return {
history:
fb.currentUser !== null
? fb.currentHistory
: JSON.parse(
window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
) || [],
filterText: "",
showFilter: false,
isClearingHistory: false,
showMore: false,
}
},
computed: {
filteredHistory() {
this.history =
fb.currentUser !== null
? this.page == "rest"
? fb.currentHistory
: fb.currentGraphqlHistory
: JSON.parse(
window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
) || []
return this.history.filter((entry) => {
const filterText = this.filterText.toLowerCase()
return Object.keys(entry).some((key) => {
let value = entry[key]
value = typeof value !== "string" ? value.toString() : value
return value.toLowerCase().includes(filterText)
})
})
},
},
methods: {
async clearHistory() {
if (fb.currentUser !== null) {
this.page == "rest" ? await fb.clearHistory() : await fb.clearGraphqlHistory()
}
this.history = []
this.filterText = ""
this.disableHistoryClearing()
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
this.$toast.error(this.$t("history_deleted"), {
icon: "delete",
})
},
useHistory(entry) {
this.$emit("useHistory", entry)
},
async deleteHistory(entry) {
if (this.history.length === 0) {
this.filterText = ""
}
if (fb.currentUser !== null) {
await (this.page == "rest" ? fb.deleteHistory(entry) : fb.deleteGraphqlHistory(entry))
this.history = fb.currentHistory
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
} else {
this.history.splice(this.history.indexOf(entry), 1)
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
}
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
},
addEntry(entry) {
this.history.push(entry)
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
},
enableHistoryClearing() {
if (!this.history || !this.history.length) return
this.isClearingHistory = true
},
disableHistoryClearing() {
this.isClearingHistory = false
},
toggleCollapse() {
this.showMore = !this.showMore
},
async toggleStar(entry) {
if (fb.currentUser !== null) {
this.page == "rest"
? await fb.toggleStar(entry, !entry.star)
: await fb.toggleGraphqlHistoryStar(entry, !entry.star)
}
entry.star = !entry.star
updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
},
},
}
</script>

77
helpers/postwomanTesting.js
View File

@@ -12,7 +12,7 @@ const styles = {
// TODO: probably have to use a more global state for `test`
export default function runTestScriptWithVariables(script, variables) {
let pw = {
const pw = {
_errors: [],
_testReports: [],
_report: "",
@@ -29,6 +29,7 @@ export default function runTestScriptWithVariables(script, variables) {
Object.assign(pw, variables)
// run pre-request script within this function so that it has access to the pw object.
// eslint-disable-next-line no-new-func
new Function("pw", script)(pw)
//
const testReports = pw._testReports.map((item) => {
@@ -80,6 +81,7 @@ class Expectation {
}
}
}
_fmtNot(message) {
// given a string with "(not)" in it, replaces with "not" or "", depending if the expectation is expecting the positive or inverse (this._not)
if (this.not === true) {
@@ -88,62 +90,102 @@ class Expectation {
return message.replace("(not)", "")
}
}
_fail(message) {
return this._testReports.push({ result: FAIL, message })
}
_pass() {
return this._testReports.push({ result: PASS })
}
// TEST METHODS DEFINED BELOW
// these are the usual methods that would follow expect(...)
toBe(value) {
return this._satisfies(value)
? this._pass()
: this._fail(this._fmtNot(`Expected ${this.expectValue} (not)to be ${value}`))
}
toHaveProperty(value) {
return this._satisfies(Object.prototype.hasOwnProperty.call(this.expectValue, value), true)
? this._pass()
: this._fail(
this._fmtNot(`Expected object ${this.expectValue} to (not)have property ${value}`)
this._fmtNot(`Expected ${this.expectValue} (not)to be ${value}`)
)
}
toHaveProperty(value) {
return this._satisfies(
Object.prototype.hasOwnProperty.call(this.expectValue, value),
true
)
? this._pass()
: this._fail(
this._fmtNot(
`Expected object ${this.expectValue} to (not)have property ${value}`
)
)
}
toBeLevel2xx() {
const code = parseInt(this.expectValue, 10)
if (Number.isNaN(code)) {
return this._fail(`Expected 200-level status but could not parse value ${this.expectValue}`)
return this._fail(
`Expected 200-level status but could not parse value ${this.expectValue}`
)
}
return this._satisfies(code >= 200 && code < 300, true)
? this._pass()
: this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 200-level status`))
: this._fail(
this._fmtNot(
`Expected ${this.expectValue} to (not)be 200-level status`
)
)
}
toBeLevel3xx() {
const code = parseInt(this.expectValue, 10)
if (Number.isNaN(code)) {
return this._fail(`Expected 300-level status but could not parse value ${this.expectValue}`)
return this._fail(
`Expected 300-level status but could not parse value ${this.expectValue}`
)
}
return this._satisfies(code >= 300 && code < 400, true)
? this._pass()
: this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 300-level status`))
: this._fail(
this._fmtNot(
`Expected ${this.expectValue} to (not)be 300-level status`
)
)
}
toBeLevel4xx() {
const code = parseInt(this.expectValue, 10)
if (Number.isNaN(code)) {
return this._fail(`Expected 400-level status but could not parse value ${this.expectValue}`)
return this._fail(
`Expected 400-level status but could not parse value ${this.expectValue}`
)
}
return this._satisfies(code >= 400 && code < 500, true)
? this._pass()
: this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 400-level status`))
: this._fail(
this._fmtNot(
`Expected ${this.expectValue} to (not)be 400-level status`
)
)
}
toBeLevel5xx() {
const code = parseInt(this.expectValue, 10)
if (Number.isNaN(code)) {
return this._fail(`Expected 500-level status but could not parse value ${this.expectValue}`)
return this._fail(
`Expected 500-level status but could not parse value ${this.expectValue}`
)
}
return this._satisfies(code >= 500 && code < 600, true)
? this._pass()
: this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 500-level status`))
: this._fail(
this._fmtNot(
`Expected ${this.expectValue} to (not)be 500-level status`
)
)
}
toHaveLength(expectedLength) {
const actualLength = this.expectValue.length
return this._satisfies(actualLength, expectedLength)
@@ -154,6 +196,7 @@ class Expectation {
)
)
}
toBeType(expectedType) {
const actualType = typeof this.expectValue
if (
@@ -177,7 +220,9 @@ class Expectation {
return this._satisfies(actualType, expectedType)
? this._pass()
: this._fail(
this._fmtNot(`Expected type to be "${expectedType}" but actual type was "${actualType}"`)
this._fmtNot(
`Expected type to be "${expectedType}" but actual type was "${actualType}"`
)
)
}
}

5
helpers/preRequest.js
View File

@@ -1,10 +1,10 @@
export default function getEnvironmentVariablesFromScript(script) {
let _variables = {}
const _variables = {}
try {
// the pw object is the proxy by which pre-request scripts can pass variables to the request.
// for security and control purposes, this is the only way a pre-request script should modify variables.
let pw = {
const pw = {
environment: {
set: (key, value) => (_variables[key] = value),
},
@@ -15,6 +15,7 @@ export default function getEnvironmentVariablesFromScript(script) {
}
// run pre-request script within this function so that it has access to the pw object.
// eslint-disable-next-line no-new-func
new Function("pw", script)(pw)
} catch (_e) {}

189
helpers/teams/utils.js
View File

@@ -1,4 +1,3 @@
import { ApolloClient } from "@apollo/client/core"
import gql from "graphql-tag"
import { BehaviorSubject } from "rxjs"
@@ -95,7 +94,9 @@ export async function getLiveTeamMembersList(apollo, teamID) {
})
.subscribe(({ data }) => {
subject.next(
subject.value.filter((member) => member.user.uid !== data.teamMemberAdded.user.uid)
subject.value.filter(
(member) => member.user.uid !== data.teamMemberAdded.user.uid
)
)
})
@@ -112,22 +113,22 @@ export async function getLiveTeamMembersList(apollo, teamID) {
return subject
}
export async function createTeam(apollo, name) {
export function createTeam(apollo, name) {
return apollo.mutate({
mutation: gql`
mutation($name: String!) {
mutation ($name: String!) {
createTeam(name: $name) {
name
}
}
`,
variables: {
name: name,
name,
},
})
}
export async function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
export function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
return apollo.mutate({
mutation: gql`
mutation addTeamMemberByEmail(
@@ -135,20 +136,24 @@ export async function addTeamMemberByEmail(apollo, userRole, userEmail, teamID)
$userEmail: String!
$teamID: String!
) {
addTeamMemberByEmail(userRole: $userRole, userEmail: $userEmail, teamID: $teamID) {
addTeamMemberByEmail(
userRole: $userRole
userEmail: $userEmail
teamID: $teamID
) {
role
}
}
`,
variables: {
userRole: userRole,
userEmail: userEmail,
teamID: teamID,
userRole,
userEmail,
teamID,
},
})
}
export async function updateTeamMemberRole(apollo, userID, newRole, teamID) {
export function updateTeamMemberRole(apollo, userID, newRole, teamID) {
return apollo.mutate({
mutation: gql`
mutation updateTeamMemberRole(
@@ -156,20 +161,24 @@ export async function updateTeamMemberRole(apollo, userID, newRole, teamID) {
$userUid: String!
$teamID: String!
) {
updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
updateTeamMemberRole(
newRole: $newRole
userUid: $userUid
teamID: $teamID
) {
role
}
}
`,
variables: {
newRole: newRole,
newRole,
userUid: userID,
teamID: teamID,
teamID,
},
})
}
export async function renameTeam(apollo, name, teamID) {
export function renameTeam(apollo, name, teamID) {
return apollo.mutate({
mutation: gql`
mutation renameTeam($newName: String!, $teamID: String!) {
@@ -180,12 +189,12 @@ export async function renameTeam(apollo, name, teamID) {
`,
variables: {
newName: name,
teamID: teamID,
teamID,
},
})
}
export async function removeTeamMember(apollo, userID, teamID) {
export function removeTeamMember(apollo, userID, teamID) {
return apollo.mutate({
mutation: gql`
mutation removeTeamMember($userUid: String!, $teamID: String!) {
@@ -194,47 +203,47 @@ export async function removeTeamMember(apollo, userID, teamID) {
`,
variables: {
userUid: userID,
teamID: teamID,
teamID,
},
})
}
export async function deleteTeam(apollo, teamID) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($teamID: String!) {
mutation ($teamID: String!) {
deleteTeam(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
teamID,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function exitTeam(apollo, teamID) {
export function exitTeam(apollo, teamID) {
apollo.mutate({
mutation: gql`
mutation($teamID: String!) {
mutation ($teamID: String!) {
leaveTeam(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
teamID,
},
})
}
export async function rootCollectionsOfTeam(apollo, teamID) {
var collections = []
var cursor = ""
const collections = []
let cursor = ""
while (true) {
var response = await apollo.query({
const response = await apollo.query({
query: gql`
query rootCollectionsOfTeam($teamID: String!, $cursor: String!) {
rootCollectionsOfTeam(teamID: $teamID, cursor: $cursor) {
@@ -244,12 +253,12 @@ export async function rootCollectionsOfTeam(apollo, teamID) {
}
`,
variables: {
teamID: teamID,
cursor: cursor,
teamID,
cursor,
},
fetchPolicy: "no-cache",
})
if (response.data.rootCollectionsOfTeam.length == 0) break
if (response.data.rootCollectionsOfTeam.length === 0) break
response.data.rootCollectionsOfTeam.forEach((collection) => {
collections.push(collection)
})
@@ -259,8 +268,8 @@ export async function rootCollectionsOfTeam(apollo, teamID) {
}
export async function getCollectionChildren(apollo, collectionID) {
var children = []
var response = await apollo.query({
const children = []
const response = await apollo.query({
query: gql`
query getCollectionChildren($collectionID: String!) {
collection(collectionID: $collectionID) {
@@ -272,7 +281,7 @@ export async function getCollectionChildren(apollo, collectionID) {
}
`,
variables: {
collectionID: collectionID,
collectionID,
},
fetchPolicy: "no-cache",
})
@@ -283,10 +292,10 @@ export async function getCollectionChildren(apollo, collectionID) {
}
export async function getCollectionRequests(apollo, collectionID) {
var requests = []
var cursor = ""
const requests = []
let cursor = ""
while (true) {
var response = await apollo.query({
const response = await apollo.query({
query: gql`
query getCollectionRequests($collectionID: String!, $cursor: String) {
requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
@@ -297,8 +306,8 @@ export async function getCollectionRequests(apollo, collectionID) {
}
`,
variables: {
collectionID: collectionID,
cursor: cursor,
collectionID,
cursor,
},
fetchPolicy: "no-cache",
})
@@ -316,11 +325,11 @@ export async function getCollectionRequests(apollo, collectionID) {
}
export async function renameCollection(apollo, title, id) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($newTitle: String!, $collectionID: String!) {
mutation ($newTitle: String!, $collectionID: String!) {
renameCollection(newTitle: $newTitle, collectionID: $collectionID) {
id
}
@@ -331,17 +340,17 @@ export async function renameCollection(apollo, title, id) {
collectionID: id,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function updateRequest(apollo, request, requestName, requestID) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($data: UpdateTeamRequestInput!, $requestID: String!) {
mutation ($data: UpdateTeamRequestInput!, $requestID: String!) {
updateRequest(data: $data, requestID: $requestID) {
id
}
@@ -352,21 +361,24 @@ export async function updateRequest(apollo, request, requestName, requestID) {
request: JSON.stringify(request),
title: requestName,
},
requestID: requestID,
requestID,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function addChildCollection(apollo, title, id) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
mutation ($childTitle: String!, $collectionID: String!) {
createChildCollection(
childTitle: $childTitle
collectionID: $collectionID
) {
id
}
}
@@ -376,17 +388,17 @@ export async function addChildCollection(apollo, title, id) {
collectionID: id,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function deleteCollection(apollo, id) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($collectionID: String!) {
mutation ($collectionID: String!) {
deleteCollection(collectionID: $collectionID)
}
`,
@@ -394,54 +406,60 @@ export async function deleteCollection(apollo, id) {
collectionID: id,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function deleteRequest(apollo, requestID) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($requestID: String!) {
mutation ($requestID: String!) {
deleteRequest(requestID: $requestID)
}
`,
variables: {
requestID: requestID,
requestID,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function createNewRootCollection(apollo, title, id) {
let response = undefined
let response
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($title: String!, $teamID: String!) {
mutation ($title: String!, $teamID: String!) {
createRootCollection(title: $title, teamID: $teamID) {
id
}
}
`,
variables: {
title: title,
title,
teamID: id,
},
})
if (response != undefined) break
if (response !== undefined) break
}
return response
}
export async function saveRequestAsTeams(apollo, request, title, teamID, collectionID) {
export async function saveRequestAsTeams(
apollo,
request,
title,
teamID,
collectionID
) {
await apollo.mutate({
mutation: gql`
mutation($data: CreateTeamRequestInput!, $collectionID: String!) {
mutation ($data: CreateTeamRequestInput!, $collectionID: String!) {
createRequestInCollection(data: $data, collectionID: $collectionID) {
collection {
id
@@ -454,11 +472,11 @@ export async function saveRequestAsTeams(apollo, request, title, teamID, collect
}
`,
variables: {
collectionID: collectionID,
collectionID,
data: {
teamID: teamID,
title: title,
request: request,
teamID,
title,
request,
},
},
})
@@ -467,7 +485,10 @@ export async function saveRequestAsTeams(apollo, request, title, teamID, collect
export async function overwriteRequestTeams(apollo, request, title, requestID) {
await apollo.mutate({
mutation: gql`
mutation updateRequest($data: UpdateTeamRequestInput!, $requestID: String!) {
mutation updateRequest(
$data: UpdateTeamRequestInput!
$requestID: String!
) {
updateRequest(data: $data, requestID: $requestID) {
id
title
@@ -475,20 +496,26 @@ export async function overwriteRequestTeams(apollo, request, title, requestID) {
}
`,
variables: {
requestID: requestID,
requestID,
data: {
request: request,
title: title,
request,
title,
},
},
})
}
export async function importFromMyCollections(apollo, collectionID, teamID) {
let response = await apollo.mutate({
const response = await apollo.mutate({
mutation: gql`
mutation importFromMyCollections($fbCollectionPath: String!, $teamID: String!) {
importCollectionFromUserFirestore(fbCollectionPath: $fbCollectionPath, teamID: $teamID) {
mutation importFromMyCollections(
$fbCollectionPath: String!
$teamID: String!
) {
importCollectionFromUserFirestore(
fbCollectionPath: $fbCollectionPath
teamID: $teamID
) {
id
title
}
@@ -496,14 +523,14 @@ export async function importFromMyCollections(apollo, collectionID, teamID) {
`,
variables: {
fbCollectionPath: collectionID,
teamID: teamID,
teamID,
},
})
return response.data != null
}
export async function importFromJSON(apollo, collections, teamID) {
let response = await apollo.mutate({
const response = await apollo.mutate({
mutation: gql`
mutation importFromJSON($jsonString: String!, $teamID: String!) {
importCollectionsFromJSON(jsonString: $jsonString, teamID: $teamID)
@@ -511,14 +538,14 @@ export async function importFromJSON(apollo, collections, teamID) {
`,
variables: {
jsonString: JSON.stringify(collections),
teamID: teamID,
teamID,
},
})
return response.data != null
}
export async function replaceWithJSON(apollo, collections, teamID) {
let response = await apollo.mutate({
const response = await apollo.mutate({
mutation: gql`
mutation replaceWithJSON($jsonString: String!, $teamID: String!) {
replaceCollectionsWithJSON(jsonString: $jsonString, teamID: $teamID)
@@ -526,21 +553,21 @@ export async function replaceWithJSON(apollo, collections, teamID) {
`,
variables: {
jsonString: JSON.stringify(collections),
teamID: teamID,
teamID,
},
})
return response.data != null
}
export async function exportAsJSON(apollo, teamID) {
let response = await apollo.query({
const response = await apollo.query({
query: gql`
query exportAsJSON($teamID: String!) {
exportCollectionsToJSON(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
teamID,
},
})
return response.data.exportCollectionsToJSON

4
helpers/utils/__tests__/debounce.spec.js
View File

@@ -10,7 +10,7 @@ describe("debounce", () => {
expect(fn).not.toHaveBeenCalled()
})
test("calls the function after the given timeout", async () => {
test("calls the function after the given timeout", () => {
const fn = jest.fn()
jest.useFakeTimers()
@@ -24,7 +24,7 @@ describe("debounce", () => {
expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 100)
})
test("calls the function only one time within the timeframe", async () => {
test("calls the function only one time within the timeframe", () => {
const fn = jest.fn()
const debFunc = debounce(fn, 1000)

31
newstore/DispatchingStore.ts
View File

@@ -3,6 +3,10 @@ import { map } from "rxjs/operators"
import assign from "lodash/assign"
import clone from "lodash/clone"
export type Dispatchers<StoreType> = {
[key: string]: (currentVal: StoreType, payload: any) => Partial<StoreType>
}
type Dispatch<
StoreType,
DispatchersType extends Dispatchers<StoreType>,
@@ -12,21 +16,26 @@ type Dispatch<
payload: any
}
export type Dispatchers<StoreType> = {
[key: string]: (currentVal: StoreType, payload: any) => Partial<StoreType>
}
export default class DispatchingStore<StoreType, DispatchersType extends Dispatchers<StoreType>> {
export default class DispatchingStore<
StoreType,
DispatchersType extends Dispatchers<StoreType>
> {
#state$: BehaviorSubject<StoreType>
#dispatchers: Dispatchers<StoreType>
#dispatches$: Subject<Dispatch<StoreType, DispatchersType, keyof DispatchersType>> = new Subject()
#dispatches$: Subject<
Dispatch<StoreType, DispatchersType, keyof DispatchersType>
> = new Subject()
constructor(initialValue: StoreType, dispatchers: DispatchersType) {
this.#state$ = new BehaviorSubject(initialValue)
this.#dispatchers = dispatchers
this.#dispatches$
.pipe(map(({ dispatcher, payload }) => this.#dispatchers[dispatcher](this.value, payload)))
.pipe(
map(({ dispatcher, payload }) =>
this.#dispatchers[dispatcher](this.value, payload)
)
)
.subscribe((val) => {
const data = clone(this.value)
assign(data, val)
@@ -47,8 +56,12 @@ export default class DispatchingStore<StoreType, DispatchersType extends Dispatc
return this.#dispatches$
}
dispatch({ dispatcher, payload }: Dispatch<StoreType, DispatchersType, keyof DispatchersType>) {
if (!this.#dispatchers[dispatcher]) throw new Error(`Undefined dispatch type '${dispatcher}'`)
dispatch({
dispatcher,
payload,
}: Dispatch<StoreType, DispatchersType, keyof DispatchersType>) {
if (!this.#dispatchers[dispatcher])
throw new Error(`Undefined dispatch type '${dispatcher}'`)
this.#dispatches$.next({ dispatcher, payload })
}

335
pages/graphql.vue
View File

@@ -2,18 +2,18 @@
<div class="page">
<div class="content">
<div class="page-columns inner-left">
<AppSection :label="$t('endpoint')" ref="endpoint" no-legend>
<AppSection ref="endpoint" :label="$t('endpoint')" no-legend>
<ul>
<li>
<label for="url">{{ $t("url") }}</label>
<input
id="url"
type="url"
v-model="url"
type="url"
spellcheck="false"
@keyup.enter="onPollSchemaClick()"
class="md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="onPollSchemaClick()"
/>
</li>
<div>
@@ -22,8 +22,8 @@
<button
id="get"
name="get"
@click="onPollSchemaClick"
class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
@click="onPollSchemaClick"
>
{{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
<span
@@ -37,7 +37,7 @@
</ul>
</AppSection>
<AppSection :label="$t('headers')" ref="headers" no-legend>
<AppSection ref="headers" :label="$t('headers')" no-legend>
<div class="flex flex-col">
<label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0">
@@ -45,7 +45,11 @@
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="headers = []"
>
<i class="material-icons">clear_all</i>
</button>
</div>
@@ -71,13 +75,13 @@
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
autofocus
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
autofocus
/>
</li>
<li>
@@ -85,25 +89,18 @@
:placeholder="$t('value_count', { count: index + 1 })"
:name="`value ${index}`"
:value="header.value"
autofocus
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<div>
<li>
<button
class="icon"
@click="
$store.commit('setActiveGQLHeader', {
index,
value: header.hasOwnProperty('active') ? !header.active : false,
})
"
v-tooltip.bottom="{
content: header.hasOwnProperty('active')
? header.active
@@ -111,6 +108,15 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon"
@click="
$store.commit('setActiveGQLHeader', {
index,
value: header.hasOwnProperty('active')
? !header.active
: false,
})
"
>
<i class="material-icons">
{{
@@ -127,9 +133,9 @@
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeRequestHeader(index)"
v-tooltip.bottom="$t('delete')"
>
<i class="material-icons">delete</i>
</button>
@@ -147,35 +153,37 @@
</div>
</AppSection>
<AppSection :label="$t('schema')" ref="schema" no-legend>
<AppSection ref="schema" :label="$t('schema')" no-legend>
<div class="row-wrapper">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
<button
class="icon"
@click="ToggleExpandResponse"
ref="ToggleExpandResponse"
v-tooltip="{
content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
content: !expandResponse
? $t('expand_response')
: $t('collapse_response'),
}"
class="icon"
@click="ToggleExpandResponse"
>
<i class="material-icons">
{{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button>
<button
class="icon"
@click="downloadSchema"
ref="downloadSchema"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadSchema"
>
<i class="material-icons">save_alt</i>
</button>
<button
class="icon"
ref="copySchemaCode"
@click="copySchema"
v-tooltip="$t('copy_schema')"
class="icon"
@click="copySchema"
>
<i class="material-icons">content_copy</i>
</button>
@@ -198,45 +206,47 @@
/>
<input
v-else
ref="status"
class="rounded-b-lg missing-data-response"
:value="$t('waiting_receive_schema')"
ref="status"
name="status"
readonly
type="text"
/>
</AppSection>
<AppSection :label="$t('query')" ref="query" no-legend>
<AppSection ref="query" :label="$t('query')" no-legend>
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<button
v-tooltip.bottom="
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
@click="runQuery()"
v-tooltip.bottom="`${$t('run_query')} (${getSpecialKey()}-Enter)`"
>
<i class="material-icons">play_arrow</i>
</button>
<button
class="icon"
@click="copyQuery"
ref="copyQueryButton"
v-tooltip="$t('copy_query')"
class="icon"
@click="copyQuery"
>
<i class="material-icons">content_copy</i>
</button>
<button
v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
class="icon"
@click="doPrettifyQuery"
v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
>
<i class="material-icons">photo_filter</i>
</button>
<button
class="icon"
@click="saveRequest"
ref="saveRequest"
v-tooltip.bottom="$t('save_to_collections')"
class="icon"
@click="saveRequest"
>
<i class="material-icons">create_new_folder</i>
</button>
@@ -245,7 +255,8 @@
<GraphqlQueryEditor
ref="queryEditor"
v-model="gqlQueryString"
:onRunGQLQuery="runQuery"
styles="rounded-b-lg"
:on-run-g-q-l-query="runQuery"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
@@ -254,11 +265,11 @@
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
@update-query="updateQuery"
/>
</AppSection>
<AppSection :label="$t('variables')" ref="variables" no-legend>
<AppSection ref="variables" :label="$t('variables')" no-legend>
<div class="flex flex-col">
<label>{{ $t("variables") }}</label>
<SmartAceEditor
@@ -277,27 +288,27 @@
</div>
</AppSection>
<AppSection :label="$t('response')" ref="response" no-legend>
<AppSection ref="response" :label="$t('response')" no-legend>
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="row-wrapper">
<label for="responseField">{{ $t("response_body") }}</label>
<div>
<button
v-if="response"
ref="downloadResponse"
v-tooltip="$t('download_file')"
class="icon"
@click="downloadResponse"
ref="downloadResponse"
v-if="response"
v-tooltip="$t('download_file')"
>
<i class="material-icons">save_alt</i>
</button>
<button
v-if="response"
ref="copyResponseButton"
v-tooltip="$t('copy_response')"
class="icon"
@click="copyResponse"
ref="copyResponseButton"
v-if="response"
v-tooltip="$t('copy_response')"
>
<i class="material-icons">content_copy</i>
</button>
@@ -321,9 +332,9 @@
/>
<input
v-else
ref="status"
class="rounded-b-lg missing-data-response"
:value="$t('waiting_receive_response')"
ref="status"
name="status"
readonly
type="text"
@@ -335,12 +346,12 @@
<aside class="sticky-inner inner-right lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection :label="$t('docs')" ref="docs" no-legend>
<AppSection ref="docs" :label="$t('docs')" no-legend>
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
v-model="graphqlFieldsFilterText"
class="rounded-t-lg"
/>
<SmartTabs ref="gqlTabs" styles="m-4">
@@ -351,8 +362,14 @@
:label="$t('queries')"
:selected="true"
>
<div v-for="field in filteredQueryFields" :key="field.name">
<GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
<div
v-for="field in filteredQueryFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
@@ -361,8 +378,14 @@
:id="'mutations'"
:label="$t('mutations')"
>
<div v-for="field in filteredMutationFields" :key="field.name">
<GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
<div
v-for="field in filteredMutationFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
@@ -371,24 +394,37 @@
:id="'subscriptions'"
:label="$t('subscriptions')"
>
<div v-for="field in filteredSubscriptionFields" :key="field.name">
<GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
<div
v-for="field in filteredSubscriptionFields"
:key="field.name"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab
v-if="graphqlTypes.length > 0"
:id="'types'"
:label="$t('types')"
ref="typesTab"
:label="$t('types')"
>
<div v-for="type in filteredGraphqlTypes" :key="type.name">
<div
v-for="type in filteredGraphqlTypes"
:key="type.name"
>
<GraphqlType
:gqlType="type"
:gqlTypes="graphqlTypes"
:isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
:highlightedFields="getGqlTypeHighlightedFields({ gqlType: type })"
:jumpTypeCallback="handleJumpToType"
:gql-type="type"
:gql-types="graphqlTypes"
:is-highlighted="
isGqlTypeHighlighted({ gqlType: type })
"
:highlighted-fields="
getGqlTypeHighlightedFields({ gqlType: type })
"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
@@ -411,9 +447,9 @@
<SmartTab :id="'history'" :label="$t('history')">
<History
@useHistory="handleUseHistory"
ref="graphqlHistoryComponent"
:page="'graphql'"
@useHistory="handleUseHistory"
/>
</SmartTab>
@@ -433,23 +469,12 @@
</div>
<CollectionsGraphqlSaveRequest
:show="showSaveRequestModal"
@hide-modal="hideRequestModal"
:editing-request="editRequest"
@hide-modal="hideRequestModal"
/>
</div>
</template>
<style scoped lang="scss">
.gqlTabs {
max-height: calc(100vh - 192px);
position: relative;
@apply overflow-auto;
}
.gqlRunQuery {
@apply mb-8;
}
</style>
<script>
import * as gql from "graphql"
import { commonHeaders } from "~/helpers/headers"
@@ -459,6 +484,12 @@ import { getSettingSubject } from "~/newstore/settings"
import { fb } from "~/helpers/fb"
export default {
beforeRouteLeave(_to, _from, next) {
this.isPollingSchema = false
if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
next()
},
data() {
return {
commonHeaders,
@@ -484,14 +515,10 @@ export default {
SCROLL_INTO_ENABLED: getSettingSubject("SCROLL_INTO_ENABLED"),
}
},
watch: {
selectedRequest(newValue) {
if (!newValue) return
this.url = newValue.url
this.gqlQueryString = newValue.query
this.headers = newValue.headers
this.variableString = newValue.variables
},
head() {
return {
title: `GraphQL • Hoppscotch`,
}
},
computed: {
selectedRequest() {
@@ -576,18 +603,26 @@ export default {
},
},
},
watch: {
selectedRequest(newValue) {
if (!newValue) return
this.url = newValue.url
this.gqlQueryString = newValue.query
this.headers = newValue.headers
this.variableString = newValue.variables
},
},
mounted() {
if (this.$store.state.gql.schemaIntrospection && this.$store.state.gql.schema) {
const gqlSchema = gql.buildClientSchema(JSON.parse(this.$store.state.gql.schemaIntrospection))
if (
this.$store.state.gql.schemaIntrospection &&
this.$store.state.gql.schema
) {
const gqlSchema = gql.buildClientSchema(
JSON.parse(this.$store.state.gql.schemaIntrospection)
)
this.getDocsFromSchema(gqlSchema)
}
},
beforeRouteLeave(_to, _from, next) {
this.isPollingSchema = false
if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
next()
},
methods: {
hideRequestModal() {
this.showSaveRequestModal = false
@@ -641,7 +676,9 @@ export default {
const isFilterTextFoundInDescription = graphqlFieldObject.description
? graphqlFieldObject.description.toLowerCase().includes(normalizedText)
: false
const isFilterTextFoundInName = graphqlFieldObject.name.toLowerCase().includes(normalizedText)
const isFilterTextFoundInName = graphqlFieldObject.name
.toLowerCase()
.includes(normalizedText)
return isFilterTextFoundInDescription || isFilterTextFoundInName
},
@@ -649,7 +686,10 @@ export default {
if (!filterText) return fields
return fields.filter((field) =>
this.isTextFoundInGraphqlFieldObject({ text: filterText, graphqlFieldObject: field })
this.isTextFoundInGraphqlFieldObject({
text: filterText,
graphqlFieldObject: field,
})
)
},
getFilteredGraphqlTypes({ filterText, types }) {
@@ -665,12 +705,13 @@ export default {
return true
}
const isFilterTextMatchingAtLeastOneField = Object.values(type._fields || {}).some(
(field) =>
this.isTextFoundInGraphqlFieldObject({
text: filterText,
graphqlFieldObject: field,
})
const isFilterTextMatchingAtLeastOneField = Object.values(
type._fields || {}
).some((field) =>
this.isTextFoundInGraphqlFieldObject({
text: filterText,
graphqlFieldObject: field,
})
)
return isFilterTextMatchingAtLeastOneField
@@ -709,7 +750,10 @@ export default {
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
1000
)
},
copyQuery() {
this.$refs.copyQueryButton.innerHTML = this.doneButton
@@ -722,7 +766,10 @@ export default {
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
1000
)
},
copyResponse() {
this.$refs.copyResponseButton.innerHTML = this.doneButton
@@ -735,7 +782,10 @@ export default {
this.$toast.success(this.$t("copied_to_clipboard"), {
icon: "done",
})
setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
1000
)
},
async runQuery() {
const startTime = Date.now()
@@ -748,14 +798,18 @@ export default {
if (this.SCROLL_INTO_ENABLED) this.scrollInto("response")
try {
let headers = {}
const headers = {}
this.headers
.filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
.filter((item) =>
Object.prototype.hasOwnProperty.call(item, "active")
? item.active === true
: true
)
.forEach(({ key, value }) => {
headers[key] = value
})
let variables = JSON.parse(this.variableString || "{}")
const variables = JSON.parse(this.variableString || "{}")
const gqlQueryString = this.gqlQueryString
@@ -778,7 +832,9 @@ export default {
const res = await sendNetworkRequest(reqOptions)
// HACK: Temporary trailing null character issue from the extension fix
const responseText = new TextDecoder("utf-8").decode(res.data).replace(/\0+$/, "")
const responseText = new TextDecoder("utf-8")
.decode(res.data)
.replace(/\0+$/, "")
this.response = JSON.stringify(JSON.parse(responseText), null, 2)
@@ -846,17 +902,23 @@ export default {
const typeMap = schema.getTypeMap()
const types = []
const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
const queryTypeName = schema.getQueryType()
? schema.getQueryType().name
: ""
const mutationTypeName = schema.getMutationType()
? schema.getMutationType().name
: ""
const subscriptionTypeName = schema.getSubscriptionType()
? schema.getSubscriptionType().name
: ""
for (const typeName in typeMap) {
let type = typeMap[typeName]
const type = typeMap[typeName]
if (
!type.name.startsWith("__") &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(type.name) &&
![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
type.name
) &&
(type instanceof gql.GraphQLObjectType ||
type instanceof gql.GraphQLInputObjectType ||
type instanceof gql.GraphQLEnumType ||
@@ -887,9 +949,13 @@ export default {
query: gql.getIntrospectionQuery(),
})
let headers = {}
const headers = {}
this.headers
.filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
.filter((item) =>
Object.prototype.hasOwnProperty.call(item, "active")
? item.active === true
: true
)
.forEach(({ key, value }) => {
headers[key] = value
})
@@ -907,7 +973,9 @@ export default {
const data = await sendNetworkRequest(reqOptions, this.$store)
// HACK : Temporary trailing null character issue from the extension fix
const response = new TextDecoder("utf-8").decode(data.data).replace(/\0+$/, "")
const response = new TextDecoder("utf-8")
.decode(data.data)
.replace(/\0+$/, "")
const introspectResponse = JSON.parse(response)
const schema = gql.buildClientSchema(introspectResponse.data)
@@ -926,13 +994,16 @@ export default {
this.$refs.queryEditor.setValidationSchema(schema)
this.$nuxt.$loading.finish()
if (this.isPollingSchema) this.timeoutSubscription = setTimeout(this.pollSchema, 7000)
if (this.isPollingSchema)
this.timeoutSubscription = setTimeout(this.pollSchema, 7000)
} catch (error) {
this.$nuxt.$loading.finish()
this.schema = `${error}. ${this.$t("check_console_details")}`
this.$toast.error(
`${this.$t("graphql_introspect_failed")} ${this.$t("check_graphql_valid")}`,
`${this.$t("graphql_introspect_failed")} ${this.$t(
"check_graphql_valid"
)}`,
{
icon: "error",
}
@@ -959,9 +1030,13 @@ export default {
query: gql.getIntrospectionQuery(),
})
let headers = {}
const headers = {}
this.headers
.filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
.filter((item) =>
Object.prototype.hasOwnProperty.call(item, "active")
? item.active === true
: true
)
.forEach(({ key, value }) => {
headers[key] = value
})
@@ -979,7 +1054,9 @@ export default {
const data = await sendNetworkRequest(reqOptions, this.$store)
// HACK : Temporary trailing null character issue from the extension fix
const response = new TextDecoder("utf-8").decode(data.data).replace(/\0+$/, "")
const response = new TextDecoder("utf-8")
.decode(data.data)
.replace(/\0+$/, "")
const introspectResponse = JSON.parse(response)
const schema = gql.buildClientSchema(introspectResponse.data)
@@ -1006,7 +1083,9 @@ export default {
this.schema = `${error}. ${this.$t("check_console_details")}`
this.$toast.error(
`${this.$t("graphql_introspect_failed")} ${this.$t("check_graphql_valid")}`,
`${this.$t("graphql_introspect_failed")} ${this.$t(
"check_graphql_valid"
)}`,
{
icon: "error",
}
@@ -1016,7 +1095,8 @@ export default {
},
ToggleExpandResponse() {
this.expandResponse = !this.expandResponse
this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
this.responseBodyMaxLines =
this.responseBodyMaxLines === Infinity ? 16 : Infinity
},
downloadResponse() {
const dataToWrite = this.response
@@ -1056,7 +1136,7 @@ export default {
this.$refs.downloadSchema.innerHTML = this.downloadButton
}, 1000)
},
addRequestHeader(index) {
addRequestHeader() {
this.$store.commit("addGQLHeader", {
key: "",
value: "",
@@ -1073,7 +1153,7 @@ export default {
action: {
text: this.$t("undo"),
duration: 4000,
onClick: (e, toastObject) => {
onClick: (_, toastObject) => {
this.headers = oldHeaders
toastObject.remove()
},
@@ -1085,11 +1165,20 @@ export default {
behavior: "smooth",
})
},
},
head() {
return {
title: `GraphQL • Hoppscotch`,
}
updateQuery(updatedQuery) {
this.gqlQueryString = updatedQuery
},
},
}
</script>
<style scoped lang="scss">
.gqlTabs {
max-height: calc(100vh - 192px);
position: relative;
@apply overflow-auto;
}
.gqlRunQuery {
@apply mb-8;
}
</style>