konnosDashboard
IntrospectionEnabledNotice.tsx54 lines · main
1import { useState } from 'react'
2import { Button } from 'ui'
3
4import { IntrospectionConfirmModal } from './IntrospectionConfirmModal'
5import { useSetIntrospection } from './useSetIntrospection'
6
7interface IntrospectionEnabledNoticeProps {
8 schema: string
9 currentSchemaComment: string | null | undefined
10 onDisabled: () => void
11}
12
13export const IntrospectionEnabledNotice = ({
14 schema,
15 currentSchemaComment,
16 onDisabled,
17}: IntrospectionEnabledNoticeProps) => {
18 const [showConfirm, setShowConfirm] = useState(false)
19
20 const { apply, isPending, sql, existingDirectiveIsMalformed, otherExistingKeys } =
21 useSetIntrospection({
22 schema,
23 currentSchemaComment,
24 enabled: false,
25 onMutationSuccess: () => setShowConfirm(false),
26 onInvalidated: onDisabled,
27 })
28
29 return (
30 <>
31 <div className="flex items-center justify-between gap-3 border-b bg-surface-100 px-4 py-2 text-xs text-foreground-light">
32 <span>
33 GraphQL introspection is enabled for this project, so schemas are discoverable through the
34 API.
35 </span>
36 <Button type="default" size="tiny" onClick={() => setShowConfirm(true)}>
37 Disable introspection
38 </Button>
39 </div>
40
41 <IntrospectionConfirmModal
42 mode="disable"
43 visible={showConfirm}
44 schema={schema}
45 sql={sql}
46 otherExistingKeys={otherExistingKeys}
47 existingDirectiveIsMalformed={existingDirectiveIsMalformed}
48 isPending={isPending}
49 onCancel={() => setShowConfirm(false)}
50 onConfirm={apply}
51 />
52 </>
53 )
54}