fix(nc-gui): show page does not exist if shared url is invalid

packages/nc-gui/assets/style.scss

@@ -14,6 +14,14 @@
       scrollbar-width: none; /* Firefox */
     }
   }
+
+  .nc-h-screen {
+    height: 100vh;
+
+    @supports (height: 100dvh) {
+      height: 100dvh;
+    }
+  }
 }
 
 * {

packages/nc-gui/components/general/PageDoesNotExist.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full grid place-items-center text-center">
+  <div class="nc-h-screen grid place-items-center text-center">
     <div class="flex flex-col items-center gap-6">
       <slot name="icon">
         <img width="48" alt="NocoDB" src="~/assets/img/icons/256x256.png" />

packages/nc-gui/composables/useSharedView.ts

@@ -13,6 +13,8 @@ import type {
 import { UITypes, ViewTypes } from 'nocodb-sdk'
 
 export function useSharedView() {
+  const router = useRouter()
+
   const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
   const { appInfo } = useGlobal()
@@ -70,6 +72,7 @@ export function useSharedView() {
         'xc-password': localPassword ?? password.value,
       },
     })
+
     try {
       allowCSVDownload.value = parseProp(viewMeta.meta)?.allowCSVDownload
     } catch {
@@ -421,6 +424,15 @@ export function useSharedView() {
     } as RequestParams)
   }
 
+  const triggerNotFound = () => {
+    const currentQuery = { ...router.currentRoute.value.query, ncNotFound: 'true' }
+
+    router.push({
+      path: router.currentRoute.value.path,
+      query: currentQuery,
+    })
+  }
+
   return {
     sharedView,
     loadSharedView,
@@ -441,5 +453,6 @@ export function useSharedView() {
     formColumns,
     allowCSVDownload,
     fetchCount,
+    triggerNotFound,
   }
 }

packages/nc-gui/layouts/shared-view.vue

@@ -11,6 +11,8 @@ const route = router.currentRoute
 
 const disableTopbar = computed(() => route.value.query?.disableTopbar === 'true')
 
+const ncNotFound = computed(() => route.value.query?.ncNotFound === 'true')
+
 onMounted(() => {
   // check if we are inside an iframe
   // if we are, communicate to the parent page whenever we navigate to a new url,
@@ -53,6 +55,8 @@ export default {
 <template>
   <a-layout id="nc-app">
     <a-layout class="!flex-col bg-white">
+      <GeneralPageDoesNotExist v-if="ncNotFound" />
+      <template v-else>
         <a-layout-header
           v-if="!disableTopbar"
           class="nc-table-topbar flex items-center justify-between !bg-transparent !px-3 !py-2 border-b-1 border-gray-200 !h-[46px]"
@@ -110,6 +114,7 @@ export default {
         >
           <slot />
         </div>
+      </template>
     </a-layout>
   </a-layout>
 </template>

packages/nc-gui/pages/index/[typeOrId]/calendar/[viewId]/index.vue

@@ -11,7 +11,7 @@ definePageMeta({
 
 const route = useRoute()
 
-const { loadSharedView } = useSharedView()
+const { loadSharedView, triggerNotFound } = useSharedView()
 
 const showPassword = ref(false)
 
@@ -20,6 +20,8 @@ try {
 } catch (e: any) {
   if (e?.response?.status === 403) {
     showPassword.value = true
+  } else if (e?.response?.status === 404) {
+    triggerNotFound()
   } else {
     message.error(await extractSdkResponseErrorMsg(e))
   }

packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue

@@ -27,9 +27,6 @@ if (!notFound.value) {
   useProvideSmartsheetStore(sharedView, meta, true)
 
   applyLanguageDirection(sharedViewMeta.value.rtl ? 'rtl' : 'ltr')
-} else {
-  navigateTo('/error/404')
-  throw createError({ statusCode: 404, statusMessage: t('msg.pageNotFound') })
 }
 
 const form = reactive({
@@ -51,7 +48,9 @@ const focus: VNodeRef = (el: typeof InputPassword) => {
 <template>
   <div>
     <NuxtLayout>
-      <NuxtPage v-if="!passwordDlg" />
+      <NuxtPage v-if="!passwordDlg && !notFound" />
+
+      <GeneralPageDoesNotExist v-if="notFound" />
 
       <a-modal
         v-model:visible="passwordDlg"

packages/nc-gui/pages/index/[typeOrId]/gallery/[viewId]/index.vue

@@ -10,7 +10,7 @@ definePageMeta({
 
 const route = useRoute()
 
-const { loadSharedView } = useSharedView()
+const { loadSharedView, triggerNotFound } = useSharedView()
 
 const showPassword = ref(false)
 
@@ -19,6 +19,8 @@ try {
 } catch (e: any) {
   if (e?.response?.status === 403) {
     showPassword.value = true
+  } else if (e?.response?.status === 404) {
+    triggerNotFound()
   } else {
     message.error(await extractSdkResponseErrorMsg(e))
   }

packages/nc-gui/pages/index/[typeOrId]/kanban/[viewId]/index.vue

@@ -11,7 +11,7 @@ definePageMeta({
 
 const route = useRoute()
 
-const { loadSharedView } = useSharedView()
+const { loadSharedView, triggerNotFound } = useSharedView()
 
 const showPassword = ref(false)
 
@@ -20,6 +20,8 @@ try {
 } catch (e: any) {
   if (e?.response?.status === 403) {
     showPassword.value = true
+  } else if (e?.response?.status === 404) {
+    triggerNotFound()
   } else {
     message.error(await extractSdkResponseErrorMsg(e))
   }

packages/nc-gui/pages/index/[typeOrId]/map/[viewId]/index.vue

@@ -10,7 +10,7 @@ definePageMeta({
 
 const route = useRoute()
 
-const { loadSharedView } = useSharedView()
+const { loadSharedView , triggerNotFound} = useSharedView()
 
 const showPassword = ref(false)
 
@@ -19,6 +19,8 @@ try {
 } catch (e: any) {
   if (e?.response?.status === 403) {
     showPassword.value = true
+  } else if (e?.response?.status === 404) {
+    triggerNotFound()
   } else {
     message.error(await extractSdkResponseErrorMsg(e))
   }

packages/nc-gui/pages/index/[typeOrId]/view/[viewId].vue

@@ -10,7 +10,7 @@ definePageMeta({
 
 const route = useRoute()
 
-const { loadSharedView, meta } = useSharedView()
+const { loadSharedView, meta, triggerNotFound } = useSharedView()
 const { isViewDataLoading } = storeToRefs(useViewsStore())
 
 provide(MetaInj, meta)
@@ -24,6 +24,8 @@ onMounted(async () => {
   } catch (e: any) {
     if (e?.response?.status === 403) {
       showPassword.value = true
+    } else if (e?.response?.status === 404) {
+      triggerNotFound()
     } else {
       console.error(e)
       message.error(await extractSdkResponseErrorMsg(e))