Skip to content

Commit 1d85aa6

Browse files
joshenlimjoshenlim
authored
Consolidate oauth apps perms descriptions, and make project perms clearer (supabase#37525)
1 parent 5da5ad0 commit 1d85aa6

File tree

6 files changed

+58
-41
lines changed

6 files changed

+58
-41
lines changed

‎apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { OAuthScope } from '@supabase/shared-types/out/constants'
22
import { Check } from 'lucide-react'
33

4+
import { PERMISSIONS_DESCRIPTIONS } from './OAuthApps.constants'
5+
46
export interface AuthorizeRequesterDetailsProps {
57
icon: string | null
68
name: string
@@ -48,7 +50,7 @@ export const ScopeSection = ({
4850
return null
4951
}
5052

51-
const AuthorizeRequesterDetails = ({
53+
export const AuthorizeRequesterDetails = ({
5254
icon,
5355
name,
5456
domain,
@@ -79,57 +81,57 @@ const AuthorizeRequesterDetails = ({
7981
</p>
8082
<div className="pt-2">
8183
<ScopeSection
82-
description="access to analytics logs."
84+
description={PERMISSIONS_DESCRIPTIONS.ANALYTICS}
8385
hasReadScope={scopes.includes(OAuthScope.ANALYTICS_READ)}
8486
hasWriteScope={scopes.includes(OAuthScope.ANALYTICS_WRITE)}
8587
/>
8688
<ScopeSection
87-
description="access to auth configurations and SSO providers."
89+
description={PERMISSIONS_DESCRIPTIONS.AUTH}
8890
hasReadScope={scopes.includes(OAuthScope.AUTH_READ)}
8991
hasWriteScope={scopes.includes(OAuthScope.AUTH_WRITE)}
9092
/>
9193
<ScopeSection
92-
description="access to Postgres configurations, SQL snippets, SSL enforcement configurations and Typescript schema types."
94+
description={PERMISSIONS_DESCRIPTIONS.DATABASE}
9395
hasReadScope={scopes.includes(OAuthScope.DATABASE_READ)}
9496
hasWriteScope={scopes.includes(OAuthScope.DATABASE_WRITE)}
9597
/>
9698
<ScopeSection
97-
description="access to custom domains and vanity subdomains."
99+
description={PERMISSIONS_DESCRIPTIONS.DOMAINS}
98100
hasReadScope={scopes.includes(OAuthScope.DOMAINS_READ)}
99101
hasWriteScope={scopes.includes(OAuthScope.DOMAINS_WRITE)}
100102
/>
101103
<ScopeSection
102-
description="access to edge functions."
104+
description={PERMISSIONS_DESCRIPTIONS.EDGE_FUNCTIONS}
103105
hasReadScope={scopes.includes(OAuthScope.EDGE_FUNCTIONS_READ)}
104106
hasWriteScope={scopes.includes(OAuthScope.EDGE_FUNCTIONS_WRITE)}
105107
/>
106108
<ScopeSection
107-
description="access to environments/branches."
109+
description={PERMISSIONS_DESCRIPTIONS.ENVIRONMENT}
108110
hasReadScope={scopes.includes(OAuthScope.ENVIRONMENT_READ)}
109111
hasWriteScope={scopes.includes(OAuthScope.ENVIRONMENT_WRITE)}
110112
/>
111113
<ScopeSection
112-
description="access to the organization and all its members."
114+
description={PERMISSIONS_DESCRIPTIONS.ORGANIZATIONS}
113115
hasReadScope={scopes.includes(OAuthScope.ORGANIZATIONS_READ)}
114116
hasWriteScope={scopes.includes(OAuthScope.ORGANIZATIONS_WRITE)}
115117
/>
116118
<ScopeSection
117-
description="access to metadata, its upgrade status, network restrictions and network bans."
119+
description={PERMISSIONS_DESCRIPTIONS.PROJECTS}
118120
hasReadScope={scopes.includes(OAuthScope.PROJECTS_READ)}
119121
hasWriteScope={scopes.includes(OAuthScope.PROJECTS_WRITE)}
120122
/>
121123
<ScopeSection
122-
description="access to PostgREST configurations."
124+
description={PERMISSIONS_DESCRIPTIONS.REST}
123125
hasReadScope={scopes.includes(OAuthScope.REST_READ)}
124126
hasWriteScope={scopes.includes(OAuthScope.REST_WRITE)}
125127
/>
126128
<ScopeSection
127-
description="access to API keys, secrets and pgsodium configurations."
129+
description={PERMISSIONS_DESCRIPTIONS.SECRETS}
128130
hasReadScope={scopes.includes(OAuthScope.SECRETS_READ)}
129131
hasWriteScope={scopes.includes(OAuthScope.SECRETS_WRITE)}
130132
/>
131133
<ScopeSection
132-
description="access to storage buckets and files."
134+
description={PERMISSIONS_DESCRIPTIONS.STORAGE}
133135
hasReadScope={scopes.includes(OAuthScope.STORAGE_READ)}
134136
hasWriteScope={scopes.includes(OAuthScope.STORAGE_WRITE)}
135137
/>
@@ -138,5 +140,3 @@ const AuthorizeRequesterDetails = ({
138140
</div>
139141
)
140142
}
141-
142-
export default AuthorizeRequesterDetails

‎apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.constants.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const PERMISSIONS_DESCRIPTIONS = {
2+
ANALYTICS: 'access to analytics logs.',
3+
AUTH: 'access to auth configurations and SSO providers.',
4+
DATABASE:
5+
'access to Postgres configurations, SQL snippets, SSL enforcement configurations and Typescript schema types.',
6+
DOMAINS: 'access to custom domains and vanity subdomains.',
7+
EDGE_FUNCTIONS: 'access to edge functions.',
8+
ENVIRONMENT: 'access to environments/branches.',
9+
ORGANIZATIONS: 'access to the organization and all its members.',
10+
PROJECTS:
11+
"access to creation and deletion of projects, each project's metadata, upgrade status, network restrictions and network bans.",
12+
REST: 'access to PostgREST configurations.',
13+
SECRETS: 'access to API keys, secrets and pgsodium configurations.',
14+
STORAGE: 'access to storage buckets and files.',
15+
}

‎apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/Scopes.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
DropdownMenuSeparator,
1212
DropdownMenuTrigger,
1313
} from 'ui'
14+
import { PERMISSIONS_DESCRIPTIONS } from '../OAuthApps.constants'
1415

1516
const ScopeDropdownCheckboxItem = ({
1617
children,
@@ -66,12 +67,12 @@ const Scope = ({
6667

6768
return (
6869
<div
69-
className="flex flex-row justify-between p-4 border first:rounded-t last:rounded-b"
70+
className="flex flex-row justify-between p-4 border first:rounded-t last:rounded-b gap-x-2"
7071
key={title}
7172
>
7273
<div className="flex flex-col">
7374
<span className="text-foreground text-sm">{title}</span>
74-
<span className="text-foreground-light text-xs">{description}</span>
75+
<span className="text-foreground-light text-xs capitalize-sentence">{description}</span>
7576
</div>
7677
<DropdownMenu>
7778
<DropdownMenuTrigger asChild>
@@ -109,87 +110,87 @@ export const ScopesPanel = ({
109110
<div className="-space-y-px">
110111
<Scope
111112
title="Analytics"
112-
description="Analytics logs."
113+
description={PERMISSIONS_DESCRIPTIONS.ANALYTICS}
113114
readScopeName={OAuthScope.ANALYTICS_READ}
114115
writeScopeName={OAuthScope.ANALYTICS_WRITE}
115116
scopes={scopes}
116117
setScopes={setScopes}
117118
/>
118119
<Scope
119120
title="Auth"
120-
description="Auth configurations and SSO providers."
121+
description={PERMISSIONS_DESCRIPTIONS.AUTH}
121122
readScopeName={OAuthScope.AUTH_READ}
122123
writeScopeName={OAuthScope.AUTH_WRITE}
123124
scopes={scopes}
124125
setScopes={setScopes}
125126
/>
126127
<Scope
127128
title="Database"
128-
description="Postgres configurations, SQL snippets, SSL enforcement configurations and Typescript schema types."
129+
description={PERMISSIONS_DESCRIPTIONS.DATABASE}
129130
readScopeName={OAuthScope.DATABASE_READ}
130131
writeScopeName={OAuthScope.DATABASE_WRITE}
131132
scopes={scopes}
132133
setScopes={setScopes}
133134
/>
134135
<Scope
135136
title="Domains"
136-
description="Custom domains and vanity subdomains."
137+
description={PERMISSIONS_DESCRIPTIONS.DOMAINS}
137138
readScopeName={OAuthScope.DOMAINS_READ}
138139
writeScopeName={OAuthScope.DOMAINS_WRITE}
139140
scopes={scopes}
140141
setScopes={setScopes}
141142
/>
142143
<Scope
143144
title="Edge Functions"
144-
description="Edge functions."
145+
description={PERMISSIONS_DESCRIPTIONS.EDGE_FUNCTIONS}
145146
readScopeName={OAuthScope.EDGE_FUNCTIONS_READ}
146147
writeScopeName={OAuthScope.EDGE_FUNCTIONS_WRITE}
147148
scopes={scopes}
148149
setScopes={setScopes}
149150
/>
150151
<Scope
151152
title="Environment"
152-
description="Environments/branches."
153+
description={PERMISSIONS_DESCRIPTIONS.ENVIRONMENT}
153154
readScopeName={OAuthScope.ENVIRONMENT_READ}
154155
writeScopeName={OAuthScope.ENVIRONMENT_WRITE}
155156
scopes={scopes}
156157
setScopes={setScopes}
157158
/>
158159
<Scope
159160
title="Organizations"
160-
description="Organizations and all its members."
161+
description={PERMISSIONS_DESCRIPTIONS.ORGANIZATIONS}
161162
readScopeName={OAuthScope.ORGANIZATIONS_READ}
162163
writeScopeName={OAuthScope.ORGANIZATIONS_WRITE}
163164
scopes={scopes}
164165
setScopes={setScopes}
165166
/>
166167
<Scope
167168
title="Projects"
168-
description="Metadata, upgrade status, network restrictions and network bans."
169+
description={PERMISSIONS_DESCRIPTIONS.PROJECTS}
169170
readScopeName={OAuthScope.PROJECTS_READ}
170171
writeScopeName={OAuthScope.PROJECTS_WRITE}
171172
scopes={scopes}
172173
setScopes={setScopes}
173174
/>
174175
<Scope
175176
title="REST"
176-
description="PostgREST configurations."
177+
description={PERMISSIONS_DESCRIPTIONS.REST}
177178
readScopeName={OAuthScope.REST_READ}
178179
writeScopeName={OAuthScope.REST_WRITE}
179180
scopes={scopes}
180181
setScopes={setScopes}
181182
/>
182183
<Scope
183184
title="Secrets"
184-
description="API keys, secrets and pgsodium configurations."
185+
description={PERMISSIONS_DESCRIPTIONS.SECRETS}
185186
readScopeName={OAuthScope.SECRETS_READ}
186187
writeScopeName={OAuthScope.SECRETS_WRITE}
187188
scopes={scopes}
188189
setScopes={setScopes}
189190
/>
190191
<Scope
191192
title="Storage"
192-
description="Storage buckets and files."
193+
description={PERMISSIONS_DESCRIPTIONS.STORAGE}
193194
readScopeName={OAuthScope.STORAGE_READ}
194195
writeScopeName={OAuthScope.STORAGE_WRITE}
195196
scopes={scopes}

‎apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
SidePanel,
2727
cn,
2828
} from 'ui'
29-
import AuthorizeRequesterDetails from '../AuthorizeRequesterDetails'
29+
import { AuthorizeRequesterDetails } from '../AuthorizeRequesterDetails'
3030
import { OAuthSecrets } from '../OAuthSecrets/OAuthSecrets'
3131
import { ScopesPanel } from './Scopes'
3232

‎apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { OAuthScope } from '@supabase/shared-types/out/constants'
2+
import { useQueryClient } from '@tanstack/react-query'
23
import { CheckCircle2, ChevronRight, ChevronsLeftRight } from 'lucide-react'
34
import Image from 'next/image'
45
import { useRouter } from 'next/router'
56
import { toast } from 'sonner'
67

7-
import { useQueryClient } from '@tanstack/react-query'
88
import { useParams } from 'common'
99
import { useApiAuthorizationApproveMutation } from 'data/api-authorization/api-authorization-approve-mutation'
1010
import { ApiAuthorizationResponse } from 'data/api-authorization/api-authorization-query'
@@ -22,6 +22,7 @@ import {
2222
} from 'ui'
2323
import { Admonition } from 'ui-patterns/admonition'
2424
import { ScopeSection } from '../OAuthApps/AuthorizeRequesterDetails'
25+
import { PERMISSIONS_DESCRIPTIONS } from '../OAuthApps/OAuthApps.constants'
2526
import { ProjectClaimLayout } from './layout'
2627

2728
export const ProjectClaimConfirm = ({
@@ -188,57 +189,57 @@ export const ProjectClaimConfirm = ({
188189
>
189190
<div>
190191
<ScopeSection
191-
description="access to analytics logs."
192+
description={PERMISSIONS_DESCRIPTIONS.ANALYTICS}
192193
hasReadScope={requester.scopes.includes(OAuthScope.ANALYTICS_READ)}
193194
hasWriteScope={requester.scopes.includes(OAuthScope.ANALYTICS_WRITE)}
194195
/>
195196
<ScopeSection
196-
description="access to auth configurations and SSO providers."
197+
description={PERMISSIONS_DESCRIPTIONS.AUTH}
197198
hasReadScope={requester.scopes.includes(OAuthScope.AUTH_READ)}
198199
hasWriteScope={requester.scopes.includes(OAuthScope.AUTH_WRITE)}
199200
/>
200201
<ScopeSection
201-
description="access to Postgres configurations, SQL snippets, SSL enforcement configurations and Typescript schema types."
202+
description={PERMISSIONS_DESCRIPTIONS.DATABASE}
202203
hasReadScope={requester.scopes.includes(OAuthScope.DATABASE_READ)}
203204
hasWriteScope={requester.scopes.includes(OAuthScope.DATABASE_WRITE)}
204205
/>
205206
<ScopeSection
206-
description="access to custom domains and vanity subdomains."
207+
description={PERMISSIONS_DESCRIPTIONS.DOMAINS}
207208
hasReadScope={requester.scopes.includes(OAuthScope.DOMAINS_READ)}
208209
hasWriteScope={requester.scopes.includes(OAuthScope.DOMAINS_WRITE)}
209210
/>
210211
<ScopeSection
211-
description="access to edge functions."
212+
description={PERMISSIONS_DESCRIPTIONS.EDGE_FUNCTIONS}
212213
hasReadScope={requester.scopes.includes(OAuthScope.EDGE_FUNCTIONS_READ)}
213214
hasWriteScope={requester.scopes.includes(OAuthScope.EDGE_FUNCTIONS_WRITE)}
214215
/>
215216
<ScopeSection
216-
description="access to environments/branches."
217+
description={PERMISSIONS_DESCRIPTIONS.ENVIRONMENT}
217218
hasReadScope={requester.scopes.includes(OAuthScope.ENVIRONMENT_READ)}
218219
hasWriteScope={requester.scopes.includes(OAuthScope.ENVIRONMENT_WRITE)}
219220
/>
220221
<ScopeSection
221-
description="access to the organization and all its members."
222+
description={PERMISSIONS_DESCRIPTIONS.ORGANIZATIONS}
222223
hasReadScope={requester.scopes.includes(OAuthScope.ORGANIZATIONS_READ)}
223224
hasWriteScope={requester.scopes.includes(OAuthScope.ORGANIZATIONS_WRITE)}
224225
/>
225226
<ScopeSection
226-
description="access to metadata, its upgrade status, network restrictions and network bans."
227+
description={PERMISSIONS_DESCRIPTIONS.PROJECTS}
227228
hasReadScope={requester.scopes.includes(OAuthScope.PROJECTS_READ)}
228229
hasWriteScope={requester.scopes.includes(OAuthScope.PROJECTS_WRITE)}
229230
/>
230231
<ScopeSection
231-
description="access to PostgREST configurations."
232+
description={PERMISSIONS_DESCRIPTIONS.REST}
232233
hasReadScope={requester.scopes.includes(OAuthScope.REST_READ)}
233234
hasWriteScope={requester.scopes.includes(OAuthScope.REST_WRITE)}
234235
/>
235236
<ScopeSection
236-
description="access to API keys, secrets and pgsodium configurations."
237+
description={PERMISSIONS_DESCRIPTIONS.SECRETS}
237238
hasReadScope={requester.scopes.includes(OAuthScope.SECRETS_READ)}
238239
hasWriteScope={requester.scopes.includes(OAuthScope.SECRETS_WRITE)}
239240
/>
240241
<ScopeSection
241-
description="access to storage buckets and files."
242+
description={PERMISSIONS_DESCRIPTIONS.STORAGE}
242243
hasReadScope={requester.scopes.includes(OAuthScope.STORAGE_READ)}
243244
hasWriteScope={requester.scopes.includes(OAuthScope.STORAGE_WRITE)}
244245
/>

‎apps/studio/pages/authorize.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'
66
import { toast } from 'sonner'
77

88
import { useParams } from 'common'
9-
import AuthorizeRequesterDetails from 'components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails'
9+
import { AuthorizeRequesterDetails } from 'components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails'
1010
import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
1111
import { FormPanel } from 'components/ui/Forms/FormPanel'
1212
import ShimmeringLoader from 'components/ui/ShimmeringLoader'

0 commit comments

Comments
 (0)