Feat: Add join requests to sidebar (#3894)

packages/frontend-2/components/workspace/sidebar/Members.vue

@@ -8,21 +8,34 @@
     :tag="workspaceInfo.team.totalCount.toString() || undefined"
     no-hover
   >
-    <div class="flex lg:flex-col items-center lg:items-start gap-4 pb-0 lg:pb-4 mt-1">
-      <div class="flex items-center gap-1">
+    <div class="flex lg:flex-col items-center lg:items-start gap-y-3 pb-0 lg:pb-4 mt-1">
+      <div class="flex gap-y-3 flex-col w-full">
         <UserAvatarGroup
           :overlap="false"
           :users="team.map((teamMember) => teamMember.user)"
-          :max-avatars="3"
+          :max-avatars="isDesktop ? 5 : 3"
           class="shrink-0"
         />
-        <button
-          v-if="invitedTeamCount && isWorkspaceAdmin"
-          class="hidden md:flex items-center shrink-0 justify-center text-body-3xs px-2 h-8 rounded-full border border-dashed border-outline-2 hover:bg-foundation select-none"
-          @click="navigateTo(settingsWorkspaceRoutes.members.route(workspaceInfo.slug))"
-        >
-          + {{ invitedTeamCount }} pending
-        </button>
+        <div class="w-full flex items-center gap-x-2">
+          <button
+            v-if="adminWorkspacesJoinRequestsCount && isWorkspaceAdmin"
+            class="hidden md:flex items-center shrink-0 justify-center text-body-3xs px-2 h-8 rounded-full border border-dashed border-outline-2 hover:bg-foundation select-none"
+            @click="
+              navigateTo(settingsWorkspaceRoutes.members.route(workspaceInfo.slug))
+            "
+          >
+            {{ adminWorkspacesJoinRequestsCount }} join requests
+          </button>
+          <button
+            v-if="invitedTeamCount && isWorkspaceAdmin"
+            class="hidden md:flex items-center shrink-0 justify-center text-body-3xs px-2 h-8 rounded-full border border-dashed border-outline-2 hover:bg-foundation select-none"
+            @click="
+              navigateTo(settingsWorkspaceRoutes.members.route(workspaceInfo.slug))
+            "
+          >
+            {{ invitedTeamCount }} pending
+          </button>
+        </div>
       </div>
       <FormButton
         v-if="isWorkspaceAdmin"
@@ -39,6 +52,8 @@
 import { graphql } from '~~/lib/common/generated/gql'
 import type { WorkspaceSidebarMembers_WorkspaceFragment } from '~/lib/common/generated/gql/graphql'
 import { settingsWorkspaceRoutes } from '~/lib/common/helpers/route'
+import { TailwindBreakpoints } from '~~/lib/common/helpers/tailwind'
+import { useBreakpoints } from '@vueuse/core'
 
 graphql(`
   fragment WorkspaceSidebarMembers_Workspace on Workspace {
@@ -56,6 +71,9 @@ const props = defineProps<{
   isWorkspaceAdmin?: boolean
 }>()
 
+const breakpoints = useBreakpoints(TailwindBreakpoints)
+const isDesktop = breakpoints.greaterOrEqual('lg')
+
 const team = computed(() => props.workspaceInfo.team.items || [])
 
 const iconName = computed(() => {
@@ -75,4 +93,7 @@ const iconText = computed(() => {
 })
 
 const invitedTeamCount = computed(() => props.workspaceInfo?.invitedTeam?.length ?? 0)
+const adminWorkspacesJoinRequestsCount = computed(
+  () => props.workspaceInfo?.adminWorkspacesJoinRequests?.totalCount
+)
 </script>

packages/frontend-2/lib/common/generated/gql/gql.ts

@@ -349,7 +349,7 @@ const documents = {
     "\n  fragment WorkspaceBase_Workspace on Workspace {\n    id\n    name\n    slug\n    role\n    description\n    logo\n    plan {\n      status\n      createdAt\n    }\n  }\n": types.WorkspaceBase_WorkspaceFragmentDoc,
     "\n  fragment WorkspaceDashboardAbout_Workspace on Workspace {\n    id\n    name\n    description\n  }\n": types.WorkspaceDashboardAbout_WorkspaceFragmentDoc,
     "\n  fragment WorkspaceInvitedTeam_Workspace on Workspace {\n    id\n    invitedTeam(filter: $invitesFilter) {\n      id\n      role\n      email\n    }\n  }\n": types.WorkspaceInvitedTeam_WorkspaceFragmentDoc,
-    "\n  fragment WorkspaceTeam_Workspace on Workspace {\n    id\n    slug\n    team {\n      totalCount\n      items {\n        id\n        user {\n          id\n          name\n          ...LimitedUserAvatar\n        }\n      }\n    }\n    ...WorkspaceInvitedTeam_Workspace\n  }\n": types.WorkspaceTeam_WorkspaceFragmentDoc,
+    "\n  fragment WorkspaceTeam_Workspace on Workspace {\n    id\n    slug\n    team {\n      totalCount\n      items {\n        id\n        user {\n          id\n          name\n          ...LimitedUserAvatar\n        }\n      }\n    }\n    adminWorkspacesJoinRequests {\n      totalCount\n    }\n    ...WorkspaceInvitedTeam_Workspace\n  }\n": types.WorkspaceTeam_WorkspaceFragmentDoc,
     "\n  fragment WorkspaceSecurity_Workspace on Workspace {\n    id\n    slug\n    domains {\n      id\n      domain\n    }\n  }\n": types.WorkspaceSecurity_WorkspaceFragmentDoc,
     "\n  mutation UpdateRole($input: WorkspaceRoleUpdateInput!) {\n    workspaceMutations {\n      updateRole(input: $input) {\n        team {\n          items {\n            id\n            role\n          }\n        }\n      }\n    }\n  }\n": types.UpdateRoleDocument,
     "\n  mutation InviteToWorkspace(\n    $workspaceId: String!\n    $input: [WorkspaceInviteCreateInput!]!\n  ) {\n    workspaceMutations {\n      invites {\n        batchCreate(workspaceId: $workspaceId, input: $input) {\n          id\n          invitedTeam {\n            ...SettingsWorkspacesMembersInvitesTable_PendingWorkspaceCollaborator\n          }\n        }\n      }\n    }\n  }\n": types.InviteToWorkspaceDocument,
@@ -1755,7 +1755,7 @@ export function graphql(source: "\n  fragment WorkspaceInvitedTeam_Workspace on
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment WorkspaceTeam_Workspace on Workspace {\n    id\n    slug\n    team {\n      totalCount\n      items {\n        id\n        user {\n          id\n          name\n          ...LimitedUserAvatar\n        }\n      }\n    }\n    ...WorkspaceInvitedTeam_Workspace\n  }\n"): (typeof documents)["\n  fragment WorkspaceTeam_Workspace on Workspace {\n    id\n    slug\n    team {\n      totalCount\n      items {\n        id\n        user {\n          id\n          name\n          ...LimitedUserAvatar\n        }\n      }\n    }\n    ...WorkspaceInvitedTeam_Workspace\n  }\n"];
+export function graphql(source: "\n  fragment WorkspaceTeam_Workspace on Workspace {\n    id\n    slug\n    team {\n      totalCount\n      items {\n        id\n        user {\n          id\n          name\n          ...LimitedUserAvatar\n        }\n      }\n    }\n    adminWorkspacesJoinRequests {\n      totalCount\n    }\n    ...WorkspaceInvitedTeam_Workspace\n  }\n"): (typeof documents)["\n  fragment WorkspaceTeam_Workspace on Workspace {\n    id\n    slug\n    team {\n      totalCount\n      items {\n        id\n        user {\n          id\n          name\n          ...LimitedUserAvatar\n        }\n      }\n    }\n    adminWorkspacesJoinRequests {\n      totalCount\n    }\n    ...WorkspaceInvitedTeam_Workspace\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

packages/frontend-2/lib/workspaces/graphql/fragments.ts

@@ -50,6 +50,9 @@ export const workspaceTeamFragment = graphql(`
         }
       }
     }
+    adminWorkspacesJoinRequests {
+      totalCount
+    }
     ...WorkspaceInvitedTeam_Workspace
   }
 `)