Skip to content

Commit ee484c8

Browse files
dnywhjoshenlim
dnywh
and
joshenlim
authored
chore(studio): restore feedback gating (supabase#42548)
## What kind of change does this PR introduce? UI improvement for self-debugging efforts. ## What is the current behavior? supabase#40937 removed our gating on the feedback form (plus some related affordances) in an effort to concentrate support entry into the Help dropdown instead: | Before | After | | --- | --- | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/c7dacf40-5ae8-401c-a167-5e56c4c0635d" /> | _Not applicable. This step is skipped in the new version._ | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/9bd2489d-7e87-49e5-99af-13eb5f387f60" /> | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/fa499a40-6d70-4674-9eb6-c7bd96019b27" /> | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/e253381b-e8ba-476c-bd36-9dd522209498" /> | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/b5cf614b-329c-4517-90e9-c4d1b49bd139" /> | Despite putting other measures in place such as client-side form detection, the result is that people are increasingly writing in to support via the Feedback form. ## What is the new behavior? - Restores the gating - But also reuses the same self-debugging help options from the Help dropdown Other: - Renames `HelpPopover` to `HelpDropdown` to match others - Adjusts font size of `CommandMenu` _Search..._ | Before | After | | --- | --- | | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/12e3be32-743d-488a-a13d-bf400fd0fd8d" /> | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/bb064ef1-a771-416d-9b5b-dbdd774efed3" /> | | _Not applicable. This step is skipped in the old version._ | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/3bc0b1c2-7003-4973-8e9c-2c7ee93fb0b4" /> | | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/0bb18df4-d093-4440-8379-680f6c5e3cf9" /> | <img width="1024" height="756" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/1ef801d3-9cd7-4005-9082-8d229b7cdd19" /> | | <img width="1090" height="579" alt="Inventory Nuts Bolts Supabase" src="https://github.com/user-attachments/assets/e253381b-e8ba-476c-bd36-9dd522209498" /> | <img width="1024" height="794" alt="Spinner Toolshed Supabase" src="https://github.com/user-attachments/assets/b80de142-2199-420f-9018-8622b6d24312" /> | ## To test To test the “thanks” end state, add something like the following to `feedback-send.ts`: ```ts if (MOCK_FEEDBACK_SUCCESS) { return {} as Awaited<ReturnType<typeof sendFeedback>> } ``` Where `MOCK_FEEDBACK_SUCCESS` is `true`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Introduced multi-stage feedback dropdown with Issue and Idea selection paths. * Added AI assistant integration in help menu for quick support access. * Enhanced help dropdown with expanded options: documentation, troubleshooting, Discord community, system status, and support links. * Added Community Support section featuring Discord community promotion. * **Style** * Refined command menu placeholder text sizing for improved visual hierarchy. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
1 parent d9e0f01 commit ee484c8

12 files changed

Lines changed: 490 additions & 245 deletions

File tree

‎.cursor/rules/studio/best-practices/RULE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const UserDashboard = () => {
100100

101101
### Co-locate related components
102102

103-
Place sub-components in the same directory as the parent component. Use an index file for cleaner imports.
103+
Place sub-components in the same directory as the parent component. Avoid using barrel files (files that do nothing but re-export things from other files) for imports.
104104

105105
```
106106
components/interfaces/Auth/Users/

‎apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx‎

Lines changed: 89 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,56 @@
1+
import { IS_PLATFORM } from 'common'
2+
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
3+
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
4+
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
5+
import { Lightbulb, TriangleAlert } from 'lucide-react'
6+
import { useRouter } from 'next/router'
17
import { useState } from 'react'
8+
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
9+
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
10+
import {
11+
Button,
12+
Popover_Shadcn_,
13+
PopoverContent_Shadcn_,
14+
PopoverSeparator_Shadcn_,
15+
PopoverTrigger_Shadcn_,
16+
} from 'ui'
217

3-
import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui'
18+
import { ASSISTANT_SUGGESTIONS } from '../HelpDropdown/HelpDropdown.constants'
19+
import { getSupportLinkQueryParams } from '../HelpDropdown/HelpDropdown.utils'
20+
import { HelpSection } from '../HelpDropdown/HelpSection'
421
import { FeedbackWidget } from './FeedbackWidget'
522

623
export const FeedbackDropdown = ({ className }: { className?: string }) => {
24+
const router = useRouter()
25+
const { data: project } = useSelectedProjectQuery()
26+
const { data: org } = useSelectedOrganizationQuery()
27+
const snap = useAiAssistantStateSnapshot()
28+
const { openSidebar } = useSidebarManagerSnapshot()
729
const [isOpen, setIsOpen] = useState(false)
30+
const [stage, setStage] = useState<'select' | 'issue-options' | 'widget'>('select')
31+
32+
const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined)
33+
const supportLinkQueryParams = getSupportLinkQueryParams(
34+
project,
35+
org,
36+
router.query.ref as string | undefined
37+
)
838

939
return (
1040
<Popover_Shadcn_
1141
modal={false}
1242
open={isOpen}
1343
onOpenChange={(e) => {
1444
setIsOpen(e)
45+
if (!e) setStage('select')
1546
}}
1647
>
1748
<PopoverTrigger_Shadcn_ asChild>
1849
<Button
1950
asChild
2051
onClick={() => {
2152
setIsOpen((isOpen) => !isOpen)
53+
setStage('select')
2254
}}
2355
type="text"
2456
className="rounded-full h-[32px] text-foreground-light hover:text-foreground"
@@ -29,10 +61,64 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
2961
<PopoverContent_Shadcn_
3062
side="bottom"
3163
align="end"
32-
className="p-0 flex flex-col w-[22rem]"
64+
className="p-0 flex flex-col w-96"
3365
id="feedback-widget"
3466
>
35-
<FeedbackWidget onClose={() => setIsOpen(false)} />
67+
{stage === 'select' && (
68+
<div className="flex flex-col gap-4 p-4">
69+
<div className="font-medium text-sm">What would you like to share?</div>
70+
<div className="grid grid-cols-2 gap-3">
71+
<Button type="default" className="h-32" onClick={() => setStage('issue-options')}>
72+
<div className="grid gap-1.5 text-center">
73+
<TriangleAlert size="28" className="mx-auto text-destructive-600" />
74+
<div className="flex flex-col items-center">
75+
<span className="text-base">Issue</span>
76+
<span className="text-xs text-foreground-lighter">with my project</span>
77+
</div>
78+
</div>
79+
</Button>
80+
<Button type="default" className="h-32" onClick={() => setStage('widget')}>
81+
<div className="grid gap-1.5 text-center">
82+
<Lightbulb size="28" className="mx-auto text-warning" />
83+
<div className="flex flex-col items-center">
84+
<span className="text-base">Idea</span>
85+
<span className="text-xs text-foreground-lighter">to improve Supabase</span>
86+
</div>
87+
</div>
88+
</Button>
89+
</div>
90+
</div>
91+
)}
92+
{stage === 'issue-options' && (
93+
<>
94+
<div className="flex flex-col gap-4 p-4">
95+
<HelpSection
96+
excludeIds={[]}
97+
isPlatform={IS_PLATFORM}
98+
projectRef={projectRef}
99+
supportLinkQueryParams={supportLinkQueryParams}
100+
onAssistantClick={() => {
101+
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
102+
snap.newChat(ASSISTANT_SUGGESTIONS)
103+
setIsOpen(false)
104+
}}
105+
onSupportClick={() => setIsOpen(false)}
106+
/>
107+
</div>
108+
<PopoverSeparator_Shadcn_ />
109+
<div className="px-4 pt-4 pb-4">
110+
<Button type="default" size="tiny" onClick={() => setStage('widget')}>
111+
Leave feedback instead
112+
</Button>
113+
</div>
114+
</>
115+
)}
116+
{stage === 'widget' && (
117+
<FeedbackWidget
118+
onClose={() => setIsOpen(false)}
119+
onSwitchToIssueOptions={() => setStage('issue-options')}
120+
/>
121+
)}
36122
</PopoverContent_Shadcn_>
37123
</Popover_Shadcn_>
38124
)

‎apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'
77
import { toast } from 'sonner'
88

99
import { LOCAL_STORAGE_KEYS, useParams } from 'common'
10-
import { SupportLink } from 'components/interfaces/Support/SupportLink'
1110
import { InlineLinkClassName } from 'components/ui/InlineLink'
11+
import { SupportLink } from 'components/interfaces/Support/SupportLink'
1212
import { useFeedbackCategoryQuery } from 'data/feedback/feedback-category'
1313
import { useSendFeedbackMutation } from 'data/feedback/feedback-send'
1414
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -36,9 +36,10 @@ import {
3636

3737
interface FeedbackWidgetProps {
3838
onClose: () => void
39+
onSwitchToIssueOptions: () => void
3940
}
4041

41-
export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
42+
export const FeedbackWidget = ({ onClose, onSwitchToIssueOptions }: FeedbackWidgetProps) => {
4243
const router = useRouter()
4344
const { profile } = useProfile()
4445
const { ref, slug } = useParams()
@@ -153,17 +154,46 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
153154
}
154155
}
155156

157+
// Hydrate form from localStorage once it's ready; deps intentionally omit storedFeedback/screenshot
158+
// so we don't overwrite user edits when those values change after initial load.
156159
useEffect(() => {
157160
if (storedFeedback) setFeedback(storedFeedback)
158161
if (screenshot) setScreenshot(screenshot)
162+
// eslint-disable-next-line react-hooks/exhaustive-deps -- hydrate once when localStorage is ready only
159163
}, [isSuccess])
160164

165+
// Persist debounced input to localStorage; only re-run when debounced value changes.
161166
useEffect(() => {
162167
if (debouncedFeedback.length > 0) setStoredFeedback(debouncedFeedback)
168+
// eslint-disable-next-line react-hooks/exhaustive-deps -- setStoredFeedback is stable; only sync on debounced value
163169
}, [debouncedFeedback])
164170

171+
const ThanksMessageView = () => (
172+
<>
173+
<div className="py-6 px-4 grid gap-4 text-center text-foreground-light">
174+
<CircleCheck className="mx-auto text-brand-500" size={24} />
175+
<div className="flex flex-col gap-1">
176+
<p className="text-foreground text-base">Your feedback has been sent. Thanks!</p>
177+
<p className="text-sm text-balance">
178+
We don’t always respond to feedback. If you need help with your project, use the button
179+
below.
180+
</p>
181+
</div>
182+
</div>
183+
<PopoverSeparator_Shadcn_ />
184+
<div className="px-4 pt-4 pb-4 flex flex-row items-center justify-between">
185+
<Button type="default" size="tiny" onClick={onSwitchToIssueOptions}>
186+
Get help
187+
</Button>
188+
<Button type="default" size="tiny" onClick={onClose}>
189+
Close
190+
</Button>
191+
</div>
192+
</>
193+
)
194+
165195
return isFeedbackSent ? (
166-
<ThanksMessage onClose={onClose} />
196+
<ThanksMessageView />
167197
) : (
168198
<>
169199
<div className="p-4">
@@ -208,7 +238,10 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
208238

209239
<PopoverSeparator_Shadcn_ />
210240

211-
<div className="p-4 flex flex-row justify-end items-start">
241+
<div className="px-4 pt-4 pb-4 flex flex-row items-center justify-between">
242+
<Button type="default" size="tiny" onClick={onSwitchToIssueOptions}>
243+
Get help instead
244+
</Button>
212245
<div className="flex items-center gap-2 flex-row">
213246
{!!screenshot ? (
214247
<div
@@ -292,29 +325,3 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
292325
</>
293326
)
294327
}
295-
296-
const ThanksMessage = ({ onClose }: { onClose: () => void }) => {
297-
return (
298-
<div>
299-
<div className="grid gap-3 py-3">
300-
<div className="px-6 grid gap-4 text-center text-foreground-light">
301-
<CircleCheck className="mx-auto text-brand-500" size={24} />
302-
<div className="text-center flex flex-col">
303-
<p className="text-foreground text-base">Your feedback has been sent. Thanks!</p>
304-
<p className="text-sm text-balance">
305-
We don’t always respond to feedback. If you require assistance, please contact support
306-
via the <HelpCircle className="inline-block" size={12} aria-label="Help" /> menu
307-
instead.
308-
</p>
309-
</div>
310-
</div>
311-
<PopoverSeparator_Shadcn_ />
312-
<div className="flex items-center justify-end px-4">
313-
<Button type="default" onClick={onClose}>
314-
Close
315-
</Button>
316-
</div>
317-
</div>
318-
</div>
319-
)
320-
}

‎apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.constants.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export type HelpOptionId =
2+
| 'assistant'
3+
| 'docs'
4+
| 'troubleshooting'
5+
| 'discord'
6+
| 'status'
7+
| 'support'
8+
9+
export const HELP_OPTION_IDS = [
10+
'assistant',
11+
'docs',
12+
'troubleshooting',
13+
'discord',
14+
'status',
15+
'support',
16+
] as const satisfies readonly HelpOptionId[]
17+
18+
export const ASSISTANT_SUGGESTIONS = {
19+
name: 'Support' as const,
20+
initialInput: 'I need help with my project',
21+
suggestions: {
22+
title: 'I can help you with your project, here are some example prompts to get you started:',
23+
prompts: [
24+
{ label: 'Database Health', description: 'Summarise my database health and performance' },
25+
{ label: 'Debug Logs', description: 'View and debug my edge function logs' },
26+
{ label: 'RLS Setup', description: 'Implement row level security for my tables' },
27+
],
28+
},
29+
}

0 commit comments

Comments
 (0)