From ee484c851719e54a8bcbe86447d505a8fc61d29b Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Tue, 10 Feb 2026 09:48:54 +1100 Subject: [PATCH] chore(studio): restore feedback gating (#42548) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 | | --- | --- | | Inventory Nuts Bolts Supabase | _Not applicable. This step is skipped in the new version._ | | Inventory Nuts Bolts Supabase | Inventory Nuts Bolts Supabase | | Inventory Nuts Bolts Supabase | Inventory Nuts Bolts Supabase | 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 | | --- | --- | | Spinner Toolshed Supabase | Spinner Toolshed Supabase | | _Not applicable. This step is skipped in the old version._ | Spinner Toolshed Supabase | | Spinner Toolshed Supabase | Spinner Toolshed Supabase | | Inventory Nuts Bolts Supabase | Spinner Toolshed Supabase | ## 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> } ``` Where `MOCK_FEEDBACK_SUCCESS` is `true`. ## 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. --------- Co-authored-by: Joshen Lim --- .cursor/rules/studio/best-practices/RULE.md | 2 +- .../FeedbackDropdown/FeedbackDropdown.tsx | 92 +++++++- .../FeedbackDropdown/FeedbackWidget.tsx | 67 +++--- .../HelpDropdown/HelpDropdown.constants.ts | 29 +++ .../HelpDropdown/HelpDropdown.tsx | 128 +++++++++++ .../HelpDropdown/HelpDropdown.utils.ts | 12 ++ .../HelpDropdown/HelpOptionsList.tsx | 139 ++++++++++++ .../LayoutHeader/HelpDropdown/HelpSection.tsx | 47 ++++ .../LayoutHeader/HelpPopover.tsx | 200 ------------------ .../LayoutHeader/LayoutHeader.tsx | 8 +- .../LayoutHeader/MergeRequestButton.tsx | 9 +- .../src/CommandMenu/api/CommandMenu.tsx | 2 +- 12 files changed, 490 insertions(+), 245 deletions(-) create mode 100644 apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.constants.ts create mode 100644 apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.tsx create mode 100644 apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.utils.ts create mode 100644 apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpOptionsList.tsx create mode 100644 apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpSection.tsx delete mode 100644 apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx diff --git a/.cursor/rules/studio/best-practices/RULE.md b/.cursor/rules/studio/best-practices/RULE.md index 357265450a8..f5c1472353a 100644 --- a/.cursor/rules/studio/best-practices/RULE.md +++ b/.cursor/rules/studio/best-practices/RULE.md @@ -100,7 +100,7 @@ const UserDashboard = () => { ### Co-locate related components -Place sub-components in the same directory as the parent component. Use an index file for cleaner imports. +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. ``` components/interfaces/Auth/Users/ diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx index ccf1e1a59ba..31f9342a360 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx @@ -1,10 +1,40 @@ +import { IS_PLATFORM } from 'common' +import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' +import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' +import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { Lightbulb, TriangleAlert } from 'lucide-react' +import { useRouter } from 'next/router' import { useState } from 'react' +import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state' +import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' +import { + Button, + Popover_Shadcn_, + PopoverContent_Shadcn_, + PopoverSeparator_Shadcn_, + PopoverTrigger_Shadcn_, +} from 'ui' -import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui' +import { ASSISTANT_SUGGESTIONS } from '../HelpDropdown/HelpDropdown.constants' +import { getSupportLinkQueryParams } from '../HelpDropdown/HelpDropdown.utils' +import { HelpSection } from '../HelpDropdown/HelpSection' import { FeedbackWidget } from './FeedbackWidget' export const FeedbackDropdown = ({ className }: { className?: string }) => { + const router = useRouter() + const { data: project } = useSelectedProjectQuery() + const { data: org } = useSelectedOrganizationQuery() + const snap = useAiAssistantStateSnapshot() + const { openSidebar } = useSidebarManagerSnapshot() const [isOpen, setIsOpen] = useState(false) + const [stage, setStage] = useState<'select' | 'issue-options' | 'widget'>('select') + + const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined) + const supportLinkQueryParams = getSupportLinkQueryParams( + project, + org, + router.query.ref as string | undefined + ) return ( { open={isOpen} onOpenChange={(e) => { setIsOpen(e) + if (!e) setStage('select') }} > @@ -19,6 +50,7 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => { asChild onClick={() => { setIsOpen((isOpen) => !isOpen) + setStage('select') }} type="text" className="rounded-full h-[32px] text-foreground-light hover:text-foreground" @@ -29,10 +61,64 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => { - setIsOpen(false)} /> + {stage === 'select' && ( +
+
What would you like to share?
+
+ + +
+
+ )} + {stage === 'issue-options' && ( + <> +
+ { + openSidebar(SIDEBAR_KEYS.AI_ASSISTANT) + snap.newChat(ASSISTANT_SUGGESTIONS) + setIsOpen(false) + }} + onSupportClick={() => setIsOpen(false)} + /> +
+ +
+ +
+ + )} + {stage === 'widget' && ( + setIsOpen(false)} + onSwitchToIssueOptions={() => setStage('issue-options')} + /> + )} ) diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx index 0d06fc7cbd6..0275094680d 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx @@ -7,8 +7,8 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react' import { toast } from 'sonner' import { LOCAL_STORAGE_KEYS, useParams } from 'common' -import { SupportLink } from 'components/interfaces/Support/SupportLink' import { InlineLinkClassName } from 'components/ui/InlineLink' +import { SupportLink } from 'components/interfaces/Support/SupportLink' import { useFeedbackCategoryQuery } from 'data/feedback/feedback-category' import { useSendFeedbackMutation } from 'data/feedback/feedback-send' import { useSendEventMutation } from 'data/telemetry/send-event-mutation' @@ -36,9 +36,10 @@ import { interface FeedbackWidgetProps { onClose: () => void + onSwitchToIssueOptions: () => void } -export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => { +export const FeedbackWidget = ({ onClose, onSwitchToIssueOptions }: FeedbackWidgetProps) => { const router = useRouter() const { profile } = useProfile() const { ref, slug } = useParams() @@ -153,17 +154,46 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => { } } + // Hydrate form from localStorage once it's ready; deps intentionally omit storedFeedback/screenshot + // so we don't overwrite user edits when those values change after initial load. useEffect(() => { if (storedFeedback) setFeedback(storedFeedback) if (screenshot) setScreenshot(screenshot) + // eslint-disable-next-line react-hooks/exhaustive-deps -- hydrate once when localStorage is ready only }, [isSuccess]) + // Persist debounced input to localStorage; only re-run when debounced value changes. useEffect(() => { if (debouncedFeedback.length > 0) setStoredFeedback(debouncedFeedback) + // eslint-disable-next-line react-hooks/exhaustive-deps -- setStoredFeedback is stable; only sync on debounced value }, [debouncedFeedback]) + const ThanksMessageView = () => ( + <> +
+ +
+

Your feedback has been sent. Thanks!

+

+ We don’t always respond to feedback. If you need help with your project, use the button + below. +

+
+
+ +
+ + +
+ + ) + return isFeedbackSent ? ( - + ) : ( <>
@@ -208,7 +238,10 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => { -
+
+
{!!screenshot ? (
{ ) } - -const ThanksMessage = ({ onClose }: { onClose: () => void }) => { - return ( -
-
-
- -
-

Your feedback has been sent. Thanks!

-

- We don’t always respond to feedback. If you require assistance, please contact support - via the menu - instead. -

-
-
- -
- -
-
-
- ) -} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.constants.ts b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.constants.ts new file mode 100644 index 00000000000..68a02c330be --- /dev/null +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.constants.ts @@ -0,0 +1,29 @@ +export type HelpOptionId = + | 'assistant' + | 'docs' + | 'troubleshooting' + | 'discord' + | 'status' + | 'support' + +export const HELP_OPTION_IDS = [ + 'assistant', + 'docs', + 'troubleshooting', + 'discord', + 'status', + 'support', +] as const satisfies readonly HelpOptionId[] + +export const ASSISTANT_SUGGESTIONS = { + name: 'Support' as const, + initialInput: 'I need help with my project', + suggestions: { + title: 'I can help you with your project, here are some example prompts to get you started:', + prompts: [ + { label: 'Database Health', description: 'Summarise my database health and performance' }, + { label: 'Debug Logs', description: 'View and debug my edge function logs' }, + { label: 'RLS Setup', description: 'Implement row level security for my tables' }, + ], + }, +} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.tsx new file mode 100644 index 00000000000..8e9489008b0 --- /dev/null +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.tsx @@ -0,0 +1,128 @@ +import { IS_PLATFORM } from 'common' +import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' +import { ButtonTooltip } from 'components/ui/ButtonTooltip' +import { useSendEventMutation } from 'data/telemetry/send-event-mutation' +import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' +import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { HelpCircle } from 'lucide-react' +import Image from 'next/legacy/image' +import { useRouter } from 'next/router' +import { useState } from 'react' +import SVG from 'react-inlinesvg' +import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state' +import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' +import { + Button, + cn, + Popover, + Popover_Shadcn_, + PopoverContent_Shadcn_, + PopoverTrigger_Shadcn_, +} from 'ui' + +import { ASSISTANT_SUGGESTIONS } from './HelpDropdown.constants' +import { getSupportLinkQueryParams } from './HelpDropdown.utils' +import { HelpSection } from './HelpSection' + +export const HelpDropdown = () => { + const router = useRouter() + const { data: project } = useSelectedProjectQuery() + const { data: org } = useSelectedOrganizationQuery() + const snap = useAiAssistantStateSnapshot() + const { openSidebar } = useSidebarManagerSnapshot() + const { mutate: sendEvent } = useSendEventMutation() + const [isOpen, setIsOpen] = useState(false) + + const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined) + const supportLinkQueryParams = getSupportLinkQueryParams( + project, + org, + router.query.ref as string | undefined + ) + + return ( + + + { + if (isOpen) return // Don't send telemetry event if dropdown is already open + sendEvent({ + action: 'help_button_clicked', + groups: { project: project?.ref, organization: org?.slug }, + }) + }} + tooltip={{ content: { side: 'bottom', text: 'Help' } }} + > + + + + + { + setIsOpen(false) + openSidebar(SIDEBAR_KEYS.AI_ASSISTANT) + snap.newChat(ASSISTANT_SUGGESTIONS) + }} + onSupportClick={() => setIsOpen(false)} + /> + +
+
+
Community support
+

+ Our Discord community can help with code-related issues. Many questions are answered + in minutes. +

+
+ +
+ + + ) +} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.utils.ts b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.utils.ts new file mode 100644 index 00000000000..37ec771be65 --- /dev/null +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpDropdown.utils.ts @@ -0,0 +1,12 @@ +import { SupportFormUrlKeys } from '@/components/interfaces/Support/SupportForm.utils' + +export function getSupportLinkQueryParams( + project: { parent_project_ref?: string } | undefined, + org: { slug?: string } | undefined, + routerRef: string | undefined +): Partial | undefined { + const projectRef = project?.parent_project_ref ?? routerRef + if (projectRef) return { projectRef } + if (org?.slug) return { orgSlug: org.slug } + return undefined +} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpOptionsList.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpOptionsList.tsx new file mode 100644 index 00000000000..33171c30f44 --- /dev/null +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpOptionsList.tsx @@ -0,0 +1,139 @@ +import type { SupportFormUrlKeys } from 'components/interfaces/Support/SupportForm.utils' +import { SupportLink } from 'components/interfaces/Support/SupportLink' +import { DOCS_URL } from 'lib/constants' +import { Activity, BookOpen, Mail, Wrench } from 'lucide-react' +import { useRouter } from 'next/router' +import SVG from 'react-inlinesvg' +import { AiIconAnimation, ButtonGroup, ButtonGroupItem } from 'ui' + +import type { HelpOptionId } from './HelpDropdown.constants' +import { HELP_OPTION_IDS } from './HelpDropdown.constants' + +const DISCORD_URL = 'https://discord.supabase.com' +const STATUS_URL = 'https://status.supabase.com' + +type HelpOptionsListProps = { + excludeIds?: HelpOptionId[] + isPlatform: boolean + projectRef: string | undefined + supportLinkQueryParams: Partial | undefined + onAssistantClick?: () => void + onSupportClick?: () => void + size?: 'tiny' | 'small' +} + +export const HelpOptionsList = ({ + excludeIds = [], + isPlatform, + projectRef, + supportLinkQueryParams, + onAssistantClick, + onSupportClick, + size = 'tiny', +}: HelpOptionsListProps) => { + const router = useRouter() + const basePath = router.basePath ?? '' + + const ids = HELP_OPTION_IDS.filter((id) => !excludeIds.includes(id)) + + const include = (id: HelpOptionId): boolean => { + if (id === 'assistant') return !!projectRef + if (id === 'status' || id === 'support') return isPlatform + return true + } + + const filteredIds = ids.filter(include) + + return ( + + {filteredIds.map((id) => { + switch (id) { + case 'assistant': + return ( + } + onClick={onAssistantClick} + > + Supabase Assistant + + ) + case 'docs': + return ( + } + asChild + > + + Docs + + + ) + case 'troubleshooting': + return ( + } + asChild + > + + Troubleshooting + + + ) + case 'discord': + return ( + } + asChild + > + + Ask on Discord + + + ) + case 'status': + return ( + } + asChild + > + + Supabase status + + + ) + case 'support': + return ( + } + asChild + > + + Contact support + + + ) + default: { + const _exhaustive: never = id + return null + } + } + })} + + ) +} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpSection.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpSection.tsx new file mode 100644 index 00000000000..bc6a2468800 --- /dev/null +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpDropdown/HelpSection.tsx @@ -0,0 +1,47 @@ +import type { SupportFormUrlKeys } from 'components/interfaces/Support/SupportForm.utils' +import { cn } from 'ui' + +import type { HelpOptionId } from './HelpDropdown.constants' +import { HelpOptionsList } from './HelpOptionsList' + +type HelpSectionProps = { + excludeIds?: HelpOptionId[] + isPlatform: boolean + projectRef: string | undefined + supportLinkQueryParams: Partial | undefined + onAssistantClick?: () => void + onSupportClick?: () => void + className?: string +} + +export const HelpSection = ({ + excludeIds = [], + isPlatform, + projectRef, + supportLinkQueryParams, + onAssistantClick, + onSupportClick, + className, +}: HelpSectionProps) => { + const description = projectRef + ? 'Start with our Assistant, docs, or community.' + : 'Start with our docs or community.' + + return ( +
+
+
Need help with your project?
+

{description}

+
+ +
+ ) +} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx deleted file mode 100644 index 6b0f47d34af..00000000000 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx +++ /dev/null @@ -1,200 +0,0 @@ -import { Activity, BookOpen, HelpCircle, Mail, Wrench } from 'lucide-react' -import Image from 'next/legacy/image' -import { useRouter } from 'next/router' -import { useState } from 'react' -import SVG from 'react-inlinesvg' - -import { IS_PLATFORM } from 'common' -import type { SupportFormUrlKeys } from 'components/interfaces/Support/SupportForm.utils' -import { SupportLink } from 'components/interfaces/Support/SupportLink' -import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' -import { ButtonTooltip } from 'components/ui/ButtonTooltip' -import { useSendEventMutation } from 'data/telemetry/send-event-mutation' -import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' -import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' -import { DOCS_URL } from 'lib/constants' -import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state' -import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' -import { - AiIconAnimation, - Button, - ButtonGroup, - ButtonGroupItem, - cn, - Popover, - Popover_Shadcn_, - PopoverContent_Shadcn_, - PopoverTrigger_Shadcn_, -} from 'ui' - -export const HelpPopover = () => { - const router = useRouter() - const { data: project } = useSelectedProjectQuery() - const { data: org } = useSelectedOrganizationQuery() - const snap = useAiAssistantStateSnapshot() - const { openSidebar } = useSidebarManagerSnapshot() - const { mutate: sendEvent } = useSendEventMutation() - const [isOpen, setIsOpen] = useState(false) - - const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined) - let supportLinkQueryParams: Partial | undefined = undefined - if (projectRef) { - supportLinkQueryParams = { projectRef } - } else if (org?.slug) { - supportLinkQueryParams = { orgSlug: org.slug } - } - - return ( - - - { - sendEvent({ - action: 'help_button_clicked', - groups: { project: project?.ref, organization: org?.slug }, - }) - }} - tooltip={{ content: { side: 'bottom', text: 'Help' } }} - > - - - - -
-
-
Need help with your project?
-

- Start with our {projectRef ? 'Assistant, docs,' : 'docs'} or community. -

-
- -
- - {projectRef && ( - } - onClick={() => { - openSidebar(SIDEBAR_KEYS.AI_ASSISTANT) - snap.newChat({ - name: 'Support', - initialInput: `I need help with my project`, - suggestions: { - title: - 'I can help you with your project, here are some example prompts to get you started:', - prompts: [ - { - label: 'Database Health', - description: 'Summarise my database health and performance', - }, - { - label: 'Debug Logs', - description: 'View and debug my edge function logs', - }, - { - label: 'RLS Setup', - description: 'Implement row level security for my tables', - }, - ], - }, - }) - }} - > - Supabase Assistant - - )} - } asChild> - - Docs - - - } asChild> - - Troubleshooting - - - {IS_PLATFORM && ( - <> - } - > - - Supabase status - - - - }> - setIsOpen(false)} - > - Contact support - - - - )} - -
-
- -
-
-
Community support
-

- Our Discord community can help with code-related issues. Many questions are answered - in minutes. -

-
- -
- - - ) -} diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx index 6f663be1e76..3359ba6c7eb 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx @@ -25,10 +25,10 @@ import { CommandMenuTriggerInput } from 'ui-patterns' import { DevToolbarTrigger } from 'dev-tools' import { BreadcrumbsView } from './BreadcrumbsView' import { FeedbackDropdown } from './FeedbackDropdown/FeedbackDropdown' -import { HelpPopover } from './HelpPopover' +import { HelpDropdown } from './HelpDropdown/HelpDropdown' import { HomeIcon } from './HomeIcon' import { LocalVersionPopover } from './LocalVersionPopover' -import MergeRequestButton from './MergeRequestButton' +import { MergeRequestButton } from './MergeRequestButton' import { Connect } from '@/components/interfaces/Connect/Connect' import { ConnectButton } from '@/components/interfaces/ConnectButton/ConnectButton' import { ConnectSheet } from '@/components/interfaces/ConnectSheet/ConnectSheet' @@ -230,7 +230,7 @@ export const LayoutHeader = ({ '[&_.command-shortcut>div]:text-foreground-lighter' )} /> - + {!!projectRef && ( @@ -256,7 +256,7 @@ export const LayoutHeader = ({ [&_.command-shortcut>div]:text-foreground-lighter " /> - + {!!projectRef && ( diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MergeRequestButton.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MergeRequestButton.tsx index 085f58da157..9490a9324d0 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MergeRequestButton.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MergeRequestButton.tsx @@ -1,7 +1,3 @@ -import { GitMerge } from 'lucide-react' -import { useRouter } from 'next/router' -import { toast } from 'sonner' - import { useParams } from 'common' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation' @@ -9,6 +5,9 @@ import { useBranchesQuery } from 'data/branches/branches-query' import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { GitMerge } from 'lucide-react' +import { useRouter } from 'next/router' +import { toast } from 'sonner' export const MergeRequestButton = () => { const { ref } = useParams() @@ -91,5 +90,3 @@ export const MergeRequestButton = () => { /> ) } - -export default MergeRequestButton diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx index 6b5840d971b..91e406768d4 100644 --- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx +++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx @@ -199,7 +199,7 @@ function CommandMenuTriggerInput({ strokeWidth={1.5} className="group-hover:text-foreground-light transition-colors" /> -

{placeholder}

+

{placeholder}

{showShortcut && (