Chore/simplified support form (#39554)

* Simplified support form

* Nit

apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx

@@ -83,7 +83,7 @@ function CategorySelector({ form }: CategorySelectorProps) {
                 </SelectTrigger_Shadcn_>
                 <SelectContent_Shadcn_>
                   <SelectGroup_Shadcn_>
-                    {CATEGORY_OPTIONS.map((option) => (
+                    {CATEGORY_OPTIONS.filter((option) => !option.hidden).map((option) => (
                       <SelectItem_Shadcn_ key={option.value} value={option.value}>
                         {option.label}
                         <span className="block text-xs text-foreground-lighter">

apps/studio/components/interfaces/Support/Support.constants.ts

@@ -3,13 +3,14 @@ import { isFeatureEnabled } from 'common'
 
 const billingEnabled = isFeatureEnabled('billing:all')
 
-export type ExtendedSupportCategories = SupportCategories | 'Plan_upgrade'
+export type ExtendedSupportCategories = SupportCategories | 'Plan_upgrade' | 'Others'
 
 export const CATEGORY_OPTIONS: {
   value: ExtendedSupportCategories
   label: string
   description: string
   query?: string
+  hidden?: boolean
 }[] = [
   {
     value: SupportCategories.PROBLEM,
@@ -77,6 +78,13 @@ export const CATEGORY_OPTIONS: {
           query: undefined,
         },
       ]),
+  {
+    value: 'Others' as const,
+    label: 'Others',
+    description: 'Issues that are not related to any of the other categories',
+    query: undefined,
+    hidden: true,
+  },
 ]
 
 export const SEVERITY_OPTIONS = [

apps/studio/components/interfaces/Support/SupportFormV2.tsx

@@ -1,8 +1,9 @@
-import { type Dispatch, type MouseEventHandler } from 'react'
+import { useEffect, type Dispatch, type MouseEventHandler } from 'react'
 import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
 // End of third-party imports
 
 import { SupportCategories } from '@supabase/shared-types/out/constants'
+import { useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
 import { getProjectAuthConfig } from 'data/auth/auth-config-query'
 import { useSendSupportTicketMutation } from 'data/feedback/support-ticket-send'
@@ -33,6 +34,15 @@ import {
   NO_PROJECT_MARKER,
 } from './SupportForm.utils'
 
+const useIsSimplifiedForm = (slug: string) => {
+  const simplifiedSupportForm = useFlag('simplifiedSupportForm')
+  if (typeof simplifiedSupportForm === 'string') {
+    const slugs = (simplifiedSupportForm as string).split(',').map((x) => x.trim())
+    return slugs.includes(slug)
+  }
+  return false
+}
+
 interface SupportFormV2Props {
   form: UseFormReturn<SupportFormValues>
   initialError: string | null
@@ -45,6 +55,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
   const respondToEmail = profile?.primary_email ?? 'your email'
 
   const { organizationSlug, projectRef, category, severity, subject, library } = form.watch()
+  const simplifiedSupportForm = useIsSimplifiedForm(organizationSlug)
 
   const selectedOrgSlug = organizationSlug === NO_ORG_MARKER ? null : organizationSlug
   const selectedProjectRef = projectRef === NO_PROJECT_MARKER ? null : projectRef
@@ -85,6 +96,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
 
     const payload = {
       ...values,
+      category,
       organizationSlug: values.organizationSlug ?? NO_ORG_MARKER,
       projectRef: values.projectRef ?? NO_PROJECT_MARKER,
       allowSupportAccess: SUPPORT_ACCESS_CATEGORIES.includes(values.category)
@@ -134,6 +146,15 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
     handleFormSubmit(event)
   }
 
+  useEffect(() => {
+    if (simplifiedSupportForm) {
+      form.setValue('category', 'Others')
+    } else {
+      form.setValue('category', '' as any)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [simplifiedSupportForm])
+
   return (
     <Form_Shadcn_ {...form}>
       <form id="support-form" className="flex flex-col gap-y-6">
@@ -148,20 +169,26 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
             subscriptionPlanId={subscriptionPlanId}
             category={category}
           />
-          <CategoryAndSeverityInfo
-            form={form}
-            category={category}
-            severity={severity}
-            projectRef={projectRef}
-          />
+          {!simplifiedSupportForm && (
+            <CategoryAndSeverityInfo
+              form={form}
+              category={category}
+              severity={severity}
+              projectRef={projectRef}
+            />
+          )}
         </div>
 
         <DialogSectionSeparator />
 
         <div className="px-6 flex flex-col gap-y-8">
           <SubjectAndSuggestionsInfo form={form} subject={subject} category={category} />
-          <ClientLibraryInfo form={form} library={library} category={category} />
-          <AffectedServicesSelector form={form} category={category} />
+          {!simplifiedSupportForm && (
+            <>
+              <ClientLibraryInfo form={form} library={library} category={category} />
+              <AffectedServicesSelector form={form} category={category} />
+            </>
+          )}
           <MessageField form={form} originalError={initialError} />
           <AttachmentUploadDisplay {...attachmentUpload} />
         </div>