fix: table permissions on the design page (#625)

teableio · May 27, 2024 · 89c979e · 89c979e
1 parent 128a6df
commit 89c979e
Showing 1 changed file with 53 additions and 48 deletions.
diff --git a/apps/nextjs-app/src/features/app/blocks/design/Design.tsx b/apps/nextjs-app/src/features/app/blocks/design/Design.tsx
@@ -2,7 +2,8 @@ import type { IFieldVo } from '@teable/core';
 import { ArrowLeft, Table2 } from '@teable/icons';
 import type { IGetBaseVo, ITableVo } from '@teable/openapi';
 import type { Table } from '@teable/sdk';
-import { FieldProvider, useTable, useTablePermission } from '@teable/sdk';
+import { AnchorContext, FieldProvider, useTable, useTablePermission } from '@teable/sdk';
+import { TablePermissionProvider } from '@teable/sdk/context/table-permission';
 import { Button } from '@teable/ui-lib/shadcn';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -31,53 +32,57 @@ export const Design: React.FC<IDesignProps> = ({ fieldServerData: fields }) => {
   const columns = useDataColumns();
   const { t } = useTranslation(tableConfig.i18nNamespaces);
   return (
-    <FieldProvider serverSideData={fields}>
-      <Head>
-        <title>
-          {table.name
-            ? `${table.icon ? table.icon + ' ' : ''}${table.name}`
-            : 'Teable' + ' - Designing'}
-        </title>
-      </Head>
-      <div className="flex h-full grow basis-[500px] flex-col gap-4 overflow-auto p-4 pt-0">
-        <h1 className="flex items-center gap-2 pt-2 text-xl font-bold tracking-tight">
-          <Button size="xs" variant="ghost" asChild>
-            <Link
-              href={{
-                pathname: '/base/[baseId]/[tableId]',
-                query: { baseId, tableId },
-              }}
-            >
-              <ArrowLeft className="size-4" />
-              {t('actions.back')}
-            </Link>
-          </Button>
-          <EmojiPicker
-            className="flex size-5 items-center justify-center hover:bg-muted-foreground/60"
-            onChange={(icon: string) => table.updateIcon(icon)}
-            disabled={!permission['table|update']}
-          >
-            {table.icon ? (
-              <Emoji emoji={table.icon} size={'1.5rem'} />
-            ) : (
-              <Table2 className="size-6 shrink-0" />
-            )}
-          </EmojiPicker>
-          {table.name}
-        </h1>
-        <div className="grid grid-cols-1 items-start justify-center gap-6 rounded-lg md:grid-cols-2 lg:grid-cols-3 min-[1600px]:grid-cols-4">
-          <div className="col-span-1 items-start">
-            <TableDetail />
+    <AnchorContext.Provider value={{ tableId }}>
+      <TablePermissionProvider>
+        <FieldProvider serverSideData={fields}>
+          <Head>
+            <title>
+              {table.name
+                ? `${table.icon ? table.icon + ' ' : ''}${table.name}`
+                : 'Teable' + ' - Designing'}
+            </title>
+          </Head>
+          <div className="flex h-full grow basis-[500px] flex-col gap-4 overflow-auto p-4 pt-0">
+            <h1 className="flex items-center gap-2 pt-2 text-xl font-bold tracking-tight">
+              <Button size="xs" variant="ghost" asChild>
+                <Link
+                  href={{
+                    pathname: '/base/[baseId]/[tableId]',
+                    query: { baseId, tableId },
+                  }}
+                >
+                  <ArrowLeft className="size-4" />
+                  {t('actions.back')}
+                </Link>
+              </Button>
+              <EmojiPicker
+                className="flex size-5 items-center justify-center hover:bg-muted-foreground/60"
+                onChange={(icon: string) => table.updateIcon(icon)}
+                disabled={!permission['table|update']}
+              >
+                {table.icon ? (
+                  <Emoji emoji={table.icon} size={'1.5rem'} />
+                ) : (
+                  <Table2 className="size-6 shrink-0" />
+                )}
+              </EmojiPicker>
+              {table.name}
+            </h1>
+            <div className="grid grid-cols-1 items-start justify-center gap-6 rounded-lg md:grid-cols-2 lg:grid-cols-3 min-[1600px]:grid-cols-4">
+              <div className="col-span-1 items-start">
+                <TableDetail />
+              </div>
+              <div className="col-span-1 h-full items-start">
+                <DbConnectionPanel />
+              </div>
+            </div>
+            <div>
+              <DataTable data={fields} columns={columns} />
+            </div>
           </div>
-          <div className="col-span-1 h-full items-start">
-            <DbConnectionPanel />
-          </div>
-        </div>
-        <div>
-          <DataTable data={fields} columns={columns} />
-        </div>
-      </div>
-      {<FieldSetting />}
-    </FieldProvider>
+          {<FieldSetting />}
+        </FieldProvider>
+      </TablePermissionProvider>
+    </AnchorContext.Provider>
   );
 };