From 68795a501796136e61c8bd6f7b384eaf5ab25e6c Mon Sep 17 00:00:00 2001 From: jamesgeorge007 Date: Tue, 13 Feb 2024 20:10:02 +0530 Subject: [PATCH] refactor: port collection tree rendered in the save request modal to the new implementation --- .../components/collections/SaveRequest.vue | 459 +++++++++--------- .../src/components/new-collections/index.vue | 13 +- .../new-collections/rest/Collection.vue | 13 +- .../new-collections/rest/Request.vue | 12 +- .../components/new-collections/rest/index.vue | 133 ++++- .../src/helpers/types/HoppPicked.ts | 51 +- 6 files changed, 413 insertions(+), 268 deletions(-) diff --git a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue index 89e9be3cd..c375cc18a 100644 --- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue +++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue @@ -20,19 +20,25 @@ - - --> + + @@ -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({ - type: "my-collections", - selectedTeam: undefined, -}) +// const collectionsType = ref({ +// type: "my-collections", +// selectedTeam: undefined, +// }) const picked = ref(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) => { - 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) => { + // 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) => { - 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) => { +// 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) => { - 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) => { +// 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") +// } +// } diff --git a/packages/hoppscotch-common/src/components/new-collections/index.vue b/packages/hoppscotch-common/src/components/new-collections/index.vue index 99aae8090..b82dcd0e4 100644 --- a/packages/hoppscotch-common/src/components/new-collections/index.vue +++ b/packages/hoppscotch-common/src/components/new-collections/index.vue @@ -18,7 +18,10 @@ @@ -27,10 +30,17 @@ import { useService } from "dioc/vue" import { ref } from "vue" import { useI18n } from "~/composables/i18n" +import { Picked } from "~/helpers/types/HoppPicked"; import { NewWorkspaceService } from "~/services/new-workspace" defineProps<{ + picked: Picked | null platform: "rest" | "gql" + saveRequest: boolean +}>() + +const emit = defineEmits<{ + (event: "select", payload: Picked | null): void }>() const t = useI18n() @@ -40,7 +50,4 @@ const searchText = ref("") const workspaceService = useService(NewWorkspaceService) const activeWorkspaceHandle = workspaceService.activeWorkspaceHandle - -const showModalAdd = ref(false) -const showModalImportExport = ref(false) diff --git a/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue b/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue index 5980d829e..c2e7ec3a3 100644 --- a/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue +++ b/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue @@ -12,12 +12,16 @@ - + - + {{ collectionView.name }} @@ -151,6 +155,7 @@ import { RESTCollectionViewCollection } from "~/services/new-workspace/view" import { TippyComponent } from "vue-tippy" import { ref, computed } from "vue" import { useI18n } from "~/composables/i18n" +import IconCheckCircle from "~icons/lucide/check-circle" import IconFolderPlus from "~icons/lucide/folder-plus" import IconFilePlus from "~icons/lucide/file-plus" import IconMoreVertical from "~icons/lucide/more-vertical" @@ -166,6 +171,7 @@ const t = useI18n() const props = defineProps<{ collectionView: RESTCollectionViewCollection isOpen: boolean + isSelected?: boolean | null }>() const emit = defineEmits<{ @@ -195,6 +201,9 @@ const exportAction = ref(null) const options = ref(null) const collectionIcon = computed(() => { + if (props.isSelected) { + return IconCheckCircle + } return !props.isOpen ? IconFolder : IconFolderOpen }) diff --git a/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue b/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue index a240d76e0..9e5ec84b0 100644 --- a/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue +++ b/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue @@ -13,14 +13,20 @@ :class="requestLabelColor" :style="{ color: requestLabelColor }" > - + + {{ requestView.request.method }} - + {{ requestView.request.name }} diff --git a/packages/hoppscotch-common/src/helpers/types/HoppPicked.ts b/packages/hoppscotch-common/src/helpers/types/HoppPicked.ts index a41bb7a0a..e6650a2a9 100644 --- a/packages/hoppscotch-common/src/helpers/types/HoppPicked.ts +++ b/packages/hoppscotch-common/src/helpers/types/HoppPicked.ts @@ -20,28 +20,29 @@ export type Picked = pickedType: "my-collection" collectionIndex: number } - | { - pickedType: "teams-request" - requestID: string - } - | { - pickedType: "teams-folder" - folderID: string - } - | { - pickedType: "teams-collection" - collectionID: string - } - | { - pickedType: "gql-my-request" - folderPath: string - requestIndex: number - } - | { - pickedType: "gql-my-folder" - folderPath: string - } - | { - pickedType: "gql-my-collection" - collectionIndex: number - } + // TODO: Enable this when rest of the implementation is in place + // | { + // pickedType: "teams-request" + // requestID: string + // } + // | { + // pickedType: "teams-folder" + // folderID: string + // } + // | { + // pickedType: "teams-collection" + // collectionID: string + // } + // | { + // pickedType: "gql-my-request" + // folderPath: string + // requestIndex: number + // } + // | { + // pickedType: "gql-my-folder" + // folderPath: string + // } + // | { + // pickedType: "gql-my-collection" + // collectionIndex: number + // }