feat: add support to export http postman graphql request (#4967)

packages/hoppscotch-common/src/components/collections/ImportExport.vue

@@ -4,6 +4,7 @@
     modal-title="modal.collections"
     :importer-modules="importerModules"
     :exporter-modules="exporterModules"
+    :has-team-write-access="hasTeamWriteAccess"
     @hide-modal="emit('hide-modal')"
   />
 </template>
@@ -696,7 +697,8 @@ const importerModules = computed(() => {
     }
 
     return isTeams
-      ? importer.metadata.applicableTo.includes("team-workspace")
+      ? importer.metadata.applicableTo.includes("team-workspace") &&
+          hasTeamWriteAccess.value
       : importer.metadata.applicableTo.includes("personal-workspace")
   })
 })

packages/hoppscotch-common/src/components/importExport/Base.vue

@@ -50,6 +50,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  hasTeamWriteAccess: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const {
@@ -87,6 +91,7 @@ const chooseImporterOrExporter = defineStep(
       disabled: exporter.metadata.disabled,
       loading: exporter.metadata.isLoading?.value ?? false,
     })),
+    hasTeamWriteAccess: props.hasTeamWriteAccess,
     "onImporter-selected": (id: string) => {
       selectedImporterID.value = id
 

packages/hoppscotch-common/src/components/importExport/ImportExportList.vue

@@ -9,7 +9,7 @@
         @click="emit('importer-selected', importer.id)"
       />
     </div>
-    <hr />
+    <hr v-if="hasTeamWriteAccess" />
     <div class="flex flex-col space-y-2">
       <template v-for="exporter in exporters" :key="exporter.id">
         <!-- adding the title to a span if the item is visible, otherwise the title won't be shown -->
@@ -64,6 +64,7 @@ type ImportExportEntryMeta = {
 defineProps<{
   importers: ImportExportEntryMeta[]
   exporters: ImportExportEntryMeta[]
+  hasTeamWriteAccess: boolean
 }>()
 
 const emit = defineEmits<{

packages/hoppscotch-common/src/helpers/import-export/import/postman.ts

@@ -371,10 +371,28 @@ const getHoppReqBody = ({
           }
       )
     )
+  } else if (body.mode === "graphql") {
+    const formattedQuery = {
+      // @ts-expect-error - this is a valid option, but seems like the types are not updated
+      query: body.graphql?.query,
+      variables: pipe(
+        // @ts-expect-error - this is a valid option, but seems like the types are not updated
+        body.graphql?.variables,
+        safeParseJSON,
+        O.getOrElse(() => undefined)
+      ),
+    }
+
+    return {
+      contentType: "application/json",
+      body: pipe(
+        JSON.stringify(formattedQuery, null, 2),
+        replacePMVarTemplating
+      ),
+    }
   }
 
   // TODO: File
-  // TODO: GraphQL ?
 
   return { contentType: null, body: null }
 }