Skip to content

Commit c8dbc57

Browse files
joshenlimjoshenlim
authored
Minor update to new API keys modal for disabling / reenabling legacy keys (supabase#36554)
* Minor update to new API keys modal for disabling / reenabling legacy keys * Minor update * Refresh user count as well when clicking refresh in auth users management
1 parent 04c5484 commit c8dbc57

File tree

3 files changed

+69
-50
lines changed

3 files changed

+69
-50
lines changed

‎apps/studio/components/interfaces/Auth/Users/UsersV2.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export const UsersV2 = () => {
119119
}
120120
)
121121

122-
const { data: countData } = useUsersCountQuery({
122+
const { data: countData, refetch: refetchCount } = useUsersCountQuery({
123123
projectRef,
124124
connectionString: project?.connectionString,
125125
keywords: filterKeywords,
@@ -437,7 +437,10 @@ export const UsersV2 = () => {
437437
icon={<RefreshCw />}
438438
type="default"
439439
loading={isRefetching && !isFetchingNextPage}
440-
onClick={() => refetch()}
440+
onClick={() => {
441+
refetch()
442+
refetchCount()
443+
}}
441444
>
442445
Refresh
443446
</Button>

‎apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx‎

Lines changed: 63 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1+
import { PermissionAction } from '@supabase/shared-types/out/constants'
12
import { useState } from 'react'
23
import { toast } from 'sonner'
34

4-
import { PermissionAction } from '@supabase/shared-types/out/constants'
55
import { useParams } from 'common'
66
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
77
import { useToggleLegacyAPIKeysMutation } from 'data/api-keys/legacy-api-key-toggle-mutation'
88
import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query'
99
import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
10-
import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, CriticalIcon } from 'ui'
1110
import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
11+
import Panel from '../Panel'
1212

1313
export const ToggleLegacyApiKeysPanel = () => {
1414
const { ref: projectRef } = useParams()
@@ -20,44 +20,49 @@ export const ToggleLegacyApiKeysPanel = () => {
2020
const { can: canUpdateAPIKeys, isSuccess: isPermissionsSuccess } =
2121
useAsyncCheckProjectPermissions(PermissionAction.SECRETS_WRITE, '*')
2222

23+
const { enabled: isLegacyKeysEnabled } = legacyAPIKeysStatusData || {}
24+
2325
if (!(isLegacyAPIKeysStatusSuccess && isPermissionsSuccess)) {
2426
return null
2527
}
2628

2729
return (
2830
<section>
29-
<Alert_Shadcn_ variant={legacyAPIKeysStatusData.enabled ? 'destructive' : 'warning'}>
30-
<CriticalIcon />
31-
<AlertTitle_Shadcn_>
32-
{legacyAPIKeysStatusData.enabled
33-
? 'Disabling your legacy API keys may cause your applications to break.'
34-
: 'Re-enabling your legacy API keys may expose your applications to security risks.'}
35-
</AlertTitle_Shadcn_>
36-
<AlertDescription_Shadcn_>
37-
{legacyAPIKeysStatusData.enabled
38-
? 'Make sure you are no longer using your legacy API keys before proceeding.'
39-
: "Make sure you've tested your RLS policies."}
40-
</AlertDescription_Shadcn_>
41-
<div className="mt-2">
42-
<ButtonTooltip
43-
type={legacyAPIKeysStatusData.enabled ? 'danger' : 'warning'}
44-
onClick={() => setIsConfirmOpen(true)}
45-
disabled={!canUpdateAPIKeys}
46-
tooltip={{
47-
content: {
48-
side: 'bottom',
49-
text: !canUpdateAPIKeys
50-
? 'You need additional permissions to enable or disable JWT-based API keys'
51-
: undefined,
52-
},
53-
}}
54-
>
55-
{legacyAPIKeysStatusData.enabled
56-
? 'Disable JWT-based API keys'
57-
: 'Re-enable JWT-based API keys'}
58-
</ButtonTooltip>
59-
</div>
60-
</Alert_Shadcn_>
31+
<Panel>
32+
<Panel.Content>
33+
<div className="flex justify-between">
34+
<div>
35+
<p className="text-sm">
36+
{isLegacyKeysEnabled ? 'Disable legacy API keys' : 'Re-enabling legacy API keys'}
37+
</p>
38+
<p className="text-foreground-light text-sm">
39+
{isLegacyKeysEnabled
40+
? 'Make sure you are no longer using your legacy API keys before proceeding.'
41+
: 'Ensure that your RLS policies are in place prior to re-enabling legacy keys.'}
42+
</p>
43+
</div>
44+
<div className="flex items-center">
45+
<ButtonTooltip
46+
type="default"
47+
onClick={() => setIsConfirmOpen(true)}
48+
disabled={!canUpdateAPIKeys}
49+
tooltip={{
50+
content: {
51+
side: 'bottom',
52+
text: !canUpdateAPIKeys
53+
? 'You need additional permissions to enable or disable JWT-based API keys'
54+
: undefined,
55+
},
56+
}}
57+
>
58+
{legacyAPIKeysStatusData.enabled
59+
? 'Disable JWT-based API keys'
60+
: 'Re-enable JWT-based API keys'}
61+
</ButtonTooltip>
62+
</div>
63+
</div>
64+
</Panel.Content>
65+
</Panel>
6166

6267
<ToggleApiKeysModal
6368
visible={isConfirmOpen}
@@ -78,6 +83,7 @@ const ToggleApiKeysModal = ({
7883
legacyAPIKeysStatusData: { enabled: boolean }
7984
}) => {
8085
const { ref: projectRef } = useParams()
86+
const { enabled: isLegacyKeysEnabled } = legacyAPIKeysStatusData || {}
8187

8288
const { mutate: toggleLegacyAPIKey, isLoading: isTogglingLegacyAPIKey } =
8389
useToggleLegacyAPIKeysMutation()
@@ -102,27 +108,37 @@ const ToggleApiKeysModal = ({
102108

103109
return (
104110
<TextConfirmModal
111+
size="medium"
105112
visible={visible}
106113
onCancel={() => onClose()}
107114
onConfirm={onToggleLegacyAPIKeysEnabled}
108-
title={
109-
legacyAPIKeysStatusData.enabled ? 'Disable JWT-based keys' : 'Re-enable JWT-based keys'
110-
}
111-
confirmString={legacyAPIKeysStatusData.enabled ? 'disable' : 're-enable'}
112-
confirmLabel={`Yes, ${legacyAPIKeysStatusData.enabled ? 'disable' : 're-enable'} anon and service_role`}
113-
confirmPlaceholder={legacyAPIKeysStatusData.enabled ? 'disable' : 're-enable'}
115+
title={isLegacyKeysEnabled ? 'Disable JWT-based keys' : 'Re-enable JWT-based keys'}
116+
confirmString={isLegacyKeysEnabled ? 'disable' : 're-enable'}
117+
confirmLabel={`Confirm to ${isLegacyKeysEnabled ? 'disable' : 're-enable'} anon and service_role`}
118+
confirmPlaceholder={isLegacyKeysEnabled ? 'disable' : 're-enable'}
114119
loading={isTogglingLegacyAPIKey}
115-
variant={legacyAPIKeysStatusData.enabled ? 'destructive' : 'default'}
120+
variant={isLegacyKeysEnabled ? 'destructive' : 'default'}
116121
alert={
117-
legacyAPIKeysStatusData.enabled
122+
isLegacyKeysEnabled
118123
? {
119-
title: 'Disabling can cause downtime!',
120-
description: `If you disable your anon and service_role keys while they are in use, your applications will stop functioning. All API endpoints will receive HTTP 401 Unauthorized. Make sure you are no longer using them before proceeding.`,
124+
title: 'Ensure legacy keys are no longer in use before disabling',
125+
description: (
126+
<span className="prose text-sm">
127+
Disabling <code>anon</code> and <code>service_role</code> keys while they are in
128+
use will cause downtime for your application. Ensure they are no longer in use
129+
before proceeding.
130+
</span>
131+
),
121132
}
122133
: {
123-
title: 'Prefer publishable and secret keys',
124-
description:
125-
'While re-enabling anon and service_role keys makes sense in some cases, a better and more secure alternative is the publishable or secret key. Consider using those before proceeding!',
134+
title: 'Publishable and secret keys are preferred',
135+
description: (
136+
<span className="prose text-sm">
137+
Re-enabling <code>anon</code> and <code>service_role</code> keys may be
138+
appropriate in certain cases, but using a publishable and secret key is more
139+
secure. We recommend against re-enabling legacy API keys
140+
</span>
141+
),
126142
}
127143
}
128144
/>

‎packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export interface TextConfirmModalProps {
4141
alert?: {
4242
base?: React.ComponentProps<typeof Alert_Shadcn_>
4343
title?: string
44-
description?: string
44+
description?: string | ReactNode
4545
}
4646
input?: React.ComponentProps<typeof Input_Shadcn_>
4747
label?: React.ComponentProps<typeof FormLabel_Shadcn_>

0 commit comments

Comments
 (0)