fix: prompt user on actions with no permission

packages/hoppscotch-app/components/teams/Team.vue

@@ -2,11 +2,20 @@
   <div class="border border-divider rounded flex flex-col flex-1">
     <div
       class="flex flex-1 items-start"
-      :class="{
-        'cursor-pointer hover:bg-primaryDark transition hover:border-dividerDark focus-visible:border-dividerDark':
-          compact && team.myRole === 'OWNER',
-      }"
-      @click="compact && team.myRole === 'OWNER' ? $emit('invite-team') : ''"
+      :class="
+        compact
+          ? team.myRole === 'OWNER'
+            ? 'cursor-pointer hover:bg-primaryDark transition hover:border-dividerDark focus-visible:border-dividerDark'
+            : 'cursor-not-allowed bg-primaryLight'
+          : ''
+      "
+      @click="
+        compact
+          ? team.myRole === 'OWNER'
+            ? $emit('invite-team')
+            : noPermission()
+          : ''
+      "
     >
       <div class="p-4">
         <label
@@ -182,4 +191,10 @@ const exitTeam = () => {
     )
   )() // Tasks (and TEs) are lazy, so call the function returned
 }
+
+const noPermission = () => {
+  $toast.error(t("profile.no_permission").toString(), {
+    icon: "error_outline",
+  })
+}
 </script>

packages/hoppscotch-app/helpers/backend/GQLClient.ts

@@ -69,7 +69,8 @@ authIdToken$.subscribe(() => {
   subscriptionClient.client.close()
 })
 
-const createHoppClient = () => createClient({
+const createHoppClient = () =>
+  createClient({
     url: BACKEND_GQL_URL,
     exchanges: [
       devtoolsExchange,
@@ -120,7 +121,8 @@ const createHoppClient = () => createClient({
       fetchExchange,
       subscriptionExchange({
         // @ts-expect-error: An issue with the Urql typing
-      forwardSubscription: (operation) => subscriptionClient.request(operation),
+        forwardSubscription: (operation) =>
+          subscriptionClient.request(operation),
       }),
     ],
   })
@@ -312,8 +314,7 @@ export const runMutation = <
   pipe(
     TE.tryCatch(
       () =>
-        client
-          .value
+        client.value
           .mutation(mutation, variables, {
             requestPolicy: "cache-and-network",
             ...additionalConfig,

packages/hoppscotch-app/helpers/backend/caching/updates.ts

@@ -108,19 +108,18 @@ export const updatesDef: GraphCacheUpdaters = {
     },
     removeTeamMember: (_result, { teamID, userUid }, cache) => {
       const newMembers = (
-        cache.resolve(
+        (cache.resolve(
           {
             __typename: "Team",
             id: teamID,
           },
           "teamMembers"
-        ) as string[]
+        ) as string[]) ?? []
       )
         .map((x) => [x, cache.resolve(x, "user") as string])
         .map(([key, userKey]) => [key, cache.resolve(userKey, "uid") as string])
         .filter(([_key, uid]) => uid !== userUid)
         .map(([key]) => key)
-
       cache.link({ __typename: "Team", id: teamID }, "teamMembers", newMembers)
     },
     createTeamInvitation: (result, _args, cache, _info) => {

packages/hoppscotch-app/locales/en.json

@@ -261,6 +261,17 @@
     "script": "Pre-Request Script",
     "snippets": "Snippets"
   },
+  "profile": {
+    "editor": "Editor",
+    "editor_description": "Editors can add, edit, and delete requests.",
+    "no_permission": "You do not have permission to perform this action.",
+    "owner": "Owner",
+    "owner_description": "Owners can add, edit, and delete requests, collections and team members.",
+    "roles": "Roles",
+    "roles_description": "Roles are used to control access to the shared collections.",
+    "viewer": "Viewer",
+    "viewer_description": "Viewers can only view and use requests."
+  },
   "remove": {
     "star": "Remove star"
   },
@@ -310,16 +321,6 @@
     "waiting_for_connection": "waiting for connection",
     "xml": "XML"
   },
-  "profile": {
-    "roles": "Roles",
-    "roles_description": "Roles are used to control access to the shared collections.",
-    "owner": "Owner",
-    "owner_description": "Owners can add, edit, and delete requests, collections and team members.",
-    "editor": "Editor",
-    "editor_description": "Editors can add, edit, and delete requests.",
-    "viewer": "Viewer",
-    "viewer_description": "Viewers can only view and use requests."
-  },
   "settings": {
     "accent_color": "Accent color",
     "account": "Account",