mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
Ivan Vasilov
8c6d0f1890
* Add nuqs package. * Add useSchemaQueryState hook. * Use the new hook in all places where there's is a schema selector. * Make the useQueryState work with SSR in playwright. * Fix the saving to local storage to happen as a side effect without any additional rerenders.
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
|
|
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
|
import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
|
|
import { useEntityTypesQuery } from 'data/entity-types/entity-types-infinite-query'
|
|
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
|
import { useLocalStorage } from 'hooks/misc/useLocalStorage'
|
|
import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
|
|
import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
|
|
import { useTableEditorStateSnapshot } from 'state/table-editor'
|
|
|
|
export interface EmptyStateProps {}
|
|
|
|
const EmptyState = ({}: EmptyStateProps) => {
|
|
const snap = useTableEditorStateSnapshot()
|
|
const { selectedSchema } = useQuerySchemaState()
|
|
const isProtectedSchema = EXCLUDED_SCHEMAS.includes(selectedSchema)
|
|
const canCreateTables =
|
|
useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables') && !isProtectedSchema
|
|
|
|
const [sort] = useLocalStorage<'alphabetical' | 'grouped-alphabetical'>(
|
|
'table-editor-sort',
|
|
'alphabetical'
|
|
)
|
|
|
|
const { project } = useProjectContext()
|
|
const { data } = useEntityTypesQuery({
|
|
projectRef: project?.ref,
|
|
connectionString: project?.connectionString,
|
|
schema: selectedSchema,
|
|
sort,
|
|
})
|
|
|
|
const totalCount = data?.pages?.[0].data.count ?? 0
|
|
|
|
return (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
{totalCount === 0 ? (
|
|
<ProductEmptyState
|
|
title="Table Editor"
|
|
ctaButtonLabel={canCreateTables ? 'Create a new table' : undefined}
|
|
onClickCta={canCreateTables ? snap.onAddTable : undefined}
|
|
>
|
|
<p className="text-sm text-foreground-light">
|
|
There are no tables available in this schema.
|
|
</p>
|
|
</ProductEmptyState>
|
|
) : (
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<ProductEmptyState
|
|
title="Table Editor"
|
|
ctaButtonLabel={canCreateTables ? 'Create a new table' : undefined}
|
|
onClickCta={canCreateTables ? snap.onAddTable : undefined}
|
|
>
|
|
<p className="text-sm text-foreground-light">
|
|
Select a table from the navigation panel on the left to view its data
|
|
{canCreateTables && ', or create a new one.'}
|
|
</p>
|
|
</ProductEmptyState>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EmptyState
|