Add call for project info v2

web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue

@@ -22,6 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         ><slot name="menu">
           <div class="flex flex-column lg:flex-row lg:align-items-center gap-2">
             <PButton
+              v-if="hasSidebar"
               :icon="menuButtonIcon"
               plain
               text
@@ -37,6 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
       <template #end>
         <div class="flex align-items-center flex-shrink-0">
+          <slot name="action-button"></slot>
           <PButton
             v-if="loggedUser"
             text
@@ -215,6 +217,11 @@ export default defineComponent({
         ? `${this.getUserFullName.substring(0, 15)}...`
         : this.getUserFullName
     },
+    hasSidebar() {
+      return this.$route.matched.some(
+        (record) => record.components != null && 'sidebar' in record.components
+      )
+    },
     menuButtonIcon() {
       if (this.isUnderOverlayBreakpoint) {
         return 'ti ti-menu-2'

web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue

@@ -126,7 +126,7 @@
     },
     file() {
       return (
-        this.project?.files[this.filePath] || this.upload?.files[this.filePath]
+        this.project?.files?.[this.filePath] || this.upload?.files?.[this.filePath]
       )
     },
     fileName() {

web-app/packages/lib/src/modules/project/components/FilesTable.vue

@@ -181,7 +181,7 @@ const breadcrumps = computed(() => {
 })
 
 const projectFiles = computed(() => {
-  let files = projectStore.project.files
+  let files = projectStore.project.files ?? []
   if (projectStore.uploads[projectStore.project.path] && diff.value) {
     files = {
       ...files,

web-app/packages/lib/src/modules/project/projectApi.ts

@@ -28,7 +28,8 @@ import {
   UpdateProjectCollaboratorPayload,
   UpdatePublicFlagParams,
   ProjectCollaborator,
-  AddProjectCollaboratorPayload
+  AddProjectCollaboratorPayload,
+  ProjectV2Response
 } from '@/modules/project/types'
 
 export const ProjectApi = {
@@ -39,6 +40,10 @@ export const ProjectApi = {
     return ProjectModule.httpService(`/v1/project/${namespace}/${projectName}`)
   },
 
+  async getProjectV2(id: string): Promise<AxiosResponse<ProjectV2Response>> {
+    return ProjectModule.httpService(`/v2/projects/${id}`)
+  },
+
   async createProject(
     namespace: string,
     data: CreateProjectParams,

web-app/packages/lib/src/modules/project/store.ts

@@ -45,7 +45,8 @@
   ProjectVersionListItem,
   UpdateProjectCollaboratorPayload,
   UpdatePublicFlagParams,
-  ProjectCollaborator
+  ProjectCollaborator,
+  ProjectV2Response
 } from '@/modules/project/types'
 import { useUserStore } from '@/modules/user/store'
 
@@ -170,6 +171,29 @@
         })
       }
     },
+    setProjectV2(payload: { project: ProjectV2Response }) {
+      this.project = {
+        ...(this.project ?? {}),
+        // Transofrm ProjectV2Response to EnhancedProjectDetail , we can skip files
+        id: payload.project.id,
+        name: payload.project.name,
+        namespace: payload.project.workspace.name,
+        workspace_id: payload.project.workspace.id,
+        role: payload.project.role,
+        path: [payload.project.workspace.name, payload.project.name].join('/'),
+        created: payload.project.created_at,
+        updated: payload.project.updated_at,
+        access: undefined,
+        version: payload.project.version,
+        // Leave as undefined in this time. When full implementation needed, we can use it.
+        files: undefined,
+        creator: undefined,
+        disk_usage: payload.project.size,
+        has_conflict: undefined,
+        permissions: undefined,
+        tags: undefined
+      }
+    },
     setProjects(payload: ProjectsPayload) {
       this.projects = payload.projects
       this.projectsCount = payload.count
@@ -489,6 +513,17 @@
       }
     },
 
+    async getProjectV2(projectId: string) {
+      const notificationStore = useNotificationStore()
+
+      try {
+        const projectResponse = await ProjectApi.getProjectV2(projectId)
+        this.setProjectV2({ project: projectResponse.data })
+      } catch {
+        await notificationStore.error({ text: 'Failed to load project data' })
+      }
+    },
+
     async unsubscribeProject(payload) {
       const notificationStore = useNotificationStore()
 
@@ -749,7 +784,7 @@
             FileSaver.saveAs(payload.url)
             notificationStore.closeNotification()
             this.cancelDownloadArchive()
           } catch (e) {
             notificationStore.error({ text: errorMessage })
             this.cancelDownloadArchive()
           }

web-app/packages/lib/src/modules/project/types.ts

@@ -57,6 +57,21 @@ export interface Project {
   created?: string
 }
 
+export interface ProjectV2Response {
+  id: string
+  name: string
+  version: string
+  public: boolean
+  size: number
+  created_at: string
+  updated_at: string
+  workspace: {
+    id: number
+    name: string
+  }
+  role: ProjectRoleName | null
+}
+
 export interface ProjectListItem extends Project {
   access: ProjectAccess
   creator: number | null

web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue

@@ -74,8 +74,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               <div class="flex flex-column align-items-center p-4 text-center">
                 <p>No changeset for current layer</p>
               </div>
-              console.log('getChangeset', this.namespace, this.projectName,
-              this.version_id, this.path)
             </template>
           </PDataTable>
         </app-section>