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

fix: spotlight actions on graphql (#3299)

Browse Source 
* fix: spotlight actions for graphql

* fix: environment actions

* fix: gql rename request

* fix: graphql spotlight actions

* fix: tab shortcuts not working properly

* fix: only show download and copy response when there is a response

---------

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-08-28 21:10:01 +06:00
committed by GitHub
parent 0eacd6763b
commit b953b32ff4
12 changed files with 240 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/hoppscotch-common/src/services/spotlight/searchers/environment.searcher.ts
View File

@@ -45,8 +45,11 @@ import {
setSelectedEnvironmentIndex,
} from "~/newstore/environments"
import IconCheckCircle from "~/components/app/spotlight/entry/IconSelected.vue"
import IconCircle from "~icons/lucide/circle"
type Doc = {
text: string
text: string | string[]
alternates: string[]
icon: object | Component
excludeFromSearch?: boolean
@@ -88,40 +91,61 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
private documents: Record<string, Doc> = reactive({
new_environment: {
text: this.t("spotlight.environments.new"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.new"),
],
alternates: ["new", "environment"],
icon: markRaw(IconLayers),
},
new_environment_variable: {
text: this.t("spotlight.environments.new_variable"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.new_variable"),
],
alternates: ["new", "environment", "variable"],
icon: markRaw(IconLayers),
},
edit_selected_env: {
text: this.t("spotlight.environments.edit"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.edit"),
],
alternates: ["edit", "environment"],
icon: markRaw(IconEdit),
excludeFromSearch: computed(() => !this.hasSelectedEnv.value),
},
delete_selected_env: {
text: this.t("spotlight.environments.delete"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.delete"),
],
alternates: ["delete", "environment"],
icon: markRaw(IconTrash2),
excludeFromSearch: computed(() => !this.hasSelectedEnv.value),
},
duplicate_selected_env: {
text: this.t("spotlight.environments.duplicate"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.duplicate"),
],
alternates: ["duplicate", "environment"],
icon: markRaw(IconCopy),
excludeFromSearch: computed(() => !this.hasSelectedEnv.value),
},
edit_global_env: {
text: this.t("spotlight.environments.edit_global"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.edit_global"),
],
alternates: ["edit", "global", "environment"],
icon: markRaw(IconEdit),
},
duplicate_global_env: {
text: this.t("spotlight.environments.duplicate_global"),
text: [
this.t("spotlight.environments.title"),
this.t("spotlight.environments.duplicate_global"),
],
alternates: ["duplicate", "global", "environment"],
icon: markRaw(IconCopy),
},
@@ -245,6 +269,16 @@ export class SwitchEnvSpotlightSearcherService
this.spotlight.registerSearcher(this)
}
private selectedEnvIndex = useStreamStatic(
selectedEnvironmentIndex$,
{
type: "NO_ENV_SELECTED",
},
() => {
/* noop */
}
)[0]
private environmentSearchable = useStreamStatic(
activeActions$.pipe(
map((actions) => actions.includes("modals.environment.add"))
@@ -262,16 +296,25 @@ export class SwitchEnvSpotlightSearcherService
const results = ref<SpotlightSearcherResult[]>([])
const minisearch = new MiniSearch({
fields: ["name"],
fields: ["name", "alternates"],
storeFields: ["name"],
})
if (this.environmentSearchable.value) {
minisearch.addAll(
environmentsStore.value.environments.map((entry, index) => {
let id = `environment-${index}`
if (
this.selectedEnvIndex.value?.type === "MY_ENV" &&
this.selectedEnvIndex.value.index === index
) {
id += "-selected"
}
return {
id: `environment-${index}`,
id,
name: entry.name,
alternates: ["environment", "change", entry.name],
}
})
)
@@ -298,7 +341,9 @@ export class SwitchEnvSpotlightSearcherService
.map((x) => {
return {
id: x.id,
icon: markRaw(IconLayers),
icon: markRaw(
x.id.endsWith("-selected") ? IconCheckCircle : IconCircle
),
score: x.score,
text: {
type: "text",

91
packages/hoppscotch-common/src/services/spotlight/searchers/request.searcher.ts
View File

@@ -1,5 +1,5 @@
import { Component, computed, markRaw, reactive } from "vue"
import { invokeAction } from "~/helpers/actions"
import { invokeAction, isActionBound } from "~/helpers/actions"
import { getI18n } from "~/modules/i18n"
import { SpotlightSearcherResult, SpotlightService } from ".."
import {
@@ -19,6 +19,7 @@ import IconRename from "~icons/lucide/file-edit"
import IconPlay from "~icons/lucide/play"
import IconRotateCCW from "~icons/lucide/rotate-ccw"
import IconSave from "~icons/lucide/save"
import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
type Doc = {
text: string | string[]
@@ -46,39 +47,51 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
private route = useRoute()
private isRESTPage = computed(() => this.route.name === "index")
private isGQLPage = computed(() => this.route.name === "graphql")
private isRESTOrGQLPage = computed(
() => this.isRESTPage.value || this.isGQLPage.value
)
private isGQLConnectBound = isActionBound("gql.connect")
private isGQLDisconnectBound = isActionBound("gql.disconnect")
private documents: Record<string, Doc> = reactive({
send_request: {
text: this.t("shortcut.request.send_request"),
alternates: ["request", "send"],
icon: markRaw(IconPlay),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
gql_connect: {
text: [this.t("navigation.graphql"), this.t("spotlight.graphql.connect")],
alternates: ["connect", "server", "graphql"],
icon: markRaw(IconPlay),
excludeFromSearch: computed(() => !this.isGQLConnectBound.value),
},
gql_disconnect: {
text: [
this.t("navigation.graphql"),
this.t("spotlight.graphql.disconnect"),
],
alternates: ["disconnect", "stop", "graphql"],
icon: markRaw(IconPlay),
excludeFromSearch: computed(() => !this.isGQLDisconnectBound.value),
},
save_to_collections: {
text: this.t("spotlight.request.save_as_new"),
alternates: ["save", "collections"],
icon: markRaw(IconSave),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
save_request: {
text: this.t("shortcut.request.save_request"),
alternates: ["save", "request"],
icon: markRaw(IconSave),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
rename_request: {
text: this.t("shortcut.request.rename"),
alternates: ["rename", "request"],
icon: markRaw(IconRename),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
copy_request_link: {
text: this.t("shortcut.request.copy_request_link"),
@@ -90,7 +103,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
text: this.t("shortcut.request.reset_request"),
alternates: ["reset", "request"],
icon: markRaw(IconRotateCCW),
excludeFromSearch: computed(() => !this.isRESTPage.value),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
import_curl: {
text: this.t("shortcut.request.import_curl"),
@@ -143,9 +156,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
],
alternates: ["parameters", "tab"],
icon: markRaw(IconWindow),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
tab_body: {
text: [
@@ -154,9 +165,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
],
alternates: ["body", "tab"],
icon: markRaw(IconWindow),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
tab_headers: {
text: [
@@ -165,9 +174,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
],
alternates: ["headers", "tab"],
icon: markRaw(IconWindow),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
tab_authorization: {
text: [
@@ -176,9 +183,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
],
alternates: ["authorization", "tab"],
icon: markRaw(IconWindow),
excludeFromSearch: computed(
() => !this.isRESTPage.value ?? !this.isGQLPage.value
),
excludeFromSearch: computed(() => !this.isRESTOrGQLPage.value),
},
tab_pre_request_script: {
text: [
@@ -198,6 +203,24 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
icon: markRaw(IconWindow),
excludeFromSearch: computed(() => !this.isRESTPage.value),
},
tab_query: {
text: [
this.t("spotlight.request.switch_to"),
this.t("spotlight.request.tab_query"),
],
alternates: ["query", "tab"],
icon: markRaw(IconWindow),
excludeFromSearch: computed(() => !this.isGQLPage.value),
},
tab_variables: {
text: [
this.t("spotlight.request.switch_to"),
this.t("spotlight.request.tab_variables"),
],
alternates: ["variables", "tab"],
icon: markRaw(IconWindow),
excludeFromSearch: computed(() => !this.isGQLPage.value),
},
})
constructor() {
@@ -224,7 +247,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
}
}
private openRequestTab(tab: RequestOptionTabs): void {
private openRequestTab(tab: RequestOptionTabs | GQLOptionTabs): void {
invokeAction("request.open-tab", {
tab,
})
@@ -235,6 +258,12 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
case "send_request":
invokeAction("request.send-cancel")
break
case "gql_connect":
invokeAction("gql.connect")
break
case "gql_disconnect":
invokeAction("gql.disconnect")
break
case "save_to_collections":
invokeAction("request.save-as", {
requestType: "rest",
@@ -245,7 +274,7 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
invokeAction("request.save")
break
case "rename_request":
invokeAction("rest.request.rename")
invokeAction("request.rename")
break
case "copy_request_link":
invokeAction("request.copy-link")
@@ -292,6 +321,12 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
case "tab_tests":
this.openRequestTab("tests")
break
case "tab_query":
this.openRequestTab("query")
break
case "tab_variables":
this.openRequestTab("variables")
break
}
}
}

24
packages/hoppscotch-common/src/services/spotlight/searchers/response.searcher.ts
View File

@@ -1,5 +1,5 @@
import { Component, computed, markRaw, reactive } from "vue"
import { activeActions$, invokeAction } from "~/helpers/actions"
import { invokeAction, isActionBound } from "~/helpers/actions"
import { getI18n } from "~/modules/i18n"
import { SpotlightSearcherResult, SpotlightService } from ".."
import {
@@ -9,8 +9,6 @@ import {
import IconDownload from "~icons/lucide/download"
import IconCopy from "~icons/lucide/copy"
import { map } from "rxjs"
import { useStreamStatic } from "~/composables/stream"
type Doc = {
text: string
@@ -35,23 +33,11 @@ export class ResponseSpotlightSearcherService extends StaticSpotlightSearcherSer
private readonly spotlight = this.bind(SpotlightService)
private copyResponseActionEnabled = useStreamStatic(
activeActions$.pipe(map((actions) => actions.includes("response.copy"))),
activeActions$.value.includes("response.copy"),
() => {
/* noop */
}
)[0]
private copyResponseActionEnabled = isActionBound("response.copy")
private downloadResponseActionEnabled = useStreamStatic(
activeActions$.pipe(
map((actions) => actions.includes("response.file.download"))
),
activeActions$.value.includes("response.file.download"),
() => {
/* noop */
}
)[0]
private downloadResponseActionEnabled = isActionBound(
"response.file.download"
)
private documents: Record<string, Doc> = reactive({
copy_response: {

54
packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts
View File

@@ -7,22 +7,16 @@ import {
} from "./base/static.searcher"
import { useRoute } from "vue-router"
import { getDefaultRESTRequest } from "~/helpers/rest/default"
import {
closeOtherTabs,
closeTab,
createNewTab,
currentTabID,
getActiveTabs,
} from "~/helpers/rest/tab"
import IconCopy from "~icons/lucide/copy"
import IconCopyPlus from "~icons/lucide/copy-plus"
import IconXCircle from "~icons/lucide/x-circle"
import IconXSquare from "~icons/lucide/x-square"
import { invokeAction } from "~/helpers/actions"
import { getActiveTabs as getRESTActiveTabs } from "~/helpers/rest/tab"
import { getActiveTabs as getGQLActiveTabs } from "~/helpers/graphql/tab"
type Doc = {
text: string
text: string | string[]
alternates: string[]
icon: object | Component
excludeFromSearch?: boolean
@@ -46,34 +40,47 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
private route = useRoute()
private showAction = computed(
() => this.route.name === "index" ?? this.route.name === "graphql"
() => this.route.name === "index" || this.route.name === "graphql"
)
private gqlActiveTabs = getGQLActiveTabs()
private restActiveTabs = getRESTActiveTabs()
private isOnlyTab = computed(() =>
this.route.name === "graphql"
? this.gqlActiveTabs.value.length === 1
: this.restActiveTabs.value.length === 1
)
private documents: Record<string, Doc> = reactive({
duplicate_tab: {
text: this.t("spotlight.tab.duplicate"),
text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.duplicate")],
alternates: ["tab", "duplicate", "duplicate tab"],
icon: markRaw(IconCopy),
excludeFromSearch: computed(() => !this.showAction.value),
},
close_current_tab: {
text: this.t("spotlight.tab.close_current"),
text: [
this.t("spotlight.tab.title"),
this.t("spotlight.tab.close_current"),
],
alternates: ["tab", "close", "close tab"],
icon: markRaw(IconXCircle),
excludeFromSearch: computed(
() => !this.showAction.value || getActiveTabs().value.length === 1
() => !this.showAction.value || this.isOnlyTab.value
),
},
close_other_tabs: {
text: this.t("spotlight.tab.close_others"),
text: [
this.t("spotlight.tab.title"),
this.t("spotlight.tab.close_others"),
],
alternates: ["tab", "close", "close all"],
icon: markRaw(IconXSquare),
excludeFromSearch: computed(
() => !this.showAction.value || getActiveTabs().value.length < 2
() => !this.showAction.value || this.isOnlyTab.value
),
},
open_new_tab: {
text: this.t("spotlight.tab.new_tab"),
text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.new_tab")],
alternates: ["tab", "new", "open tab"],
icon: markRaw(IconCopyPlus),
excludeFromSearch: computed(() => !this.showAction.value),
@@ -105,16 +112,9 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
}
public onDocSelected(id: string): void {
if (id === "duplicate_tab")
invokeAction("request.duplicate-tab", {
tabID: currentTabID.value,
})
if (id === "close_current_tab") closeTab(currentTabID.value)
if (id === "close_other_tabs") closeOtherTabs(currentTabID.value)
if (id === "open_new_tab")
createNewTab({
request: getDefaultRESTRequest(),
isDirty: false,
})
if (id === "duplicate_tab") invokeAction("tab.duplicate-tab", {})
if (id === "close_current_tab") invokeAction("tab.close-current")
if (id === "close_other_tabs") invokeAction("tab.close-other")
if (id === "open_new_tab") invokeAction("tab.open-new")
}
}