Merge branch 'main' into iain/github-action-test-fe2

packages/frontend-2/components/auth/LoginPanel.vue

@@ -32,7 +32,7 @@
         <AuthLoginWithEmailBlock
           v-if="hasLocalStrategy"
           :challenge="challenge"
-          :workspace-invite="result?.workspaceInvite || undefined"
+          :workspace-invite="workspaceInvite || undefined"
         />
         <div v-if="!forcedInviteEmail" class="text-center text-body-sm">
           <span class="mr-2">Don't have an account?</span>
@@ -52,7 +52,10 @@ import { useLoginOrRegisterUtils, useAuthManager } from '~~/lib/auth/composables
 import { LayoutDialog } from '@speckle/ui-components'
 import { ArrowRightIcon } from '@heroicons/vue/20/solid'
 import { registerRoute } from '~~/lib/common/helpers/route'
-import { authLoginPanelQuery } from '~/lib/auth/graphql/queries'
+import {
+  authLoginPanelQuery,
+  authLoginPanelWorkspaceInviteQuery
+} from '~/lib/auth/graphql/queries'
 
 const props = withDefaults(
   defineProps<{
@@ -71,9 +74,19 @@ const { appId, challenge } = useLoginOrRegisterUtils()
 const { isLoggedIn } = useActiveUser()
 const { inviteToken } = useAuthManager()
 const router = useRouter()
-const { result } = useQuery(authLoginPanelQuery, () => ({
-  token: inviteToken.value
-}))
+const isWorkspacesEnabled = useIsWorkspacesEnabled()
+
+const { result } = useQuery(authLoginPanelQuery)
+
+const { result: workspaceInviteResult } = useQuery(
+  authLoginPanelWorkspaceInviteQuery,
+  () => ({
+    token: inviteToken.value
+  }),
+  () => ({
+    enabled: isWorkspacesEnabled.value
+  })
+)
 
 const finalRegisterRoute = computed(() => {
   const result = router.resolve({
@@ -87,7 +100,7 @@ const concreteComponent = computed(() => {
   return props.dialogMode ? LayoutDialog : 'div'
 })
 
-const workspaceInvite = computed(() => result.value?.workspaceInvite)
+const workspaceInvite = computed(() => workspaceInviteResult.value?.workspaceInvite)
 const forcedInviteEmail = computed(() => workspaceInvite.value?.email)
 
 const serverInfo = computed(() => result.value?.serverInfo)

packages/frontend-2/components/auth/RegisterPanel.vue

@@ -72,17 +72,32 @@ const registerPanelQuery = graphql(`
       id
       email
     }
+  }
+`)
+
+const registerPanelWorkspaceInviteQuery = graphql(`
+  query AuthRegisterPanelWorkspaceInvite($token: String) {
     workspaceInvite(token: $token) {
       id
       ...AuthWorkspaceInviteHeader_PendingWorkspaceCollaborator
     }
   }
 `)
 
+const isWorkspacesEnabled = useIsWorkspacesEnabled()
 const { appId, challenge, inviteToken } = useLoginOrRegisterUtils()
 const { result } = useQuery(registerPanelQuery, () => ({
   token: inviteToken.value
 }))
+const { result: workspaceInviteResult } = useQuery(
+  registerPanelWorkspaceInviteQuery,
+  () => ({
+    token: inviteToken.value
+  }),
+  () => ({
+    enabled: isWorkspacesEnabled.value
+  })
+)
 
 const newsletterConsent = ref(false)
 
@@ -97,5 +112,5 @@ const hasThirdPartyStrategies = computed(() =>
 )
 
 const isInviteOnly = computed(() => !!serverInfo.value?.inviteOnly)
-const workspaceInvite = computed(() => result.value?.workspaceInvite)
+const workspaceInvite = computed(() => workspaceInviteResult.value?.workspaceInvite)
 </script>

packages/frontend-2/components/auth/WorkspaceInviteHeader.vue

@@ -4,13 +4,13 @@
     <div class="p-4 border border-outline-2 rounded text-body-xs">
       You're accepting an invitation to join
       <span class="font-semibold">{{ invite.workspaceName }}</span>
+      <!-- prettier-ignore -->
       <template v-if="invite.user">
         as
         <div class="inline-flex items-center">
           <UserAvatar :user="invite.user" size="sm" class="mr-1" />
           <span class="font-semibold">{{ invite.user.name }}</span>
-        </div>
-        .
+        </div>.
       </template>
       <template v-else>
         using the

packages/frontend-2/components/projects/Dashboard.vue

@@ -2,7 +2,8 @@
   <div>
     <Portal to="primary-actions"></Portal>
     <ProjectsDashboardHeader
-      :user="projectsPanelResult?.activeUser || undefined"
+      :projects-invites="projectsPanelResult?.activeUser || undefined"
+      :workspaces-invites="workspacesInvitesResult?.activeUser || undefined"
       class="mb-10"
     />
 
@@ -61,7 +62,10 @@ import {
   useQueryLoading,
   useSubscription
 } from '@vue/apollo-composable'
-import { projectsDashboardQuery } from '~~/lib/projects/graphql/queries'
+import {
+  projectsDashboardQuery,
+  projectsDashboardWorkspaceInvitesQuery
+} from '~~/lib/projects/graphql/queries'
 import { graphql } from '~~/lib/common/generated/gql'
 import {
   getCacheId,
@@ -88,6 +92,7 @@ const { activeUser, isGuest } = useActiveUser()
 const { triggerNotification } = useGlobalToast()
 const areQueriesLoading = useQueryLoading()
 const apollo = useApolloClient().client
+const isWorkspacesEnabled = useIsWorkspacesEnabled()
 
 const {
   on,
@@ -109,6 +114,14 @@ const {
   }
 }))
 
+const { result: workspacesInvitesResult } = useQuery(
+  projectsDashboardWorkspaceInvitesQuery,
+  undefined,
+  () => ({
+    enabled: isWorkspacesEnabled.value
+  })
+)
+
 onProjectsResult((res) => {
   cursor.value = res.data?.activeUser?.projects.cursor || null
   infiniteLoaderId.value = JSON.stringify(projectsVariables.value?.filter || {})

packages/frontend-2/components/projects/DashboardHeader.vue

@@ -6,8 +6,14 @@
       <div v-if="showChecklist">
         <OnboardingChecklistV1 show-intro />
       </div>
-      <ProjectsInviteBanners v-if="user?.projectInvites?.length" :invites="user" />
-      <WorkspaceInviteBanners v-if="user?.workspaceInvites?.length" :invites="user" />
+      <ProjectsInviteBanners
+        v-if="projectsInvites?.projectInvites?.length"
+        :invites="projectsInvites"
+      />
+      <WorkspaceInviteBanners
+        v-if="workspacesInvites?.workspaceInvites?.length"
+        :invites="workspacesInvites"
+      />
       <ProjectsNewSpeckleBanner
         v-if="showNewSpeckleBanner"
         @dismissed="onDismissNewSpeckleBanner"
@@ -19,18 +25,27 @@
 <script setup lang="ts">
 import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
 import { graphql } from '~/lib/common/generated/gql'
-import type { ProjectsDashboardHeader_UserFragment } from '~/lib/common/generated/gql/graphql'
+import type {
+  ProjectsDashboardHeaderProjects_UserFragment,
+  ProjectsDashboardHeaderWorkspaces_UserFragment
+} from '~/lib/common/generated/gql/graphql'
 import type { PromoBanner } from '~/lib/promo-banners/types'
 
 graphql(`
-  fragment ProjectsDashboardHeader_User on User {
+  fragment ProjectsDashboardHeaderProjects_User on User {
     ...ProjectsInviteBanners
+  }
+`)
+
+graphql(`
+  fragment ProjectsDashboardHeaderWorkspaces_User on User {
     ...WorkspaceInviteBanners_User
   }
 `)
 
 const props = defineProps<{
-  user?: ProjectsDashboardHeader_UserFragment
+  projectsInvites?: ProjectsDashboardHeaderProjects_UserFragment
+  workspacesInvites?: ProjectsDashboardHeaderWorkspaces_UserFragment
 }>()
 
 const promoBanners = ref<PromoBanner[]>([
@@ -89,7 +104,10 @@ const showChecklist = computed(() => {
 
 const showNewSpeckleBanner = computed(() => {
   if (hasDismissedNewSpeckleBanner.value) return false
-  if (props.user?.projectInvites.length || props.user?.workspaceInvites?.length)
+  if (
+    props.projectsInvites?.projectInvites.length ||
+    props.workspacesInvites?.workspaceInvites?.length
+  )
     return false
 
   return true

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

@@ -13,7 +13,11 @@
             :workspace="workspace"
             :workspace-id="workspaceId"
           />
-          <div v-if="activeItem.id === 'guests'">Guests</div>
+          <SettingsWorkspacesMembersGuestsTable
+            v-if="activeItem.id === 'guests'"
+            :workspace="workspace"
+            :workspace-id="workspaceId"
+          />
           <SettingsWorkspacesMembersInvitesTable
             v-if="activeItem.id === 'invites'"
             :workspace-id="workspaceId"

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

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <SettingsWorkspacesMembersTableHeader
+      search-placeholder="Search guests..."
+      :workspace-id="workspaceId"
+      :workspace="workspace"
+    />
+    <LayoutTable
+      class="mt-6 md:mt-8"
+      :columns="[
+        { id: 'name', header: 'Name', classes: 'col-span-3' },
+        { id: 'company', header: 'Company', classes: 'col-span-3' },
+        { id: 'verified', header: 'Status', classes: 'col-span-3' }
+      ]"
+      :items="guests"
+    >
+      <template #name="{ item }">
+        <div class="flex items-center gap-2">
+          <UserAvatar :user="item" />
+          <span class="truncate text-body-xs text-foreground">{{ item.name }}</span>
+        </div>
+      </template>
+      <template #company="{ item }">
+        <span class="text-body-xs text-foreground">
+          {{ item.company ? item.company : '-' }}
+        </span>
+      </template>
+      <template #verified="{ item }">
+        <span class="text-body-xs text-foreground-2">
+          {{ item.verified ? 'Verified' : 'Unverified' }}
+        </span>
+      </template>
+    </LayoutTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Todo: Enable searching once supported
+import type { SettingsWorkspacesMembersMembersTable_WorkspaceFragment } from '~~/lib/common/generated/gql/graphql'
+import { graphql } from '~/lib/common/generated/gql'
+import { Roles } from '@speckle/shared'
+
+graphql(`
+  fragment SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator on WorkspaceCollaborator {
+    id
+    role
+    user {
+      id
+      avatar
+      name
+      company
+      verified
+    }
+  }
+`)
+
+graphql(`
+  fragment SettingsWorkspacesMembersGuestsTable_Workspace on Workspace {
+    id
+    ...SettingsWorkspacesMembersTableHeader_Workspace
+    team {
+      id
+      ...SettingsWorkspacesMembersGuestsTable_WorkspaceCollaborator
+    }
+  }
+`)
+
+const props = defineProps<{
+  workspace?: SettingsWorkspacesMembersMembersTable_WorkspaceFragment
+  workspaceId: string
+}>()
+
+const guests = computed(() =>
+  (props.workspace?.team || [])
+    .filter(({ role }) => role === Roles.Workspace.Guest)
+    .map(({ user, ...rest }) => ({
+      ...user,
+      ...rest
+    }))
+)
+</script>