index.tsx100 lines · main

1	import { Plus } from 'lucide-react'
2	import { useState } from 'react'
3	import { Button } from 'ui'
4	import { PageContainer } from 'ui-patterns/PageContainer'
5	import {
6	PageHeader,
7	PageHeaderDescription,
8	PageHeaderMeta,
9	PageHeaderSummary,
10	PageHeaderTitle,
11	} from 'ui-patterns/PageHeader'
12	import {
13	PageSection,
14	PageSectionAside,
15	PageSectionContent,
16	PageSectionDescription,
17	PageSectionMeta,
18	PageSectionSummary,
19	PageSectionTitle,
20	} from 'ui-patterns/PageSection'
21
22	import { AppsList } from '@/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList'
23	import { CreateAppSheet } from '@/components/interfaces/Organization/PrivateApps/Apps/CreateAppSheet/CreateAppSheet'
24	import {
25	PrivateAppsProvider,
26	usePrivateApps,
27	} from '@/components/interfaces/Organization/PrivateApps/PrivateAppsContext'
28	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
29	import OrganizationLayout from '@/components/layouts/OrganizationLayout'
30	import { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout'
31	import type { NextPageWithLayout } from '@/types'
32
33	function PrivateAppsContent() {
34	const { apps, isLoading } = usePrivateApps()
35	const [showCreate, setShowCreate] = useState(false)
36
37	return (
38	<>
39	<PageHeader size="default">
40	<PageHeaderMeta>
41	<PageHeaderSummary>
42	<PageHeaderTitle>Private Apps</PageHeaderTitle>
43	<PageHeaderDescription>
44	Create private apps to generate scoped access tokens for your organization
45	</PageHeaderDescription>
46	</PageHeaderSummary>
47	</PageHeaderMeta>
48	</PageHeader>
49
50	<PageContainer size="default" className="pb-16">
51	<PageSection id="apps">
52	<PageSectionMeta>
53	<PageSectionSummary>
54	<PageSectionTitle>Apps</PageSectionTitle>
55	<PageSectionDescription>
56	Registered private apps and their credentials
57	</PageSectionDescription>
58	</PageSectionSummary>
59	{!isLoading && apps.length > 0 && (
60	<PageSectionAside>
61	<Button
62	type="primary"
63	icon={<Plus size={14} />}
64	onClick={() => setShowCreate(true)}
65	>
66	Create app
67	</Button>
68	</PageSectionAside>
69	)}
70	</PageSectionMeta>
71	<PageSectionContent>
72	<AppsList onCreateApp={() => setShowCreate(true)} />
73	</PageSectionContent>
74	</PageSection>
75	</PageContainer>
76
77	<CreateAppSheet
78	visible={showCreate}
79	onClose={() => setShowCreate(false)}
80	onCreated={() => setShowCreate(false)}
81	/>
82	</>
83	)
84	}
85
86	const PrivateAppsPage: NextPageWithLayout = () => {
87	return <PrivateAppsContent />
88	}
89
90	PrivateAppsPage.getLayout = (page) => (
91	<DefaultLayout>
92	<OrganizationLayout title="Private Apps">
93	<OrganizationSettingsLayout>
94	<PrivateAppsProvider>{page}</PrivateAppsProvider>
95	</OrganizationSettingsLayout>
96	</OrganizationLayout>
97	</DefaultLayout>
98	)
99
100	export default PrivateAppsPage