Allow importing and exporting environments to gist

components/collections/import-export-collections.vue

@@ -11,6 +11,12 @@
                   <i class="material-icons">more_vert</i>
                 </button>
                 <template slot="popover">
+                  <div>
+                    <button class="icon" @click="readCollectionGist" v-close-popover>
+                      <i class="material-icons">code</i>
+                      <span>{{ $t("import_from_gist") }}</span>
+                    </button>
+                  </div>
                   <div
                     v-tooltip="{
                       content:
@@ -19,10 +25,6 @@
                           : null,
                     }"
                   >
-                    <button class="icon" @click="readCollectionGist" v-close-popover>
-                      <i class="material-icons">code</i>
-                      <span>{{ $t("import_from_gist") }}</span>
-                    </button>
                     <button
                       :disabled="
                         this.$store.state.postwoman.providerInfo.providerId !== 'github.com'

components/environments/import-export-environment.vue

@@ -6,6 +6,39 @@
           <div class="row-wrapper">
             <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
+              <v-popover>
+                <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+                  <i class="material-icons">more_vert</i>
+                </button>
+                <template slot="popover">
+                  <div>
+                    <button class="icon" @click="readEnvironmentGist" v-close-popover>
+                      <i class="material-icons">code</i>
+                      <span>{{ $t("import_from_gist") }}</span>
+                    </button>
+                  </div>
+                  <div
+                    v-tooltip="{
+                      content:
+                        this.$store.state.postwoman.providerInfo.providerId !== 'github.com'
+                          ? $t('login_with_github_to') + $t('create_secret_gist')
+                          : null,
+                    }"
+                  >
+                    <button
+                      :disabled="
+                        this.$store.state.postwoman.providerInfo.providerId !== 'github.com'
+                      "
+                      class="icon"
+                      @click="createEnvironmentGist"
+                      v-close-popover
+                    >
+                      <i class="material-icons">code</i>
+                      <span>{{ $t("create_secret_gist") }}</span>
+                    </button>
+                  </div>
+                </template>
+              </v-popover>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>
               </button>
@@ -93,6 +126,57 @@ export default {
     },
   },
   methods: {
+    async createEnvironmentGist() {
+      await this.$axios
+        .$post(
+          "https://api.github.com/gists",
+          {
+            files: {
+              "hoppscotch-environments.json": {
+                content: this.environmentJson,
+              },
+            },
+          },
+          {
+            headers: {
+              Authorization: `token ${this.$store.state.postwoman.providerInfo.accessToken}`,
+              Accept: "application/vnd.github.v3+json",
+            },
+          }
+        )
+        .then((response) => {
+          this.$toast.success(this.$t("gist_created"), {
+            icon: "done",
+          })
+          window.open(response.html_url)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$t("something_went_wrong"), {
+            icon: "error",
+          })
+          console.log(error)
+        })
+    },
+    async readEnvironmentGist() {
+      let gist = prompt(this.$t("enter_gist_url"))
+      if (!gist) return
+      await this.$axios
+        .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        })
+        .then((response) => {
+          let environments = JSON.parse(Object.values(response.files)[0].content)
+          this.$store.commit("postwoman/replaceEnvironments", environments)
+          this.fileImported()
+          this.syncToFBEnvironments()
+        })
+        .catch((error) => {
+          this.failedImport()
+          console.log(error)
+        })
+    },
     hideModal() {
       this.$emit("hide-modal")
     },