Files
supabase/apps/studio/components/ui/BannerStack/Banners/BannerTOSUpdate.tsx
Joshen Lim 24f62c4402 Joshen/fe 3432 show maintenance banners only for affected project regions (#46191)
## Context

There'll be an upcoming shared pooler maintenance for specific regions -
so the PR here informs users about that via the following changes

- Shift Terms of Service update into a float banner
- Same local storage key is used for dismissal so users who already
dismissed it won't see this again
  - This is to prevent 2 notice banners scenario
<img width="342" height="235" alt="image"
src="https://github.com/user-attachments/assets/0a10fa53-46a0-4c71-beef-d66e006503fd"
/>

- Updated NoticeBanner to inform users of the upcoming maintenance
- Only projects in specific regions will be affected, so not all
projects will see this
<img width="658" height="75" alt="image"
src="https://github.com/user-attachments/assets/83aabda5-a774-4118-a945-08052b7c6b3e"
/>
<img width="496" height="152" alt="image"
src="https://github.com/user-attachments/assets/a1ccc440-5179-4a4b-919f-208844bb2227"
/>

- Cleaned up unused local storage keys

### To test

- Can be tested on preview as the notice applies for eu-central-1 and
us-east-1


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

* **New Features**
* Dismissible Terms of Service update banner with “Learn more” dialog so
users can review and acknowledge changes.
* Enhanced maintenance notices showing region-specific maintenance
windows, a status link per region, and formatted UTC timestamps tied to
the selected project.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46191?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-22 17:40:12 +07:00

124 lines
3.8 KiB
TypeScript

import { LOCAL_STORAGE_KEYS } from 'common'
import {
Badge,
Button,
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogSection,
DialogSectionSeparator,
DialogTitle,
DialogTrigger,
} from 'ui'
import { InlineLink } from '../../InlineLink'
import { BannerCard } from '../BannerCard'
import { useBannerStack } from '../BannerStackProvider'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
/**
* [Joshen] TOS update takes place from 6th June onwards, can remove from 4th July onwards as
* previously stated in the NoticeBanner
*/
export const BannerTOSUpdate = () => {
const { dismissBanner } = useBannerStack()
const [, setTOSUpdateAcknowledged] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.TERMS_OF_SERVICE_UPDATE,
false
)
return (
<BannerCard
onDismiss={() => {
setTOSUpdateAcknowledged(true)
dismissBanner('tos-update-banner')
}}
>
<div className="flex flex-col gap-y-2">
<Badge variant="default" className="w-min -ml-0.5 uppercase inline-flex items-center mb-2">
Notice
</Badge>
<div className="flex flex-col gap-y-1 mb-2">
<p className="text-sm font-medium">We've updated our Terms of Service</p>
<p className="text-xs text-foreground-lighter text-balance">
Updates define the responsibilities of both you and Supabase in the use of AI.
</p>
</div>
<UpdatedTermsOfServiceDialog />
</div>
</BannerCard>
)
}
const UpdatedTermsOfServiceDialog = () => {
const [, setTOSUpdateAcknowledged] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.TERMS_OF_SERVICE_UPDATE,
false
)
return (
<Dialog>
<DialogTrigger asChild>
<Button type="default" className="w-min">
Learn more
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Terms of Service update</DialogTitle>
<DialogDescription>
We've updated our Terms of Service to better define the responsibilities of both you and
Supabase in the use of AI.
</DialogDescription>
</DialogHeader>
<DialogSectionSeparator />
<DialogSection className="text-sm flex flex-col gap-y-2">
<p>
We've clarified how we use AI in our customer support tooling, introduced guidelines for
the responsible use of AI by our users, and updated our indemnification terms to clarify
the allocation of responsibility for claims arising from AI-generated inputs and
outputs.
</p>
<p>
Additionally, we've made an explicit commitment that Supabase will never use the data
you submit to the Supabase services to train or improve any AI without your prior
written consent.
</p>
<p>
The updated Terms (Version 2) will take effect on June 6, 2026. By continuing to use the
Services after that date, you agree to the updated Terms. You can review the changes{' '}
<InlineLink href="https://supabase.com/terms">here</InlineLink>.
</p>
<p>
This notice applies to users on Supabase's standard Terms of Service only. If you are on
an Enterprise plan or with a separately negotiated agreement, your existing terms
continue to govern your use of the Services.
</p>
</DialogSection>
<DialogFooter>
<DialogClose asChild>
<Button
type="default"
className="opacity-100"
onClick={() => setTOSUpdateAcknowledged(true)}
>
Understood
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}