fix(support link): auto-fill organization when on org page (supabase#40108)

* fix(support link): auto-fill organization when on org page

If user clicks the Support Link from an org page (not a project page),
pass along the organization slug in the query params to auto-fill the
Support Form.

* fix(date picker test)

The new UI for range picking is a little different, and requires
double-clicking to start a new range.

Author: charislam

apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx

@@ -5,7 +5,9 @@ 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'
@@ -20,11 +22,10 @@ import {
   ButtonGroupItem,
   cn,
   Popover,
+  Popover_Shadcn_,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
 } from 'ui'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 
 export const HelpPopover = () => {
   const router = useRouter()
@@ -36,6 +37,12 @@ export const HelpPopover = () => {
   const [isOpen, setIsOpen] = useState(false)
 
   const projectRef = project?.parent_project_ref ?? (router.query.ref as string | undefined)
+  let supportLinkQueryParams: Partial<SupportFormUrlKeys> | undefined = undefined
+  if (projectRef) {
+    supportLinkQueryParams = { projectRef }
+  } else if (org?.slug) {
+    supportLinkQueryParams = { orgSlug: org.slug }
+  }
 
   return (
     <Popover_Shadcn_ open={isOpen} onOpenChange={setIsOpen}>
@@ -137,7 +144,7 @@ export const HelpPopover = () => {
                   </ButtonGroupItem>
 
                   <ButtonGroupItem size="tiny" icon={<Mail strokeWidth={1.5} size={14} />}>
-                    <SupportLink queryParams={{ projectRef }}>Contact support</SupportLink>
+                    <SupportLink queryParams={supportLinkQueryParams}>Contact support</SupportLink>
                   </ButtonGroupItem>
                 </>
               )}

apps/studio/tests/features/logs/Logs.Datepickers.test.tsx

@@ -99,7 +99,7 @@ test('datepicker onSubmit will return ISO string of selected dates', async () =>
 
   // Find and click on first date
   const day15Element = await screen.findByText(day15.format('D'))
-  userEvent.click(day15Element)
+  userEvent.dblClick(day15Element)
 
   // Find and click on second date
   const day16Element = await screen.findByText(day16.format('D'))