From c7ac1b7ca00d8010c0cb28566f1c34740b3d0096 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 7 Jan 2022 14:31:31 +0800
Subject: [PATCH] Automatically select project in support form if coming from a
 project

---
 .../ProjectLayout/LayoutHeader/HelpPopover.tsx       |  7 ++++++-
 studio/pages/support/new.tsx                         | 12 +++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
index ec0cc54483f..e20cc94453c 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -7,6 +7,7 @@ import {
   Popover,
   Typography,
 } from '@supabase/ui'
+import { useRouter } from 'next/router'
 import { FC } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
@@ -16,6 +17,10 @@ import SVG from 'react-inlinesvg'
 interface Props {}
 
 const HelpPopover: FC<Props> = () => {
+  const router = useRouter()
+  const projectRef = router.query.ref
+  const supportUrl = `/support/new${projectRef ? `?ref=${projectRef}` : ''}`
+
   return (
     <Popover
       className="w-80"
@@ -34,7 +39,7 @@ const HelpPopover: FC<Props> = () => {
                 hosted services.
               </p>
             </Typography.Text>
-            <Link href="/support/new">
+            <Link href={supportUrl}>
               <Button className="sbui-default-button--dark-white" icon={<IconMail />}>
                 Contact support team
               </Button>
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 811c2dacbe3..1b7ebfc0278 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -12,11 +12,13 @@ import {
 } from '@supabase/ui'
 import SVG from 'react-inlinesvg'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 import { API_URL } from 'lib/constants'
 import { useStore, withAuth } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { Project } from 'types'
+import { isUndefined } from 'lodash'
 
 const DEFAULT = {
   category: {
@@ -49,6 +51,9 @@ function formReducer(state: any, action: any) {
 
 const SupportNew = () => {
   const { ui, app } = useStore()
+  const router = useRouter()
+  const projectRef = router.query.ref
+
   const [formState, formDispatch] = useReducer(formReducer, DEFAULT)
   const [errors, setErrors] = useState<any>([])
   const [loading, setLoading] = useState<boolean>(false)
@@ -72,7 +77,12 @@ const SupportNew = () => {
   useEffect(() => {
     // set project default
     if (sortedProjects.length > 1) {
-      handleOnChange({ name: 'project', value: sortedProjects[0].ref })
+      const selectedProject = sortedProjects.find((project: Project) => project.ref === projectRef)
+      if (!isUndefined(selectedProject)) {
+        handleOnChange({ name: 'project', value: selectedProject.ref })
+      } else {
+        handleOnChange({ name: 'project', value: sortedProjects[0].ref })
+      }
     } else {
       // set as 'No specific project'
       handleOnChange({ name: 'project', value: projectDefaults[0].ref })