+ {showStorage && (
+
+
+
+ Storage
+
+
+
+
+
+ )}
+
+ {isRealtimeFeatureEnabled && (
+
+
+
+ Realtime
+
+
+
+
+
+
+ }
+ onClick={() => setRealtimeDialogOpen(true)}
+ >
+ {isRealtimeEnabled ? 'Disable' : 'Enable'} realtime
+
+
+
+
+
+
+ )}
+
+
+
+
+ Index Advisor
+
+
+
+
+
+
+
+
+
+ Data API access
+
+
+
+
+
+
+
+
+
+ Delete table
+
+
+
+
+
+
+
+ event.stopPropagation()}
+ onKeyDown={(event) => event.stopPropagation()}
>
@@ -730,7 +734,7 @@ export const TableList = ({
}}
>
+
Edit table
+Edit definitions
+
+
+
+ }
+ className="rounded-l-none border-l-0 px-2"
+ aria-label="More storage actions"
+ />
+
+
+ setDetachConfirm(true)}>
+ Detach Warehouse copy
+
+
+
+
)}
{mode === 'warehouse_backed' && (
}
onClick={() => setTimeTravelOpen(true)}
>
diff --git a/apps/studio/components/interfaces/Database/Warehouse/warehouseDemoStore.ts b/apps/studio/components/interfaces/Database/Warehouse/warehouseDemoStore.ts
index b27c895c298..e4d3cb01451 100644
--- a/apps/studio/components/interfaces/Database/Warehouse/warehouseDemoStore.ts
+++ b/apps/studio/components/interfaces/Database/Warehouse/warehouseDemoStore.ts
@@ -86,6 +86,20 @@ export function formatWarehouseSize(bytes: number | undefined): string {
return `${Math.round(gb)} GB`
}
+export function getWarehouseStorageSummaryLabel(
+ state: Pick
+
![]()
{
const track = useTrack()
const isPending = handler.isPending
@@ -320,7 +322,7 @@ export const ApiAccessToggle = ({
- ({})
@@ -213,14 +214,13 @@ export const TableEditor = ({
const isNameChanged = tableFields.name.trim() !== table?.name
const isCommentChanged = tableFields.comment !== table?.comment
- const isRlsEnabledChanged = tableFields.isRLSEnabled !== (table?.rls_enabled ?? false)
if (isEmpty(errors)) {
const configuration = {
tableId: table?.id,
importContent,
- isRLSEnabled: tableFields.isRLSEnabled,
- isRealtimeEnabled: tableFields.isRealtimeEnabled,
+ isRLSEnabled: isDefinitionEdit ? (table?.rls_enabled ?? false) : tableFields.isRLSEnabled,
+ isRealtimeEnabled: isDefinitionEdit ? isRealtimeEnabled : tableFields.isRealtimeEnabled,
isDuplicateRows: isDuplicateRows,
existingForeignKeyRelations: foreignKeys,
primaryKey,
@@ -262,7 +262,6 @@ export const TableEditor = ({
const payload: SaveTablePayloadFor<'update'> = {
...(isNameChanged && { name: tableFields.name.trim() }),
...(isCommentChanged && { comment: tableFields.comment?.trim() ?? '' }),
- ...(isRlsEnabledChanged && { rls_enabled: tableFields.isRLSEnabled }),
}
saveChanges({
action: 'update',
@@ -434,104 +433,108 @@ export const TableEditor = ({
-
-
- You need to create an access policy before you can query data from this table.
- Without a policy, querying this table will return an{' '}
- empty array of results.{' '}
- {isNewRecord ? 'You can create policies after saving this table.' : ''}
-
- }
- >
-
- ) : (
-
- {tableFields.name ? `The table ${tableFields.name}` : 'Your table'} will be
- publicly writable and readable
-
- }
- >
-
- )}
-
- {realtimeEnabled && (
-
Data API access
+ {!hideHeading &&Data API access
}Allow this table to be queried via Supabase client libraries or the API directly
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/HeaderTitle.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/HeaderTitle.tsx index 951205750c5..dc2becc5345 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/HeaderTitle.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/HeaderTitle.tsx @@ -21,7 +21,7 @@ export const HeaderTitle = ({ schema, table, isDuplicating }: HeaderTitleProps) } return ( - Update table{table?.name}
+ Edit definitions for {table?.name}
)
}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
index c368d9af8ac..7e8420b1707 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
@@ -84,6 +84,7 @@ export const TableEditor = ({
const { selectedSchema } = useQuerySchemaState()
const isNewRecord = table === undefined
+ const isDefinitionEdit = !isNewRecord && !isDuplicating
const visibleChanged = useChanged(visible)
const [errors, setErrors] = useState
- {
- // if isEnabled, show confirm modal to turn off
- // if not enabled, allow turning on without modal confirmation
- tableFields.isRLSEnabled
- ? setRlsConfirmVisible(true)
- : onUpdateField({ isRLSEnabled: !tableFields.isRLSEnabled })
- }}
- />
-
-
- {tableFields.isRLSEnabled ? (
-
-
-
- - Restrict access to your table by enabling RLS and writing Postgres policies. -
-
- {
- track('realtime_toggle_table_clicked', {
- newState: tableFields.isRealtimeEnabled ? 'disabled' : 'enabled',
- origin: 'tableSidePanel',
- })
- onUpdateField({
- isRealtimeEnabled: !tableFields.isRealtimeEnabled,
- })
- }}
- />
-
+ You need to create an access policy before you can query data from this table.
+ Without a policy, querying this table will return an{' '}
+ empty array of results.{' '}
+ {isNewRecord ? 'You can create policies after saving this table.' : ''}
+
+ }
+ >
+
+ ) : (
+
+ {tableFields.name ? `The table ${tableFields.name}` : 'Your table'} will be
+ publicly writable and readable
+
+ }
+ >
+
+ )}
+
+ {realtimeEnabled && (
+
-
+ {!isDefinitionEdit && (
+ <>
+
+
+
+ )}
)
diff --git a/apps/studio/components/layouts/DatabaseLayout/TableDetailLayout.tsx b/apps/studio/components/layouts/DatabaseLayout/TableDetailLayout.tsx
new file mode 100644
index 00000000000..aa3567c78ad
--- /dev/null
+++ b/apps/studio/components/layouts/DatabaseLayout/TableDetailLayout.tsx
@@ -0,0 +1,265 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams } from 'common'
+import { TableEditor } from 'icons'
+import { Check, Edit, X } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { type PropsWithChildren } from 'react'
+import {
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbSeparator,
+ Button,
+ NavMenu,
+ NavMenuItem,
+} from 'ui'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+ PageHeader,
+ PageHeaderAside,
+ PageHeaderBreadcrumb,
+ PageHeaderDescription,
+ PageHeaderMeta,
+ PageHeaderNavigationTabs,
+ PageHeaderSummary,
+ PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { useSnapshot } from 'valtio'
+
+import DatabaseLayout from './DatabaseLayout'
+import { buildTableEditorUrl } from '@/components/grid/SupabaseGrid.utils'
+import {
+ getWarehouseStorageSummaryLabel,
+ warehouseDemoStore,
+} from '@/components/interfaces/Database/Warehouse/warehouseDemoStore'
+import { WarehouseSyncChip } from '@/components/interfaces/Database/Warehouse/WarehouseSyncChip'
+import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
+import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
+import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
+import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query'
+import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
+import { isTableLike } from '@/data/table-editor/table-editor-types'
+import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import { useTableEditorStateSnapshot } from '@/state/table-editor'
+import { TableEditorTableStateContextProvider } from '@/state/table-editor-table'
+
+export type TableDetailSection = 'columns' | 'policies' | 'settings'
+
+interface TableDetailLayoutProps {
+ section: TableDetailSection
+}
+
+export function TableDetailLayout({
+ section: _section,
+ children,
+}: PropsWithChildren) {
+ const router = useRouter()
+ const snap = useTableEditorStateSnapshot()
+ const { id: _id, ref } = useParams()
+ const id = _id ? Number(_id) : undefined
+
+ const { data: project } = useSelectedProjectQuery()
+ const { data: selectedTable, isPending: isLoading } = useTableEditorQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ id,
+ })
+
+ const { data: publications } = useDatabasePublicationsQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+ const realtimePublication = (publications ?? []).find(
+ (publication) => publication.name === 'supabase_realtime'
+ )
+ const realtimeEnabled =
+ selectedTable?.id !== undefined &&
+ (realtimePublication?.tables ?? []).some((table) => table.id === selectedTable.id)
+
+ const warehouseSnap = useSnapshot(warehouseDemoStore)
+ const tableKey =
+ selectedTable?.schema !== undefined && selectedTable?.name !== undefined
+ ? `${selectedTable.schema}.${selectedTable.name}`
+ : undefined
+ const warehouseState = tableKey ? warehouseSnap.tables[tableKey] : undefined
+
+ const { can: canUpdateTables } = useAsyncCheckPermissions(
+ PermissionAction.TENANT_SQL_ADMIN_WRITE,
+ 'tables'
+ )
+
+ const isTable = selectedTable !== undefined && isTableLike(selectedTable)
+ const showPoliciesTab = isTable
+ const showSettingsTab = isTable
+ const storageSyncError = warehouseState?.syncState === 'error'
+ const tableSizeLabel =
+ isTable && selectedTable.size !== undefined
+ ? (getWarehouseStorageSummaryLabel(warehouseState, selectedTable.size) ?? selectedTable.size)
+ : isTable
+ ? getWarehouseStorageSummaryLabel(warehouseState, selectedTable.size)
+ : null
+
+ const tableEditorUrl =
+ selectedTable !== undefined
+ ? buildTableEditorUrl({
+ projectRef: ref,
+ tableId: selectedTable.id,
+ schema: selectedTable.schema,
+ })
+ : undefined
+
+ const navigationItems = id
+ ? [
+ {
+ label: 'Columns',
+ href: `/project/${ref}/database/tables/${id}`,
+ },
+ ...(showPoliciesTab
+ ? [
+ {
+ label: 'Policies',
+ href: `/project/${ref}/database/tables/${id}/policies`,
+ },
+ ]
+ : []),
+ ...(showSettingsTab
+ ? [
+ {
+ label: 'Settings',
+ href: `/project/${ref}/database/tables/${id}/settings`,
+ },
+ ]
+ : []),
+ ]
+ : []
+
+ return (
+
+
+ {
+ router.push(`/project/${ref}/database/tables`)
+ }}
+ />
+
+ )}
+
+ )
+}
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 6474dc81091..eb5d78d343c 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -356,7 +356,7 @@ export const EntityListItem = ({
}}
>
{
- return
- {page}
+ {page}
)
-export default DatabaseTableDetailPage
+export default TableDetailColumnsPage
diff --git a/apps/studio/pages/project/[ref]/database/tables/[id]/policies.tsx b/apps/studio/pages/project/[ref]/database/tables/[id]/policies.tsx
new file mode 100644
index 00000000000..28ce6ea8727
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/database/tables/[id]/policies.tsx
@@ -0,0 +1,39 @@
+import { useParams } from 'common'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { TableDetailPoliciesTab } from '@/components/interfaces/Database/Tables/TableDetailPoliciesTab'
+import { TableDetailLayout } from '@/components/layouts/DatabaseLayout/TableDetailLayout'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
+import { isTableLike } from '@/data/table-editor/table-editor-types'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import type { NextPageWithLayout } from '@/types'
+
+const TableDetailPoliciesPage: NextPageWithLayout = () => {
+ const { id: _id } = useParams()
+ const id = _id ? Number(_id) : undefined
+ const { data: project } = useSelectedProjectQuery()
+ const { data: selectedTable, isPending } = useTableEditorQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ id,
+ })
+
+ if (isPending) {
+ return
+ {page}
+
+)
+
+export default TableDetailPoliciesPage
diff --git a/apps/studio/pages/project/[ref]/database/tables/[id]/settings.tsx b/apps/studio/pages/project/[ref]/database/tables/[id]/settings.tsx
new file mode 100644
index 00000000000..5c1c8e41d67
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/database/tables/[id]/settings.tsx
@@ -0,0 +1,39 @@
+import { useParams } from 'common'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { TableDetailSettingsTab } from '@/components/interfaces/Database/Tables/TableDetailSettingsTab'
+import { TableDetailLayout } from '@/components/layouts/DatabaseLayout/TableDetailLayout'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
+import { isTableLike } from '@/data/table-editor/table-editor-types'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import type { NextPageWithLayout } from '@/types'
+
+const TableDetailSettingsPage: NextPageWithLayout = () => {
+ const { id: _id } = useParams()
+ const id = _id ? Number(_id) : undefined
+ const { data: project } = useSelectedProjectQuery()
+ const { data: selectedTable, isPending } = useTableEditorQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ id,
+ })
+
+ if (isPending) {
+ return
+ {page}
+
+)
+
+export default TableDetailSettingsPage
diff --git a/apps/studio/pages/project/[ref]/database/tables/[id]/storage.tsx b/apps/studio/pages/project/[ref]/database/tables/[id]/storage.tsx
index 82678b8de00..357ba0d3abe 100644
--- a/apps/studio/pages/project/[ref]/database/tables/[id]/storage.tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/[id]/storage.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
-import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
+import { TableDetailLayout } from '@/components/layouts/DatabaseLayout/TableDetailLayout'
import DefaultLayout from '@/components/layouts/DefaultLayout'
import type { NextPageWithLayout } from '@/types'
@@ -12,7 +12,7 @@ const TableStorageRedirect: NextPageWithLayout = () => {
useEffect(() => {
if (ref && id) {
- router.replace(`/project/${ref}/database/tables/${id}`)
+ router.replace(`/project/${ref}/database/tables/${id}/settings`)
}
}, [ref, id, router])
@@ -21,7 +21,7 @@ const TableStorageRedirect: NextPageWithLayout = () => {
TableStorageRedirect.getLayout = (page) => (
- {page}
+ {page}
)
-
-
+
- )}
-
+
+ {tableFields.isRLSEnabled ? (
+ - Broadcast changes on this table to authorized subscribers. -
+
+ {
+ // if isEnabled, show confirm modal to turn off
+ // if not enabled, allow turning on without modal confirmation
+ tableFields.isRLSEnabled
+ ? setRlsConfirmVisible(true)
+ : onUpdateField({ isRLSEnabled: !tableFields.isRLSEnabled })
+ }}
+ />
+
-
+
+
+ Restrict access to your table by enabling RLS and writing Postgres policies. +
+
+ {
+ track('realtime_toggle_table_clicked', {
+ newState: tableFields.isRealtimeEnabled ? 'disabled' : 'enabled',
+ origin: 'tableSidePanel',
+ })
+ onUpdateField({
+ isRealtimeEnabled: !tableFields.isRealtimeEnabled,
+ })
+ }}
+ />
+
+ )}
+
+
+ )}
+
+
+ + Broadcast changes on this table to authorized subscribers. +
+
+
+
+
+
+
+ Tables
+
+
+ {selectedTable && (
+ <>
+
+ {selectedTable.name}
+
+
+ )}
+
+
+
+
+
+
+ {selectedTable.comment && (
+
+ )}
+
+
+ {isTable && tableEditorUrl && (
+
+
+ )}
+
+
+ {navigationItems.length > 1 && (
+
+
+ {navigationItems.map((item) => {
+ const isActive = router.asPath.split('?')[0] === item.href
+ return (
+
+ {item.label}
+
+ )
+ })}
+
+
+ )}
+
+
+
+ {children}
+
+
+
+ {project?.ref !== undefined && selectedTable !== undefined && isTable && (
+
+ {selectedTable &&
+ {isLoading ?
+ {storageSyncError &&
+
+ {selectedTable && !isLoading && (
+ {selectedTable.comment}
+ )} +
+
+ {selectedTable.schema}
+ {isTable && selectedTable.live_rows_estimate !== undefined && (
+ {selectedTable.live_rows_estimate.toLocaleString()} rows
+ )}
+ {tableSizeLabel && {tableSizeLabel}}
+ {isTable && (
+
+ RLS
+ {selectedTable.rls_enabled ? (
+
+ {canUpdateTables && (
+ } onClick={() => snap.onEditTable()}>
+ Edit
+
+ )}
+ }
+ asChild
+ >
+ View
+
+
+