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 <nivedinp@gmail.com>
2023-10-13 17:57:14 +05:30
parent 016a18d3b2
commit 73b3ff8e41
5 changed files with 77 additions and 77 deletions
--- 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`"
--- 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()"
+            :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.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()"
-          >
-            <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>
--- 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() {
--- 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"
--- 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(