feat: improve import-export UI (#3452)

* chore: uniform styles across components * chore: removed absolute wrapper divs * feat: add import button when graphql collections are empty * chore: add icon for button --------- Co-authored-by: nivedin <[email protected]>
hoppscotch · Oct 13, 2023 · 73b3ff8 · 73b3ff8
1 parent 016a18d
commit 73b3ff8
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 77 deletions.
diff --git a/packages/hoppscotch-common/src/components/collections/MyCollections.vue b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -251,12 +251,17 @@
  <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
  </template>
  </HoppSmartPlaceholder>
- <div v-else-if="node === null" class="flex flex-col space-y-25 py-5">
+ <HoppSmartPlaceholder
+ v-else-if="node === null"
+ :src="`/images/states/${colorMode.value}/pack.svg`"
+ :alt="`${t('empty.collections')}`"
+ :text="t('empty.collections')"
+ >
  <div class="flex flex-col items-center space-y-4">
  <span class="text-secondaryLight text-center">
  {{ t("collection.import_or_create") }}
  </span>
- <div class="flex gap-4 flex-col items-center">
+ <div class="flex gap-4 flex-col items-stretch">
  <HoppButtonPrimary
  :icon="IconImport"
  :label="t('import.title')"
@@ -273,13 +278,7 @@
  />
  </div>
  </div>
- <HoppSmartPlaceholder
- :src="`/images/states/${colorMode.value}/pack.svg`"
- :alt="`${t('empty.collections')}`"
- :text="t('empty.collections')"
- />
- </div>
-
+ </HoppSmartPlaceholder>
  <HoppSmartPlaceholder
  v-else-if="node.data.type === 'collections'"
  :src="`/images/states/${colorMode.value}/pack.svg`"

diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -261,16 +261,18 @@
  />
  </template>
  <template #emptyNode="{ node }">
- <div
+ <HoppSmartPlaceholder
  v-if="node === null"
- class="flex flex-col space-y-25 py-5"
- @drop="(e) => e.stopPropagation()"
+ :src="`/images/states/${colorMode.value}/pack.svg`"
+ :alt="`${t('empty.collections')}`"
+ :text="t('empty.collections')"
+ @drop.stop
  >
  <div class="flex flex-col items-center space-y-4">
  <span class="text-secondaryLight text-center">
  {{ t("collection.import_or_create") }}
  </span>
- <div class="flex gap-4 flex-col items-center">
+ <div class="flex gap-4 flex-col items-stretch">
  <HoppButtonPrimary
  :icon="IconImport"
  :label="t('import.title')"
@@ -293,45 +295,34 @@
  />
  </div>
  </div>
- <HoppSmartPlaceholder
- :src="`/images/states/${colorMode.value}/pack.svg`"
- :alt="`${t('empty.collections')}`"
- :text="t('empty.collections')"
- />
- </div>
- <div
+ </HoppSmartPlaceholder>
+ <HoppSmartPlaceholder
  v-else-if="node.data.type === 'collections'"
- @drop="(e) => e.stopPropagation()"
- >
- <HoppSmartPlaceholder
- :src="`/images/states/${colorMode.value}/pack.svg`"
- :alt="`${t('empty.collections')}`"
- :text="t('empty.collections')"
- >
- <HoppButtonSecondary
- :label="t('add.new')"
- filled
- outline
- @click="
- node.data.type === 'collections' &&
- emit('add-folder', {
- path: node.id,
- folder: node.data.data.data,
- })
- "
- />
- </HoppSmartPlaceholder>
- </div>
- <div
- v-else-if="node.data.type === 'folders'"
- @drop="(e) => e.stopPropagation()"
+ :src="`/images/states/${colorMode.value}/pack.svg`"
+ :alt="`${t('empty.collections')}`"
+ :text="t('empty.collections')"
+ @drop.stop
  >
- <HoppSmartPlaceholder
- :src="`/images/states/${colorMode.value}/pack.svg`"
- :alt="`${t('empty.folder')}`"
- :text="t('empty.folder')"
+ <HoppButtonSecondary
+ :label="t('add.new')"
+ filled
+ outline
+ @click="
+ node.data.type === 'collections' &&
+ emit('add-folder', {
+ path: node.id,
+ folder: node.data.data.data,
+ })
+ "
  />
- </div>
+ </HoppSmartPlaceholder>
+ <HoppSmartPlaceholder
+ v-else-if="node.data.type === 'folders'"
+ :src="`/images/states/${colorMode.value}/pack.svg`"
+ :alt="`${t('empty.folder')}`"
+ :text="t('empty.folder')"
+ @drop.stop
+ />
  </template>
  </HoppSmartTree>
  </div>

diff --git a/packages/hoppscotch-common/src/components/collections/graphql/index.vue b/packages/hoppscotch-common/src/components/collections/graphql/index.vue
@@ -34,7 +34,7 @@
  v-if="!saveRequest"
  v-tippy="{ theme: 'tooltip' }"
  :title="t('modal.import_export')"
- :icon="IconArchive"
+ :icon="IconImport"
  @click="displayModalImportExport(true)"
  />
  </div>
@@ -66,12 +66,27 @@
  :alt="`${t('empty.collections')}`"
  :text="t('empty.collections')"
  >
- <HoppButtonSecondary
- :label="t('add.new')"
- filled
- outline
- @click="displayModalAdd(true)"
- />
+ <div class="flex flex-col items-center space-y-4">
+ <span class="text-secondaryLight text-center">
+ {{ t("collection.import_or_create") }}
+ </span>
+ <div class="flex gap-4 flex-col items-stretch">
+ <HoppButtonPrimary
+ :icon="IconImport"
+ :label="t('import.title')"
+ filled
+ outline
+ @click="displayModalImportExport(true)"
+ />
+ <HoppButtonSecondary
+ :label="t('add.new')"
+ filled
+ outline
+ :icon="IconPlus"
+ @click="displayModalAdd(true)"
+ />
+ </div>
+ </div>
  </HoppSmartPlaceholder>
  <HoppSmartPlaceholder
  v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
@@ -140,7 +155,7 @@ import {
 
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
-import IconArchive from "~icons/lucide/archive"
+import IconImport from "~icons/lucide/folder-down"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
@@ -168,7 +183,7 @@ export default defineComponent({
  tabs,
  IconPlus,
  IconHelpCircle,
- IconArchive,
+ IconImport,
  }
  },
  data() {

diff --git a/packages/hoppscotch-common/src/components/environments/my/index.vue b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -32,12 +32,17 @@
  :environment="environment"
  @edit-environment="editEnvironment(index)"
  />
- <div v-if="!environments.length" class="p-5 space-y-25 flex flex-col">
+ <HoppSmartPlaceholder
+ v-if="!environments.length"
+ :src="`/images/states/${colorMode.value}/blockchain.svg`"
+ :alt="`${t('empty.environments')}`"
+ :text="t('empty.environments')"
+ >
  <div class="flex flex-col items-center space-y-4">
  <span class="text-secondaryLight text-center">
  {{ t("environment.import_or_create") }}
  </span>
- <div class="flex gap-4 flex-col items-center">
+ <div class="flex gap-4 flex-col items-stretch">
  <HoppButtonPrimary
  :icon="IconImport"
  :label="t('import.title')"
@@ -54,13 +59,7 @@
  />
  </div>
  </div>
- <HoppSmartPlaceholder
- :src="`/images/states/${colorMode.value}/blockchain.svg`"
- :alt="`${t('empty.environments')}`"
- :text="t('empty.environments')"
- />
- </div>
-
+ </HoppSmartPlaceholder>
  <EnvironmentsMyDetails
  :show="showModalDetails"
  :action="action"

diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -43,15 +43,17 @@
  />
  </div>
  </div>
- <div
+ <HoppSmartPlaceholder
  v-if="!loading && !teamEnvironments.length && !adapterError"
- class="p-5 space-y-25 flex flex-col"
+ :src="`/images/states/${colorMode.value}/blockchain.svg`"
+ :alt="`${t('empty.environments')}`"
+ :text="t('empty.environments')"
  >
  <div class="flex flex-col items-center space-y-4">
  <span class="text-secondaryLight text-center">
  {{ t("environment.import_or_create") }}
  </span>
- <div class="flex gap-4 flex-col items-center">
+ <div class="flex gap-4 flex-col items-stretch">
  <HoppButtonPrimary
  :icon="IconImport"
  :label="t('import.title')"
@@ -72,13 +74,7 @@
  />
  </div>
  </div>
- <HoppSmartPlaceholder
- :src="`/images/states/${colorMode.value}/blockchain.svg`"
- :alt="`${t('empty.environments')}`"
- :text="t('empty.environments')"
- />
- </div>
-
+ </HoppSmartPlaceholder>
  <div v-else-if="!loading">
  <EnvironmentsTeamsEnvironment
  v-for="(environment, index) in JSON.parse(