Files
supabase/apps/studio/components/interfaces/ProjectCreation/HighAvailabilityInput.tsx
Bobbie Soedirgo 60e6a89f9d fix: make high availability in project creation form public (#48338)
Move "High availability" from internal-only to public. Closes MUL-668.

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

"High availability" is an internal-only config

<img width="724" height="1126" alt="Screenshot 2026-07-26 at 8 15 57 PM"
src="https://github.com/user-attachments/assets/83e1856b-9020-4b65-a019-27e3cc29bae9"
/>

## What is the new behavior?

"High availability" is a public user-facing config

<img width="724" height="1036" alt="Screenshot 2026-07-26 at 8 15 31 PM"
src="https://github.com/user-attachments/assets/4f369058-ce91-4bcf-bd3c-120277363b1a"
/>

Still hidden without the org entitlement, i.e. currently not available
anywhere on prod

<img width="724" height="931" alt="Screenshot 2026-07-26 at 8 18 58 PM"
src="https://github.com/user-attachments/assets/3e1deb76-210c-416b-b716-45ff6e3b0afd"
/>



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

## Summary by CodeRabbit

* **New Features**
* Added a High availability option directly to the project creation
form.
* The option is shown when available for the account and hidden when
unavailable.
* Enabling High availability automatically selects AWS as the cloud
provider.

* **Bug Fixes**
* Corrected validation for incompatible High availability and OrioleDB
selections.

* **Tests**
* Added coverage for High availability visibility, eligibility, and form
submission behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 18:11:35 +08:00

38 lines
1.2 KiB
TypeScript

import { UseFormReturn } from 'react-hook-form'
import { FormControl, FormField, Switch } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { CreateProjectForm } from './ProjectCreation.schema'
import Panel from '@/components/ui/Panel'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
interface HighAvailabilityInputProps {
form: UseFormReturn<CreateProjectForm>
}
export const HighAvailabilityInput = ({ form }: HighAvailabilityInputProps) => {
const { hasAccess } = useCheckEntitlements('instances.high_availability')
if (!hasAccess) return null
return (
<Panel.Content>
<FormField
control={form.control}
name="highAvailability"
render={({ field }) => (
<FormItemLayout
label="High availability"
description="Horizontally scalable Postgres for highly available, globally distributed deployments while staying true to standard Postgres."
layout="horizontal"
>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItemLayout>
)}
/>
</Panel.Content>
)
}