Merge pull request #3433 from nocodb/fix/3430-sql-view

fix: hide irrelevant options from sql view tab

packages/nc-gui-v2/assets/style.scss

@@ -1,7 +1,7 @@
 @import 'ant-design-vue/dist/antd.variable.min.css';
 
 :root {
-  --header-height: 50px;
+  --header-height: 42px;
   --toolbar-height: 48px;
   --tw-text-opacity: 1;
 }

packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@@ -9,6 +9,7 @@ import {
   ref,
   useNuxtApp,
   useProject,
+  useSmartsheetStoreOrThrow,
   useUIPermission,
 } from '#imports'
 import { LockType } from '~/lib'
@@ -70,6 +71,8 @@ async function changeLockType(type: LockType) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+const { isSqlView } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
@@ -134,7 +137,7 @@ async function changeLockType(type: LockType) {
               <template #expandIcon></template>
               <SmartsheetToolbarExportSubActions />
             </a-sub-menu>
-            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
+            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView && !isSqlView">
               <a-sub-menu key="upload">
                 <template #title>
                   <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
@@ -177,7 +180,7 @@ async function changeLockType(type: LockType) {
                 {{ $t('activity.listSharedView') }}
               </div>
             </a-menu-item>
-            <a-menu-item>
+            <a-menu-item v-if="!isSqlView">
               <div
                 v-if="isUIAllowed('webhook') && !isView && !isPublicView"
                 v-t="['c:actions:webhook']"

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -55,7 +55,7 @@ const selected = reactive<{ row: number | null; col: number | null }>({ row: nul
 
 let editEnabled = $ref(false)
 
-const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
 
 const addColumnDropdown = ref(false)
 
@@ -69,7 +69,7 @@ const contextMenu = computed({
   },
 })
 
-const contextMenuTarget = ref(false)
+const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
 const expandedFormRowState = ref<Record<string, any>>()
@@ -149,7 +149,7 @@ defineExpose({
 // reset context menu target on hide
 watch(contextMenu, () => {
   if (!contextMenu.value) {
-    contextMenuTarget.value = false
+    contextMenuTarget.value = null
   }
 })
 
@@ -306,6 +306,14 @@ const onNavigate = (dir: NavigateDir) => {
       break
   }
 }
+
+const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) => {
+  if (isSqlView.value) return
+  e.preventDefault()
+  if (target) {
+    contextMenuTarget.value = target
+  }
+}
 </script>
 
 <template>
@@ -314,11 +322,11 @@ const onNavigate = (dir: NavigateDir) => {
       <a-spin size="large" />
     </div>
     <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
-      <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table
+      <a-dropdown v-model:visible="contextMenu" :trigger="isSqlView ? [] : ['contextmenu']">
+        <tablex
           ref="smartTable"
           class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
-          @contextmenu.prevent="contextMenu = true"
+          @contextmenu="showContextMenu"
         >
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
@@ -357,7 +365,7 @@ const onNavigate = (dir: NavigateDir) => {
                 </div>
               </th>
               <th
-                v-if="!readOnly && !isLocked && isUIAllowed('add-column')"
+                v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
                 v-t="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
@@ -435,7 +443,7 @@ const onNavigate = (dir: NavigateDir) => {
                     :data-title="columnObj.title"
                     @click="selectCell(rowIndex, colIndex)"
                     @dblclick="makeEditable(row, columnObj)"
-                    @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
                   >
                     <div class="w-full h-full">
                       <SmartsheetVirtualCell
@@ -471,10 +479,10 @@ const onNavigate = (dir: NavigateDir) => {
             </SmartsheetRow>
 
             <!--
-          TODO: add relationType !== 'bt' ?
-          v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-        -->
-            <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable')">
+      TODO: add relationType !== 'bt' ?
+      v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
+    -->
+            <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
               <td
                 v-t="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
@@ -491,7 +499,7 @@ const onNavigate = (dir: NavigateDir) => {
               </td>
             </tr>
           </tbody>
-        </table>
+        </tablex>
 
         <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -2,7 +2,7 @@
 import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
 import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue'
 
-const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const { isGrid, isForm, isGallery, isSqlView } = useSmartsheetStoreOrThrow()
 const isPublic = inject(IsPublicInj, ref(false))
 const { isUIAllowed } = useUIPermission()
 
@@ -34,7 +34,7 @@ const { isOpen } = useSidebar()
     <div class="flex-1" />
 
     <SmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" />
-    <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm" class="mx-1" />
+    <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" />
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
     <template v-if="!isOpen && !isPublic">

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -3,7 +3,7 @@ import { useExpandedFormStoreOrThrow, useSmartsheetRowStoreOrThrow, useSmartshee
 
 const emit = defineEmits(['cancel'])
 
-const { meta } = useSmartsheetStoreOrThrow()
+const { meta, isSqlView } = useSmartsheetStoreOrThrow()
 
 const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
 
@@ -48,7 +48,7 @@ const iconColor = '#1890ff'
       </template>
       <mdi-reload class="cursor-pointer select-none text-gray-500" />
     </a-tooltip>
-    <a-tooltip placement="bottom">
+    <a-tooltip v-if="!isSqlView" placement="bottom">
       <template #title>
         <div class="text-center w-full">Toggle comments draw</div>
       </template>

packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { ref, useUIPermission, viewIcons } from '#imports'
+import { useSmartsheetStoreOrThrow, useUIPermission, viewIcons } from '#imports'
 
 interface Emits {
   (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@@ -10,7 +10,7 @@ const emits = defineEmits<Emits>()
 
 const { isUIAllowed } = useUIPermission()
 
-const isView = ref(false)
+const { isSqlView } = useSmartsheetStoreOrThrow()
 
 function onOpenModal(type: ViewTypes, title = '') {
   emits('openModal', { type, title })
@@ -69,7 +69,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-menu-item>
 
       <a-menu-item
-        v-if="!isView"
+        v-if="!isSqlView"
         key="form"
         class="group !flex !items-center !my-0 !h-[30px] nc-create-form-view"
         @click="onOpenModal(ViewTypes.FORM)"

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

@@ -43,6 +43,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       }
       return where
     })
+
+    const isSqlView = computed(() => meta?.value?.type === 'view')
+
     const sorts = initalSorts ?? ref<SortType[]>([])
     const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
 
@@ -61,6 +64,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       isSharedForm,
       sorts,
       nestedFilters,
+      isSqlView,
     }
   },
   'smartsheet-store',

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -33,7 +33,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 <template>
   <div class="h-full w-full nc-container">
     <div class="h-full w-full flex flex-col">
-      <div class="flex items-end !min-h-[50px] !bg-primary">
+      <div class="flex items-end !min-h-[var(--header-height)] !bg-primary">
         <div
           v-if="!isOpen"
           class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"