From 2affb21d22336f4ca49fa7b7483ec083289ad551 Mon Sep 17 00:00:00 2001 From: jamesgeorge007 Date: Mon, 18 Dec 2023 23:00:14 +0530 Subject: [PATCH] chore: Gist export flow updates --- packages/hoppscotch-common/locales/en.json | 6 ++-- .../components/collections/ImportExport.vue | 33 ++++++++++++++++--- .../collections/graphql/ImportExport.vue | 31 +++++++++++------ .../components/environments/ImportExport.vue | 19 +++++++++-- .../import-export/export/gistExport.ts | 2 +- 5 files changed, 71 insertions(+), 20 deletions(-) diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json index 0886baafd..56e59fe86 100644 --- a/packages/hoppscotch-common/locales/en.json +++ b/packages/hoppscotch-common/locales/en.json @@ -313,10 +313,12 @@ "export": { "as_json": "Export as JSON", "create_secret_gist": "Create secret Gist", + "create_secret_gist_tooltip_text": "Export as secret Gist", "failed": "Something went wrong while exporting", - "gist_created": "Gist created", + "secret_gist_success": "Successfully exported as secret Gist", "require_github": "Login with GitHub to create secret gist", - "title": "Export" + "title": "Export", + "success": "Successfully exported" }, "filter": { "all": "All", diff --git a/packages/hoppscotch-common/src/components/collections/ImportExport.vue b/packages/hoppscotch-common/src/components/collections/ImportExport.vue index 6413d310a..511d03a09 100644 --- a/packages/hoppscotch-common/src/components/collections/ImportExport.vue +++ b/packages/hoppscotch-common/src/components/collections/ImportExport.vue @@ -83,6 +83,8 @@ const currentUser = useReadonlyStream( platform.auth.getCurrentUser() ) +const myCollections = useReadonlyStream(restCollections$, []) + const showImportFailedError = () => { toast.error(t("import.failed")) } @@ -469,11 +471,20 @@ const HoppGistCollectionsExporter: ImporterOrExporter = { disabled: !currentUser.value ? true : currentUser.value.provider !== "github.com", - title: t("export.create_secret_gist"), + title: + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + currentUser?.value.provider === "github.com" + ? "export.create_secret_gist_tooltip_text" + : "export.require_github", applicableTo: ["personal-workspace", "team-workspace"], isLoading: isHoppGistCollectionExporterInProgress, }, action: async () => { + if (!myCollections.value.length) { + return toast.error(t("error.no_collections_to_export")) + } + isHoppGistCollectionExporterInProgress.value = true const collectionJSON = await getCollectionJSON() @@ -486,13 +497,29 @@ const HoppGistCollectionsExporter: ImporterOrExporter = { } if (E.isRight(collectionJSON)) { - collectionsGistExporter(collectionJSON.right, accessToken) + const res = await collectionsGistExporter( + collectionJSON.right, + accessToken + ) + + console.log(JSON.stringify(res, null, 2)) + + if (E.isLeft(res)) { + toast.error(t("export.failed")) + return + } + + toast.success(t("export.secret_gist_success")) platform.analytics?.logEvent({ type: "HOPP_EXPORT_COLLECTION", exporter: "gist", platform: "rest", }) + + if (res.right) { + window.open(res.right, "_blank") + } } isHoppGistCollectionExporterInProgress.value = false @@ -560,8 +587,6 @@ const selectedTeamID = computed(() => { : undefined }) -const myCollections = useReadonlyStream(restCollections$, []) - const getCollectionJSON = async () => { if ( props.collectionsType.type === "team-collections" && diff --git a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue index 45e887c26..313f4a9d3 100644 --- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue +++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue @@ -15,6 +15,7 @@ import { HoppCollection } from "@hoppscotch/data" import { ImporterOrExporter } from "~/components/importExport/types" import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource" import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource" +import { ref } from "vue" import * as E from "fp-ts/Either" @@ -42,6 +43,10 @@ const currentUser = useReadonlyStream( platform.auth.getCurrentUser() ) +const gqlCollections = useReadonlyStream(graphqlCollections$, []) + +const isGqlCollectionGistExportInProgress = ref(false) + const GqlCollectionsHoppImporter: ImporterOrExporter = { metadata: { id: "import.from_json", @@ -119,8 +124,6 @@ const GqlCollectionsGistImporter: ImporterOrExporter = { }), } -const gqlCollections = useReadonlyStream(graphqlCollections$, []) - const GqlCollectionsHoppExporter: ImporterOrExporter = { metadata: { id: "export.as_json", @@ -159,25 +162,31 @@ const GqlCollectionsGistExporter: ImporterOrExporter = { metadata: { id: "export.as_gist", name: "export.create_secret_gist", - title: !currentUser - ? "export.require_github" - : // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - currentUser.provider !== "github.com" - ? `export.require_github` - : "export.create_secret_gist", + title: + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + currentUser?.value.provider === "github.com" + ? "export.create_secret_gist_tooltip_text" + : "export.require_github", icon: IconUser, disabled: !currentUser.value ? true : currentUser.value.provider !== "github.com", applicableTo: ["personal-workspace"], + isLoading: isGqlCollectionGistExportInProgress, }, action: async () => { + if (!gqlCollections.value.length) { + return toast.error(t("error.no_collections_to_export")) + } + if (!currentUser.value) { toast.error(t("profile.no_permission")) return } + isGqlCollectionGistExportInProgress.value = true + const accessToken = currentUser.value?.accessToken if (accessToken) { @@ -191,7 +200,7 @@ const GqlCollectionsGistExporter: ImporterOrExporter = { return } - toast.success(t("export.success")) + toast.success(t("export.secret_gist_success")) platform.analytics?.logEvent({ type: "HOPP_EXPORT_COLLECTION", @@ -201,6 +210,8 @@ const GqlCollectionsGistExporter: ImporterOrExporter = { platform.io.openExternalLink(res.right) } + + isGqlCollectionGistExportInProgress.value = false }, } diff --git a/packages/hoppscotch-common/src/components/environments/ImportExport.vue b/packages/hoppscotch-common/src/components/environments/ImportExport.vue index 88e1e3a38..daf14f7e6 100644 --- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue +++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue @@ -30,6 +30,7 @@ import { GQLError } from "~/helpers/backend/GQLClient" import { CreateTeamEnvironmentMutation } from "~/helpers/backend/graphql" import { postmanEnvImporter } from "~/helpers/import-export/import/postmanEnv" import { insomniaEnvImporter } from "~/helpers/import-export/import/insomniaEnv" +import { ref } from "vue" import IconFolderPlus from "~icons/lucide/folder-plus" import IconPostman from "~icons/hopp/postman" @@ -58,6 +59,8 @@ const currentUser = useReadonlyStream( platform.auth.getCurrentUser() ) +const isEnvironmentGistExportInProgress = ref(false) + const isTeamEnvironment = computed(() => { return props.environmentType === "TEAM_ENV" }) @@ -262,21 +265,28 @@ const HoppEnvironmentsGistExporter: ImporterOrExporter = { title: // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - currentUser?.provider === "github.com" - ? "export.create_secret_gist" + currentUser?.value.provider === "github.com" + ? "export.create_secret_gist_tooltip_text" : "export.require_github", icon: IconUser, disabled: !currentUser.value ? true : currentUser.value.provider !== "github.com", applicableTo: ["personal-workspace", "team-workspace"], + isLoading: isEnvironmentGistExportInProgress, }, action: async () => { + if (!environmentJson.value.length) { + return toast.error(t("error.no_environments_to_export")) + } + if (!currentUser.value) { toast.error(t("profile.no_permission")) return } + isEnvironmentGistExportInProgress.value = true + const accessToken = currentUser.value?.accessToken if (accessToken) { @@ -287,10 +297,11 @@ const HoppEnvironmentsGistExporter: ImporterOrExporter = { if (E.isLeft(res)) { toast.error(t("export.failed")) + isEnvironmentGistExportInProgress.value = false return } - toast.success(t("export.success")) + toast.success(t("export.secret_gist_success")) platform.analytics?.logEvent({ type: "HOPP_EXPORT_ENVIRONMENT", @@ -299,6 +310,8 @@ const HoppEnvironmentsGistExporter: ImporterOrExporter = { platform.io.openExternalLink(res.right) } + + isEnvironmentGistExportInProgress.value = false }, } diff --git a/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts b/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts index 56b24e6d8..d29902c1d 100644 --- a/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts +++ b/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts @@ -18,5 +18,5 @@ export const collectionsGistExporter = async ( if (E.isLeft(res)) { return E.left(res.left) } - return E.right(true) + return E.right(res.right.data.html_url as string) }