mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Danny WhiteandJoshen Lim
ee484c8517
## What kind of change does this PR introduce? UI improvement for self-debugging efforts. ## What is the current behavior? https://github.com/supabase/supabase/pull/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>
Supabase UI Patterns
This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example),
which make no sense to be included in all apps. It should also be used for components which are constructed using various
components from the ui package.
This package does not have a barrel file - each component has to be imported from its index
(ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in
1 or 2 apps doesn't burden the rest of the apps.