feat: init new import and export ui

packages/hoppscotch-app/assets/icons/insomnia.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M12 0C5.417 0 0 5.417 0 12s5.417 12 12 12 12-5.417 12-12S18.583 0 12 0zm0 2.478c5.256 0 9.522 4.266 9.522 9.522S17.256 21.522 12 21.522 2.478 17.256 2.478 12c0-.885.12-1.741.347-2.554a4.76 4.76 0 0 0 3.925 2.066 4.764 4.764 0 0 0 4.762-4.762 4.758 4.758 0 0 0-2.067-3.925A9.526 9.526 0 0 1 12 2.478Z"/></svg>

packages/hoppscotch-app/assets/icons/postman.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M13.527.099C6.955-.744.942 3.9.099 10.473c-.843 6.572 3.8 12.584 10.373 13.428 6.573.843 12.587-3.801 13.428-10.374C24.744 6.955 20.101.943 13.527.099zm2.471 7.485a.855.855 0 0 0-.593.25l-4.453 4.453-.307-.307-.643-.643c4.389-4.376 5.18-4.418 5.996-3.753zm-4.863 4.861 4.44-4.44a.62.62 0 1 1 .847.903l-4.699 4.125-.588-.588zm.33.694-1.1.238a.06.06 0 0 1-.067-.032.06.06 0 0 1 .01-.073l.645-.645.512.512zm-2.803-.459 1.172-1.172.879.878-1.979.426a.074.074 0 0 1-.085-.039.072.072 0 0 1 .013-.093zm-3.646 6.058a.076.076 0 0 1-.069-.083.077.077 0 0 1 .022-.046h.002l.946-.946 1.222 1.222-2.123-.147zm2.425-1.256a.228.228 0 0 0-.117.256l.203.865a.125.125 0 0 1-.211.117h-.003l-.934-.934-.294-.295 3.762-3.758 1.82-.393.874.874c-1.255 1.102-2.971 2.201-5.1 3.268zm5.279-3.428h-.002l-.839-.839 4.699-4.125a.952.952 0 0 0 .119-.127c-.148 1.345-2.029 3.245-3.977 5.091zm3.657-6.46-.003-.002a1.822 1.822 0 0 1 2.459-2.684l-1.61 1.613a.119.119 0 0 0 0 .169l1.247 1.247a1.817 1.817 0 0 1-2.093-.343zm2.578 0a1.714 1.714 0 0 1-.271.218h-.001l-1.207-1.207 1.533-1.533c.661.72.637 1.832-.054 2.522zm-.1-1.544a.143.143 0 0 0-.053.157.416.416 0 0 1-.053.45.14.14 0 0 0 .023.197.141.141 0 0 0 .084.03.14.14 0 0 0 .106-.05.691.691 0 0 0 .087-.751.138.138 0 0 0-.194-.033z"/></svg>

packages/hoppscotch-app/components/collections/ImportExport.vue

@@ -18,103 +18,53 @@
           }
         "
       />
-      <span>
-        <tippy
-          v-if="
-            mode == 'import_export' && collectionsType.type == 'my-collections'
-          "
-          ref="options"
-          interactive
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.more')"
-              svg="more-vertical"
-            />
-          </template>
-          <SmartItem
-            icon="assignment_returned"
-            :label="t('import.from_gist')"
-            @click.native="
-              () => {
-                readCollectionGist()
-                options.tippy().hide()
-              }
-            "
-          />
-          <span
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              !currentUser
-                ? `${t('export.require_github')}`
-                : currentUser.provider !== 'github.com'
-                ? `${t('export.require_github')}`
-                : undefined
-            "
-          >
-            <SmartItem
-              :disabled="
-                !currentUser
-                  ? true
-                  : currentUser.provider !== 'github.com'
-                  ? true
-                  : false
-              "
-              icon="assignment_turned_in"
-              :label="t('export.create_secret_gist')"
-              @click.native="
-                () => {
-                  createCollectionGist()
-                  options.tippy().hide()
-                }
-              "
-            />
-          </span>
-        </tippy>
-      </span>
     </template>
     <template #body>
       <div v-if="mode == 'import_export'" class="flex flex-col space-y-2 px-2">
-        <SmartItem
+        <SmartExpand>
-          v-tippy="{ theme: 'tooltip' }"
+          <template #body>
-          :title="t('action.preserve_current')"
+            <SmartItem
-          svg="folder-plus"
+              svg="folder-plus"
-          :label="t('import.json')"
+              :label="t('import.json')"
-          @click.native="openDialogChooseFileToImportFrom"
+              @click.native="openDialogChooseFileToImportFrom"
-        />
+            />
-        <input
+            <input
-          ref="inputChooseFileToImportFrom"
+              ref="inputChooseFileToImportFrom"
-          class="input"
+              class="input"
-          type="file"
+              type="file"
-          accept="application/json"
+              accept="application/json"
-          @change="importFromJSON"
+              @change="importFromJSON"
-        />
+            />
-        <SmartItem
+            <SmartItem
-          v-if="collectionsType.type == 'team-collections'"
+              v-if="collectionsType.type == 'team-collections'"
-          v-tippy="{ theme: 'tooltip' }"
+              v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.preserve_current')"
+              :title="t('action.preserve_current')"
-          svg="user"
+              svg="user"
-          :label="t('import.from_my_collections')"
+              :label="t('import.from_my_collections')"
-          @click.native="mode = 'import_from_my_collections'"
+              @click.native="mode = 'import_from_my_collections'"
-        />
+            />
-        <SmartItem
+            <SmartItem svg="link-2" :label="t('import.from_url')" />
-          v-tippy="{ theme: 'tooltip' }"
+            <SmartItem
-          :title="t('action.replace_current')"
+              svg="github"
-          svg="file"
+              :label="t('import.from_gist')"
-          :label="t('action.replace_json')"
+              @click.native="
-          @click.native="openDialogChooseFileToReplaceWith"
+                () => {
-        />
+                  readCollectionGist()
-        <input
+                }
-          ref="inputChooseFileToReplaceWith"
+              "
-          class="input"
+            />
-          type="file"
+            <SmartItem svg="file" :label="t('import.from_openapi')" />
-          accept="application/json"
+            <SmartItem svg="insomnia" :label="t('import.from_insomnia')" />
-          @change="replaceWithJSON"
+            <SmartItem svg="postman" :label="t('import.from_postman')" />
-        />
+            <input
+              ref="inputChooseFileToReplaceWith"
+              class="input"
+              type="file"
+              accept="application/json"
+              @change="replaceWithJSON"
+            />
+          </template>
+        </SmartExpand>
         <hr />
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
@@ -123,6 +73,34 @@
           :label="t('export.as_json')"
           @click.native="exportJSON"
         />
+        <span
+          v-tippy="{ theme: 'tooltip' }"
+          :title="
+            !currentUser
+              ? `${t('export.require_github')}`
+              : currentUser.provider !== 'github.com'
+              ? `${t('export.require_github')}`
+              : undefined
+          "
+          class="flex"
+        >
+          <SmartItem
+            :disabled="
+              !currentUser
+                ? true
+                : currentUser.provider !== 'github.com'
+                ? true
+                : false
+            "
+            svg="github"
+            :label="t('export.create_secret_gist')"
+            @click.native="
+              () => {
+                createCollectionGist()
+              }
+            "
+          />
+        </span>
       </div>
       <div
         v-if="mode == 'import_from_my_collections'"
@@ -224,7 +202,6 @@ const mySelectedCollectionID = ref(undefined)
 const collectionJson = ref("")
 
 // Template refs
-const options = ref<any>()
 const inputChooseFileToReplaceWith = ref<HTMLInputElement>()
 const inputChooseFileToImportFrom = ref<HTMLInputElement>()
 
@@ -319,10 +296,10 @@ const hideModal = () => {
   emit("hide-modal")
 }
 
-const openDialogChooseFileToReplaceWith = () => {
+// const openDialogChooseFileToReplaceWith = () => {
-  if (inputChooseFileToReplaceWith.value)
+//   if (inputChooseFileToReplaceWith.value)
-    inputChooseFileToReplaceWith.value.click()
+//     inputChooseFileToReplaceWith.value.click()
-}
+// }
 
 const openDialogChooseFileToImportFrom = () => {
   if (inputChooseFileToImportFrom.value)

packages/hoppscotch-app/components/smart/Expand.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="relative flex flex-col space-y-2 overflow-hidden"
+    :class="expand ? 'h-full' : 'max-h-32'"
+  >
+    <slot name="body"></slot>
+    <div class="flex sticky bottom-0 inset-x-0 items-center justify-center">
+      <ButtonSecondary
+        :icon="expand ? 'expand_less' : 'expand_more'"
+        :label="expand ? t('action.less') : t('action.more')"
+        filled
+        rounded
+        @click.native="expand = !expand"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
+const expand = ref(false)
+</script>

packages/hoppscotch-app/locales/en.json

@@ -16,13 +16,11 @@
     "label": "Label",
     "learn_more": "Learn more",
     "more": "More",
+    "less": "Less",
     "new": "New",
     "no": "No",
-    "preserve_current": "Preserve current",
     "prettify": "Prettify",
     "remove": "Remove",
-    "replace_current": "Replace current",
-    "replace_json": "Replace with JSON",
     "restore": "Restore",
     "save": "Save",
     "search": "Search",
@@ -232,7 +230,11 @@
     "curl": "Import cURL",
     "failed": "Error while importing: format not recognized",
     "from_gist": "Import from Gist",
+    "from_insomnia": "Import from Insomnia",
     "from_my_collections": "Import from My Collections",
+    "from_openapi": "Import from OpenAPI",
+    "from_postman": "Import from Postman",
+    "from_url": "Import from URL",
     "gist_url": "Enter Gist URL",
     "json": "Import from JSON",
     "title": "Import"