roles.tsx56 lines · main

1	import { useParams } from 'common'
2	import { PageContainer } from 'ui-patterns/PageContainer'
3	import {
4	PageHeader,
5	PageHeaderDescription,
6	PageHeaderMeta,
7	PageHeaderSummary,
8	PageHeaderTitle,
9	} from 'ui-patterns/PageHeader'
10	import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
11
12	import { RolesList } from '@/components/interfaces/Database/Roles/RolesList'
13	import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
14	import DefaultLayout from '@/components/layouts/DefaultLayout'
15	import { UnknownInterface } from '@/components/ui/UnknownInterface'
16	import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
17	import type { NextPageWithLayout } from '@/types'
18
19	const DatabaseRoles: NextPageWithLayout = () => {
20	const { ref } = useParams()
21	const showRoles = useIsFeatureEnabled('database:roles')
22
23	if (!showRoles) {
24	return <UnknownInterface urlBack={`/project/${ref}/database/schemas`} />
25	}
26
27	return (
28	<>
29	<PageHeader size="large">
30	<PageHeaderMeta>
31	<PageHeaderSummary>
32	<PageHeaderTitle>Database Roles</PageHeaderTitle>
33	<PageHeaderDescription>
34	Manage access control to your database through users, groups, and permissions
35	</PageHeaderDescription>
36	</PageHeaderSummary>
37	</PageHeaderMeta>
38	</PageHeader>
39	<PageContainer size="large">
40	<PageSection>
41	<PageSectionContent>
42	<RolesList />
43	</PageSectionContent>
44	</PageSection>
45	</PageContainer>
46	</>
47	)
48	}
49
50	DatabaseRoles.getLayout = (page) => (
51	<DefaultLayout>
52	<DatabaseLayout title="Roles">{page}</DatabaseLayout>
53	</DefaultLayout>
54	)
55
56	export default DatabaseRoles