mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
CharisandJoshen Lim
f5ff10e195
* refactor: refactor support form Refactor support form to make it easier to maintain: - Split up large components into smaller components and hooks - Lift state up so we don't have to do complex child/parent state-syncing via useEffect - Use nuqs parsing for consistent serialization/deserialization of support form prefilled fields * test: support form Add comprehensive tests for support form * fix(support form): project and org empty state * Nit clean up * More clean up * cleannnn * fix(support form): allow case-insensitive category in url * clean(support form tests): remove unused param * fix(support form): incorrect logic for sending affected services in payload * clean(support form): use NO_ORG_MARKER and NO_PROJECT_MARKER instead of strings * fix(support form): don't show upgrade cta if already on enterprise --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import type { UseFormReturn } from 'react-hook-form'
|
|
// End of third-party imports
|
|
|
|
import { SupportCategories } from '@supabase/shared-types/out/constants'
|
|
import { FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2'
|
|
import { type ExtendedSupportCategories, SERVICE_OPTIONS } from './Support.constants'
|
|
import type { SupportFormValues } from './SupportForm.schema'
|
|
|
|
interface AffectedServicesSelectorProps {
|
|
form: UseFormReturn<SupportFormValues>
|
|
category: ExtendedSupportCategories
|
|
}
|
|
|
|
export const CATEGORIES_WITHOUT_AFFECTED_SERVICES: ExtendedSupportCategories[] = [
|
|
SupportCategories.LOGIN_ISSUES,
|
|
'Plan_upgrade',
|
|
]
|
|
|
|
export function AffectedServicesSelector({ form, category }: AffectedServicesSelectorProps) {
|
|
if (CATEGORIES_WITHOUT_AFFECTED_SERVICES.includes(category)) return null
|
|
|
|
return (
|
|
<FormField_Shadcn_
|
|
name="affectedServices"
|
|
control={form.control}
|
|
render={({ field }) => (
|
|
<FormItemLayout hideMessage layout="vertical" label="Which services are affected?">
|
|
<FormControl_Shadcn_>
|
|
<MultiSelectV2
|
|
options={SERVICE_OPTIONS}
|
|
value={field.value.length === 0 ? [] : field.value?.split(', ')}
|
|
placeholder="No particular service"
|
|
searchPlaceholder="Search for a service"
|
|
onChange={(services) => form.setValue('affectedServices', services.join(', '))}
|
|
/>
|
|
</FormControl_Shadcn_>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
)
|
|
}
|