Skip to content

Commit 738c568

Browse files
SaxonFCopilotcharislam
authored
Sidebar manager (supabase#39795)
* sidebar-manager * storage keys * tests * more ai spots * test fix * revert to default * remove ref * Update apps/studio/state/sidebar-manager-state.tsx Co-authored-by: Copilot <[email protected]> * Update apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx Co-authored-by: Copilot <[email protected]> * fix ts * fix * fux * fux query param * clean * fix * more * mock local storage * simplify * remove provider test * remve useopensidebar * fix(new homepage): open ai assistant on advisor card button clicks * Update apps/studio/components/layouts/ProjectLayout/LayoutSidebar/index.tsx Co-authored-by: Charis <[email protected]> * Update apps/studio/state/sidebar-manager-state.tsx Co-authored-by: Charis <[email protected]> * refine * FIX --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Charis Lam <[email protected]>
1 parent 83dffae commit 738c568

File tree

32 files changed

+431
-132
lines changed

32 files changed

+431
-132
lines changed

‎apps/studio/components/interfaces/Account/Preferences/HotkeySettings.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { LOCAL_STORAGE_KEYS } from 'common'
2+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
23
import Panel from 'components/ui/Panel'
34
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
45
import { KeyboardShortcut, Toggle } from 'ui'
@@ -13,7 +14,7 @@ export const HotkeySettings = () => {
1314
true
1415
)
1516
const [aiAssistantEnabled, setAiAssistantEnabled] = useLocalStorageQuery(
16-
LOCAL_STORAGE_KEYS.HOTKEY_AI_ASSISTANT,
17+
LOCAL_STORAGE_KEYS.HOTKEY_SIDEBAR(SIDEBAR_KEYS.AI_ASSISTANT),
1718
true
1819
)
1920

‎apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@ import { Logs } from 'icons'
66
import { BASE_PATH } from 'lib/constants'
77
import { useParams } from 'common'
88
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
9+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
10+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
911
import { useTheme } from 'next-themes'
1012
import { useEffect, useState } from 'react'
1113

1214
export const OverviewLearnMore = () => {
1315
const [isMounted, setIsMounted] = useState(false)
1416
const { ref } = useParams()
1517
const aiSnap = useAiAssistantStateSnapshot()
18+
const { openSidebar } = useSidebarManagerSnapshot()
1619
const { theme, resolvedTheme } = useTheme()
1720

1821
useEffect(() => {
@@ -48,9 +51,9 @@ export const OverviewLearnMore = () => {
4851
{
4952
label: 'Ask Assistant',
5053
onClick: () => {
54+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
5155
aiSnap.newChat({
5256
name: 'Auth Help',
53-
open: true,
5457
initialInput:
5558
'Look at my logs related to Supabase Auth and help me debug the recent errors.',
5659
suggestions: {

‎apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { useAuthConfigQuery } from 'data/auth/auth-config-query'
88
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
99
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
1010
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
11+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
12+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
1113
import {
1214
Button,
1315
DropdownMenu,
@@ -37,6 +39,7 @@ export const PolicyRow = ({
3739
onSelectDeletePolicy = noop,
3840
}: PolicyRowProps) => {
3941
const aiSnap = useAiAssistantStateSnapshot()
42+
const { openSidebar } = useSidebarManagerSnapshot()
4043
const { can: canUpdatePolicies } = useAsyncCheckPermissions(
4144
PermissionAction.TENANT_SQL_ADMIN_WRITE,
4245
'policies'
@@ -119,9 +122,9 @@ export const PolicyRow = ({
119122
className="space-x-2"
120123
onClick={() => {
121124
const sql = generatePolicyUpdateSQL(policy)
125+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
122126
aiSnap.newChat({
123127
name: `Update policy ${policy.name}`,
124-
open: true,
125128
sqlSnippets: [sql],
126129
initialInput: `Update the policy with name \"${policy.name}\" in the ${policy.schema} schema on the ${policy.table} table. It should...`,
127130
suggestions: {

‎apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
99
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
1010
import { AiIconAnimation, Badge, CardTitle } from 'ui'
1111
import type { PolicyTable } from './PolicyTableRow.types'
12+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
13+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
1214

1315
interface PolicyTableRowHeaderProps {
1416
table: PolicyTable
@@ -25,6 +27,7 @@ export const PolicyTableRowHeader = ({
2527
}: PolicyTableRowHeaderProps) => {
2628
const { ref } = useParams()
2729
const aiSnap = useAiAssistantStateSnapshot()
30+
const { openSidebar } = useSidebarManagerSnapshot()
2831

2932
const { can: canCreatePolicies } = useAsyncCheckPermissions(
3033
PermissionAction.TENANT_SQL_ADMIN_WRITE,
@@ -101,9 +104,9 @@ export const PolicyTableRowHeader = ({
101104
type="default"
102105
className="px-1"
103106
onClick={() => {
107+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
104108
aiSnap.newChat({
105109
name: 'Create new policy',
106-
open: true,
107110
initialInput: `Create and name a new policy for the ${table.schema} schema on the ${table.name} table that ...`,
108111
})
109112
}}

‎apps/studio/components/interfaces/BranchManagement/ReviewWithAI.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
66
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
77
import { tablesToSQL } from 'lib/helpers'
88
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
9+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
10+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
911
import { AiIconAnimation } from 'ui'
1012

1113
interface ReviewWithAIProps {
@@ -24,6 +26,7 @@ export const ReviewWithAI = ({
2426
disabled = false,
2527
}: ReviewWithAIProps) => {
2628
const aiSnap = useAiAssistantStateSnapshot()
29+
const { openSidebar } = useSidebarManagerSnapshot()
2730
const { data: selectedOrg } = useSelectedOrganizationQuery()
2831
const { mutate: sendEvent } = useSendEventMutation()
2932

@@ -75,9 +78,9 @@ export const ReviewWithAI = ({
7578
})
7679
}
7780

81+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
7882
aiSnap.newChat({
7983
name: `Review merge: ${currentBranch.name} → ${mainBranch.name}`,
80-
open: true,
8184
sqlSnippets: sqlSnippets.length > 0 ? sqlSnippets : undefined,
8285
initialInput: `I want to run the attached database changes on my production database branch as part of a branch merge from "${currentBranch.name}" into "${mainBranch.name || 'main'}". I've included the current production database schema as extra context. Please analyze the proposed schema changes and provide concise feedback on their impact on the production schema including any migration concerns and potential conflicts.`,
8386
suggestions: {

‎apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import Link from 'next/link'
55
import { useRouter } from 'next/router'
66

77
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
8+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
89
import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query'
910
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
1011
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
1112
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
13+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
1214
import {
1315
Button,
1416
DropdownMenu,
@@ -44,6 +46,7 @@ const FunctionList = ({
4446
const router = useRouter()
4547
const { data: selectedProject } = useSelectedProjectQuery()
4648
const aiSnap = useAiAssistantStateSnapshot()
49+
const { openSidebar } = useSidebarManagerSnapshot()
4750

4851
const { data: functions } = useDatabaseFunctionsQuery({
4952
projectRef: selectedProject?.ref,
@@ -168,9 +171,9 @@ const FunctionList = ({
168171
<DropdownMenuItem
169172
className="space-x-2"
170173
onClick={() => {
174+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
171175
aiSnap.newChat({
172176
name: `Update function ${x.name}`,
173-
open: true,
174177
initialInput: 'Update this function to do...',
175178
suggestions: {
176179
title:

‎apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ import AlertError from 'components/ui/AlertError'
1111
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
1212
import SchemaSelector from 'components/ui/SchemaSelector'
1313
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
14+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
1415
import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query'
1516
import { useSchemasQuery } from 'data/database/schemas-query'
1617
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
1718
import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
1819
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
1920
import { useIsProtectedSchema } from 'hooks/useProtectedSchemas'
2021
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
22+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
2123
import {
2224
AiIconAnimation,
2325
Card,
@@ -52,6 +54,7 @@ const FunctionsList = ({
5254
const { search } = useParams()
5355
const { data: project } = useSelectedProjectQuery()
5456
const aiSnap = useAiAssistantStateSnapshot()
57+
const { openSidebar } = useSidebarManagerSnapshot()
5558
const { selectedSchema, setSelectedSchema } = useQuerySchemaState()
5659

5760
const filterString = search ?? ''
@@ -200,13 +203,13 @@ const FunctionsList = ({
200203
disabled={!canCreateFunctions}
201204
className="px-1 pointer-events-auto"
202205
icon={<AiIconAnimation size={16} />}
203-
onClick={() =>
206+
onClick={() => {
207+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
204208
aiSnap.newChat({
205209
name: 'Create new function',
206-
open: true,
207210
initialInput: `Create a new function for the schema ${selectedSchema} that does ...`,
208211
})
209-
}
212+
}}
210213
tooltip={{
211214
content: {
212215
side: 'bottom',

‎apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { includes, sortBy } from 'lodash'
33
import { Check, Copy, Edit, Edit2, MoreVertical, Trash, X } from 'lucide-react'
44

55
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
6+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
67
import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
78
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
89
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
910
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
11+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
1012
import {
1113
Badge,
1214
Button,
@@ -43,6 +45,7 @@ const TriggerList = ({
4345
}: TriggerListProps) => {
4446
const { data: project } = useSelectedProjectQuery()
4547
const aiSnap = useAiAssistantStateSnapshot()
48+
const { openSidebar } = useSidebarManagerSnapshot()
4649

4750
const { data: triggers } = useDatabaseTriggersQuery({
4851
projectRef: project?.ref,
@@ -171,9 +174,9 @@ const TriggerList = ({
171174
className="space-x-2"
172175
onClick={() => {
173176
const sql = generateTriggerCreateSQL(x)
177+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
174178
aiSnap.newChat({
175179
name: `Update trigger ${X.name}`,
176-
open: true,
177180
initialInput: `Update this trigger which exists on the ${x.schema}.${x.table} table to...`,
178181
suggestions: {
179182
title:

‎apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ import AlertError from 'components/ui/AlertError'
1010
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
1111
import SchemaSelector from 'components/ui/SchemaSelector'
1212
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
13+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
1314
import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
1415
import { useTablesQuery } from 'data/tables/tables-query'
1516
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
1617
import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
1718
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
1819
import { useIsProtectedSchema, useProtectedSchemas } from 'hooks/useProtectedSchemas'
1920
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
21+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
2022
import {
2123
AiIconAnimation,
2224
Button,
@@ -49,6 +51,7 @@ const TriggersList = ({
4951
}: TriggersListProps) => {
5052
const { data: project } = useSelectedProjectQuery()
5153
const aiSnap = useAiAssistantStateSnapshot()
54+
const { openSidebar } = useSidebarManagerSnapshot()
5255
const { selectedSchema, setSelectedSchema } = useQuerySchemaState()
5356

5457
const [filterString, setFilterString] = useQueryState(
@@ -138,10 +141,10 @@ const TriggersList = ({
138141
disabled={!hasTables || !canCreateTriggers}
139142
className="px-1 pointer-events-auto"
140143
icon={<AiIconAnimation size={16} />}
141-
onClick={() =>
144+
onClick={() => {
145+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
142146
aiSnap.newChat({
143147
name: 'Create new trigger',
144-
open: true,
145148
initialInput: `Create a new trigger for the schema ${selectedSchema} that does ...`,
146149
suggestions: {
147150
title:
@@ -162,7 +165,7 @@ const TriggersList = ({
162165
],
163166
},
164167
})
165-
}
168+
}}
166169
tooltip={{
167170
content: {
168171
side: 'bottom',

‎apps/studio/components/interfaces/EdgeFunctions/DeployEdgeFunctionButton.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@ import {
1919
DropdownMenuItem,
2020
DropdownMenuTrigger,
2121
} from 'ui'
22+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
23+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
2224

2325
export const DeployEdgeFunctionButton = () => {
2426
const router = useRouter()
2527
const { ref } = useParams()
2628
const { data: org } = useSelectedOrganizationQuery()
2729
const snap = useAiAssistantStateSnapshot()
28-
30+
const { openSidebar } = useSidebarManagerSnapshot()
2931
const { mutate: sendEvent } = useSendEventMutation()
3032

3133
return (
@@ -85,9 +87,9 @@ export const DeployEdgeFunctionButton = () => {
8587
<DropdownMenuItem
8688
className="gap-4"
8789
onSelect={() => {
90+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
8891
snap.newChat({
8992
name: 'Create new edge function',
90-
open: true,
9193
initialInput: `Create a new edge function that ...`,
9294
suggestions: {
9395
title:

0 commit comments

Comments
 (0)