Skip to content

Commit e648966

Browse files
joshenlimivasilov
joshenlim
and
ivasilov
authored
Add URL param support to toggle connect UI (supabase#31241)
* Add URL param support to toggle connect UI * Fix leaving team redirects to landing page * Fix leaving team redirects to landing page * Fix grammar * Add autocomplete off to team settings search + delete project input modal * Shift logic to Connect, and clean up param when close * Use nuqs to manage Connect state instead of valtio * Fix a failing test. --------- Co-authored-by: Ivan Vasilov <[email protected]>
1 parent f6d9617 commit e648966

File tree

9 files changed

+165
-158
lines changed

9 files changed

+165
-158
lines changed

‎apps/studio/components/interfaces/Connect/Connect.tsx‎

Lines changed: 123 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Panel from 'components/ui/Panel'
1010
import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
1111
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
1212
import { useFlag } from 'hooks/ui/useFlag'
13-
import { useAppStateSnapshot } from 'state/app-state'
13+
import { parseAsBoolean, useQueryState } from 'nuqs'
1414
import {
1515
Button,
1616
DIALOG_PADDING_X,
@@ -33,10 +33,14 @@ import ConnectDropdown from './ConnectDropdown'
3333
import ConnectTabContent from './ConnectTabContent'
3434

3535
const Connect = () => {
36-
const state = useAppStateSnapshot()
3736
const { ref: projectRef } = useParams()
3837
const connectDialogUpdate = useFlag('connectDialogUpdate')
3938

39+
const [showConnect, setShowConnect] = useQueryState(
40+
'showConnect',
41+
parseAsBoolean.withDefault(false)
42+
)
43+
4044
const [connectionObject, setConnectionObject] = useState<ConnectionType[]>(FRAMEWORKS)
4145
const [selectedParent, setSelectedParent] = useState(connectionObject[0].key) // aka nextjs
4246
const [selectedChild, setSelectedChild] = useState(
@@ -148,141 +152,135 @@ const Connect = () => {
148152
})
149153

150154
return (
151-
<>
152-
<Dialog open={state.showConnectDialog} onOpenChange={state.setShowConnectDialog}>
153-
<DialogTrigger asChild>
154-
<Button
155-
type={connectDialogUpdate ? 'default' : 'primary'}
156-
className={cn(connectDialogUpdate && 'rounded-full')}
157-
icon={<Plug className="rotate-90" />}
158-
>
159-
<span>Connect</span>
160-
</Button>
161-
</DialogTrigger>
162-
<DialogContent className={cn('sm:max-w-5xl p-0')} centered={false}>
163-
<DialogHeader className={DIALOG_PADDING_X}>
164-
<DialogTitle>Connect to your project</DialogTitle>
165-
<DialogDescription>
166-
Get the connection strings and environment variables for your app
167-
</DialogDescription>
168-
</DialogHeader>
155+
<Dialog open={showConnect} onOpenChange={(open) => setShowConnect(!open ? null : open)}>
156+
<DialogTrigger asChild>
157+
<Button
158+
type={connectDialogUpdate ? 'default' : 'primary'}
159+
className={cn(connectDialogUpdate && 'rounded-full')}
160+
icon={<Plug className="rotate-90" />}
161+
>
162+
<span>Connect</span>
163+
</Button>
164+
</DialogTrigger>
165+
<DialogContent className={cn('sm:max-w-5xl p-0')} centered={false}>
166+
<DialogHeader className={DIALOG_PADDING_X}>
167+
<DialogTitle>Connect to your project</DialogTitle>
168+
<DialogDescription>
169+
Get the connection strings and environment variables for your app
170+
</DialogDescription>
171+
</DialogHeader>
169172

170-
<Tabs_Shadcn_
171-
defaultValue="direct"
172-
onValueChange={(value) => handleConnectionType(value)}
173-
>
174-
<TabsList_Shadcn_ className={cn('flex gap-x-4', DIALOG_PADDING_X)}>
175-
{CONNECTION_TYPES.map((type) => (
176-
<TabsTrigger_Shadcn_ key={type.key} value={type.key} className="px-0">
177-
{type.label}
178-
</TabsTrigger_Shadcn_>
179-
))}
180-
</TabsList_Shadcn_>
173+
<Tabs_Shadcn_ defaultValue="direct" onValueChange={(value) => handleConnectionType(value)}>
174+
<TabsList_Shadcn_ className={cn('flex gap-x-4', DIALOG_PADDING_X)}>
175+
{CONNECTION_TYPES.map((type) => (
176+
<TabsTrigger_Shadcn_ key={type.key} value={type.key} className="px-0">
177+
{type.label}
178+
</TabsTrigger_Shadcn_>
179+
))}
180+
</TabsList_Shadcn_>
181181

182-
{CONNECTION_TYPES.map((type) => {
183-
const hasChildOptions =
184-
(connectionObject.find((parent) => parent.key === selectedParent)?.children
185-
.length || 0) > 0
186-
const hasGrandChildOptions =
187-
(connectionObject
188-
.find((parent) => parent.key === selectedParent)
189-
?.children.find((child) => child.key === selectedChild)?.children.length || 0) > 0
190-
191-
if (type.key === 'direct') {
192-
return (
193-
<TabsContent_Shadcn_
194-
key="direct"
195-
value="direct"
196-
className={cn('!mt-0', 'p-0', 'flex flex-col gap-6')}
197-
>
198-
<div className={DIALOG_PADDING_Y}>
199-
{connectDialogUpdate ? (
200-
<DatabaseConnectionString />
201-
) : (
202-
<div className="px-7">
203-
<OldDatabaseConnectionString appearance="minimal" />
204-
</div>
205-
)}
206-
</div>
207-
</TabsContent_Shadcn_>
208-
)
209-
}
182+
{CONNECTION_TYPES.map((type) => {
183+
const hasChildOptions =
184+
(connectionObject.find((parent) => parent.key === selectedParent)?.children.length ||
185+
0) > 0
186+
const hasGrandChildOptions =
187+
(connectionObject
188+
.find((parent) => parent.key === selectedParent)
189+
?.children.find((child) => child.key === selectedChild)?.children.length || 0) > 0
210190

191+
if (type.key === 'direct') {
211192
return (
212193
<TabsContent_Shadcn_
213-
key={`content-${type.key}`}
214-
value={type.key}
215-
className={cn(DIALOG_PADDING_X, DIALOG_PADDING_Y, '!mt-0')}
194+
key="direct"
195+
value="direct"
196+
className={cn('!mt-0', 'p-0', 'flex flex-col gap-6')}
216197
>
217-
<div className="flex justify-between">
218-
<div className="flex items-center gap-3">
198+
<div className={DIALOG_PADDING_Y}>
199+
{connectDialogUpdate ? (
200+
<DatabaseConnectionString />
201+
) : (
202+
<div className="px-7">
203+
<OldDatabaseConnectionString appearance="minimal" />
204+
</div>
205+
)}
206+
</div>
207+
</TabsContent_Shadcn_>
208+
)
209+
}
210+
211+
return (
212+
<TabsContent_Shadcn_
213+
key={`content-${type.key}`}
214+
value={type.key}
215+
className={cn(DIALOG_PADDING_X, DIALOG_PADDING_Y, '!mt-0')}
216+
>
217+
<div className="flex justify-between">
218+
<div className="flex items-center gap-3">
219+
<ConnectDropdown
220+
state={selectedParent}
221+
updateState={handleParentChange}
222+
label={
223+
connectionObject === FRAMEWORKS || connectionObject === MOBILES
224+
? 'Framework'
225+
: 'Tool'
226+
}
227+
items={connectionObject}
228+
/>
229+
{selectedParent && hasChildOptions && (
219230
<ConnectDropdown
220-
state={selectedParent}
221-
updateState={handleParentChange}
222-
label={
223-
connectionObject === FRAMEWORKS || connectionObject === MOBILES
224-
? 'Framework'
225-
: 'Tool'
226-
}
227-
items={connectionObject}
231+
state={selectedChild}
232+
updateState={handleChildChange}
233+
label="Using"
234+
items={getChildOptions()}
235+
/>
236+
)}
237+
{selectedChild && hasGrandChildOptions && (
238+
<ConnectDropdown
239+
state={selectedGrandchild}
240+
updateState={handleGrandchildChange}
241+
label="With"
242+
items={getGrandchildrenOptions()}
228243
/>
229-
{selectedParent && hasChildOptions && (
230-
<ConnectDropdown
231-
state={selectedChild}
232-
updateState={handleChildChange}
233-
label="Using"
234-
items={getChildOptions()}
235-
/>
236-
)}
237-
{selectedChild && hasGrandChildOptions && (
238-
<ConnectDropdown
239-
state={selectedGrandchild}
240-
updateState={handleGrandchildChange}
241-
label="With"
242-
items={getGrandchildrenOptions()}
243-
/>
244-
)}
245-
</div>
246-
{connectionObject.find((item) => item.key === selectedParent)?.guideLink && (
247-
<Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
248-
<a
249-
target="_blank"
250-
rel="noreferrer"
251-
href={
252-
connectionObject.find((item) => item.key === selectedParent)
253-
?.guideLink || ''
254-
}
255-
>
256-
{connectionObject.find((item) => item.key === selectedParent)?.label}{' '}
257-
guide
258-
</a>
259-
</Button>
260244
)}
261245
</div>
262-
<p className="text-xs text-foreground-lighter my-3">
263-
Add the following files below to your application
264-
</p>
265-
<ConnectTabContent
266-
projectKeys={projectKeys}
267-
filePath={filePath}
268-
className="rounded-b-none"
269-
/>
270-
<Panel.Notice
271-
className="border border-t-0 rounded-lg rounded-t-none"
272-
title="New API keys coming Q4 2024"
273-
description={`
246+
{connectionObject.find((item) => item.key === selectedParent)?.guideLink && (
247+
<Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
248+
<a
249+
target="_blank"
250+
rel="noreferrer"
251+
href={
252+
connectionObject.find((item) => item.key === selectedParent)?.guideLink ||
253+
''
254+
}
255+
>
256+
{connectionObject.find((item) => item.key === selectedParent)?.label} guide
257+
</a>
258+
</Button>
259+
)}
260+
</div>
261+
<p className="text-xs text-foreground-lighter my-3">
262+
Add the following files below to your application
263+
</p>
264+
<ConnectTabContent
265+
projectKeys={projectKeys}
266+
filePath={filePath}
267+
className="rounded-b-none"
268+
/>
269+
<Panel.Notice
270+
className="border border-t-0 rounded-lg rounded-t-none"
271+
title="New API keys coming Q4 2024"
272+
description={`
274273
\`anon\` and \`service_role\` API keys will be changing to \`publishable\` and \`secret\` API keys.
275274
`}
276-
href="https://github.com/orgs/supabase/discussions/29260"
277-
buttonText="Read the announcement"
278-
/>
279-
</TabsContent_Shadcn_>
280-
)
281-
})}
282-
</Tabs_Shadcn_>
283-
</DialogContent>
284-
</Dialog>
285-
</>
275+
href="https://github.com/orgs/supabase/discussions/29260"
276+
buttonText="Read the announcement"
277+
/>
278+
</TabsContent_Shadcn_>
279+
)
280+
})}
281+
</Tabs_Shadcn_>
282+
</DialogContent>
283+
</Dialog>
286284
)
287285
}
288286

‎apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useOrganizationMembersQuery } from 'data/organizations/organization-mem
1717
import { usePermissionsQuery } from 'data/permissions/permissions-query'
1818
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
1919
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
20+
import { BASE_PATH } from 'lib/constants'
2021
import { useProfile } from 'lib/profile'
2122
import { Input } from 'ui'
2223
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
@@ -25,13 +26,12 @@ import MembersView from './MembersView'
2526
import { hasMultipleOwners, useGetRolesManagementPermissions } from './TeamSettings.utils'
2627

2728
const TeamSettings = () => {
28-
const { slug } = useParams()
29-
3029
const {
3130
organizationMembersCreate: organizationMembersCreationEnabled,
3231
organizationMembersDelete: organizationMembersDeletionEnabled,
3332
} = useIsFeatureEnabled(['organization_members:create', 'organization_members:delete'])
3433

34+
const { slug } = useParams()
3535
const { profile } = useProfile()
3636
const selectedOrganization = useSelectedOrganization()
3737
const isOwner = selectedOrganization?.is_owner
@@ -58,7 +58,7 @@ const TeamSettings = () => {
5858
onSuccess: () => {
5959
setIsLeaving(false)
6060
setIsLeaveTeamModalOpen(false)
61-
window?.location.replace('/') // Force reload to clear Store
61+
window?.location.replace(BASE_PATH) // Force reload to clear Store
6262
},
6363
onError: (error) => {
6464
setIsLeaving(false)
@@ -81,6 +81,7 @@ const TeamSettings = () => {
8181
<ScaffoldFilterAndContent>
8282
<ScaffoldActionsContainer className="justify-between">
8383
<Input
84+
autoComplete="off"
8485
icon={<Search size={12} />}
8586
size="small"
8687
value={searchString}

‎apps/studio/components/interfaces/Settings/Infrastructure/Infrastructure.constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const INFRA_ACTIVITY_METRICS: CategoryMeta[] = [
5858
name: 'Memory',
5959
unit: 'percentage',
6060
description:
61-
'Memory usage of your server.\nYou might observe elevated memory usage, even with little to no load. Besides Postgres, a wide range of services is running under the hood resulting in an elevated base memory usage.',
61+
'Memory usage of your server.\nYou might observe elevated memory usage, even with little to no load. Besides Postgres, a wide range of services are running under the hood resulting in an elevated base memory usage.',
6262
chartDescription: '',
6363
links: [
6464
{

0 commit comments

Comments
 (0)