mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
476d4a5851
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral
96 lines
2.7 KiB
TypeScript
96 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
|
|
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/observability/inspect).`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|