From 51510566bc2448e7b7b0bd4c5fc00e4906d03d31 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Wed, 11 Oct 2023 11:08:51 +0530
Subject: [PATCH] refactor: add import buttons in empty state for collections &
 environments (#3438)

---
 packages/hoppscotch-common/locales/en.json    |  7 +-
 .../components/collections/MyCollections.vue  | 47 ++++++++-----
 .../collections/TeamCollections.vue           | 68 ++++++++++++-------
 .../src/components/environments/Selector.vue  |  3 +-
 .../src/components/environments/my/index.vue  | 44 ++++++++----
 .../components/environments/teams/index.vue   | 65 +++++++++++-------
 .../src/components/http/Headers.vue           |  6 ++
 7 files changed, 160 insertions(+), 80 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 25f52906d..35450a5fb 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -125,6 +125,7 @@
     "created": "Collection created",
     "different_parent": "Cannot reorder collection with different parent",
     "edit": "Edit Collection",
+    "import_or_create": "Import or create a collection",
     "invalid_name": "Please provide a name for the collection",
     "invalid_root_move": "Collection already in the root",
     "moved": "Moved Successfully",
@@ -210,6 +211,7 @@
     "empty_variables": "No variables",
     "global": "Global",
     "global_variables": "Global variables",
+    "import_or_create": "Import or create a environment",
     "invalid_name": "Please provide a name for the environment",
     "list": "Environment variables",
     "my_environments": "My Environments",
@@ -459,6 +461,7 @@
     "enter_curl": "Enter cURL command",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
+    "go_to_authorization_tab": "Go to Authorization",
     "header_list": "Header List",
     "invalid_name": "Please provide a name for the request",
     "method": "Method",
@@ -750,6 +753,7 @@
     "enabled": "Enabled",
     "file_imported": "File imported",
     "finished_in": "Finished in {duration} ms",
+    "hide": "Hide",
     "history_deleted": "History deleted",
     "linewrap": "Wrap lines",
     "loading": "Loading...",
@@ -760,6 +764,7 @@
     "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
     "published_message": "Published message: {message} to topic: {topic}",
     "reconnection_error": "Failed to reconnect",
+    "show":"Show",
     "subscribed_failed": "Failed to subscribe to topic: {topic}",
     "subscribed_success": "Successfully subscribed to topic: {topic}",
     "unsubscribed_failed": "Failed to unsubscribe from topic: {topic}",
@@ -841,7 +846,7 @@
     "new": "New Team",
     "new_created": "New team created",
     "new_name": "My New Team",
-    "no_access": "You do not have edit access to these collections",
+    "no_access": "You do not have edit access to this team",
     "no_invite_found": "Invitation not found. Contact your team owner.",
     "no_request_found": "Request not found.",
     "not_found": "Team not found. Contact your team owner.",
diff --git a/packages/hoppscotch-common/src/components/collections/MyCollections.vue b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
index 9ba7b991f..d1e59ca54 100644
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -25,7 +25,7 @@
         <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
-          :icon="IconArchive"
+          :icon="IconImport"
           :title="t('modal.import_export')"
           @click="emit('display-modal-import-export')"
         />
@@ -251,19 +251,35 @@
               <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
             </template>
           </HoppSmartPlaceholder>
-          <HoppSmartPlaceholder
-            v-else-if="node === null"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
-            :alt="`${t('empty.collections')}`"
-            :text="t('empty.collections')"
-          >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="emit('display-modal-add')"
+          <div v-else-if="node === null" class="flex flex-col space-y-25 py-5">
+            <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">
+                <HoppButtonPrimary
+                  :icon="IconImport"
+                  :label="t('import.title')"
+                  filled
+                  outline
+                  @click="emit('display-modal-import-export')"
+                />
+                <HoppButtonSecondary
+                  :icon="IconPlus"
+                  :label="t('add.new')"
+                  filled
+                  outline
+                  @click="emit('display-modal-add')"
+                />
+              </div>
+            </div>
+            <HoppSmartPlaceholder
+              :src="`/images/states/${colorMode.value}/pack.svg`"
+              :alt="`${t('empty.collections')}`"
+              :text="t('empty.collections')"
             />
-          </HoppSmartPlaceholder>
+          </div>
+
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
             :src="`/images/states/${colorMode.value}/pack.svg`"
@@ -288,8 +304,7 @@
             :src="`/images/states/${colorMode.value}/pack.svg`"
             :alt="`${t('empty.folder')}`"
             :text="t('empty.folder')"
-          >
-          </HoppSmartPlaceholder>
+          />
         </template>
       </HoppSmartTree>
     </div>
@@ -297,9 +312,9 @@
 </template>
 
 <script setup lang="ts">
-import IconArchive from "~icons/lucide/archive"
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconImport from "~icons/lucide/folder-down"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 70fa8b40b..d51c0bcb3 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -15,12 +15,12 @@
         class="!rounded-none"
         :icon="IconPlus"
         :title="t('team.no_access')"
-        :label="t('action.new')"
+        :label="t('add.new')"
       />
       <HoppButtonSecondary
         v-else
         :icon="IconPlus"
-        :label="t('action.new')"
+        :label="t('add.new')"
         class="!rounded-none"
         @click="emit('display-modal-add')"
       />
@@ -39,7 +39,7 @@
             collectionsType.type === 'team-collections' &&
             collectionsType.selectedTeam === undefined
           "
-          :icon="IconArchive"
+          :icon="IconImport"
           :title="t('modal.import_export')"
           @click="emit('display-modal-import-export')"
         />
@@ -261,32 +261,43 @@
           />
         </template>
         <template #emptyNode="{ node }">
-          <div v-if="node === null">
-            <div @drop="(e) => e.stopPropagation()">
-              <HoppSmartPlaceholder
-                :src="`/images/states/${colorMode.value}/pack.svg`"
-                :alt="`${t('empty.collections')}`"
-                :text="t('empty.collections')"
-              >
-                <HoppButtonSecondary
-                  v-if="hasNoTeamAccess"
-                  v-tippy="{ theme: 'tooltip' }"
-                  disabled
+          <div
+            v-if="node === null"
+            class="flex flex-col space-y-25 py-5"
+            @drop="(e) => e.stopPropagation()"
+          >
+            <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">
+                <HoppButtonPrimary
+                  :icon="IconImport"
+                  :label="t('import.title')"
                   filled
                   outline
-                  :title="t('team.no_access')"
-                  :label="t('action.new')"
+                  :disabled="hasNoTeamAccess"
+                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
+                  @click="
+                    hasNoTeamAccess ? null : emit('display-modal-import-export')
+                  "
                 />
                 <HoppButtonSecondary
-                  v-else
                   :icon="IconPlus"
-                  :label="t('action.new')"
+                  :label="t('add.new')"
                   filled
                   outline
-                  @click="emit('display-modal-add')"
+                  :disabled="hasNoTeamAccess"
+                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
+                  @click="hasNoTeamAccess ? null : emit('display-modal-add')"
                 />
-              </HoppSmartPlaceholder>
+              </div>
             </div>
+            <HoppSmartPlaceholder
+              :src="`/images/states/${colorMode.value}/pack.svg`"
+              :alt="`${t('empty.collections')}`"
+              :text="t('empty.collections')"
+            />
           </div>
           <div
             v-else-if="node.data.type === 'collections'"
@@ -297,6 +308,18 @@
               :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
@@ -307,8 +330,7 @@
               :src="`/images/states/${colorMode.value}/pack.svg`"
               :alt="`${t('empty.folder')}`"
               :text="t('empty.folder')"
-            >
-            </HoppSmartPlaceholder>
+            />
           </div>
         </template>
       </HoppSmartTree>
@@ -317,9 +339,9 @@
 </template>
 
 <script setup lang="ts">
-import IconArchive from "~icons/lucide/archive"
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconImport from "~icons/lucide/folder-down"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useI18n } from "@composables/i18n"
diff --git a/packages/hoppscotch-common/src/components/environments/Selector.vue b/packages/hoppscotch-common/src/components/environments/Selector.vue
index 70c1218fa..d9dcd1ad0 100644
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -478,7 +478,8 @@ watch(
         teamEnvListAdapter.changeTeamID(newVal.teamID)
       }
     }
-  }
+  },
+  { immediate: true }
 )
 
 const selectedEnv = computed(() => {
diff --git a/packages/hoppscotch-common/src/components/environments/my/index.vue b/packages/hoppscotch-common/src/components/environments/my/index.vue
index 41ea857bb..ed7ee816b 100644
--- a/packages/hoppscotch-common/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/index.vue
@@ -19,7 +19,7 @@
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :icon="IconArchive"
+          :icon="IconImport"
           :title="t('modal.import_export')"
           @click="displayModalImportExport(true)"
         />
@@ -32,19 +32,35 @@
       :environment="environment"
       @edit-environment="editEnvironment(index)"
     />
-    <HoppSmartPlaceholder
-      v-if="environments.length === 0"
-      :src="`/images/states/${colorMode.value}/blockchain.svg`"
-      :alt="`${t('empty.environments')}`"
-      :text="t('empty.environments')"
-    >
-      <HoppButtonSecondary
-        :label="`${t('add.new')}`"
-        filled
-        outline
-        @click="displayModalAdd(true)"
+    <div v-if="!environments.length" class="p-5 space-y-25 flex flex-col">
+      <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">
+          <HoppButtonPrimary
+            :icon="IconImport"
+            :label="t('import.title')"
+            filled
+            outline
+            @click="displayModalImportExport(true)"
+          />
+          <HoppButtonSecondary
+            :icon="IconPlus"
+            :label="`${t('add.new')}`"
+            filled
+            outline
+            @click="displayModalAdd(true)"
+          />
+        </div>
+      </div>
+      <HoppSmartPlaceholder
+        :src="`/images/states/${colorMode.value}/blockchain.svg`"
+        :alt="`${t('empty.environments')}`"
+        :text="t('empty.environments')"
       />
-    </HoppSmartPlaceholder>
+    </div>
+
     <EnvironmentsMyDetails
       :show="showModalDetails"
       :action="action"
@@ -66,8 +82,8 @@ import { environments$ } from "~/newstore/environments"
 import { useColorMode } from "~/composables/theming"
 import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "~/composables/i18n"
-import IconArchive from "~icons/lucide/archive"
 import IconPlus from "~icons/lucide/plus"
+import IconImport from "~icons/lucide/folder-down"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import { Environment } from "@hoppscotch/data"
 import { defineActionHandler } from "~/helpers/actions"
diff --git a/packages/hoppscotch-common/src/components/environments/teams/index.vue b/packages/hoppscotch-common/src/components/environments/teams/index.vue
index 42f224af3..9de5f6a5d 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/index.vue
@@ -31,41 +31,54 @@
           v-if="team !== undefined && team.myRole === 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
           disabled
-          :icon="IconArchive"
+          :icon="IconImport"
           :title="t('modal.import_export')"
         />
         <HoppButtonSecondary
           v-else
           v-tippy="{ theme: 'tooltip' }"
-          :icon="IconArchive"
+          :icon="IconImport"
           :title="t('modal.import_export')"
           @click="displayModalImportExport(true)"
         />
       </div>
     </div>
-    <HoppSmartPlaceholder
-      v-if="!loading && teamEnvironments.length === 0 && !adapterError"
-      :src="`/images/states/${colorMode.value}/blockchain.svg`"
-      :alt="`${t('empty.environments')}`"
-      :text="t('empty.environments')"
+    <div
+      v-if="!loading && !teamEnvironments.length && !adapterError"
+      class="p-5 space-y-25 flex flex-col"
     >
-      <HoppButtonSecondary
-        v-if="team === undefined || team.myRole === 'VIEWER'"
-        v-tippy="{ theme: 'tooltip' }"
-        disabled
-        filled
-        :icon="IconPlus"
-        :title="t('team.no_access')"
-        :label="t('action.new')"
+      <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">
+          <HoppButtonPrimary
+            :icon="IconImport"
+            :label="t('import.title')"
+            filled
+            outline
+            :title="isTeamViewer ? t('team.no_access') : ''"
+            :disabled="isTeamViewer"
+            @click="isTeamViewer ? null : displayModalImportExport(true)"
+          />
+          <HoppButtonSecondary
+            :label="`${t('add.new')}`"
+            filled
+            outline
+            :icon="IconPlus"
+            :title="isTeamViewer ? t('team.no_access') : ''"
+            :disabled="isTeamViewer"
+            @click="isTeamViewer ? null : displayModalAdd(true)"
+          />
+        </div>
+      </div>
+      <HoppSmartPlaceholder
+        :src="`/images/states/${colorMode.value}/blockchain.svg`"
+        :alt="`${t('empty.environments')}`"
+        :text="t('empty.environments')"
       />
-      <HoppButtonSecondary
-        v-else
-        :label="`${t('add.new')}`"
-        filled
-        outline
-        @click="displayModalAdd(true)"
-      />
-    </HoppSmartPlaceholder>
+    </div>
+
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment
         v-for="(environment, index) in JSON.parse(
@@ -108,14 +121,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { computed, ref } from "vue"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import { useI18n } from "~/composables/i18n"
 import { useColorMode } from "~/composables/theming"
 import IconPlus from "~icons/lucide/plus"
-import IconArchive from "~icons/lucide/archive"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconImport from "~icons/lucide/folder-down"
 import { defineActionHandler } from "~/helpers/actions"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 
@@ -138,6 +151,8 @@ const action = ref<"new" | "edit">("edit")
 const editingEnvironment = ref<TeamEnvironment | null>(null)
 const editingVariableName = ref("")
 
+const isTeamViewer = computed(() => props.team?.myRole === "VIEWER")
+
 const displayModalAdd = (shouldDisplay: boolean) => {
   action.value = "new"
   showModalDetails.value = shouldDisplay
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index fef9b1c0f..79b7d3674 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -185,18 +185,24 @@
             <span>
               <HoppButtonSecondary
                 v-if="header.source === 'auth'"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t(masking ? 'state.show' : 'state.hide')"
                 :icon="masking ? IconEye : IconEyeOff"
                 @click="toggleMask()"
               />
               <HoppButtonSecondary
                 v-else
+                v-tippy="{ theme: 'tooltip' }"
                 :icon="IconArrowUpRight"
+                :title="t('request.go_to_authorization_tab')"
                 class="cursor-auto text-primary hover:text-primary"
               />
             </span>
             <span>
               <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
                 :icon="IconArrowUpRight"
+                :title="t('request.go_to_authorization_tab')"
                 @click="changeTab(header.source)"
               />
             </span>