fix: catch-all dynamic routes in [baseId] (#2242)

* fix: base node shallow router

* feat: catch-all dynamic routes in [baseId]

* fix: handle empty table and view IDs in resource handling

* fix: update row_number ordering in migration script for base node

* feat: add migration scripts to disallow dashboard access

* fix: handle empty data cases in Table component rendering

* refactor: split [...slug].tsx

* refactor: rename resource handling functions for consistency in Dashboard and Table pages

* refactor: streamline server-side props handling across Dashboard, Table, and Workflow pages

* fix: handle non-array folders in createFolders method of BaseImportService

* refactor: update translation props handling

* fix: base folder expand

* feat:  improve tree item show

* fix: build error about  getTranslationsProps

* fix: build tree when treeItems empty

* fix: handle empty array cases in import

* fix: folder expand

* fix: folder expand sync

Author: younocode

apps/nestjs-backend/src/features/base/base-import.service.ts

@@ -482,9 +482,12 @@ export class BaseImportService {
   }
 
   private async createFolders(baseId: string, folders: IBaseJson['folders']) {
+    const folderIdMap: Record<string, string> = {};
+    if (!Array.isArray(folders) || folders.length === 0) {
+      return { folderIdMap };
+    }
     const prisma = this.prismaService.txClient();
     const userId = this.cls.get('user.id');
-    const folderIdMap: Record<string, string> = {};
     for (const folder of folders) {
       const { id, name } = folder;
       const newFolderId = generateBaseNodeFolderId();
@@ -507,7 +510,7 @@ export class BaseImportService {
       appIdMap?: Record<string, string>;
     }
   ) {
-    if (!nodes || nodes.length === 0) {
+    if (!Array.isArray(nodes) || nodes.length === 0) {
       return;
     }
 

apps/nextjs-app/src/features/app/base-node/BasePage.tsx

@@ -0,0 +1,29 @@
+import { dehydrate } from '@tanstack/react-query';
+import { getNodeUrl } from '@/features/app/blocks/base/base-node/hooks';
+import { redirect } from './helper';
+import type { ISSRContext, SSRResult } from './types';
+
+export const getBaseServerSideProps = async (ctx: ISSRContext): Promise<SSRResult> => {
+  const { ssrApi, baseId } = ctx;
+  const [lastVisitNode, nodes] = await Promise.all([
+    ssrApi.getUserLastVisitBaseNode({ parentResourceId: baseId }),
+    ssrApi.getBaseNodeList(baseId),
+  ]);
+
+  const findNode = nodes.find((n) => n.resourceId === lastVisitNode?.resourceId);
+  if (findNode) {
+    const url = getNodeUrl({
+      baseId,
+      resourceType: findNode.resourceType,
+      resourceId: findNode.resourceId,
+    });
+    if (url?.pathname) return redirect(url.pathname);
+  }
+
+  return {
+    props: {
+      ...(await ctx.getTranslationsProps()),
+      dehydratedState: dehydrate(ctx.queryClient),
+    },
+  };
+};

apps/nextjs-app/src/features/app/base-node/DashBoardPage.tsx

@@ -0,0 +1,55 @@
+import { dehydrate } from '@tanstack/react-query';
+import { BaseNodeResourceType, LastVisitResourceType } from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config';
+import { DashboardPage as DashboardPageComponent } from '@/features/app/dashboard/Pages';
+import type { IBaseResourceParsed } from '@/features/app/hooks/useBaseResource';
+import { redirect } from './helper';
+import type { ISSRContext, SSRResult } from './types';
+
+export const getDashboardServerSideProps = async (
+  ctx: ISSRContext,
+  parsed: IBaseResourceParsed
+): Promise<SSRResult> => {
+  const { ssrApi, baseId, queryClient } = ctx;
+  if (parsed.resourceType !== BaseNodeResourceType.Dashboard) return { notFound: true };
+
+  const { dashboardId } = parsed;
+
+  if (!dashboardId) {
+    const [lastVisit, dashboardList] = await Promise.all([
+      ssrApi.getUserLastVisit(LastVisitResourceType.Dashboard, baseId),
+      queryClient.fetchQuery({
+        queryKey: ReactQueryKeys.getDashboardList(baseId),
+        queryFn: () => ssrApi.getDashboardList(baseId),
+      }),
+    ]);
+
+    const ids = dashboardList.map((d) => d.id);
+    const defaultId =
+      lastVisit?.resourceId && ids.includes(lastVisit.resourceId) ? lastVisit.resourceId : ids[0];
+    if (defaultId) return redirect(`/base/${baseId}/dashboard/${defaultId}`);
+
+    return {
+      props: {
+        ...(await ctx.getTranslationsProps()),
+        dehydratedState: dehydrate(ctx.queryClient),
+      },
+    };
+  }
+
+  await queryClient.fetchQuery({
+    queryKey: ReactQueryKeys.getDashboard(dashboardId),
+    queryFn: () => ssrApi.getDashboard(baseId, dashboardId),
+  });
+
+  return {
+    props: {
+      ...(await ctx.getTranslationsProps()),
+      dehydratedState: dehydrate(ctx.queryClient),
+    },
+  };
+};
+
+export const DashBoardPage = () => {
+  return <DashboardPageComponent />;
+};

apps/nextjs-app/src/features/app/base-node/TablePage.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { dehydrate } from '@tanstack/react-query';
+import { BaseNodeResourceType, LastVisitResourceType } from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config';
+import type { SsrApi } from '@/backend/api/rest/ssr-api';
+import { Table } from '@/features/app/blocks/table/Table';
+import type { IBaseResourceParsed } from '@/features/app/hooks/useBaseResource';
+import { getViewPageServerData } from '@/lib/view-pages-data';
+import { redirect } from './helper';
+import type { ISSRContext, SSRResult, ITablePageProps } from './types';
+
+export const getDefaultViewId = async (ssrApi: SsrApi, tableId: string) => {
+  const [lastVisit, viewList] = await Promise.all([
+    ssrApi.getUserLastVisit(LastVisitResourceType.View, tableId),
+    ssrApi.getViewList(tableId),
+  ]);
+  const viewIds = viewList.map((v) => v.id);
+  if (viewIds.length === 0) return undefined;
+  return lastVisit?.resourceId && viewIds.includes(lastVisit.resourceId)
+    ? lastVisit.resourceId
+    : viewIds[0]!;
+};
+
+export const getTableServerSideProps = async (
+  ctx: ISSRContext,
+  parsed: IBaseResourceParsed,
+  queryParams: Record<string, string | string[] | undefined>
+): Promise<SSRResult> => {
+  const { ssrApi, baseId, queryClient } = ctx;
+  if (parsed.resourceType !== BaseNodeResourceType.Table) return { notFound: true };
+  const { tableId, viewId } = parsed;
+  const { recordId, fromNotify: notifyId } = queryParams as {
+    recordId?: string;
+    fromNotify?: string;
+  };
+
+  if (!tableId) {
+    const [lastVisit, tableList] = await Promise.all([
+      ssrApi.getUserLastVisit(LastVisitResourceType.Table, baseId),
+      ssrApi.getTables(baseId),
+    ]);
+    const tableIds = tableList.map((t) => t.id);
+    const defaultTableId =
+      lastVisit?.resourceId && tableIds.includes(lastVisit.resourceId)
+        ? lastVisit.resourceId
+        : tableIds[0];
+
+    const defaultViewId = defaultTableId
+      ? await getDefaultViewId(ssrApi, defaultTableId)
+      : undefined;
+    if (defaultTableId && defaultViewId) {
+      return redirect(`/base/${baseId}/table/${defaultTableId}/${defaultViewId}`);
+    }
+    return { notFound: true };
+  }
+
+  if (!viewId) {
+    const defaultViewId = await getDefaultViewId(ssrApi, tableId);
+    if (defaultViewId) {
+      return redirect(`/base/${baseId}/table/${tableId}/${defaultViewId}`);
+    }
+    return { notFound: true };
+  }
+
+  // check table exists
+  const [tableList] = await Promise.all([
+    queryClient.fetchQuery({
+      queryKey: ReactQueryKeys.tableList(baseId),
+      queryFn: () => ssrApi.getTables(baseId),
+    }),
+    queryClient.fetchQuery({
+      queryKey: ReactQueryKeys.getTablePermission(baseId, tableId),
+      queryFn: () => ssrApi.getTablePermission(baseId, tableId),
+    }),
+  ]);
+
+  const tableIds = tableList.map((t) => t.id);
+  if (tableIds.length === 0) return { notFound: true };
+  if (!tableIds.includes(tableId)) return redirect(`/base/${baseId}/table/${tableIds[0]}`);
+
+  // check view exists
+  const viewList = await queryClient.fetchQuery({
+    queryKey: ReactQueryKeys.viewList(tableId),
+    queryFn: () => ssrApi.getViewList(tableId),
+  });
+  const viewIds = viewList.map((v) => v.id);
+  if (viewIds.length === 0) return { notFound: true };
+  if (!viewIds.includes(viewId)) return redirect(`/base/${baseId}/table/${tableId}/${viewIds[0]}`);
+
+  // handle recordId
+  let recordServerData: ITablePageProps['recordServerData'];
+  if (recordId) {
+    if (notifyId) await ssrApi.updateNotificationStatus(notifyId, { isRead: true });
+    recordServerData = await ssrApi.getRecord(tableId, recordId);
+    if (!recordServerData) return redirect(`/base/${baseId}/table/${tableId}/${viewId}`);
+  }
+
+  const serverData = await getViewPageServerData(ssrApi, baseId, tableId, viewId);
+  if (!serverData) return { notFound: true };
+
+  return {
+    props: {
+      ...serverData,
+      ...(recordServerData ? { recordServerData } : {}),
+      ...(await ctx.getTranslationsProps()),
+      dehydratedState: dehydrate(ctx.queryClient),
+    },
+  };
+};
+
+export const TablePage = ({
+  fieldServerData,
+  viewServerData,
+  recordsServerData,
+  recordServerData,
+  groupPointsServerDataMap,
+}: ITablePageProps) => {
+  return (
+    <Table
+      fieldServerData={fieldServerData ?? []}
+      viewServerData={viewServerData ?? []}
+      recordsServerData={recordsServerData ?? { records: [] }}
+      recordServerData={recordServerData}
+      groupPointsServerDataMap={groupPointsServerDataMap}
+    />
+  );
+};

apps/nextjs-app/src/features/app/base-node/WorkflowPage.tsx

@@ -0,0 +1,23 @@
+import { dehydrate } from '@tanstack/react-query';
+import { BaseNodeResourceType } from '@teable/openapi';
+import { AutomationPage } from '@/features/app/automation/Pages';
+import type { IBaseResourceParsed } from '../hooks/useBaseResource';
+import type { ISSRContext, SSRResult } from './types';
+
+export const getWorkflowServerSideProps = async (
+  ctx: ISSRContext,
+  parsed: IBaseResourceParsed
+): Promise<SSRResult> => {
+  if (parsed.resourceType !== BaseNodeResourceType.Workflow) return { notFound: true };
+
+  return {
+    props: {
+      ...(await ctx.getTranslationsProps()),
+      dehydratedState: dehydrate(ctx.queryClient),
+    },
+  };
+};
+
+export const WorkflowPage = () => {
+  return <AutomationPage />;
+};

apps/nextjs-app/src/features/app/base-node/helper.ts

@@ -0,0 +1,5 @@
+import type { SSRResult } from './types';
+
+export const redirect = (destination: string): SSRResult => ({
+  redirect: { destination, permanent: false },
+});

apps/nextjs-app/src/features/app/base-node/index.ts

@@ -0,0 +1,8 @@
+export type { ISSRContext, SSRHandler, SSRResult } from './types';
+
+export { redirect } from './helper';
+
+export { TablePage, getTableServerSideProps } from './TablePage';
+export { DashBoardPage, getDashboardServerSideProps } from './DashBoardPage';
+export { WorkflowPage, getWorkflowServerSideProps } from './WorkflowPage';
+export { getBaseServerSideProps } from './BasePage';

apps/nextjs-app/src/features/app/base-node/types.ts

@@ -0,0 +1,33 @@
+import type { QueryClient } from '@tanstack/react-query';
+import type { IFieldVo, IRecord, IViewVo } from '@teable/core';
+import type { IGroupPointsVo } from '@teable/openapi';
+import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type { SSRConfig } from 'next-i18next';
+import type { SsrApi } from '@/backend/api/rest/ssr-api';
+import type { IBaseResourceParsed } from '@/features/app/hooks/useBaseResource';
+import type { IBasePageProps } from '@/lib/type';
+export interface ITablePageProps {
+  fieldServerData?: IFieldVo[];
+  viewServerData?: IViewVo[];
+  recordsServerData?: { records: IRecord[] };
+  recordServerData?: IRecord;
+  groupPointsServerDataMap?: { [viewId: string]: IGroupPointsVo | undefined };
+}
+
+export type IBaseNodePageProps = IBasePageProps & Partial<ITablePageProps>;
+
+export interface ISSRContext {
+  context: GetServerSidePropsContext;
+  queryClient: QueryClient;
+  baseId: string;
+  ssrApi: SsrApi;
+  getTranslationsProps: () => Promise<SSRConfig>;
+}
+
+export type SSRResult = GetServerSidePropsResult<IBaseNodePageProps>;
+
+export type SSRHandler = (
+  ctx: ISSRContext,
+  parsed: IBaseResourceParsed,
+  queryParams?: Record<string, string | string[] | undefined>
+) => Promise<SSRResult>;