refactor(fe2): Update queries to use workspaceBySlug (#3177)

* Use workspaceBySlug * workspace invite support slug * fix workspace invite email link * added tests * Update workspaceInvite query to use new option * useSlug directly in query --------- Co-authored-by: Fabis <[email protected]>
specklesystems · Oct 2, 2024 · ebef771 · ebef771
1 parent 378373a
commit ebef771
Show file tree

Hide file tree

Showing 15 changed files with 165 additions and 90 deletions.
diff --git a/packages/frontend-2/components/error/page/WorkspaceAccessErrorBlock.vue b/packages/frontend-2/components/error/page/WorkspaceAccessErrorBlock.vue
@@ -13,16 +13,19 @@ const route = useRoute()
 const logger = useLogger()
 
 const token = computed(() => route.query.token as Optional<string>)
-const workspaceId = computed(() => route.params.id as Optional<string>)
+const workspaceSlug = computed(() => route.params.slug as Optional<string>)
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
 
 const { result } = useQuery(
   workspaceInviteQuery,
   () => ({
-    workspaceId: workspaceId.value,
-    token: token.value
+    workspaceId: workspaceSlug.value,
+    token: token.value,
+    options: {
+      useSlug: true
+    }
   }),
-  () => ({ enabled: !!(workspaceId.value && isWorkspacesEnabled.value) })
+  () => ({ enabled: !!(workspaceSlug.value && isWorkspacesEnabled.value) })
 )
 
 const invite = computed(() => result.value?.workspaceInvite)

diff --git a/packages/frontend-2/components/workspace/ProjectList.vue b/packages/frontend-2/components/workspace/ProjectList.vue
@@ -65,7 +65,7 @@
 
       <CommonEmptySearchState v-else-if="!showLoadingBar" @clear-search="clearSearch" />
 
-      <ProjectsAddDialog v-model:open="openNewProject" :workspace-id="workspaceId" />
+      <ProjectsAddDialog v-model:open="openNewProject" :workspace-id="workspace?.id" />
 
       <template v-if="workspace">
         <WorkspaceInviteDialog
@@ -89,7 +89,7 @@
 
 <script setup lang="ts">
 import { MagnifyingGlassIcon, Squares2X2Icon } from '@heroicons/vue/24/outline'
-import { useQuery, useQueryLoading, useApolloClient } from '@vue/apollo-composable'
+import { useQuery, useQueryLoading } from '@vue/apollo-composable'
 import type { Optional, StreamRoles } from '@speckle/shared'
 import {
   workspacePageQuery,
@@ -98,18 +98,14 @@ import {
 import { useDebouncedTextInput } from '@speckle/ui-components'
 import { usePaginatedQuery } from '~/lib/common/composables/graphql'
 import { graphql } from '~~/lib/common/generated/gql'
-import type {
-  WorkspaceProjectList_ProjectCollectionFragment,
-  WorkspaceProjectsQueryQueryVariables
-} from '~~/lib/common/generated/gql/graphql'
+import type { WorkspaceProjectsQueryQueryVariables } from '~~/lib/common/generated/gql/graphql'
 import { workspaceRoute } from '~/lib/common/helpers/route'
 import { Roles } from '@speckle/shared'
 import { useWorkspacesMixpanel } from '~/lib/workspaces/composables/mixpanel'
 import {
   SettingMenuKeys,
   type AvailableSettingsMenuKeys
 } from '~/lib/settings/helpers/types'
-import { workspaceAccessCheckQuery } from '~/lib/workspaces/graphql/queries'
 
 graphql(`
   fragment WorkspaceProjectList_ProjectCollection on ProjectCollection {
@@ -124,7 +120,6 @@ graphql(`
 const { workspaceMixpanelUpdateGroup } = useWorkspacesMixpanel()
 const areQueriesLoading = useQueryLoading()
 const route = useRoute()
-const { client } = useApolloClient()
 const {
   on,
   bind,
@@ -140,7 +135,6 @@ const props = defineProps<{
 const showMoveProjectsDialog = ref(false)
 const selectedRoles = ref(undefined as Optional<StreamRoles[]>)
 const openNewProject = ref(false)
-const workspaceId = ref<string | undefined>(undefined)
 const showInviteDialog = ref(false)
 const showSettingsDialog = ref(false)
 const settingsDialogTarget = ref<AvailableSettingsMenuKeys>(
@@ -154,7 +148,7 @@ const pageFetchPolicy = usePageQueryStandardFetchPolicy()
 const { result: initialQueryResult, onResult } = useQuery(
   workspacePageQuery,
   () => ({
-    workspaceId: workspaceId.value as string,
+    workspaceSlug: props.workspaceSlug,
     filter: {
       search: (search.value || '').trim() || null
     },
@@ -165,33 +159,30 @@ const { result: initialQueryResult, onResult } = useQuery(
   })
 )
 
-const { query, identifier, onInfiniteLoad } = usePaginatedQuery<
-  { workspace: { projects: WorkspaceProjectList_ProjectCollectionFragment } },
-  WorkspaceProjectsQueryQueryVariables
->({
+const { query, identifier, onInfiniteLoad } = usePaginatedQuery({
   query: workspaceProjectsQuery,
   baseVariables: computed(() => ({
-    workspaceId: workspaceId.value as string,
+    workspaceSlug: props.workspaceSlug,
     filter: {
       search: (search.value || '').trim() || null
     }
   })),
   resolveKey: (vars: WorkspaceProjectsQueryQueryVariables) => ({
-    workspaceId: vars.workspaceId,
+    workspaceSlug: vars.workspaceSlug,
     search: vars.filter?.search || ''
   }),
-  resolveInitialResult: () => initialQueryResult.value?.workspace.projects,
-  resolveCurrentResult: (result) => result?.workspace?.projects,
+  resolveInitialResult: () => initialQueryResult.value?.workspaceBySlug.projects,
+  resolveCurrentResult: (result) => result?.workspaceBySlug?.projects,
   resolveNextPageVariables: (baseVariables, newCursor) => ({
     ...baseVariables,
     cursor: newCursor
   }),
   resolveCursorFromVariables: (vars) => vars.cursor
 })
 
-const projects = computed(() => query.result.value?.workspace?.projects)
+const projects = computed(() => query.result.value?.workspaceBySlug?.projects)
 const workspaceInvite = computed(() => initialQueryResult.value?.workspaceInvite)
-const workspace = computed(() => initialQueryResult.value?.workspace)
+const workspace = computed(() => initialQueryResult.value?.workspaceBySlug)
 const isWorkspaceGuest = computed(() => workspace.value?.role === Roles.Workspace.Guest)
 const showEmptyState = computed(() => {
   if (search.value) return false
@@ -201,9 +192,7 @@ const showEmptyState = computed(() => {
 
 const showLoadingBar = computed(() => {
   const isLoading =
-    workspaceId.value === undefined ||
-    areQueriesLoading.value ||
-    (!!search.value && !projects.value?.items?.length)
+    areQueriesLoading.value || (!!search.value && !projects.value?.items?.length)
 
   return isLoading
 })
@@ -247,13 +236,6 @@ const emptyStateItems = computed(() => [
   }
 ])
 
-const cachedData = computed(() =>
-  client.readQuery({
-    query: workspaceAccessCheckQuery,
-    variables: { slug: props.workspaceSlug }
-  })
-)
-
 const clearSearch = () => {
   search.value = ''
   selectedRoles.value = []
@@ -264,19 +246,9 @@ const onShowSettingsDialog = (target: AvailableSettingsMenuKeys) => {
   settingsDialogTarget.value = target
 }
 
-watch(
-  cachedData,
-  (newCachedData) => {
-    if (newCachedData?.workspaceBySlug?.id) {
-      workspaceId.value = newCachedData.workspaceBySlug.id
-    }
-  },
-  { immediate: true }
-)
-
 onResult((queryResult) => {
-  if (queryResult.data?.workspace) {
-    workspaceMixpanelUpdateGroup(queryResult.data.workspace)
+  if (queryResult.data?.workspaceBySlug) {
+    workspaceMixpanelUpdateGroup(queryResult.data.workspaceBySlug)
   }
 })
 </script>
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -318,14 +318,14 @@ const documents = {
     "\n  mutation CreateWorkspace($input: WorkspaceCreateInput!) {\n    workspaceMutations {\n      create(input: $input) {\n        id\n        ...SettingsDialog_Workspace\n      }\n    }\n  }\n": types.CreateWorkspaceDocument,
     "\n  mutation ProcessWorkspaceInvite($input: WorkspaceInviteUseInput!) {\n    workspaceMutations {\n      invites {\n        use(input: $input)\n      }\n    }\n  }\n": types.ProcessWorkspaceInviteDocument,
     "\n  query WorkspaceAccessCheck($slug: String!) {\n    workspaceBySlug(slug: $slug) {\n      id\n    }\n  }\n": types.WorkspaceAccessCheckDocument,
-    "\n  query WorkspacePageQuery(\n    $workspaceId: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n    $invitesFilter: PendingWorkspaceCollaboratorsFilter\n    $token: String\n  ) {\n    workspace(id: $workspaceId) {\n      id\n      ...WorkspaceHeader_Workspace\n      ...WorkspaceMixpanelUpdateGroup_Workspace\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n    workspaceInvite(workspaceId: $workspaceId, token: $token) {\n      id\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n": types.WorkspacePageQueryDocument,
-    "\n  query WorkspaceProjectsQuery(\n    $workspaceId: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n  ) {\n    workspace(id: $workspaceId) {\n      id\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n  }\n": types.WorkspaceProjectsQueryDocument,
-    "\n  query WorkspaceInvite($workspaceId: String, $token: String) {\n    workspaceInvite(workspaceId: $workspaceId, token: $token) {\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n": types.WorkspaceInviteDocument,
+    "\n  query WorkspacePageQuery(\n    $workspaceSlug: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n    $invitesFilter: PendingWorkspaceCollaboratorsFilter\n    $token: String\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      ...WorkspaceHeader_Workspace\n      ...WorkspaceMixpanelUpdateGroup_Workspace\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n    workspaceInvite(\n      workspaceId: $workspaceSlug\n      token: $token\n      options: { useSlug: true }\n    ) {\n      id\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n": types.WorkspacePageQueryDocument,
+    "\n  query WorkspaceProjectsQuery(\n    $workspaceSlug: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n  }\n": types.WorkspaceProjectsQueryDocument,
+    "\n  query WorkspaceInvite(\n    $workspaceId: String\n    $token: String\n    $options: WorkspaceInviteLookupOptions\n  ) {\n    workspaceInvite(workspaceId: $workspaceId, token: $token, options: $options) {\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n": types.WorkspaceInviteDocument,
     "\n  query MoveProjectsDialog {\n    activeUser {\n      ...MoveProjectsDialog_User\n    }\n  }\n": types.MoveProjectsDialogDocument,
     "\n  query LegacyBranchRedirectMetadata($streamId: String!, $branchName: String!) {\n    project(id: $streamId) {\n      modelByName(name: $branchName) {\n        id\n      }\n    }\n  }\n": types.LegacyBranchRedirectMetadataDocument,
     "\n  query LegacyViewerCommitRedirectMetadata($streamId: String!, $commitId: String!) {\n    project(id: $streamId) {\n      version(id: $commitId) {\n        id\n        model {\n          id\n        }\n      }\n    }\n  }\n": types.LegacyViewerCommitRedirectMetadataDocument,
     "\n  query LegacyViewerStreamRedirectMetadata($streamId: String!) {\n    project(id: $streamId) {\n      id\n      versions(limit: 1) {\n        totalCount\n        items {\n          id\n          model {\n            id\n          }\n        }\n      }\n    }\n  }\n": types.LegacyViewerStreamRedirectMetadataDocument,
-    "\n  query AutoAcceptableWorkspaceInvite($token: String!, $workspaceId: String!) {\n    workspaceInvite(token: $token, workspaceId: $workspaceId) {\n      id\n      ...UseWorkspaceInviteManager_PendingWorkspaceCollaborator\n    }\n  }\n": types.AutoAcceptableWorkspaceInviteDocument,
+    "\n  query AutoAcceptableWorkspaceInvite(\n    $token: String!\n    $workspaceId: String!\n    $options: WorkspaceInviteLookupOptions\n  ) {\n    workspaceInvite(token: $token, workspaceId: $workspaceId, options: $options) {\n      id\n      ...UseWorkspaceInviteManager_PendingWorkspaceCollaborator\n    }\n  }\n": types.AutoAcceptableWorkspaceInviteDocument,
     "\n  query ResolveCommentLink($commentId: String!, $projectId: String!) {\n    project(id: $projectId) {\n      comment(id: $commentId) {\n        id\n        ...LinkableComment\n      }\n    }\n  }\n": types.ResolveCommentLinkDocument,
     "\n  fragment AutomateFunctionPage_AutomateFunction on AutomateFunction {\n    id\n    name\n    description\n    logo\n    supportedSourceApps\n    tags\n    ...AutomateFunctionPageHeader_Function\n    ...AutomateFunctionPageInfo_AutomateFunction\n    ...AutomateAutomationCreateDialog_AutomateFunction\n    creator {\n      id\n    }\n  }\n": types.AutomateFunctionPage_AutomateFunctionFragmentDoc,
     "\n  query AutomateFunctionPage($functionId: ID!) {\n    automateFunction(id: $functionId) {\n      ...AutomateFunctionPage_AutomateFunction\n    }\n  }\n": types.AutomateFunctionPageDocument,
@@ -1573,15 +1573,15 @@ export function graphql(source: "\n  query WorkspaceAccessCheck($slug: String!)
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query WorkspacePageQuery(\n    $workspaceId: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n    $invitesFilter: PendingWorkspaceCollaboratorsFilter\n    $token: String\n  ) {\n    workspace(id: $workspaceId) {\n      id\n      ...WorkspaceHeader_Workspace\n      ...WorkspaceMixpanelUpdateGroup_Workspace\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n    workspaceInvite(workspaceId: $workspaceId, token: $token) {\n      id\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"): (typeof documents)["\n  query WorkspacePageQuery(\n    $workspaceId: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n    $invitesFilter: PendingWorkspaceCollaboratorsFilter\n    $token: String\n  ) {\n    workspace(id: $workspaceId) {\n      id\n      ...WorkspaceHeader_Workspace\n      ...WorkspaceMixpanelUpdateGroup_Workspace\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n    workspaceInvite(workspaceId: $workspaceId, token: $token) {\n      id\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"];
+export function graphql(source: "\n  query WorkspacePageQuery(\n    $workspaceSlug: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n    $invitesFilter: PendingWorkspaceCollaboratorsFilter\n    $token: String\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      ...WorkspaceHeader_Workspace\n      ...WorkspaceMixpanelUpdateGroup_Workspace\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n    workspaceInvite(\n      workspaceId: $workspaceSlug\n      token: $token\n      options: { useSlug: true }\n    ) {\n      id\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"): (typeof documents)["\n  query WorkspacePageQuery(\n    $workspaceSlug: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n    $invitesFilter: PendingWorkspaceCollaboratorsFilter\n    $token: String\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      ...WorkspaceHeader_Workspace\n      ...WorkspaceMixpanelUpdateGroup_Workspace\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n    workspaceInvite(\n      workspaceId: $workspaceSlug\n      token: $token\n      options: { useSlug: true }\n    ) {\n      id\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query WorkspaceProjectsQuery(\n    $workspaceId: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n  ) {\n    workspace(id: $workspaceId) {\n      id\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceProjectsQuery(\n    $workspaceId: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n  ) {\n    workspace(id: $workspaceId) {\n      id\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query WorkspaceProjectsQuery(\n    $workspaceSlug: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceProjectsQuery(\n    $workspaceSlug: String!\n    $filter: WorkspaceProjectsFilter\n    $cursor: String\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      projects(filter: $filter, cursor: $cursor, limit: 10) {\n        ...WorkspaceProjectList_ProjectCollection\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query WorkspaceInvite($workspaceId: String, $token: String) {\n    workspaceInvite(workspaceId: $workspaceId, token: $token) {\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceInvite($workspaceId: String, $token: String) {\n    workspaceInvite(workspaceId: $workspaceId, token: $token) {\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"];
+export function graphql(source: "\n  query WorkspaceInvite(\n    $workspaceId: String\n    $token: String\n    $options: WorkspaceInviteLookupOptions\n  ) {\n    workspaceInvite(workspaceId: $workspaceId, token: $token, options: $options) {\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceInvite(\n    $workspaceId: String\n    $token: String\n    $options: WorkspaceInviteLookupOptions\n  ) {\n    workspaceInvite(workspaceId: $workspaceId, token: $token, options: $options) {\n      ...WorkspaceInviteBanner_PendingWorkspaceCollaborator\n      ...WorkspaceInviteBlock_PendingWorkspaceCollaborator\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -1601,7 +1601,7 @@ export function graphql(source: "\n  query LegacyViewerStreamRedirectMetadata($s
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query AutoAcceptableWorkspaceInvite($token: String!, $workspaceId: String!) {\n    workspaceInvite(token: $token, workspaceId: $workspaceId) {\n      id\n      ...UseWorkspaceInviteManager_PendingWorkspaceCollaborator\n    }\n  }\n"): (typeof documents)["\n  query AutoAcceptableWorkspaceInvite($token: String!, $workspaceId: String!) {\n    workspaceInvite(token: $token, workspaceId: $workspaceId) {\n      id\n      ...UseWorkspaceInviteManager_PendingWorkspaceCollaborator\n    }\n  }\n"];
+export function graphql(source: "\n  query AutoAcceptableWorkspaceInvite(\n    $token: String!\n    $workspaceId: String!\n    $options: WorkspaceInviteLookupOptions\n  ) {\n    workspaceInvite(token: $token, workspaceId: $workspaceId, options: $options) {\n      id\n      ...UseWorkspaceInviteManager_PendingWorkspaceCollaborator\n    }\n  }\n"): (typeof documents)["\n  query AutoAcceptableWorkspaceInvite(\n    $token: String!\n    $workspaceId: String!\n    $options: WorkspaceInviteLookupOptions\n  ) {\n    workspaceInvite(token: $token, workspaceId: $workspaceId, options: $options) {\n      id\n      ...UseWorkspaceInviteManager_PendingWorkspaceCollaborator\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */