fix(studio): disable network restrictions for v3 (AWS_K8S) projects (#50996)

## Summary
- Network restrictions aren't supported on v3 (AWS_K8S) projects, but
the Network Restrictions settings section previously only disabled
itself for High Availability projects, leaving a fully working (but
non-functional) UI for non-HA v3 projects.
- Adds `useIsAwsK8sCloudProvider()` to the section's disabled check,
alongside a v3-specific disabled notice mirroring the existing High
Availability disabled notice pattern.

Resolves
[FE-4482](https://linear.app/supabase/issue/FE-4482/disable-network-restrictions-for-v3-aws-k8s-projects).

## Test plan
- [x] `tsc --noEmit` passes for the changed file
- [x] `eslint` passes for the changed file
- [x] `prettier --check` passes for the changed file
- [x] Mirrors the existing, already-shipped High Availability
disabled-section pattern in the same component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

## Summary by CodeRabbit

* **Behavior Changes**
* Network restrictions are unavailable for AWS Kubernetes and High
Availability projects, and for users without update permission. AWS
Kubernetes projects display a dedicated explanation; restriction details
and management controls are hidden.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Charis authored and GitHub committed 2026-09-29 08:16:10 -04:00
1 parent 951a22183a
commit 5573d0dfbc
1 file changed
+15 -4
@@ -14,6 +14,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
import { Admonition } from 'ui-patterns/Admonition'
import {
PageSection,
PageSectionAside,
@@ -34,12 +35,13 @@ import { HighAvailabilityDisabledSectionNotice } from '@/components/ui/HighAvail
import { useNetworkRestrictionsQuery } from '@/data/network-restrictions/network-restrictions-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useIsAwsK8sCloudProvider, useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL } from '@/lib/constants'
const HA_DISABLED_TITLE = 'Network restrictions unavailable on High Availability projects'
const HA_DISABLED_DESCRIPTION =
"We're working to bring network restrictions to High Availability projects. Contact support if this is blocking your work."
const AWS_K8S_DISABLED_TITLE = 'Network restrictions are not yet supported on this project'
interface AccessButtonProps {
disabled: boolean
@@ -84,6 +86,7 @@ export const NetworkRestrictions = () => {
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
const { isHighAvailability } = useHighAvailability()
const isAwsK8s = useIsAwsK8sCloudProvider()
const [isAddingAddress, setIsAddingAddress] = useState<undefined | 'IPv4' | 'IPv6'>()
const [isAllowingAll, setIsAllowingAll] = useState(false)
const [isDisallowingAll, setIsDisallowingAll] = useState(false)
@@ -103,10 +106,12 @@ export const NetworkRestrictions = () => {
}
)
const isSectionDisabled = isHighAvailability || !canUpdateNetworkRestrictions
const isSectionDisabled = isHighAvailability || isAwsK8s || !canUpdateNetworkRestrictions
const sectionDisabledReason = isHighAvailability
? HA_DISABLED_TITLE
: 'You need additional permissions to update network restrictions'
: isAwsK8s
? AWS_K8S_DISABLED_TITLE
: 'You need additional permissions to update network restrictions'
const hasAccessToRestrictions = data?.entitlement === 'allowed'
const ipv4Restrictions = data?.config?.dbAllowedCidrs ?? []
@@ -131,7 +136,7 @@ export const NetworkRestrictions = () => {
</PageSectionSummary>
<PageSectionAside className="flex items-center gap-x-2">
<DocsButton href={`${DOCS_URL}/guides/platform/network-restrictions`} />
{!canUpdateNetworkRestrictions || isHighAvailability ? (
{isSectionDisabled ? (
<ButtonTooltip
disabled
variant="primary"
@@ -184,7 +189,13 @@ export const NetworkRestrictions = () => {
/>
</div>
)}
{!isHighAvailability && isAwsK8s && (
<div className="mb-4">
<Admonition type="default" title={AWS_K8S_DISABLED_TITLE} />
</div>
)}
{!isHighAvailability &&
!isAwsK8s &&
(isLoading ? (
<Card>
<CardContent>