feat: show "Allow support access to your project" toggle for all support categories (supabase#42254)

Previously, the “Allow support access to your project” toggle was only
shown for specific issue categories in our support form. This change
makes the toggle available for all categories.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Support access toggle and submission now suppress support access for
Account Deletion, Sales Enquiry, and Refund categories.
* **Refactor**
* Reworked category gating so UI visibility and submitted payload
consistently respect the disabled-category list.
* **UI**
* Category list updated—"Others" removed and category options adjusted
so all available options are shown.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

Author: monicakh

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

@@ -1,21 +1,21 @@
-import type { UseFormReturn } from 'react-hook-form'
 // End of third-party imports
-
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { InlineLink } from 'components/ui/InlineLink'
+import type { UseFormReturn } from 'react-hook-form'
 import {
-  cn,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
+  Select_Shadcn_,
+  cn,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
 import {
   CATEGORY_OPTIONS,
   type ExtendedSupportCategories,
@@ -91,7 +91,7 @@ function CategorySelector({ form }: CategorySelectorProps) {
                 </SelectTrigger_Shadcn_>
                 <SelectContent_Shadcn_>
                   <SelectGroup_Shadcn_>
-                    {CATEGORY_OPTIONS.filter((option) => !option.hidden).map((option) => (
+                    {CATEGORY_OPTIONS.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/LinkSupportTicketForm.tsx

@@ -1,30 +1,30 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useLinkSupportTicketMutation } from 'data/feedback/link-support-ticket-mutation'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { Link2 } from 'lucide-react'
 import { useEffect } from 'react'
 import type { SubmitHandler } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-
-import { useLinkSupportTicketMutation } from 'data/feedback/link-support-ticket-mutation'
-import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import {
   Button,
   DialogSectionSeparator,
-  Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
+  Form_Shadcn_,
   Input_Shadcn_,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
 import { CategoryAndSeverityInfo } from './CategoryAndSeverityInfo'
 import {
   LinkSupportTicketFormSchema,
   type LinkSupportTicketFormValues,
 } from './LinkSupportTicketForm.schema'
 import { OrganizationSelector } from './OrganizationSelector'
 import { ProjectAndPlanInfo } from './ProjectAndPlanInfo'
-import { SUPPORT_ACCESS_CATEGORIES, SupportAccessToggle } from './SupportAccessToggle'
-import { getOrgSubscriptionPlan, NO_ORG_MARKER, NO_PROJECT_MARKER } from './SupportForm.utils'
+import { DISABLE_SUPPORT_ACCESS_CATEGORIES, SupportAccessToggle } from './SupportAccessToggle'
+import { NO_ORG_MARKER, NO_PROJECT_MARKER, getOrgSubscriptionPlan } from './SupportForm.utils'
 
 interface LinkSupportTicketFormProps {
   conversationId: string
@@ -88,9 +88,10 @@ export const LinkSupportTicketForm = ({
           ? values.projectRef
           : undefined,
       category: values.category,
-      allow_support_access: SUPPORT_ACCESS_CATEGORIES.includes(values.category)
-        ? values.allowSupportAccess
-        : false,
+      allow_support_access:
+        values.category && !DISABLE_SUPPORT_ACCESS_CATEGORIES.includes(values.category)
+          ? values.allowSupportAccess
+          : false,
     })
   }
 
@@ -153,7 +154,7 @@ export const LinkSupportTicketForm = ({
 
         <DialogSectionSeparator />
 
-        {SUPPORT_ACCESS_CATEGORIES.includes(category) && (
+        {!!category && !DISABLE_SUPPORT_ACCESS_CATEGORIES.includes(category) && (
           <>
             <div className="py-4">
               <SupportAccessToggle form={form as any} />

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

@@ -10,7 +10,6 @@ export const CATEGORY_OPTIONS: {
   label: string
   description: string
   query?: string
-  hidden?: boolean
 }[] = [
   {
     value: SupportCategories.PROBLEM,
@@ -78,13 +77,6 @@ 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/SupportAccessToggle.tsx

@@ -1,26 +1,26 @@
-import { ChevronRight } from 'lucide-react'
-import Link from 'next/link'
-import type { UseFormReturn } from 'react-hook-form'
 // End of third-party imports
 
 import { SupportCategories } from '@supabase/shared-types/out/constants'
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import type { UseFormReturn } from 'react-hook-form'
 import {
   Badge,
-  Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
+  Collapsible_Shadcn_,
   FormField_Shadcn_,
   Switch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
 import type { ExtendedSupportCategories } from './Support.constants'
 import type { SupportFormValues } from './SupportForm.schema'
 
-export const SUPPORT_ACCESS_CATEGORIES: ExtendedSupportCategories[] = [
-  SupportCategories.DATABASE_UNRESPONSIVE,
-  SupportCategories.PERFORMANCE_ISSUES,
-  SupportCategories.PROBLEM,
-  SupportCategories.DASHBOARD_BUG,
+export const DISABLE_SUPPORT_ACCESS_CATEGORIES: ExtendedSupportCategories[] = [
+  SupportCategories.ACCOUNT_DELETION,
+  SupportCategories.SALES_ENQUIRY,
+  SupportCategories.REFUND,
 ]
 
 interface SupportAccessToggleProps {

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

@@ -1,7 +1,4 @@
-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 { useConstant, useFlag } from 'common'
 import { CLIENT_LIBRARIES } from 'common/constants'
@@ -13,7 +10,10 @@ import { useGenerateAttachmentURLsMutation } from 'data/support/generate-attachm
 import { useDeploymentCommitQuery } from 'data/utils/deployment-commit-query'
 import { detectBrowser } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
+import { type Dispatch, type MouseEventHandler } from 'react'
+import type { SubmitHandler, UseFormReturn } from 'react-hook-form'
 import { DialogSectionSeparator, Form_Shadcn_ } from 'ui'
+
 import {
   AffectedServicesSelector,
   CATEGORIES_WITHOUT_AFFECTED_SERVICES,
@@ -27,15 +27,15 @@ import { OrganizationSelector } from './OrganizationSelector'
 import { ProjectAndPlanInfo } from './ProjectAndPlanInfo'
 import { SubjectAndSuggestionsInfo } from './SubjectAndSuggestionsInfo'
 import { SubmitButton } from './SubmitButton'
-import { SUPPORT_ACCESS_CATEGORIES, SupportAccessToggle } from './SupportAccessToggle'
+import { DISABLE_SUPPORT_ACCESS_CATEGORIES, SupportAccessToggle } from './SupportAccessToggle'
 import type { SupportFormValues } from './SupportForm.schema'
 import type { SupportFormActions, SupportFormState } from './SupportForm.state'
 import {
+  NO_ORG_MARKER,
+  NO_PROJECT_MARKER,
   formatMessage,
   formatStudioVersion,
   getOrgSubscriptionPlan,
-  NO_ORG_MARKER,
-  NO_PROJECT_MARKER,
 } from './SupportForm.utils'
 import {
   DASHBOARD_LOG_CATEGORIES,
@@ -128,12 +128,12 @@ 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)
-        ? values.allowSupportAccess
-        : false,
+      allowSupportAccess:
+        values.category && !DISABLE_SUPPORT_ACCESS_CATEGORIES.includes(values.category)
+          ? values.allowSupportAccess
+          : false,
       library:
         values.category === SupportCategories.PROBLEM && selectedLibrary !== undefined
           ? selectedLibrary.key
@@ -179,15 +179,6 @@ 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">
@@ -202,14 +193,12 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
             subscriptionPlanId={subscriptionPlanId}
             category={category}
           />
-          {!simplifiedSupportForm && (
-            <CategoryAndSeverityInfo
-              form={form}
-              category={category}
-              severity={severity}
-              projectRef={projectRef}
-            />
-          )}
+          <CategoryAndSeverityInfo
+            form={form}
+            category={category}
+            severity={severity}
+            projectRef={projectRef}
+          />
         </div>
 
         <DialogSectionSeparator />
@@ -235,7 +224,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
           </>
         )}
 
-        {SUPPORT_ACCESS_CATEGORIES.includes(category) && (
+        {!!category && !DISABLE_SUPPORT_ACCESS_CATEGORIES.includes(category) && (
           <>
             <SupportAccessToggle form={form} />
             <DialogSectionSeparator />

apps/studio/components/interfaces/Support/__tests__/SupportFormPage.test.tsx

@@ -891,10 +891,6 @@ describe('SupportFormPage', () => {
     await userEvent.clear(messageField)
     await userEvent.type(messageField, 'MFA challenge fails with an unknown error code')
 
-    expect(
-      screen.queryByRole('switch', { name: /allow support access to your project/i })
-    ).toBeNull()
-
     await userEvent.click(getSubmitButton(screen))
 
     await waitFor(() => {
@@ -910,7 +906,7 @@ describe('SupportFormPage', () => {
       organizationSlug: 'org-2',
       library: '',
       affectedServices: '',
-      allowSupportAccess: false,
+      allowSupportAccess: true,
       verified: true,
       tags: ['dashboard-support-form'],
       siteUrl: 'https://project-2.supabase.dev',