fix: snapshot creatuon and restoring failing

packages/nc-gui/components/dashboard/settings/BaseSettings/Snapshots.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import type { SnapshotType } from 'nocodb-sdk'
 
 const { t } = useI18n()
 
@@ -33,6 +32,7 @@ const {
   createSnapshot,
   listSnapshots,
   updateSnapshot,
+  restoreSnapshot,
   deleteSnapshot,
   cancelNewSnapshot,
   isUnsavedSnapshotsPending,
@@ -115,18 +115,31 @@ onMounted(async () => {
     >
       <template #bodyCell="{ column, record: snapshot }">
         <template v-if="column.key === 'name'">
-          <NcTooltip v-if="!snapshot.isNew" class="truncate max-w-full text-gray-800 font-semibold text-sm" show-on-truncate-only>
+          <NcTooltip v-if="!snapshot.isNew" class="truncate max-w-full text-gray-800 font-semibold text-sm">
             {{ snapshot.title }}
 
             <template #title>
-              {{ snapshot.title }}
+              <div class="text-xs font-semibold text-nc-gray-300">Created On</div>
+              <div class="mt-1 text-[13px]">
+                {{ dayjs(snapshot.created_at).format('D MMMM YYYY, hh:mm A') }}
+              </div>
+              <div class="text-xs font-semibold mt-2 text-nc-gray-300">Created By</div>
+              <div class="mt-1 text-[13px]">
+                {{ snapshot.created_display_name }}
+              </div>
             </template>
           </NcTooltip>
           <a-input v-else v-model:value="snapshot.title" class="new-snapshot-title" />
         </template>
         <template v-if="column.key === 'action'">
           <div v-if="!snapshot?.isNew" class="flex row-action items-center">
-            <NcButton size="small" type="secondary" class="!text-xs !rounded-r-none !border-r-0" :shadow="false">
+            <NcButton
+              size="small"
+              type="secondary"
+              class="!text-xs !rounded-r-none !border-r-0"
+              :shadow="false"
+              @click="restoreSnapshot(snapshot)"
+            >
               <div class="text-nc-content-gray-subtle font-semibold">
                 {{ $t('general.restore') }}
               </div>

packages/nc-gui/composables/useBaseSettings.ts

@@ -7,6 +7,7 @@ export type SnapshotExtendedType = SnapshotType & {
   isNew?: boolean
   loading?: boolean
   error?: boolean
+  created_display_name?: string
 }
 
 export const useBaseSettings = createSharedComposable(() => {
@@ -15,6 +16,8 @@ export const useBaseSettings = createSharedComposable(() => {
   const baseStore = useBase()
   const { base } = storeToRefs(baseStore)
 
+  const basesStore = useBases()
+
   const _projectId = inject(ProjectIdInj, undefined)
 
   const isCreatingSnapshot = ref(false)
@@ -22,6 +25,10 @@ export const useBaseSettings = createSharedComposable(() => {
 
   const baseId = computed(() => _projectId?.value ?? base.value?.id)
 
+  const { basesUser } = storeToRefs(basesStore)
+
+  const baseUsers = computed(() => (baseId.value ? basesUser.value.get(baseId.value) || [] : []))
+
   const snapshots = ref<SnapshotExtendedType[]>([] as SnapshotExtendedType[])
 
   const updateSnapshot = async (snapshot: SnapshotExtendedType) => {
@@ -54,7 +61,14 @@ export const useBaseSettings = createSharedComposable(() => {
   const listSnapshots = async () => {
     try {
       const response = await $api.snapshot.list(baseId.value)
-      snapshots.value = response.map((snapshot) => ({ ...snapshot, isNew: false }))
+      snapshots.value = response.map((snapshot) => {
+        const user = baseUsers.value.find((u) => u.id === snapshot.created_by)
+        return {
+          ...snapshot,
+          isNew: false,
+          created_display_name: user?.display_name ?? (user?.email ?? '').split('@')[0],
+        }
+      })
     } catch (error) {
       message.error(await extractSdkResponseErrorMsg(error))
       console.error(error)
@@ -68,12 +82,11 @@ export const useBaseSettings = createSharedComposable(() => {
   }
 
   const createSnapshot = async (snapshot: Partial<SnapshotExtendedType>) => {
+    if (!baseId.value) return
     try {
       const response = await $api.snapshot.create(baseId.value, snapshot)
       isCreatingSnapshot.value = true
 
-      console.log(response)
-
       $poller.subscribe(
         { id: response.id },
         async (data: {
@@ -108,6 +121,43 @@ export const useBaseSettings = createSharedComposable(() => {
     }
   }
 
+  const restoreSnapshot = async (snapshot: SnapshotExtendedType) => {
+    if (!baseId.value) return
+    try {
+      await $api.snapshot.restore(baseId.value, snapshot.id!)
+      isRestoringSnapshot.value = true
+
+      $poller.subscribe(
+        { id: snapshot.id! },
+        async (data: {
+          id: string
+          status?: string
+          data?: {
+            error?: {
+              message: string
+            }
+            message?: string
+            result?: any
+          }
+        }) => {
+          if (data.status !== 'close') {
+            if (data.status === JobStatus.COMPLETED) {
+              // Table metadata recreated successfully
+              message.info('Snapshot restored successfully')
+              isRestoringSnapshot.value = false
+            } else if (status === JobStatus.FAILED) {
+              message.error('Failed to restore snapshot')
+              isRestoringSnapshot.value = false
+            }
+          }
+        },
+      )
+    } catch (error) {
+      message.error(await extractSdkResponseErrorMsg(error))
+      console.error(error)
+    }
+  }
+
   const addNewSnapshot = () => {
     snapshots.value = [
       {
@@ -129,5 +179,6 @@ export const useBaseSettings = createSharedComposable(() => {
     addNewSnapshot,
     isCreatingSnapshot,
     isRestoringSnapshot,
+    restoreSnapshot,
   }
 })