konnosDashboard
LinterPageFooter.tsx87 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { X } from 'lucide-react'
3import { Button, cn } from 'ui'
4
5import { Markdown } from '../Markdown'
6import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
7import { DOCS_URL } from '@/lib/constants'
8
9interface LinterPageFooterProps {
10 isLoading: boolean
11 isRefetching: boolean
12 refetch: () => void
13 hideDbInspectCTA?: boolean
14}
15
16export const LinterPageFooter = ({
17 isLoading,
18 isRefetching,
19 refetch,
20 hideDbInspectCTA,
21}: LinterPageFooterProps) => {
22 const [showBottomSection, setShowBottomSection] = useLocalStorageQuery(
23 LOCAL_STORAGE_KEYS.LINTER_SHOW_FOOTER,
24 true
25 )
26
27 if (!showBottomSection) {
28 return null
29 }
30
31 return (
32 <div className="px-6 py-6 flex gap-x-4 border-t relative">
33 <Button
34 className="absolute top-1.5 right-3 px-1.5"
35 type="text"
36 size="tiny"
37 onClick={() => setShowBottomSection(false)}
38 >
39 <X size="14" />
40 </Button>
41 <div
42 className={cn(hideDbInspectCTA ? 'w-[35%]' : 'w-[33%]', 'flex flex-col gap-y-1 text-sm')}
43 >
44 <p>Reset suggestions</p>
45 <p className="text-xs text-foreground-light">
46 Consider resetting the analysis after making any changes
47 </p>
48
49 <Button
50 type="default"
51 className="mt-3! w-min"
52 disabled={isLoading || isRefetching}
53 loading={isLoading || isRefetching}
54 onClick={() => refetch()}
55 >
56 Rerun linter
57 </Button>
58 </div>
59
60 <div
61 className={cn(hideDbInspectCTA ? 'w-[35%]' : 'w-[33%]', 'flex flex-col gap-y-1 text-sm')}
62 >
63 <p>How are these suggestions generated?</p>
64 <div className="prose text-xs">
65 <p>
66 <span>These suggestions use </span>
67 <a href="https://github.com/briven/splinter" target="" rel="">
68 splinter (Briven Postgres LINTER)
69 </a>
70 .
71 </p>
72 </div>
73 </div>
74
75 {!hideDbInspectCTA && (
76 <div className="w-[33%] flex flex-col gap-y-1 text-sm">
77 <p>Inspect your database for potential issues</p>
78 <Markdown
79 className="text-xs"
80 content={`The Briven CLI comes with a range of tools to help inspect your Postgres instances for
81 potential issues. [Learn more here](${DOCS_URL}/guides/database/inspect).`}
82 />
83 </div>
84 )}
85 </div>
86 )
87}