mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
import { LOCAL_STORAGE_KEYS } from 'common'
|
|
import { X } from 'lucide-react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
import { Markdown } from '../Markdown'
|
|
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
|
|
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
|
|
import { DOCS_URL } from '@/lib/constants'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
|
|
interface LinterPageFooterProps {
|
|
isLoading: boolean
|
|
isRefetching: boolean
|
|
refetch: () => void
|
|
hideDbInspectCTA?: boolean
|
|
}
|
|
|
|
export const LinterPageFooter = ({
|
|
isLoading,
|
|
isRefetching,
|
|
refetch,
|
|
hideDbInspectCTA,
|
|
}: LinterPageFooterProps) => {
|
|
const [showBottomSection, setShowBottomSection] = useLocalStorageQuery(
|
|
LOCAL_STORAGE_KEYS.LINTER_SHOW_FOOTER,
|
|
true
|
|
)
|
|
|
|
if (!showBottomSection) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="px-6 py-6 flex gap-x-4 border-t relative">
|
|
<Button
|
|
className="absolute top-1.5 right-3 px-1.5"
|
|
variant="text"
|
|
size="tiny"
|
|
onClick={() => setShowBottomSection(false)}
|
|
>
|
|
<X size="14" />
|
|
</Button>
|
|
<div
|
|
className={cn(hideDbInspectCTA ? 'w-[35%]' : 'w-[33%]', 'flex flex-col gap-y-1 text-sm')}
|
|
>
|
|
<p>Reset suggestions</p>
|
|
<p className="text-xs text-foreground-light">
|
|
Consider resetting the analysis after making any changes
|
|
</p>
|
|
|
|
<ShortcutTooltip
|
|
shortcutId={SHORTCUT_IDS.ADVISORS_REFRESH}
|
|
label="Rerun linter"
|
|
side="bottom"
|
|
align="start"
|
|
>
|
|
<Button
|
|
variant="default"
|
|
className="mt-3! w-min"
|
|
disabled={isLoading || isRefetching}
|
|
loading={isLoading || isRefetching}
|
|
onClick={() => refetch()}
|
|
>
|
|
Rerun linter
|
|
</Button>
|
|
</ShortcutTooltip>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(hideDbInspectCTA ? 'w-[35%]' : 'w-[33%]', 'flex flex-col gap-y-1 text-sm')}
|
|
>
|
|
<p>How are these suggestions generated?</p>
|
|
<div className="prose text-xs">
|
|
<p>
|
|
<span>These suggestions use </span>
|
|
<a href="https://github.com/supabase/splinter" target="" rel="">
|
|
splinter (Supabase Postgres LINTER)
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{!hideDbInspectCTA && (
|
|
<div className="w-[33%] flex flex-col gap-y-1 text-sm">
|
|
<p>Inspect your database for potential issues</p>
|
|
<Markdown
|
|
className="text-xs"
|
|
content={`The Supabase CLI comes with a range of tools to help inspect your Postgres instances for
|
|
potential issues. [Learn more here](${DOCS_URL}/guides/database/inspect).`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|