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

refactor: port collection tree rendered in the save request modal to the new implementation

Browse Source
This commit is contained in:
jamesgeorge007
2024-02-13 20:10:02 +05:30
parent b0c72fd295
commit 68795a5017
6 changed files with 413 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
packages/hoppscotch-common/src/components/collections/SaveRequest.vue
View File

@@ -20,19 +20,25 @@
<label class="p-4">
{{ t("collection.select_location") }}
</label>
<CollectionsGraphql
<!-- <CollectionsGraphql
v-if="mode === 'graphql'"
:picked="picked"
:save-request="true"
@select="onSelect"
/>
<Collections
/> -->
<!-- <Collections
v-else
:picked="picked"
:save-request="true"
@select="onSelect"
@update-team="updateTeam"
@update-collection-type="updateCollectionType"
/> -->
<NewCollections
:picked="picked"
:save-request="true"
platform="rest"
@select="onSelect"
/>
</div>
</template>
@@ -66,26 +72,14 @@ import {
import { computedWithControl } from "@vueuse/core"
import { useService } from "dioc/vue"
import * as E from "fp-ts/Either"
import * as TE from "fp-ts/TaskEither"
import { pipe } from "fp-ts/function"
import { cloneDeep } from "lodash-es"
import { computed, nextTick, reactive, ref, watch } from "vue"
import { GQLError } from "~/helpers/backend/GQLClient"
import {
createRequestInCollection,
updateTeamRequest,
} from "~/helpers/backend/mutations/TeamRequest"
import { Picked } from "~/helpers/types/HoppPicked"
import {
cascadeParentCollectionForHeaderAuth,
editGraphqlRequest,
saveGraphqlRequestAs,
} from "~/newstore/collections"
import { platform } from "~/platform"
import { cascadeParentCollectionForHeaderAuth } from "~/newstore/collections"
import { NewWorkspaceService } from "~/services/new-workspace"
import { GQLTabService } from "~/services/tab/graphql"
import { RESTTabService } from "~/services/tab/rest"
import { TeamWorkspace } from "~/services/workspace.service"
const t = useI18n()
const toast = useToast()
@@ -94,12 +88,14 @@ const RESTTabs = useService(RESTTabService)
const GQLTabs = useService(GQLTabService)
const workspaceService = useService(NewWorkspaceService)
type CollectionType =
| {
type: "team-collections"
selectedTeam: TeamWorkspace
}
| { type: "my-collections"; selectedTeam: undefined }
// type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
// type CollectionType =
// | {
// type: "team-collections"
// selectedTeam: SelectedTeam
// }
// | { type: "my-collections"; selectedTeam: undefined }
const props = withDefaults(
defineProps<{
@@ -167,10 +163,10 @@ const requestData = reactive({
requestIndex: undefined as number | undefined,
})
const collectionsType = ref<CollectionType>({
type: "my-collections",
selectedTeam: undefined,
})
// const collectionsType = ref<CollectionType>({
// type: "my-collections",
// selectedTeam: undefined,
// })
const picked = ref<Picked | null>(null)
@@ -191,13 +187,14 @@ watch(
}
)
const updateTeam = (newTeam: TeamWorkspace) => {
collectionsType.value.selectedTeam = newTeam
}
// TODO: To be removed
// const updateTeam = (newTeam: SelectedTeam) => {
// collectionsType.value.selectedTeam = newTeam
// }
const updateCollectionType = (type: CollectionType["type"]) => {
collectionsType.value.type = type
}
// const updateCollectionType = (type: CollectionType["type"]) => {
// collectionsType.value.type = type
// }
const onSelect = (pickedVal: Picked | null) => {
picked.value = pickedVal
@@ -322,145 +319,147 @@ const saveRequestAs = async () => {
headers,
}
requestSaved()
} else if (picked.value.pickedType === "teams-collection") {
if (!isHoppRESTRequest(updatedRequest))
throw new Error("requestUpdated is not a REST Request")
updateTeamCollectionOrFolder(picked.value.collectionID, updatedRequest)
platform.analytics?.logEvent({
type: "HOPP_SAVE_REQUEST",
createdNow: true,
platform: "rest",
workspaceType: "team",
})
} else if (picked.value.pickedType === "teams-folder") {
if (!isHoppRESTRequest(updatedRequest))
throw new Error("requestUpdated is not a REST Request")
updateTeamCollectionOrFolder(picked.value.folderID, updatedRequest)
platform.analytics?.logEvent({
type: "HOPP_SAVE_REQUEST",
createdNow: true,
platform: "rest",
workspaceType: "team",
})
} else if (picked.value.pickedType === "teams-request") {
if (!isHoppRESTRequest(updatedRequest))
throw new Error("requestUpdated is not a REST Request")
if (
collectionsType.value.type !== "team-collections" ||
!collectionsType.value.selectedTeam
)
throw new Error("Collections Type mismatch")
modalLoadingState.value = true
const data = {
request: JSON.stringify(updatedRequest),
title: updatedRequest.name,
}
platform.analytics?.logEvent({
type: "HOPP_SAVE_REQUEST",
createdNow: false,
platform: "rest",
workspaceType: "team",
})
pipe(
updateTeamRequest(picked.value.requestID, data),
TE.match(
(err: GQLError<string>) => {
toast.error(`${getErrorMessage(err)}`)
modalLoadingState.value = false
},
() => {
modalLoadingState.value = false
requestSaved()
}
)
)()
} else if (picked.value.pickedType === "gql-my-request") {
// TODO: Check for GQL request ?
editGraphqlRequest(
picked.value.folderPath,
picked.value.requestIndex,
updatedRequest as HoppGQLRequest
)
platform.analytics?.logEvent({
type: "HOPP_SAVE_REQUEST",
createdNow: false,
platform: "gql",
workspaceType: "team",
})
const { auth, headers } = cascadeParentCollectionForHeaderAuth(
picked.value.folderPath,
"graphql"
)
GQLTabs.currentActiveTab.value.document.inheritedProperties = {
auth,
headers,
}
requestSaved()
} else if (picked.value.pickedType === "gql-my-folder") {
// TODO: Check for GQL request ?
saveGraphqlRequestAs(
picked.value.folderPath,
updatedRequest as HoppGQLRequest
)
platform.analytics?.logEvent({
type: "HOPP_SAVE_REQUEST",
createdNow: true,
platform: "gql",
workspaceType: "team",
})
const { auth, headers } = cascadeParentCollectionForHeaderAuth(
picked.value.folderPath,
"graphql"
)
GQLTabs.currentActiveTab.value.document.inheritedProperties = {
auth,
headers,
}
requestSaved()
} else if (picked.value.pickedType === "gql-my-collection") {
// TODO: Check for GQL request ?
saveGraphqlRequestAs(
`${picked.value.collectionIndex}`,
updatedRequest as HoppGQLRequest
)
platform.analytics?.logEvent({
type: "HOPP_SAVE_REQUEST",
createdNow: true,
platform: "gql",
workspaceType: "team",
})
const { auth, headers } = cascadeParentCollectionForHeaderAuth(
`${picked.value.collectionIndex}`,
"graphql"
)
GQLTabs.currentActiveTab.value.document.inheritedProperties = {
auth,
headers,
}
requestSaved()
}
// TODO: To be removed
// else if (picked.value.pickedType === "teams-collection") {
// if (!isHoppRESTRequest(updatedRequest))
// throw new Error("requestUpdated is not a REST Request")
// updateTeamCollectionOrFolder(picked.value.collectionID, updatedRequest)
// platform.analytics?.logEvent({
// type: "HOPP_SAVE_REQUEST",
// createdNow: true,
// platform: "rest",
// workspaceType: "team",
// })
// } else if (picked.value.pickedType === "teams-folder") {
// if (!isHoppRESTRequest(updatedRequest))
// throw new Error("requestUpdated is not a REST Request")
// updateTeamCollectionOrFolder(picked.value.folderID, updatedRequest)
// platform.analytics?.logEvent({
// type: "HOPP_SAVE_REQUEST",
// createdNow: true,
// platform: "rest",
// workspaceType: "team",
// })
// } else if (picked.value.pickedType === "teams-request") {
// if (!isHoppRESTRequest(updatedRequest))
// throw new Error("requestUpdated is not a REST Request")
// if (
// collectionsType.value.type !== "team-collections" ||
// !collectionsType.value.selectedTeam
// )
// throw new Error("Collections Type mismatch")
// modalLoadingState.value = true
// const data = {
// request: JSON.stringify(updatedRequest),
// title: updatedRequest.name,
// }
// platform.analytics?.logEvent({
// type: "HOPP_SAVE_REQUEST",
// createdNow: false,
// platform: "rest",
// workspaceType: "team",
// })
// pipe(
// updateTeamRequest(picked.value.requestID, data),
// TE.match(
// (err: GQLError<string>) => {
// toast.error(`${getErrorMessage(err)}`)
// modalLoadingState.value = false
// },
// () => {
// modalLoadingState.value = false
// requestSaved()
// }
// )
// )()
// } else if (picked.value.pickedType === "gql-my-request") {
// // TODO: Check for GQL request ?
// editGraphqlRequest(
// picked.value.folderPath,
// picked.value.requestIndex,
// updatedRequest as HoppGQLRequest
// )
// platform.analytics?.logEvent({
// type: "HOPP_SAVE_REQUEST",
// createdNow: false,
// platform: "gql",
// workspaceType: "team",
// })
// const { auth, headers } = cascadeParentCollectionForHeaderAuth(
// picked.value.folderPath,
// "graphql"
// )
// GQLTabs.currentActiveTab.value.document.inheritedProperties = {
// auth,
// headers,
// }
// requestSaved()
// } else if (picked.value.pickedType === "gql-my-folder") {
// // TODO: Check for GQL request ?
// saveGraphqlRequestAs(
// picked.value.folderPath,
// updatedRequest as HoppGQLRequest
// )
// platform.analytics?.logEvent({
// type: "HOPP_SAVE_REQUEST",
// createdNow: true,
// platform: "gql",
// workspaceType: "team",
// })
// const { auth, headers } = cascadeParentCollectionForHeaderAuth(
// picked.value.folderPath,
// "graphql"
// )
// GQLTabs.currentActiveTab.value.document.inheritedProperties = {
// auth,
// headers,
// }
// requestSaved()
// } else if (picked.value.pickedType === "gql-my-collection") {
// // TODO: Check for GQL request ?
// saveGraphqlRequestAs(
// `${picked.value.collectionIndex}`,
// updatedRequest as HoppGQLRequest
// )
// platform.analytics?.logEvent({
// type: "HOPP_SAVE_REQUEST",
// createdNow: true,
// platform: "gql",
// workspaceType: "team",
// })
// const { auth, headers } = cascadeParentCollectionForHeaderAuth(
// `${picked.value.collectionIndex}`,
// "graphql"
// )
// GQLTabs.currentActiveTab.value.document.inheritedProperties = {
// auth,
// headers,
// }
// requestSaved()
// }
}
/**
@@ -468,50 +467,50 @@ const saveRequestAs = async () => {
* @param collectionID - ID of the collection or folder
* @param requestUpdated - Updated request
*/
const updateTeamCollectionOrFolder = (
collectionID: string,
requestUpdated: HoppRESTRequest
) => {
if (
collectionsType.value.type !== "team-collections" ||
!collectionsType.value.selectedTeam
)
throw new Error("Collections Type mismatch")
// const updateTeamCollectionOrFolder = (
// collectionID: string,
// requestUpdated: HoppRESTRequest
// ) => {
// if (
// collectionsType.value.type !== "team-collections" ||
// !collectionsType.value.selectedTeam
// )
// throw new Error("Collections Type mismatch")
modalLoadingState.value = true
// modalLoadingState.value = true
const data = {
title: requestUpdated.name,
request: JSON.stringify(requestUpdated),
teamID: collectionsType.value.selectedTeam.teamID,
}
pipe(
createRequestInCollection(collectionID, data),
TE.match(
(err: GQLError<string>) => {
toast.error(`${getErrorMessage(err)}`)
modalLoadingState.value = false
},
(result) => {
const { createRequestInCollection } = result
// const data = {
// title: requestUpdated.name,
// request: JSON.stringify(requestUpdated),
// teamID: collectionsType.value.selectedTeam.id,
// }
// pipe(
// createRequestInCollection(collectionID, data),
// TE.match(
// (err: GQLError<string>) => {
// toast.error(`${getErrorMessage(err)}`)
// modalLoadingState.value = false
// },
// (result) => {
// const { createRequestInCollection } = result
RESTTabs.currentActiveTab.value.document = {
request: requestUpdated,
isDirty: false,
saveContext: {
originLocation: "team-collection",
requestID: createRequestInCollection.id,
collectionID: createRequestInCollection.collection.id,
teamID: createRequestInCollection.collection.team.id,
},
}
// RESTTabs.currentActiveTab.value.document = {
// request: requestUpdated,
// isDirty: false,
// saveContext: {
// originLocation: "team-collection",
// requestID: createRequestInCollection.id,
// collectionID: createRequestInCollection.collection.id,
// teamID: createRequestInCollection.collection.team.id,
// },
// }
modalLoadingState.value = false
requestSaved()
}
)
)()
}
// modalLoadingState.value = false
// requestSaved()
// }
// )
// )()
// }
const requestSaved = () => {
toast.success(`${t("request.added")}`)
@@ -526,24 +525,24 @@ const hideModal = () => {
emit("hide-modal")
}
const getErrorMessage = (err: GQLError<string>) => {
console.error(err)
if (err.type === "network_error") {
return t("error.network_error")
}
switch (err.error) {
case "team_coll/short_title":
return t("collection.name_length_insufficient")
case "team/invalid_coll_id":
return t("team.invalid_id")
case "team/not_required_role":
return t("profile.no_permission")
case "team_req/not_required_role":
return t("profile.no_permission")
case "Forbidden resource":
return t("profile.no_permission")
default:
return t("error.something_went_wrong")
}
}
// const getErrorMessage = (err: GQLError<string>) => {
// console.error(err)
// if (err.type === "network_error") {
// return t("error.network_error")
// }
// switch (err.error) {
// case "team_coll/short_title":
// return t("collection.name_length_insufficient")
// case "team/invalid_coll_id":
// return t("team.invalid_id")
// case "team/not_required_role":
// return t("profile.no_permission")
// case "team_req/not_required_role":
// return t("profile.no_permission")
// case "Forbidden resource":
// return t("profile.no_permission")
// default:
// return t("error.something_went_wrong")
// }
// }
</script>