Feat: List dashboards on projects (#5718)

packages/frontend-2/components/dashboards/List.vue

@@ -1,19 +1,37 @@
 <template>
-  <div class="flex flex-col gap-y-6">
+  <div class="flex flex-col gap-y-6 pt-3">
-    <section class="flex items-center gap-2 justify-between">
+    <section class="flex flex-col md:flex-row md:items-center gap-2 justify-between">
-      <h1 class="text-heading-sm md:text-heading">Dashboards</h1>
+      <h1 class="text-heading-lg">Dashboards</h1>
 
-      <FormButton color="outline" @click="showCreateDashboardDialog = true">
+      <div class="flex space-x-2 items-center">
-        Add dashboard
+        <FormTextInput
-      </FormButton>
+          v-model="localSearch"
+          name="dashboardsearch"
+          :show-label="false"
+          placeholder="Search dashboards..."
+          color="foundation"
+          wrapper-classes="grow min-w-40"
+          :show-clear="localSearch !== ''"
+        />
+
+        <FormButton color="outline" @click="showCreateDashboardDialog = true">
+          Add dashboard
+        </FormButton>
+      </div>
     </section>
 
     <div
-      v-if="!isVeryFirstLoading && !result?.workspaceBySlug?.dashboards.items.length"
+      v-if="!isVeryFirstLoading && !dashboards?.items.length"
       class="flex flex-col items-center justify-center gap-y-4 mx-auto my-14"
     >
       <h2 class="text-heading-sm text-foreground-2">
-        This workspace has no dashboards yet
+        {{
+          localSearch.trim()
+            ? 'No dashboards found matching your search'
+            : props.projectId
+            ? 'This project has no dashboards yet'
+            : 'This workspace has no dashboards yet'
+        }}
       </h2>
       <FormButton
         v-if="canCreateDashboards"
@@ -24,25 +42,28 @@
       </FormButton>
     </div>
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div
+      <div v-for="dashboard in dashboards?.items" :key="dashboard.id">
-        v-for="dashboard in result?.workspaceBySlug?.dashboards.items"
+        <DashboardsCard
-        :key="dashboard.id"
+          :dashboard="dashboard"
-      >
+          :active-workspace-slug="effectiveWorkspaceSlug"
-        <DashboardsCard :dashboard="dashboard" :active-workspace-slug="workspaceSlug" />
+        />
       </div>
     </div>
     <InfiniteLoading :settings="{ identifier }" @infinite="onInfiniteLoad" />
 
     <DashboardsCreateDialog
       v-model:open="showCreateDashboardDialog"
-      :workspace-slug="workspaceSlug"
+      :workspace-slug="effectiveWorkspaceSlug"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { usePaginatedQuery } from '~/lib/common/composables/graphql'
-import { workspaceDashboardsQuery } from '~/lib/dashboards/graphql/queries'
+import {
+  workspaceDashboardsQuery,
+  projectDashboardsQuery
+} from '~/lib/dashboards/graphql/queries'
 import type { Nullable } from '@speckle/shared'
 import { graphql } from '~~/lib/common/generated/gql'
 import { useQuery } from '@vue/apollo-composable'
@@ -59,29 +80,44 @@ const canCreateDashboardsQuery = graphql(`
   }
 `)
 
+const props = defineProps<{
+  workspaceSlug?: string
+  projectId?: string
+}>()
+
 const route = useRoute()
-const workspaceSlug = computed(() => route.params.slug as string)
+
-const { result: canCreateDashboardsResult } = useQuery(
+const showCreateDashboardDialog = ref(false)
-  canCreateDashboardsQuery,
+const localSearch = ref('')
-  () => ({
+
-    slug: workspaceSlug.value
+const workspaceSlug = computed(
-  })
+  () => props.workspaceSlug || (route.params.slug as string)
 )
+
+const effectiveWorkspaceSlug = computed(() => {
+  if (props.workspaceSlug) return props.workspaceSlug
+  if (props.projectId) return projectResult.value?.project?.workspace?.slug
+  return route.params.slug as string
+})
+
 const {
-  identifier,
+  identifier: workspaceIdentifier,
-  onInfiniteLoad,
+  onInfiniteLoad: onWorkspaceInfiniteLoad,
-  isVeryFirstLoading,
+  isVeryFirstLoading: isWorkspaceLoading,
-  query: { result }
+  query: { result: workspaceResult }
 } = usePaginatedQuery({
   query: workspaceDashboardsQuery,
   options: computed(() => ({
-    enabled: !!workspaceSlug.value
+    enabled: !!props.workspaceSlug && !!workspaceSlug.value
   })),
   baseVariables: computed(() => ({
     workspaceSlug: workspaceSlug.value || '',
-    cursor: null as Nullable<string>
+    cursor: null as Nullable<string>,
+    filter: {
+      search: localSearch.value.trim() || null
+    }
   })),
-  resolveKey: () => [''],
+  resolveKey: () => ['workspace', localSearch.value],
   resolveCurrentResult: (res) =>
     res?.workspaceBySlug?.dashboards
       ? {
@@ -96,10 +132,68 @@ const {
   resolveCursorFromVariables: (vars) => vars.cursor
 })
 
-const showCreateDashboardDialog = ref(false)
+const {
-const canCreateDashboards = computed(
+  identifier: projectIdentifier,
-  () =>
+  onInfiniteLoad: onProjectInfiniteLoad,
-    canCreateDashboardsResult.value?.workspaceBySlug?.permissions?.canCreateDashboards
+  isVeryFirstLoading: isProjectLoading,
-      ?.authorized
+  query: { result: projectResult }
+} = usePaginatedQuery({
+  query: projectDashboardsQuery,
+  options: computed(() => ({
+    enabled: !!props.projectId
+  })),
+  baseVariables: computed(() => ({
+    projectId: props.projectId || '',
+    cursor: null as Nullable<string>,
+    filter: {
+      search: localSearch.value.trim() || null
+    }
+  })),
+  resolveKey: () => ['project', localSearch.value],
+  resolveCurrentResult: (res) =>
+    res?.project?.dashboards
+      ? {
+          totalCount: res.project.dashboards.items.length,
+          items: res.project.dashboards.items
+        }
+      : undefined,
+  resolveNextPageVariables: (baseVars, cursor) => ({
+    ...baseVars,
+    cursor
+  }),
+  resolveCursorFromVariables: (vars) => vars.cursor
+})
+
+const { result: canCreateDashboardsResult } = useQuery(
+  canCreateDashboardsQuery,
+  () => ({
+    slug: effectiveWorkspaceSlug.value || ''
+  }),
+  {
+    enabled: computed(() => !!effectiveWorkspaceSlug.value)
+  }
 )
+
+const dashboards = computed(() =>
+  props.workspaceSlug
+    ? workspaceResult.value?.workspaceBySlug?.dashboards
+    : projectResult.value?.project?.dashboards
+)
+
+const identifier = computed(() =>
+  props.workspaceSlug ? workspaceIdentifier.value : projectIdentifier.value
+)
+
+const isVeryFirstLoading = computed(() =>
+  props.workspaceSlug ? isWorkspaceLoading.value : isProjectLoading.value
+)
+
+const onInfiniteLoad = computed(() =>
+  props.workspaceSlug ? onWorkspaceInfiniteLoad : onProjectInfiniteLoad
+)
+
+const canCreateDashboards = computed(() => {
+  return canCreateDashboardsResult.value?.workspaceBySlug?.permissions
+    ?.canCreateDashboards?.authorized
+})
 </script>

packages/frontend-2/components/project/page/dashboards/Dashboards.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <DashboardsList :project-id="projectId" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProjectPageProjectFragment } from '~~/lib/common/generated/gql/graphql'
+
+const attrs = useAttrs() as {
+  project: ProjectPageProjectFragment
+}
+
+const projectId = computed(() => attrs.project.id)
+</script>

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

@@ -289,7 +289,8 @@ type Documents = {
     "\n  mutation DeleteDashboard($id: String!) {\n    dashboardMutations {\n      delete(id: $id)\n    }\n  }\n": typeof types.DeleteDashboardDocument,
     "\n  query DashboardAccessCheck($id: String!) {\n    dashboard(id: $id) {\n      id\n    }\n  }\n": typeof types.DashboardAccessCheckDocument,
     "\n  query Dashboard($id: String!) {\n    dashboard(id: $id) {\n      id\n      ...WorkspaceDashboards_Dashboard\n    }\n  }\n": typeof types.DashboardDocument,
-    "\n  query WorkspaceDashboards($workspaceSlug: String!, $cursor: String) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n": typeof types.WorkspaceDashboardsDocument,
+    "\n  query WorkspaceDashboards(\n    $workspaceSlug: String!\n    $cursor: String\n    $filter: WorkspaceDashboardsFilter\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n": typeof types.WorkspaceDashboardsDocument,
+    "\n  query ProjectDashboards(\n    $projectId: String!\n    $cursor: String\n    $filter: ProjectDashboardsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      workspace {\n        slug\n      }\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n": typeof types.ProjectDashboardsDocument,
     "\n  mutation DeleteAccessToken($token: String!) {\n    apiTokenRevoke(token: $token)\n  }\n": typeof types.DeleteAccessTokenDocument,
     "\n  mutation CreateAccessToken($token: ApiTokenCreateInput!) {\n    apiTokenCreate(token: $token)\n  }\n": typeof types.CreateAccessTokenDocument,
     "\n  mutation DeleteApplication($appId: String!) {\n    appDelete(appId: $appId)\n  }\n": typeof types.DeleteApplicationDocument,
@@ -553,7 +554,7 @@ type Documents = {
     "\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": typeof types.AutomateFunctionPage_AutomateFunctionFragmentDoc,
     "\n  query AutomateFunctionPage($functionId: ID!) {\n    automateFunction(id: $functionId) {\n      ...AutomateFunctionPage_AutomateFunction\n    }\n    activeUser {\n      workspaces {\n        items {\n          ...AutomateFunctionCreateDialog_Workspace\n          ...AutomateFunctionEditDialog_Workspace\n        }\n      }\n    }\n  }\n": typeof types.AutomateFunctionPageDocument,
     "\n  query AutomateFunctionPageWorkspace($workspaceId: String!) {\n    workspace(id: $workspaceId) {\n      id\n      ...AutomateFunctionPageHeader_Workspace\n    }\n  }\n": typeof types.AutomateFunctionPageWorkspaceDocument,
-    "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n  }\n": typeof types.ProjectPageProjectFragmentDoc,
+    "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n    hasAccessToDashboards: hasAccessToFeature(featureName: dashboards)\n  }\n": typeof types.ProjectPageProjectFragmentDoc,
     "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    permissions {\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageAutomationHeader_Automation\n    ...ProjectPageAutomationFunctions_Automation\n    ...ProjectPageAutomationRuns_Automation\n  }\n": typeof types.ProjectPageAutomationPage_AutomationFragmentDoc,
     "\n  fragment ProjectPageAutomationPage_Project on Project {\n    id\n    workspaceId\n    ...ProjectPageAutomationHeader_Project\n  }\n": typeof types.ProjectPageAutomationPage_ProjectFragmentDoc,
     "\n  fragment ProjectPageSettingsTab_Project on Project {\n    id\n    name\n    permissions {\n      canReadWebhooks {\n        ...FullPermissionCheckResult\n      }\n      canReadEmbedTokens {\n        ...FullPermissionCheckResult\n      }\n      canReadAccIntegrationSettings {\n        ...FullPermissionCheckResult\n      }\n    }\n  }\n": typeof types.ProjectPageSettingsTab_ProjectFragmentDoc,
@@ -845,7 +846,8 @@ const documents: Documents = {
     "\n  mutation DeleteDashboard($id: String!) {\n    dashboardMutations {\n      delete(id: $id)\n    }\n  }\n": types.DeleteDashboardDocument,
     "\n  query DashboardAccessCheck($id: String!) {\n    dashboard(id: $id) {\n      id\n    }\n  }\n": types.DashboardAccessCheckDocument,
     "\n  query Dashboard($id: String!) {\n    dashboard(id: $id) {\n      id\n      ...WorkspaceDashboards_Dashboard\n    }\n  }\n": types.DashboardDocument,
-    "\n  query WorkspaceDashboards($workspaceSlug: String!, $cursor: String) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n": types.WorkspaceDashboardsDocument,
+    "\n  query WorkspaceDashboards(\n    $workspaceSlug: String!\n    $cursor: String\n    $filter: WorkspaceDashboardsFilter\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n": types.WorkspaceDashboardsDocument,
+    "\n  query ProjectDashboards(\n    $projectId: String!\n    $cursor: String\n    $filter: ProjectDashboardsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      workspace {\n        slug\n      }\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n": types.ProjectDashboardsDocument,
     "\n  mutation DeleteAccessToken($token: String!) {\n    apiTokenRevoke(token: $token)\n  }\n": types.DeleteAccessTokenDocument,
     "\n  mutation CreateAccessToken($token: ApiTokenCreateInput!) {\n    apiTokenCreate(token: $token)\n  }\n": types.CreateAccessTokenDocument,
     "\n  mutation DeleteApplication($appId: String!) {\n    appDelete(appId: $appId)\n  }\n": types.DeleteApplicationDocument,
@@ -1109,7 +1111,7 @@ const documents: Documents = {
     "\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    activeUser {\n      workspaces {\n        items {\n          ...AutomateFunctionCreateDialog_Workspace\n          ...AutomateFunctionEditDialog_Workspace\n        }\n      }\n    }\n  }\n": types.AutomateFunctionPageDocument,
     "\n  query AutomateFunctionPageWorkspace($workspaceId: String!) {\n    workspace(id: $workspaceId) {\n      id\n      ...AutomateFunctionPageHeader_Workspace\n    }\n  }\n": types.AutomateFunctionPageWorkspaceDocument,
-    "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n  }\n": types.ProjectPageProjectFragmentDoc,
+    "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n    hasAccessToDashboards: hasAccessToFeature(featureName: dashboards)\n  }\n": types.ProjectPageProjectFragmentDoc,
     "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    permissions {\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageAutomationHeader_Automation\n    ...ProjectPageAutomationFunctions_Automation\n    ...ProjectPageAutomationRuns_Automation\n  }\n": types.ProjectPageAutomationPage_AutomationFragmentDoc,
     "\n  fragment ProjectPageAutomationPage_Project on Project {\n    id\n    workspaceId\n    ...ProjectPageAutomationHeader_Project\n  }\n": types.ProjectPageAutomationPage_ProjectFragmentDoc,
     "\n  fragment ProjectPageSettingsTab_Project on Project {\n    id\n    name\n    permissions {\n      canReadWebhooks {\n        ...FullPermissionCheckResult\n      }\n      canReadEmbedTokens {\n        ...FullPermissionCheckResult\n      }\n      canReadAccIntegrationSettings {\n        ...FullPermissionCheckResult\n      }\n    }\n  }\n": types.ProjectPageSettingsTab_ProjectFragmentDoc,
@@ -2243,7 +2245,11 @@ export function graphql(source: "\n  query Dashboard($id: String!) {\n    dashbo
 /**
  * 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 WorkspaceDashboards($workspaceSlug: String!, $cursor: String) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceDashboards($workspaceSlug: String!, $cursor: String) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query WorkspaceDashboards(\n    $workspaceSlug: String!\n    $cursor: String\n    $filter: WorkspaceDashboardsFilter\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceDashboards(\n    $workspaceSlug: String!\n    $cursor: String\n    $filter: WorkspaceDashboardsFilter\n  ) {\n    workspaceBySlug(slug: $workspaceSlug) {\n      id\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\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 ProjectDashboards(\n    $projectId: String!\n    $cursor: String\n    $filter: ProjectDashboardsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      workspace {\n        slug\n      }\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectDashboards(\n    $projectId: String!\n    $cursor: String\n    $filter: ProjectDashboardsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      workspace {\n        slug\n      }\n      dashboards(cursor: $cursor, filter: $filter) {\n        cursor\n        items {\n          id\n          ...DashboardsCard_Dashboard\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -3299,7 +3305,7 @@ export function graphql(source: "\n  query AutomateFunctionPageWorkspace($worksp
 /**
  * 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 ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n  }\n"): (typeof documents)["\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n  }\n"];
+export function graphql(source: "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n    hasAccessToDashboards: hasAccessToFeature(featureName: dashboards)\n  }\n"): (typeof documents)["\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    modelCount: models(limit: 0) {\n      totalCount\n    }\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    workspace {\n      id\n    }\n    permissions {\n      canReadSettings {\n        ...FullPermissionCheckResult\n      }\n      canUpdate {\n        ...FullPermissionCheckResult\n      }\n      canMoveToWorkspace {\n        ...FullPermissionCheckResult\n      }\n    }\n    ...ProjectPageTeamInternals_Project\n    ...ProjectPageProjectHeader\n    ...ProjectPageTeamDialog\n    ...WorkspaceMoveProjectManager_ProjectBase\n    ...ProjectPageSettingsTab_Project\n    ...WorkspaceMoveProject_Project\n    hasAccessToDashboards: hasAccessToFeature(featureName: dashboards)\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/common/helpers/route.ts

@@ -98,7 +98,14 @@ export const settingsWorkspaceRoutes = {
 
 export const projectRoute = (
   id: string,
-  tab?: 'models' | 'discussions' | 'automations' | 'collaborators' | 'settings' | 'acc'
+  tab?:
+    | 'models'
+    | 'discussions'
+    | 'automations'
+    | 'collaborators'
+    | 'settings'
+    | 'acc'
+    | 'dashboards'
 ) => {
   let res = `/projects/${id}`
   if (tab && tab !== 'models') {

packages/frontend-2/lib/dashboards/graphql/queries.ts

@@ -18,10 +18,36 @@ export const dashboardQuery = graphql(`
 `)
 
 export const workspaceDashboardsQuery = graphql(`
-  query WorkspaceDashboards($workspaceSlug: String!, $cursor: String) {
+  query WorkspaceDashboards(
+    $workspaceSlug: String!
+    $cursor: String
+    $filter: WorkspaceDashboardsFilter
+  ) {
     workspaceBySlug(slug: $workspaceSlug) {
       id
-      dashboards(cursor: $cursor) {
+      dashboards(cursor: $cursor, filter: $filter) {
+        cursor
+        items {
+          id
+          ...DashboardsCard_Dashboard
+        }
+      }
+    }
+  }
+`)
+
+export const projectDashboardsQuery = graphql(`
+  query ProjectDashboards(
+    $projectId: String!
+    $cursor: String
+    $filter: ProjectDashboardsFilter
+  ) {
+    project(id: $projectId) {
+      id
+      workspace {
+        slug
+      }
+      dashboards(cursor: $cursor, filter: $filter) {
         cursor
         items {
           id

packages/frontend-2/pages/projects/[id]/index.vue

@@ -117,6 +117,7 @@ graphql(`
     ...WorkspaceMoveProjectManager_ProjectBase
     ...ProjectPageSettingsTab_Project
     ...WorkspaceMoveProject_Project
+    hasAccessToDashboards: hasAccessToFeature(featureName: dashboards)
   }
 `)
 
@@ -266,6 +267,13 @@ const pageTabItems = computed((): LayoutPageTabItem[] => {
     })
   }
 
+  if (project.value?.hasAccessToDashboards) {
+    items.push({
+      title: 'Dashboards',
+      id: 'dashboards'
+    })
+  }
+
   return items
 })
 
@@ -286,6 +294,7 @@ const activePageTab = computed({
     if (/\/discussions\/?$/i.test(path)) return findTabById('discussions')
     if (/\/automations\/?.*$/i.test(path)) return findTabById('automations')
     if (/\/acc\/?.*$/i.test(path)) return findTabById('acc')
+    if (/\/dashboards\/?/i.test(path)) return findTabById('dashboards')
     if (/\/collaborators\/?/i.test(path) && canReadSettings.value?.authorized)
       return findTabById('collaborators')
     if (/\/settings\/?/i.test(path) && canReadSettings.value?.authorized)
@@ -312,6 +321,11 @@ const activePageTab = computed({
           router.push({ path: projectRoute(projectId.value, 'collaborators') })
         }
         break
+      case 'dashboards':
+        if (project.value?.hasAccessToDashboards) {
+          router.push({ path: projectRoute(projectId.value, 'dashboards') })
+        }
+        break
       case 'settings':
         if (canReadSettings.value?.authorized) {
           router.push({ path: projectRoute(projectId.value, 'settings') })

packages/frontend-2/pages/projects/[id]/index/dashboards.vue

@@ -0,0 +1,19 @@
+<template>
+  <ProjectPageDashboards />
+</template>
+
+<script setup lang="ts">
+import type { ProjectPageProjectFragment } from '~~/lib/common/generated/gql/graphql'
+
+const attrs = useAttrs() as {
+  project: ProjectPageProjectFragment
+}
+
+const projectName = computed(() =>
+  attrs.project.name.length ? attrs.project.name : ''
+)
+
+useHead({
+  title: `Dashboards | ${projectName.value}`
+})
+</script>

packages/frontend-2/pages/workspaces/[slug]/dashboards/index.vue

@@ -9,7 +9,7 @@
     </Portal>
 
     <div>
-      <DashboardsList />
+      <DashboardsList :workspace-slug="activeWorkspaceSlug" />
     </div>
 
     <DashboardsCreateDialog