ApiAuthorization.Approved.tsx45 lines · main

1	import dayjs from 'dayjs'
2	import type { ReactNode } from 'react'
3	import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardHeader, CheckIcon } from 'ui'
4
5	import { AuthorizeRequesterDetails } from '@/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails'
6	import type { ApiAuthorizationResponse } from '@/data/api-authorization/api-authorization-query'
7	import type { Organization } from '@/types'
8
9	export interface ApiAuthorizationApprovedScreenProps {
10	requester: ApiAuthorizationResponse
11	organization: Organization | undefined
12	}
13
14	export function ApiAuthorizationApprovedScreen({
15	requester,
16	organization,
17	}: ApiAuthorizationApprovedScreenProps): ReactNode {
18	return (
19	<Card>
20	<CardHeader>Authorize API access for {requester.name}</CardHeader>
21	<CardContent className="p-0">
22	<Alert className="border-0 rounded-t-none">
23	<CheckIcon />
24	<AlertTitle>This authorization request has been approved</AlertTitle>
25	<AlertDescription>
26	<p>
27	{requester.name} has been approved access to the organization "
28	{organization?.name ?? 'Unknown'}" and all of its projects for the following scopes:
29	</p>
30	<AuthorizeRequesterDetails
31	showOnlyScopes
32	icon={requester.icon}
33	name={requester.name}
34	domain={requester.domain}
35	scopes={requester.scopes}
36	/>
37	<p className="mt-2">
38	Approved on: {dayjs(requester.approved_at).format('DD MMM YYYY HH:mm:ss (ZZ)')}
39	</p>
40	</AlertDescription>
41	</Alert>
42	</CardContent>
43	</Card>
44	)
45	}