Fix: Re-enable count on member settings (#3247)

packages/frontend-2/components/form/select/WorkspaceRoles.vue

@@ -84,6 +84,10 @@ const props = defineProps({
   },
   showLabel: Boolean,
   clearable: Boolean,
+  hideItems: {
+    required: false,
+    type: Array as PropType<WorkspaceRoles[]>
+  },
   hideDescription: {
     required: false,
     type: Boolean
@@ -102,7 +106,14 @@ const { selectedValue, isMultiItemArrayValue, hiddenSelectedItemCount, firstItem
     dynamicVisibility: { elementToWatchForChanges, itemContainer }
   })
 
-const roles = computed(() => Object.values(Roles.Workspace))
+const roles = computed(() => {
+  if (props.hideItems && props.hideItems.length) {
+    return Object.values(Roles.Workspace).filter(
+      (role) => !props.hideItems?.includes(role)
+    )
+  }
+  return Object.values(Roles.Workspace)
+})
 
 const disabledItemPredicate = (item: WorkspaceRoles) =>
   props.disabledItems && props.disabledItems.length > 0

packages/frontend-2/components/settings/workspaces/Members.vue

@@ -41,6 +41,17 @@ graphql(`
   fragment SettingsWorkspacesMembers_Workspace on Workspace {
     id
     role
+    team {
+      items {
+        id
+        role
+      }
+    }
+    invitedTeam(filter: $invitesFilter) {
+      user {
+        id
+      }
+    }
   }
 `)
 
@@ -53,18 +64,31 @@ const { result } = useQuery(settingsWorkspacesMembersQuery, () => ({
 }))
 
 const isAdmin = computed(() => result.value?.workspace?.role === Roles.Workspace.Admin)
+const workspace = computed(() => result.value?.workspace)
+const memberCount = computed(
+  () =>
+    result.value?.workspace.team.items.filter(
+      (item) => item.role !== Roles.Workspace.Guest
+    ).length
+)
+const guestCount = computed(
+  () =>
+    result.value?.workspace.team.items.filter(
+      (item) => item.role === Roles.Workspace.Guest
+    ).length
+)
+const invitedCount = computed(() => result.value?.workspace.invitedTeam?.length)
 const tabItems = computed<LayoutPageTabItem[]>(() => [
-  { title: 'Members', id: 'members' },
-  { title: 'Guests', id: 'guests' },
+  { title: 'Members', id: 'members', count: memberCount.value },
+  { title: 'Guests', id: 'guests', count: guestCount.value },
   {
     title: 'Pending invites',
     id: 'invites',
     disabled: !isAdmin.value,
-    disabledMessage: 'Only workspace admins can manage invites'
+    disabledMessage: 'Only workspace admins can manage invites',
+    count: invitedCount.value
   }
 ])
 
 const activeTab = ref(tabItems.value[0])
-
-const workspace = computed(() => result.value?.workspace)
 </script>

packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue

@@ -163,7 +163,8 @@ const { result: searchResult, loading: searchResultLoading } = useQuery(
   settingsWorkspacesMembersSearchQuery,
   () => ({
     filter: {
-      search: search.value
+      search: search.value,
+      roles: [Roles.Workspace.Guest]
     },
     workspaceId: props.workspaceId
   }),

packages/frontend-2/components/settings/workspaces/members/MembersTable.vue

@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import type { WorkspaceRoles } from '@speckle/shared'
+import { Roles, type WorkspaceRoles } from '@speckle/shared'
 import { settingsWorkspacesMembersSearchQuery } from '~~/lib/settings/graphql/queries'
 import { useQuery } from '@vue/apollo-composable'
 import type { SettingsWorkspacesMembersMembersTable_WorkspaceFragment } from '~~/lib/common/generated/gql/graphql'
@@ -117,7 +117,6 @@ import {
 import { useWorkspaceUpdateRole } from '~/lib/workspaces/composables/management'
 import type { LayoutMenuItem } from '~~/lib/layout/helpers/components'
 import { HorizontalDirection } from '~~/lib/common/composables/window'
-import { Roles } from '@speckle/shared'
 import { useMixpanel } from '~/lib/core/composables/mp'
 import { getRoleLabel } from '~~/lib/settings/helpers/utils'
 
@@ -171,7 +170,9 @@ const { result: searchResult, loading: searchResultLoading } = useQuery(
   () => ({
     filter: {
       search: search.value,
-      role: roleFilter.value
+      roles: roleFilter.value
+        ? [roleFilter.value]
+        : [Roles.Workspace.Admin, Roles.Workspace.Member]
     },
     workspaceId: props.workspaceId
   }),
@@ -197,10 +198,12 @@ const members = computed(() => {
     search.value.length || roleFilter.value
       ? searchResult.value?.workspace?.team.items
       : props.workspace?.team.items
-  return (memberArray || []).map(({ user, ...rest }) => ({
-    ...user,
-    ...rest
-  }))
+  return (memberArray || [])
+    .map(({ user, ...rest }) => ({
+      ...user,
+      ...rest
+    }))
+    .filter((user) => user.role !== Roles.Workspace.Guest)
 })
 
 const isWorkspaceAdmin = computed(() => props.workspace?.role === Roles.Workspace.Admin)

packages/frontend-2/components/workspace/InviteDialog.vue

@@ -94,6 +94,7 @@ graphql(`
         id
         user {
           id
+          role
         }
       }
     }

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

@@ -115,7 +115,7 @@ const documents = {
     "\n  fragment SettingsWorkspaceGeneralDeleteDialog_Workspace on Workspace {\n    id\n    name\n  }\n": types.SettingsWorkspaceGeneralDeleteDialog_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesGeneralEditAvatar_Workspace on Workspace {\n    id\n    logo\n    name\n    defaultLogoIndex\n  }\n": types.SettingsWorkspacesGeneralEditAvatar_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesGeneralEditSlugDialog_Workspace on Workspace {\n    id\n    name\n    slug\n  }\n": types.SettingsWorkspacesGeneralEditSlugDialog_WorkspaceFragmentDoc,
-    "\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n": types.SettingsWorkspacesMembers_WorkspaceFragmentDoc,
+    "\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n    team {\n      items {\n        id\n        role\n      }\n    }\n    invitedTeam(filter: $invitesFilter) {\n      user {\n        id\n      }\n    }\n  }\n": types.SettingsWorkspacesMembers_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesProjects_ProjectCollection on ProjectCollection {\n    totalCount\n    items {\n      ...SettingsSharedProjects_Project\n    }\n  }\n": types.SettingsWorkspacesProjects_ProjectCollectionFragmentDoc,
     "\n  fragment SettingsWorkspacesSecurity_Workspace on Workspace {\n    id\n    domains {\n      id\n      domain\n      ...SettingsWorkspacesSecurityDomainRemoveDialog_WorkspaceDomain\n    }\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    ...SettingsWorkspacesSecuritySso_Workspace\n  }\n\n  fragment SettingsWorkspacesSecurity_User on User {\n    id\n    emails {\n      id\n      email\n      verified\n    }\n  }\n": types.SettingsWorkspacesSecurity_WorkspaceFragmentDoc,
     "\n  fragment SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator on WorkspaceCollaborator {\n    id\n    role\n    user {\n      id\n      avatar\n      name\n      company\n      verified\n    }\n    projectRoles {\n      role\n      project {\n        id\n        name\n      }\n    }\n  }\n": types.SettingsWorkspacesMembersGuestsTable_WorkspaceCollaboratorFragmentDoc,
@@ -765,7 +765,7 @@ export function graphql(source: "\n  fragment SettingsWorkspacesGeneralEditSlugD
 /**
  * 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 SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n  }\n"];
+export function graphql(source: "\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n    team {\n      items {\n        id\n        role\n      }\n    }\n    invitedTeam(filter: $invitesFilter) {\n      user {\n        id\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment SettingsWorkspacesMembers_Workspace on Workspace {\n    id\n    role\n    team {\n      items {\n        id\n        role\n      }\n    }\n    invitedTeam(filter: $invitesFilter) {\n      user {\n        id\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */