feat: show login dialogue for features behind login (#4431)

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

@@ -56,6 +56,7 @@ import { teamCollectionsExporter } from "~/helpers/import-export/export/teamColl
 import { ImporterOrExporter } from "~/components/importExport/types"
 import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
 import { TeamWorkspace } from "~/services/workspace.service"
+import { invokeAction } from "~/helpers/actions"
 
 const isPostmanImporterInProgress = ref(false)
 const isInsomniaImporterInProgress = ref(false)
@@ -215,9 +216,17 @@ const HoppAllCollectionImporter: ImporterOrExporter = {
     name: "import.from_all_collections",
     title: "import.from_all_collections_description",
     icon: IconUser,
-    disabled: !currentUser.value,
+    disabled: false,
     applicableTo: ["personal-workspace", "team-workspace"],
   },
+  onSelect() {
+    if (!currentUser.value) {
+      invokeAction("modals.login.toggle")
+      return true
+    }
+
+    return false
+  },
   component: defineStep("all_collection_import", AllCollectionImport, () => ({
     loading: isAllCollectionImporterInProgress.value,
     async onImportCollection(content) {

packages/hoppscotch-common/src/components/http/RawBody.vue

@@ -106,6 +106,9 @@ import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
 import { useAIExperiments } from "~/composables/ai-experiments"
 import { prettifyJSONC } from "~/helpers/editor/linting/jsoncPretty"
+import { useReadonlyStream } from "~/composables/stream"
+import { platform } from "~/platform"
+import { invokeAction } from "~/helpers/actions"
 
 type PossibleContentTypes = Exclude<
   ValidContentTypes,
@@ -220,7 +223,17 @@ const prettifyRequestBody = () => {
 
 const isModifyBodyModalOpen = ref(false)
 
+const currentUser = useReadonlyStream(
+  platform.auth.getCurrentUserStream(),
+  platform.auth.getCurrentUser()
+)
+
 const showModifyBodyModal = () => {
+  if (!currentUser.value) {
+    invokeAction("modals.login.toggle")
+    return
+  }
+
   isModifyBodyModalOpen.value = true
 }
 

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

@@ -89,6 +89,14 @@ const chooseImporterOrExporter = defineStep(
         (i) => i.metadata.id === id
       )
 
+      if (selectedImporter?.onSelect) {
+        const res = selectedImporter.onSelect()
+
+        if (res) {
+          return
+        }
+      }
+
       if (selectedImporter?.supported_sources) goToNextStep()
       else if (selectedImporter?.component)
         goToStep(selectedImporter.component.id)

packages/hoppscotch-common/src/components/importExport/ImportExportSteps/AllCollectionImport.vue

@@ -102,7 +102,7 @@ import {
   makeCollection,
 } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
-import { computed, ref, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { useReadonlyStream } from "~/composables/stream"
 import { runGQLQuery } from "~/helpers/backend/GQLClient"
@@ -129,6 +129,10 @@ defineProps<{
   loading: boolean
 }>()
 
+onMounted(() => {
+  teamListAdapter.fetchList()
+})
+
 const selectedCollectionID = ref<string | undefined>(undefined)
 
 const hasSelectedCollectionID = computed(() => {

packages/hoppscotch-common/src/components/importExport/types.ts

@@ -20,4 +20,5 @@ export type ImporterOrExporter = {
   }[]
   component?: ReturnType<typeof defineStep>
   action?: (...args: any[]) => any
+  onSelect?: () => boolean
 }

packages/hoppscotch-common/src/composables/ai-experiments.ts

@@ -7,6 +7,7 @@ import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import * as E from "fp-ts/Either"
 import { useRoute } from "vue-router"
+import { invokeAction } from "~/helpers/actions"
 
 export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
   const toast = useToast()
@@ -30,11 +31,6 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
   const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
 
   const canDoRequestNameGeneration = computed(() => {
-    // Request generation applies only to the authenticated state
-    if (!currentUser.value) {
-      return false
-    }
-
     return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
   })
 
@@ -43,6 +39,11 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
   const generateRequestName = async (
     requestContext: HoppRESTRequest | HoppGQLRequest | null
   ) => {
+    if (!currentUser.value) {
+      invokeAction("modals.login.toggle")
+      return
+    }
+
     if (!requestContext || !generateRequestNameForPlatform) {
       toast.error(t("request.generate_name_error"))
       return
@@ -82,19 +83,9 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
 }
 
 export const useAIExperiments = () => {
-  const currentUser = useReadonlyStream(
-    platform.auth.getCurrentUserStream(),
-    platform.auth.getCurrentUser()
-  )
-
   const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
 
   const shouldEnableAIFeatures = computed(() => {
-    // Request generation applies only to the authenticated state
-    if (!currentUser.value) {
-      return false
-    }
-
     return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
   })