vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Replace deprecated Alert in /claim-project page (#37962)

Browse Source 
* replace deprecated alert

* Swap to use Admonition

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This commit is contained in:
Drake Costa
2025-08-25 21:15:53 -07:00
committed by GitHub
parent b59b002764
commit fe07b07ffa
2 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/studio/components/interfaces/Organization/ProjectClaim/layout.tsx
View File

@@ -4,17 +4,19 @@ import { PropsWithChildren, ReactNode } from 'react'
import { UserDropdown } from 'components/interfaces/UserDropdown'
import { FeedbackDropdown } from 'components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown'
import { BASE_PATH } from 'lib/constants'
import { Separator } from 'ui'
import { cn, Separator } from 'ui'
export const ProjectClaimLayout = ({
children,
title,
className,
}: PropsWithChildren<{
title: ReactNode
className?: string
}>) => {
return (
<>
<div className="flex flex-row justify-between flex-grow mx-auto w-full h-[52px] items-center px-4">
<div className="flex flex-row justify-between mx-auto w-full h-[52px] items-center px-4">
<div className="flex items-center gap-2">
<span className="sr-only">Supabase</span>
<Image
@@ -31,8 +33,13 @@ export const ProjectClaimLayout = ({
</div>
</div>
<Separator />
<div className="overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center">
<div className="w-full max-w-md">{children}</div>
<div
className={cn(
'overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center flex-grow',
className
)}
>
<div className="w-full h-full max-w-md">{children}</div>
</div>
</>
)

41
apps/studio/pages/claim-project.tsx
View File

@@ -1,3 +1,6 @@
import Head from 'next/head'
import { useMemo, useState } from 'react'
import { useParams } from 'common'
import { ProjectClaimBenefits } from 'components/interfaces/Organization/ProjectClaim/benefits'
import { ProjectClaimChooseOrg } from 'components/interfaces/Organization/ProjectClaim/choose-org'
@@ -8,10 +11,8 @@ import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorizati
import { useOrganizationProjectClaimQuery } from 'data/organizations/organization-project-claim-query'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { withAuth } from 'hooks/misc/withAuth'
import Head from 'next/head'
import { useMemo, useState } from 'react'
import type { NextPageWithLayout } from 'types'
import { Alert } from 'ui'
import { Admonition } from 'ui-patterns'
const ClaimProjectPage: NextPageWithLayout = () => {
const { auth_id, token: claimToken } = useParams()
@@ -48,8 +49,8 @@ const ClaimProjectPage: NextPageWithLayout = () => {
if ((selectedOrgSlug && claimToken && isLoadingProjectClaim) || isLoadingRequester) {
return (
<ProjectClaimLayout title="Claim a project">
<div className="py-6 space-y-2">
<ProjectClaimLayout title="Claim a project" className="py-6">
<div className="space-y-2">
<ShimmeringLoader />
<ShimmeringLoader className="w-3/4" />
<ShimmeringLoader className="w-1/2" />
@@ -60,23 +61,16 @@ const ClaimProjectPage: NextPageWithLayout = () => {
if ((selectedOrgSlug && claimToken && isErrorProjectClaim) || isErrorRequester) {
return (
<ProjectClaimLayout title="Claim a project">
<div className="py-6">
<Alert
withIcon
variant="warning"
title="Failed to retrieve project claim request details"
>
<p>Please retry your claim request from the requesting app</p>
{errorProjectClaim != undefined && (
<p className="mt-2">Error: {errorProjectClaim?.message}</p>
)}
{errorRequester != undefined && (
<p className="mt-2">Error: {errorRequester?.message}</p>
)}
<p>Please go back to the requesting app and try again.</p>
</Alert>
</div>
<ProjectClaimLayout title="Claim a project" className="py-6">
<Admonition
type="warning"
className="mb-0"
title="Failed to retrieve project claim request details"
>
<p>Please retry your claim request from the requesting app</p>
{!!errorProjectClaim && <p className="mt-2">Error: {errorProjectClaim?.message}</p>}
{!!errorRequester && <p className="mt-2">Error: {errorRequester?.message}</p>}
</Admonition>
</ProjectClaimLayout>
)
}
@@ -112,6 +106,7 @@ const ClaimProjectPage: NextPageWithLayout = () => {
/>
)
}
return null
}
@@ -120,7 +115,7 @@ ClaimProjectPage.getLayout = (page) => (
<Head>
<title>Claim project | Supabase</title>
</Head>
<main className="flex-grow flex flex-col w-full h-full overflow-y-auto">{page}</main>
<main className="flex flex-col w-full min-h-screen overflow-y-auto">{page}</main>
</>
)