OrganizationSelector.tsx82 lines · main

1	import type { UseFormReturn } from 'react-hook-form'
2	import {
3	Badge,
4	FormControl,
5	FormField,
6	Select,
7	SelectContent,
8	SelectGroup,
9	SelectItem,
10	SelectTrigger,
11	SelectValue,
12	} from 'ui'
13	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
14
15	import type { SupportFormValues } from './SupportForm.schema'
16	import { getOrgSubscriptionPlan, NO_ORG_MARKER, NO_PROJECT_MARKER } from './SupportForm.utils'
17	// End of third-party imports
18
19	import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
20
21	interface OrganizationSelectorProps {
22	form: UseFormReturn<SupportFormValues>
23	orgSlug: string | null
24	}
25
26	export function OrganizationSelector({ form, orgSlug }: OrganizationSelectorProps) {
27	const { data: organizations, isSuccess: isSuccessOrganizations } = useOrganizationsQuery()
28	const subscriptionPlanId = getOrgSubscriptionPlan(organizations, orgSlug)
29
30	return (
31	<FormField
32	name="organizationSlug"
33	control={form.control}
34	render={({ field }) => {
35	const { ref: _ref, ...fieldWithoutRef } = field
36	return (
37	<FormItemLayout hideMessage layout="vertical" label="Which organization is affected?">
38	<FormControl>
39	<Select
40	{...fieldWithoutRef}
41	disabled={!isSuccessOrganizations}
42	defaultValue={field.value}
43	onValueChange={(value) => {
44	const previousOrgSlug = form.getValues('organizationSlug')
45	field.onChange(value)
46	if (previousOrgSlug !== value) {
47	form.resetField('projectRef', { defaultValue: NO_PROJECT_MARKER })
48	}
49	}}
50	>
51	<SelectTrigger className="w-full" aria-label="Select an organization">
52	<SelectValue asChild placeholder="Select an organization">
53	<div className="flex items-center gap-x-2">
54	{orgSlug === NO_ORG_MARKER ? (
55	<span>No specific organization</span>
56	) : (
57	(organizations ?? []).find((o) => o.slug === field.value)?.name
58	)}
59	{subscriptionPlanId && <Badge variant="default">{subscriptionPlanId}</Badge>}
60	</div>
61	</SelectValue>
62	</SelectTrigger>
63	<SelectContent>
64	<SelectGroup>
65	{organizations?.map((org) => (
66	<SelectItem key={org.slug} value={org.slug}>
67	{org.name}
68	</SelectItem>
69	))}
70	{isSuccessOrganizations && (organizations ?? []).length === 0 && (
71	<SelectItem value={NO_ORG_MARKER}>No specific organization</SelectItem>
72	)}
73	</SelectGroup>
74	</SelectContent>
75	</Select>
76	</FormControl>
77	</FormItemLayout>
78	)
79	}}
80	/>
81	)
82	}