From 3d7a76bced3e935280dbbd26d693f1606136e262 Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Tue, 19 Dec 2023 17:37:35 +0530
Subject: [PATCH] chore(common): Gist export flow updates (#3665)

---
 packages/hoppscotch-common/locales/en.json    |  6 ++-
 .../components/collections/ImportExport.vue   | 36 ++++++++++++----
 .../collections/graphql/ImportExport.vue      | 43 ++++++++++++-------
 .../components/environments/ImportExport.vue  | 33 ++++++++++----
 .../export/environmentsGistExport.ts          | 18 --------
 .../src/helpers/import-export/export/gist.ts  | 19 ++++++++
 .../import-export/export/gistExport.ts        | 22 ----------
 .../export/gqlCollectionsGistExporter.ts      | 18 --------
 8 files changed, 102 insertions(+), 93 deletions(-)
 delete mode 100644 packages/hoppscotch-common/src/helpers/import-export/export/environmentsGistExport.ts
 create mode 100644 packages/hoppscotch-common/src/helpers/import-export/export/gist.ts
 delete mode 100644 packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts
 delete mode 100644 packages/hoppscotch-common/src/helpers/import-export/export/gqlCollectionsGistExporter.ts

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 8852e6741..629c4d1c2 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..64ae1d361 100644
--- a/packages/hoppscotch-common/src/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/ImportExport.vue
@@ -9,7 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { HoppCollection } from "@hoppscotch/data"
 import * as E from "fp-ts/Either"
+import { PropType, computed, ref } from "vue"
+
 import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource"
 import { UrlSource } from "~/helpers/import-export/import/import-sources/UrlSource"
 
@@ -24,11 +27,9 @@ import {
 } from "~/helpers/import-export/import/importers"
 
 import { defineStep } from "~/composables/step-components"
-import { PropType, computed, ref } from "vue"
 
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
-import { HoppCollection } from "@hoppscotch/data"
 import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
 import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
@@ -48,7 +49,7 @@ import { getTeamCollectionJSON } from "~/helpers/backend/helpers"
 import { platform } from "~/platform"
 
 import { initializeDownloadCollection } from "~/helpers/import-export/export"
-import { collectionsGistExporter } from "~/helpers/import-export/export/gistExport"
+import { gistExporter } from "~/helpers/import-export/export/gist"
 import { myCollectionsExporter } from "~/helpers/import-export/export/myCollections"
 import { teamCollectionsExporter } from "~/helpers/import-export/export/teamCollections"
 
@@ -83,6 +84,8 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
+const myCollections = useReadonlyStream(restCollections$, [])
+
 const showImportFailedError = () => {
   toast.error(t("import.failed"))
 }
@@ -468,8 +471,13 @@ const HoppGistCollectionsExporter: ImporterOrExporter = {
     icon: IconGithub,
     disabled: !currentUser.value
       ? true
-      : currentUser.value.provider !== "github.com",
-    title: t("export.create_secret_gist"),
+      : currentUser.value?.provider !== "github.com",
+    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,
   },
@@ -486,13 +494,27 @@ const HoppGistCollectionsExporter: ImporterOrExporter = {
     }
 
     if (E.isRight(collectionJSON)) {
-      collectionsGistExporter(collectionJSON.right, accessToken)
+      if (!JSON.parse(collectionJSON.right).length) {
+        isHoppGistCollectionExporterInProgress.value = false
+        return toast.error(t("error.no_collections_to_export"))
+      }
+
+      const res = await gistExporter(collectionJSON.right, accessToken)
+
+      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",
       })
+
+      platform.io.openExternalLink(res.right)
     }
 
     isHoppGistCollectionExporterInProgress.value = false
@@ -560,8 +582,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..a9dc667b8 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue
@@ -9,15 +9,16 @@
 </template>
 
 <script setup lang="ts">
+import { HoppCollection } from "@hoppscotch/data"
+import * as E from "fp-ts/Either"
+import { ref } from "vue"
+
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
-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 * as E from "fp-ts/Either"
-
 import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconUser from "~icons/lucide/user"
 import { initializeDownloadCollection } from "~/helpers/import-export/export"
@@ -30,7 +31,7 @@ import {
 } from "~/newstore/collections"
 import { hoppGqlCollectionsImporter } from "~/helpers/import-export/import/hoppGql"
 import { gqlCollectionsExporter } from "~/helpers/import-export/export/gqlCollections"
-import { gqlCollectionsGistExporter } from "~/helpers/import-export/export/gqlCollectionsGistExporter"
+import { gistExporter } from "~/helpers/import-export/export/gist"
 import { computed } from "vue"
 import { hoppGQLImporter } from "~/helpers/import-export/import/hopp"
 
@@ -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,29 +162,35 @@ 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",
+      : 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) {
-      const res = await gqlCollectionsGistExporter(
+      const res = await gistExporter(
         JSON.stringify(gqlCollections.value),
         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..d092aedbd 100644
--- a/packages/hoppscotch-common/src/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-common/src/components/environments/ImportExport.vue
@@ -9,15 +9,17 @@
 </template>
 
 <script setup lang="ts">
+import { Environment } from "@hoppscotch/data"
+import * as E from "fp-ts/Either"
+import { ref } from "vue"
+
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
-import { Environment } 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 { hoppEnvImporter } from "~/helpers/import-export/import/hoppEnv"
 
-import * as E from "fp-ts/Either"
 import {
   appendEnvironments,
   addGlobalEnvVariable,
@@ -39,7 +41,7 @@ import { initializeDownloadCollection } from "~/helpers/import-export/export"
 import { computed } from "vue"
 import { useReadonlyStream } from "~/composables/stream"
 import { environmentsExporter } from "~/helpers/import-export/export/environments"
-import { environmentsGistExporter } from "~/helpers/import-export/export/environmentsGistExport"
+import { gistExporter } from "~/helpers/import-export/export/gist"
 import { platform } from "~/platform"
 
 const t = useI18n()
@@ -58,6 +60,8 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
+const isEnvironmentGistExportInProgress = ref(false)
+
 const isTeamEnvironment = computed(() => {
   return props.environmentType === "TEAM_ENV"
 })
@@ -262,35 +266,44 @@ 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",
+      : 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) {
-      const res = await environmentsGistExporter(
+      const res = await gistExporter(
         JSON.stringify(environmentJson.value),
-        accessToken
+        accessToken,
+        "hoppscotch-environment.json"
       )
 
       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 +312,8 @@ const HoppEnvironmentsGistExporter: ImporterOrExporter = {
 
       platform.io.openExternalLink(res.right)
     }
+
+    isEnvironmentGistExportInProgress.value = false
   },
 }
 
diff --git a/packages/hoppscotch-common/src/helpers/import-export/export/environmentsGistExport.ts b/packages/hoppscotch-common/src/helpers/import-export/export/environmentsGistExport.ts
deleted file mode 100644
index 4f6a66fe2..000000000
--- a/packages/hoppscotch-common/src/helpers/import-export/export/environmentsGistExport.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as E from "fp-ts/Either"
-import { createGist } from "~/helpers/gist"
-
-export const environmentsGistExporter = async (
-  environmentsJSON: string,
-  accessToken: string
-) => {
-  const res = await createGist(
-    environmentsJSON,
-    "hoppscotch-collections.json",
-    accessToken
-  )()
-
-  if (E.isLeft(res)) {
-    return E.left(res.left)
-  }
-  return E.right(res.right.data.html_url as string)
-}
diff --git a/packages/hoppscotch-common/src/helpers/import-export/export/gist.ts b/packages/hoppscotch-common/src/helpers/import-export/export/gist.ts
new file mode 100644
index 000000000..9e82b6761
--- /dev/null
+++ b/packages/hoppscotch-common/src/helpers/import-export/export/gist.ts
@@ -0,0 +1,19 @@
+import * as E from "fp-ts/Either"
+import { createGist } from "~/helpers/gist"
+
+export const gistExporter = async (
+  JSONFileContents: string,
+  accessToken: string,
+  fileName = "hoppscotch-collections.json"
+) => {
+  if (!accessToken) {
+    return E.left("Invalid User")
+  }
+
+  const res = await createGist(JSONFileContents, fileName, accessToken)()
+
+  if (E.isLeft(res)) {
+    return E.left(res.left)
+  }
+  return E.right(res.right.data.html_url as string)
+}
diff --git a/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts b/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts
deleted file mode 100644
index 56b24e6d8..000000000
--- a/packages/hoppscotch-common/src/helpers/import-export/export/gistExport.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createGist } from "~/helpers/gist"
-import * as E from "fp-ts/Either"
-
-export const collectionsGistExporter = async (
-  collectionJSON: string,
-  accessToken: string
-) => {
-  if (!accessToken) {
-    return E.left("Invalid User")
-  }
-
-  const res = await createGist(
-    collectionJSON,
-    "hoppscotch-collections.json",
-    accessToken
-  )()
-
-  if (E.isLeft(res)) {
-    return E.left(res.left)
-  }
-  return E.right(true)
-}
diff --git a/packages/hoppscotch-common/src/helpers/import-export/export/gqlCollectionsGistExporter.ts b/packages/hoppscotch-common/src/helpers/import-export/export/gqlCollectionsGistExporter.ts
deleted file mode 100644
index 5541d0a36..000000000
--- a/packages/hoppscotch-common/src/helpers/import-export/export/gqlCollectionsGistExporter.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as E from "fp-ts/Either"
-import { createGist } from "~/helpers/gist"
-
-export const gqlCollectionsGistExporter = async (
-  gqlCollectionsJSON: string,
-  accessToken: string
-) => {
-  const res = await createGist(
-    gqlCollectionsJSON,
-    "hoppscotch-collections.json",
-    accessToken
-  )()
-
-  if (E.isLeft(res)) {
-    return E.left(res.left)
-  }
-  return E.right(res.right.data.html_url as string)
-}