Merge branch 'refactor/gui-v2' into feat/gui-v2-quick-import

packages/nc-gui-v2/components.d.ts

@@ -29,10 +29,12 @@ declare module '@vue/runtime-core' {
     AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']

packages/nc-gui-v2/components/dashboard/settings/AuditTab.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { Tooltip as ATooltip } from 'ant-design-vue'
+import type { AuditType } from 'nocodb-sdk'
+import { timeAgo } from '~/utils/dateTimeUtils'
+import { h, useNuxtApp, useProject } from '#imports'
+import MdiReload from '~icons/mdi/reload'
+
+interface Props {
+  projectId: string
+}
+
+const { projectId } = defineProps<Props>()
+
+const { $api } = useNuxtApp()
+const { project, loadProject } = useProject()
+
+let isLoading = $ref(false)
+
+let audits = $ref<null | Array<AuditType>>(null)
+
+let totalRows = $ref(0)
+
+const currentPage = $ref(1)
+const currentLimit = $ref(25)
+
+async function loadAudits(page = currentPage, limit = currentLimit) {
+  try {
+    if (!project.value?.id) return
+
+    isLoading = true
+
+    const { list, pageInfo } = await $api.project.auditList(project.value?.id, {
+      offset: (limit * (page - 1)).toString(),
+      limit: limit.toString(),
+    })
+
+    audits = list
+    totalRows = pageInfo.totalRows ?? 0
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading = false
+  }
+}
+
+onMounted(async () => {
+  if (audits === null) {
+    await loadProject(projectId)
+    await loadAudits(currentPage, currentLimit)
+  }
+})
+
+const columns = [
+  {
+    title: 'Operation Type',
+    dataIndex: 'op_type',
+    key: 'op_type',
+  },
+  {
+    title: 'Operation sub-type',
+    dataIndex: 'op_sub_type',
+    key: 'op_sub_type',
+  },
+  {
+    title: 'Description',
+    dataIndex: 'description',
+    key: 'description',
+  },
+  {
+    title: 'User',
+    dataIndex: 'user',
+    key: 'user',
+    customRender: (value: { text: string }) => h('div', () => value.text || 'Shared base'),
+  },
+  {
+    title: 'Created',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sort: 'desc',
+    customRender: (value: { text: string }) =>
+      h(ATooltip, { placement: 'bottom', title: h('span', {}, value.text) }, () => timeAgo(value.text)),
+  },
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 w-full">
+    <a-button class="self-start" @click="loadAudits">
+      <div class="flex items-center gap-2">
+        <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
+        Reload
+      </div>
+    </a-button>
+
+    <a-table class="w-full" :data-source="audits ?? []" :columns="columns" :pagination="false" :loading="isLoading" />
+
+    <a-pagination
+      v-model:current="currentPage"
+      :page-size="currentLimit"
+      :total="totalRows"
+      show-less-items
+      @change="loadAudits"
+    />
+  </div>
+</template>

packages/nc-gui-v2/composables/useProject.ts

@@ -1,28 +1,38 @@
 import { SqlUiFactory } from 'nocodb-sdk'
 import type { ProjectType, TableType } from 'nocodb-sdk'
-import { useNuxtApp } from '#app'
+import { useNuxtApp, useState } from '#app'
+import { USER_PROJECT_ROLES } from '~/lib/constants'
 
 export default () => {
+  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
+
   const { $api } = useNuxtApp()
 
   const project = useState<ProjectType>('project')
   const tables = useState<TableType[]>('tables')
 
+  const loadProjectRoles = async () => {
+    projectRoles.value = {}
+
+    if (project.value.id) {
+      const user = await $api.auth.me({ project_id: project.value.id })
+      projectRoles.value = user.roles
+    }
+  }
   const loadTables = async () => {
     if (project.value.id) {
       const tablesResponse = await $api.dbTable.list(project.value.id)
-
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
   }
 
   const loadProject = async (projectId: string) => {
     project.value = await $api.project.read(projectId)
+    await loadProjectRoles()
   }
 
   const isMysql = computed(() => ['mysql', 'mysql2'].includes(project.value?.bases?.[0]?.type || ''))
   const isPg = computed(() => project.value?.bases?.[0]?.type === 'pg')
-
   const sqlUi = computed(() => SqlUiFactory.create({ client: project.value?.bases?.[0]?.type || '' }))
 
   return { project, tables, loadProject, loadTables, isMysql, isPg, sqlUi }

packages/nc-gui-v2/composables/useUIPermission/index.ts

@@ -1,14 +1,27 @@
 import rolePermissions from './rolePermissions'
+import { useState } from '#app'
+import { USER_PROJECT_ROLES } from '~/lib/constants'
 
 export default () => {
   const { $state } = useNuxtApp()
+  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
   const isUIAllowed = (permission: keyof typeof rolePermissions[keyof typeof rolePermissions], _skipPreviewAs = false) => {
     const user = $state.user
+    let userRoles = user?.value?.roles || {}
+
+    // if string populate key-value paired object
+    if (typeof userRoles === 'string') {
+      userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
+        acc[role] = true
+        return acc
+      }, {})
+    }
+
+    // merge user role and project specific user roles
     const roles = {
-      ...(user?.value?.roles || {}),
+      ...userRoles,
-      // todo: load project specific roles
+      ...(projectRoles?.value || {}),
-      // ...(state.projectRole || {}),
     }
 
     // todo: handle preview as
@@ -17,6 +30,7 @@ export default () => {
     //     [state.previewAs]: true
     //   };
     // }
+
     return Object.entries(roles).some(([role, hasRole]) => {
       return (
         hasRole &&

packages/nc-gui-v2/lib/constants.ts

@@ -1 +1,2 @@
 export const NOCO = 'noco'
+export const USER_PROJECT_ROLES = 'user_project_roles'

packages/nc-gui-v2/utils/dateTimeUtils.ts

@@ -1,5 +1,14 @@
 import dayjs from 'dayjs'
 
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+
+export const timeAgo = (date: any) => {
+  return dayjs.utc(date).fromNow()
+}
+
 export const handleTZ = (val: any) => {
   if (!val) {
     return