Fix: Disable workspace menu items (#4068)

packages/frontend-2/components/settings/Sidebar.vue

@@ -93,7 +93,13 @@
               <NuxtLink
                 v-for="workspaceMenuItem in workspaceMenuItems"
                 :key="`workspace-menu-item-${workspaceMenuItem.name}-${workspaceItem.slug}`"
-                :to="workspaceMenuItem.route(workspaceItem.slug)"
+                :to="
+                  !isAdmin &&
+                  (workspaceMenuItem.disabled ||
+                    needsSsoSession(workspaceItem, workspaceMenuItem.name))
+                    ? undefined
+                    : workspaceMenuItem.route(workspaceItem.slug)
+                "
                 @click="isOpenMobile = false"
               >
                 <LayoutSidebarMenuGroupItem
@@ -117,13 +123,6 @@
                 />
               </NuxtLink>
             </LayoutSidebarMenuGroup>
-            <NuxtLink v-if="!isGuest" :to="workspacesRoute">
-              <LayoutSidebarMenuGroupItem label="Create workspace">
-                <template #icon>
-                  <PlusIcon class="h-4 w-4 text-foreground-2" />
-                </template>
-              </LayoutSidebarMenuGroupItem>
-            </NuxtLink>
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>
       </LayoutSidebar>
@@ -132,11 +131,10 @@
 </template>
 
 <script setup lang="ts">
-import { Roles } from '@speckle/shared'
 import { useIsWorkspacesEnabled } from '~/composables/globals'
 import { useQuery } from '@vue/apollo-composable'
 import { settingsSidebarQuery } from '~/lib/settings/graphql/queries'
-import { PlusIcon, ChevronLeftIcon } from '@heroicons/vue/24/outline'
+import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
 import { useActiveUser } from '~/lib/auth/composables/activeUser'
 import { useSettingsMenu, useSettingsMenuState } from '~/lib/settings/composables/menu'
 import {
@@ -146,11 +144,7 @@ import {
 } from '@speckle/ui-components'
 import { graphql } from '~~/lib/common/generated/gql'
 import type { WorkspaceRoles } from '@speckle/shared'
-import {
-  workspacesRoute,
-  homeRoute,
-  settingsWorkspaceRoutes
-} from '~/lib/common/helpers/route'
+import { homeRoute, settingsWorkspaceRoutes } from '~/lib/common/helpers/route'
 import {
   WorkspacePlanStatuses,
   type SettingsMenu_WorkspaceFragment
@@ -187,7 +181,7 @@ graphql(`
 `)
 
 const settingsMenuState = useSettingsMenuState()
-const { activeUser: user } = useActiveUser()
+const { isAdmin } = useActiveUser()
 const route = useRoute()
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
 const { result: workspaceResult } = useQuery(settingsSidebarQuery, null, {
@@ -206,8 +200,6 @@ const workspaceItems = computed(
       (item) => item.creationState?.completed !== false // Removed workspaces that are not completely created
     ) || []
 )
-const isAdmin = computed(() => user.value?.role === Roles.Server.Admin)
-const isGuest = computed(() => user.value?.role === Roles.Server.Guest)
 
 const needsSsoSession = (
   workspace: SettingsMenu_WorkspaceFragment,

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

@@ -938,6 +938,18 @@ export type DiscoverableStreamsSortingInput = {
   type: DiscoverableStreamsSortType;
 };
 
+export type DiscoverableWorkspaceCollaborator = {
+  __typename?: 'DiscoverableWorkspaceCollaborator';
+  avatar?: Maybe<Scalars['String']['output']>;
+};
+
+export type DiscoverableWorkspaceCollaboratorCollection = {
+  __typename?: 'DiscoverableWorkspaceCollaboratorCollection';
+  cursor?: Maybe<Scalars['String']['output']>;
+  items: Array<DiscoverableWorkspaceCollaborator>;
+  totalCount: Scalars['Int']['output'];
+};
+
 export type EditCommentInput = {
   commentId: Scalars['String']['input'];
   content: CommentContentInput;
@@ -1151,6 +1163,15 @@ export type LimitedWorkspace = {
   name: Scalars['String']['output'];
   /** Unique workspace short id. Used for navigation. */
   slug: Scalars['String']['output'];
+  /** Workspace members visible to people with verified email domain */
+  team?: Maybe<DiscoverableWorkspaceCollaboratorCollection>;
+};
+
+
+/** Workspace metadata visible to non-workspace members. */
+export type LimitedWorkspaceTeamArgs = {
+  cursor?: InputMaybe<Scalars['String']['input']>;
+  limit?: Scalars['Int']['input'];
 };
 
 export type LimitedWorkspaceJoinRequest = {
@@ -7016,6 +7037,8 @@ export type AllObjectTypes = {
   Commit: Commit,
   CommitCollection: CommitCollection,
   CountOnlyCollection: CountOnlyCollection,
+  DiscoverableWorkspaceCollaborator: DiscoverableWorkspaceCollaborator,
+  DiscoverableWorkspaceCollaboratorCollection: DiscoverableWorkspaceCollaboratorCollection,
   FileUpload: FileUpload,
   GendoAIRender: GendoAiRender,
   GendoAIRenderCollection: GendoAiRenderCollection,
@@ -7437,6 +7460,14 @@ export type CommitCollectionFieldArgs = {
 export type CountOnlyCollectionFieldArgs = {
   totalCount: {},
 }
+export type DiscoverableWorkspaceCollaboratorFieldArgs = {
+  avatar: {},
+}
+export type DiscoverableWorkspaceCollaboratorCollectionFieldArgs = {
+  cursor: {},
+  items: {},
+  totalCount: {},
+}
 export type FileUploadFieldArgs = {
   branchName: {},
   convertedCommitId: {},
@@ -7504,6 +7535,7 @@ export type LimitedWorkspaceFieldArgs = {
   logo: {},
   name: {},
   slug: {},
+  team: LimitedWorkspaceTeamArgs,
 }
 export type LimitedWorkspaceJoinRequestFieldArgs = {
   createdAt: {},
@@ -8439,6 +8471,8 @@ export type AllObjectFieldArgTypes = {
   Commit: CommitFieldArgs,
   CommitCollection: CommitCollectionFieldArgs,
   CountOnlyCollection: CountOnlyCollectionFieldArgs,
+  DiscoverableWorkspaceCollaborator: DiscoverableWorkspaceCollaboratorFieldArgs,
+  DiscoverableWorkspaceCollaboratorCollection: DiscoverableWorkspaceCollaboratorCollectionFieldArgs,
   FileUpload: FileUploadFieldArgs,
   GendoAIRender: GendoAiRenderFieldArgs,
   GendoAIRenderCollection: GendoAiRenderCollectionFieldArgs,

packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue

@@ -6,6 +6,7 @@
     class="group/item flex items-center justify-between space-x-2 shrink-0 text-body-xs text-foreground select-none rounded-md w-full py-1"
     :class="[
       !disabled && 'cursor-pointer hover:bg-highlight-1',
+      disabled && 'cursor-not-allowed',
       active && 'bg-highlight-3 hover:!bg-highlight-3',
       $slots.icon ? 'pl-1 pr-2' : 'pr-2 pl-7',
       extraPadding && '!pl-14'