feat: no permission warning added for users except owner while deleting team (#3328)

* feat: no permission warning added
* chore: changed to function reference

packages/hoppscotch-common/src/components/app/ActionHandler.vue

@@ -2,53 +2,16 @@
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
   <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-
-  <HoppSmartConfirmModal
-    :show="confirmRemove"
-    :title="t('confirm.remove_team')"
-    @hide-modal="confirmRemove = false"
-    @resolve="deleteTeam()"
-  />
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { pipe } from "fp-ts/function"
+import { defineActionHandler } from "~/helpers/actions"
-import * as TE from "fp-ts/TaskEither"
-import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
-import { useToast } from "~/composables/toast"
-import { useI18n } from "~/composables/i18n"
-
-const toast = useToast()
-const t = useI18n()
 
 const showShortcuts = ref(false)
 const showShare = ref(false)
 const showLogin = ref(false)
 
-const confirmRemove = ref(false)
-
-const teamID = ref<string | null>(null)
-
-const deleteTeam = () => {
-  if (!teamID.value) return
-  pipe(
-    backendDeleteTeam(teamID.value),
-    TE.match(
-      (err) => {
-        // TODO: Better errors ? We know the possible errors now
-        toast.error(`${t("error.something_went_wrong")}`)
-        console.error(err)
-      },
-      () => {
-        invokeAction("workspace.switch.personal")
-        toast.success(`${t("team.deleted")}`)
-      }
-    )
-  )() // Tasks (and TEs) are lazy, so call the function returned
-}
-
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
 })
@@ -60,9 +23,4 @@ defineActionHandler("modals.share.toggle", () => {
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })
-
-defineActionHandler("modals.team.delete", ({ teamId }) => {
-  teamID.value = teamId
-  confirmRemove.value = true
-})
 </script>

packages/hoppscotch-common/src/components/app/Header.vue

@@ -231,29 +231,39 @@
       @invite-team="inviteTeam(editingTeamName, editingTeamID)"
       @refetch-teams="refetchTeams"
     />
+
+    <HoppSmartConfirmModal
+      :show="confirmRemove"
+      :title="t('confirm.remove_team')"
+      @hide-modal="confirmRemove = false"
+      @resolve="deleteTeam"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from "vue"
-import IconUser from "~icons/lucide/user"
-import IconUsers from "~icons/lucide/users"
-import IconSettings from "~icons/lucide/settings"
-import IconDownload from "~icons/lucide/download"
-import IconUploadCloud from "~icons/lucide/upload-cloud"
-import IconUserPlus from "~icons/lucide/user-plus"
-import IconLifeBuoy from "~icons/lucide/life-buoy"
-import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
-import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
-import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { defineActionHandler, invokeAction } from "@helpers/actions"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
-import { useToast } from "~/composables/toast"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
+import { installPWA, pwaDefferedPrompt } from "@modules/pwa"
+import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
+import { computed, reactive, ref, watch } from "vue"
+import { useToast } from "~/composables/toast"
+import { GetMyTeamsQuery, TeamMemberRole } from "~/helpers/backend/graphql"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { platform } from "~/platform"
+import IconDownload from "~icons/lucide/download"
+import IconLifeBuoy from "~icons/lucide/life-buoy"
+import IconSettings from "~icons/lucide/settings"
+import IconUploadCloud from "~icons/lucide/upload-cloud"
+import IconUser from "~icons/lucide/user"
+import IconUserPlus from "~icons/lucide/user-plus"
+import IconUsers from "~icons/lucide/users"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
 
 const t = useI18n()
 const toast = useToast()
@@ -278,6 +288,9 @@ const currentUser = useReadonlyStream(
   platform.auth.getProbableUser()
 )
 
+const confirmRemove = ref(false)
+const teamID = ref<string | null>(null)
+
 const selectedTeam = ref<GetMyTeamsQuery["myTeams"][number] | undefined>()
 
 // TeamList-Adapter
@@ -377,6 +390,24 @@ const handleTeamEdit = () => {
   }
 }
 
+const deleteTeam = () => {
+  if (!teamID.value) return
+  pipe(
+    backendDeleteTeam(teamID.value),
+    TE.match(
+      (err) => {
+        // TODO: Better errors ? We know the possible errors now
+        toast.error(`${t("error.something_went_wrong")}`)
+        console.error(err)
+      },
+      () => {
+        invokeAction("workspace.switch.personal")
+        toast.success(`${t("team.deleted")}`)
+      }
+    )
+  )() // Tasks (and TEs) are lazy, so call the function returned
+}
+
 // Template refs
 const tippyActions = ref<any | null>(null)
 const profile = ref<any | null>(null)
@@ -405,6 +436,12 @@ defineActionHandler(
   computed(() => !currentUser.value)
 )
 
+defineActionHandler("modals.team.delete", ({ teamId }) => {
+  if (selectedTeam.value?.myRole !== TeamMemberRole.Owner) return noPermission()
+  teamID.value = teamId
+  confirmRemove.value = true
+})
+
 const noPermission = () => {
   toast.error(`${t("profile.no_permission")}`)
 }