Files
supabase/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
Gildas Garcia 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## 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>
2026-06-16 23:59:58 +02:00

78 lines
2.6 KiB
TypeScript

import { SupportCategories } from '@supabase/shared-types/out/constants'
import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
import { useParams } from 'common'
import dayjs from 'dayjs'
import { Button } from 'ui'
import { Admonition } from 'ui-patterns'
import { InlineLink } from './InlineLink'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
import { useProjectUpgradingStatusQuery } from '@/data/config/project-upgrade-status-query'
import { IS_PLATFORM } from '@/lib/constants'
import { guessLocalTimezone } from '@/lib/dayjs'
// [Joshen] Think twice about the category though - it doesn't correspond
export const ProjectUpgradeFailedBanner = () => {
const { ref } = useParams()
const { data } = useProjectUpgradingStatusQuery({ projectRef: ref }, { enabled: IS_PLATFORM })
const { status, initiated_at, latest_status_at, error } = data?.databaseUpgradeStatus ?? {}
const isFailed = status === DatabaseUpgradeStatus.Failed
const initiatedAt = dayjs
.utc(initiated_at ?? 0)
.tz(guessLocalTimezone())
.format('DD MMM YYYY HH:mm:ss')
const subject = 'Upgrade failed for project'
const message = `Upgrade information:\n• Initiated at: ${initiated_at}\n• Error: ${error}`
const initiatedAtEncoded = encodeURIComponent(
dayjs.utc(initiated_at ?? 0).format('YYYY-MM-DDTHH:mm:ss')
)
const latestStatusAtEncoded = encodeURIComponent(
dayjs
.utc(latest_status_at ?? 0)
.utcOffset(0)
.format('YYYY-MM-DDTHH:mm:ss')
)
const timestampFilter = `its=${initiatedAtEncoded}&ite=${latestStatusAtEncoded}`
if (!isFailed) return null
return (
<div className="max-w-7xl">
<Admonition
type="warning"
title={`Postgres version upgrade was not successful (Initiated at ${initiatedAt})`}
actions={
<Button asChild variant="default">
<SupportLink
queryParams={{
category: SupportCategories.DATABASE_UNRESPONSIVE,
projectRef: ref,
subject,
message,
}}
>
Contact support
</SupportLink>
</Button>
}
>
<div>
Your project and its data are not affected. Please reach out to us via our support form
for assistance with the upgrade.
</div>
<div>
You may also view logs related to the failed upgrade in your{' '}
<InlineLink href={`/project/${ref}/logs/pg-upgrade-logs?${timestampFilter}`}>
project's logs
</InlineLink>
.
</div>
</Admonition>
</div>
)
}