Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit335ef2b

Browse files
committed
callout
1 parent657ca2d commit335ef2b

File tree

4 files changed

+132
-2
lines changed

4 files changed

+132
-2
lines changed
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
importdayjsfrom'dayjs'
2+
importrelativeTimefrom'dayjs/plugin/relativeTime'
3+
importLinkfrom'next/link'
4+
5+
import{useIncidentStatusQuery}from'data/platform/incident-status-query'
6+
import{Button}from'ui'
7+
import{Admonition}from'ui-patterns/admonition'
8+
9+
dayjs.extend(relativeTime)
10+
11+
exportfunctionIncidentCallout(){
12+
const{data:incidents, isPending, isError}=useIncidentStatusQuery()
13+
14+
// Don't show anything while loading or on error
15+
if(isPending||isError||!incidents||incidents.length===0){
16+
returnnull
17+
}
18+
19+
// Show the most recent incident (or all if there's only one)
20+
constprimaryIncident=incidents[0]
21+
consthasMultipleIncidents=incidents.length>1
22+
23+
constformatActiveSince=(activeSince:string)=>{
24+
try{
25+
constdate=dayjs(activeSince)
26+
constdaysDiff=dayjs().diff(date,'day')
27+
28+
// If less than 1 day, show relative time (e.g., "2 hours ago")
29+
if(daysDiff<1){
30+
returndate.fromNow()
31+
}
32+
33+
// Otherwise show formatted date (e.g., "Jan 15, 2024 at 2:30 PM")
34+
returndate.format('MMM D, YYYY [at] h:mm A')
35+
}catch{
36+
returnactiveSince
37+
}
38+
}
39+
40+
return(
41+
<Admonition
42+
type="warning"
43+
title={hasMultipleIncidents ?'Active incidents ongoing' :'Active incident ongoing'}
44+
description={
45+
<divclassName="flex flex-col gap-y-3">
46+
<divclassName="flex flex-col gap-y-2">
47+
<pclassName="text-sm leading-normal">
48+
<strong>{primaryIncident.name}</strong>
49+
</p>
50+
{primaryIncident.status&&(
51+
<pclassName="text-sm text-foreground-light">
52+
Status:{primaryIncident.status}
53+
</p>
54+
)}
55+
<pclassName="text-sm text-foreground-light">
56+
Active since:{formatActiveSince(primaryIncident.active_since)}
57+
</p>
58+
{hasMultipleIncidents&&(
59+
<pclassName="text-sm text-foreground-light">
60+
{incidents.length-1} other incident{incidents.length-1>1 ?'s' :''} ongoing
61+
</p>
62+
)}
63+
</div>
64+
<div>
65+
<ButtonasChildtype="default">
66+
<Linkhref="https://status.supabase.com/"target="_blank"rel="noreferrer">
67+
View status page
68+
</Link>
69+
</Button>
70+
</div>
71+
</div>
72+
}
73+
/>
74+
)
75+
}
76+

‎apps/studio/components/interfaces/Support/SupportFormPage.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import CopyButton from 'components/ui/CopyButton'
1111
importInformationBoxfrom'components/ui/InformationBox'
1212
import{InlineLink,InlineLinkClassName}from'components/ui/InlineLink'
1313
import{useOrganizationsQuery}from'data/organizations/organizations-query'
14+
import{useIncidentStatusQuery}from'data/platform/incident-status-query'
1415
import{usePlatformStatusQuery}from'data/platform/platform-status-query'
1516
import{useSendEventMutation}from'data/telemetry/send-event-mutation'
1617
import{useStateTransition}from'hooks/misc/useStateTransition'
@@ -19,6 +20,7 @@ import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
1920
import{AIAssistantOption}from'./AIAssistantOption'
2021
import{DiscordCTACard}from'./DiscordCTACard'
2122
import{HighlightProjectRefProvider,useHighlightProjectRefContext}from'./HighlightContext'
23+
import{IncidentCallout}from'./IncidentCallout'
2224
import{Success}from'./Success'
2325
importtype{ExtendedSupportCategories}from'./Support.constants'
2426
importtype{SupportFormValues}from'./SupportForm.schema'
@@ -74,6 +76,9 @@ function SupportFormPageContent() {
7476
constselectedOrg=organizations?.find((org)=>org.slug===orgSlug)
7577
constisFreePlan=selectedOrg?.plan.id==='free'
7678

79+
const{data:incidents}=useIncidentStatusQuery()
80+
consthasActiveIncidents=incidents&&incidents.length>0
81+
7782
constsendTelemetry=useSupportFormTelemetry()
7883
useStateTransition(state,'submitting','success',(_,curr)=>{
7984
toast.success('Support request sent. Thank you!')
@@ -95,8 +100,14 @@ function SupportFormPageContent() {
95100
<SupportFormHeader/>
96101

97102
<divclassName="flex flex-col gap-y-4">
98-
<AIAssistantOptionprojectRef={projectRef}organizationSlug={orgSlug}/>
99-
<DiscordCTACardorganizationSlug={orgSlug}/>
103+
{hasActiveIncidents ?(
104+
<IncidentCallout/>
105+
) :(
106+
<>
107+
<AIAssistantOptionprojectRef={projectRef}organizationSlug={orgSlug}/>
108+
<DiscordCTACardorganizationSlug={orgSlug}/>
109+
</>
110+
)}
100111
</div>
101112

102113
<SupportFormBody
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import{useQuery}from'@tanstack/react-query'
2+
3+
import{platformKeys}from'./keys'
4+
import{UseCustomQueryOptions}from'types'
5+
6+
exporttypeIncidentInfo={
7+
id:string
8+
name:string
9+
status:string
10+
active_since:string
11+
}
12+
13+
exportasyncfunctiongetIncidentStatus(signal?:AbortSignal):Promise<IncidentInfo[]>{
14+
constresponse=awaitfetch('/api/incident-status',{
15+
signal,
16+
method:'GET',
17+
headers:{
18+
'Content-Type':'application/json',
19+
},
20+
})
21+
22+
if(!response.ok){
23+
thrownewError(`Failed to fetch incident status:${response.statusText}`)
24+
}
25+
26+
constdata=awaitresponse.json()
27+
returndataasIncidentInfo[]
28+
}
29+
30+
exporttypeIncidentStatusData=Awaited<ReturnType<typeofgetIncidentStatus>>
31+
exporttypeIncidentStatusError=unknown
32+
33+
exportconstuseIncidentStatusQuery=<TData=IncidentStatusData>(
34+
options:UseCustomQueryOptions<IncidentStatusData,IncidentStatusError,TData>={}
35+
)=>
36+
useQuery<IncidentStatusData,IncidentStatusError,TData>({
37+
queryKey:platformKeys.incidentStatus(),
38+
queryFn:({ signal})=>getIncidentStatus(signal),
39+
staleTime:1000*60*5,// 5 minutes to match API cache
40+
...options,
41+
})
42+

‎apps/studio/data/platform/keys.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
exportconstplatformKeys={
22
status:()=>['platform','status']asconst,
3+
incidentStatus:()=>['platform','incident-status']asconst,
34
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp