CreateTableInstructionsDialog.tsx68 lines · main

1	import { useFlag } from 'common'
2	import { ChevronDown, Plus } from 'lucide-react'
3	import { useState } from 'react'
4	import {
5	Button,
6	cn,
7	Dialog,
8	DialogContent,
9	DialogDescription,
10	DialogHeader,
11	DialogTitle,
12	DropdownMenu,
13	DropdownMenuContent,
14	DropdownMenuItem,
15	DropdownMenuTrigger,
16	} from 'ui'
17
18	import { CreateTableInstructions } from './CreateTableInstructions'
19	import { CreateTableSheet } from './CreateTableSheet'
20
21	export const CreateTableInstructionsDialog = () => {
22	const enableCreationOfTablesFromDashboard = useFlag('analyticsBucketsTableCreation')
23
24	const [showModal, setShowModal] = useState(false)
25	const [showSheet, setShowSheet] = useState(false)
26
27	return (
28	<>
29	<div className="flex items-center">
30	<Button
31	type="primary"
32	icon={<Plus />}
33	className={cn(enableCreationOfTablesFromDashboard && 'rounded-r-none hover:z-10')}
34	onClick={() => {
35	if (enableCreationOfTablesFromDashboard) setShowSheet(true)
36	else setShowModal(true)
37	}}
38	>
39	Create table
40	</Button>
41	{enableCreationOfTablesFromDashboard && (
42	<DropdownMenu>
43	<DropdownMenuTrigger asChild>
44	<Button type="primary" className="w-7 rounded-l-none -ml-px" icon={<ChevronDown />} />
45	</DropdownMenuTrigger>
46	<DropdownMenuContent className="w-48" align="end">
47	<DropdownMenuItem onClick={() => setShowModal(true)}>Via Pyiceberg</DropdownMenuItem>
48	</DropdownMenuContent>
49	</DropdownMenu>
50	)}
51	</div>
52
53	<Dialog open={showModal} onOpenChange={setShowModal}>
54	<DialogContent size="xlarge">
55	<DialogHeader>
56	<DialogTitle>Adding tables to your Analytics Bucket</DialogTitle>
57	<DialogDescription>
58	Tables can be created or added to your bucket via Pyiceberg
59	</DialogDescription>
60	</DialogHeader>
61	<CreateTableInstructions hideHeader className="rounded-t-none border-x-0 border-b-0" />
62	</DialogContent>
63	</Dialog>
64
65	<CreateTableSheet open={showSheet} onOpenChange={setShowSheet} />
66	</>
67	)
68	}