mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
## What kind of change does this PR introduce? Studio UI cleanup for sidebar BannerStack items and Unified Logs preview defaults. ## What is the current behavior? The sidebar BannerStack shows both a Unified Logs promo banner and a Terms of Service update notice. Unified Logs has been default opt-in for a while, and the ToS banner currently shares priority with other higher-value notices. The default opt-in behaviour is still gated behind the `unifiedLogsDefaultOptIn` feature flag. Closes [DEPR-646](https://linear.app/supabase/issue/DEPR-646/remove-unified-logs-banner-and-deprioritise-tos-banner). | Before | | --- | | <img width="1024" height="759" alt="5717" src="https://github.com/user-attachments/assets/1a19e6f6-0c7f-49e8-8e7e-9f83196b2353" /> | ## What is the new behavior? - Removes the Unified Logs BannerStack item and its component - Keeps the ToS update banner but lowers its priority so other banners surface first - Sets Unified Logs `isDefaultOptIn` to `true` and removes `unifiedLogsDefaultOptIn` flag usage ## To test - Open any project in Studio (e.g. `/project/<ref>`) - Confirm the sidebar BannerStack no longer shows the "Unified Logs is here" banner - If you have not dismissed the ToS notice and it is still before the expiry date, confirm it still appears but sits behind higher-priority banners (e.g. free micro upgrade on eligible projects) - Open `/project/<ref>/logs` and confirm Unified Logs loads by default for users who have not previously toggled the preview off ## After merge - [ ] Retire the `unifiedLogsDefaultOptIn` PostHog flag <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Unified Logs preview is now enabled by default when available, while preserving individual user choices. - **Bug Fixes** - Terms of Service update notifications now appear with higher priority. - **Changes** - Removed the Unified Logs promotional banner, including related navigation, dismissal, and tracking behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { createContext, useCallback, useContext, useState } from 'react'
|
|
|
|
export const BANNER_ID = {
|
|
DATABASE_CONNECTIONS: 'database-connections-banner',
|
|
INDEX_ADVISOR: 'index-advisor-banner',
|
|
TABLE_EDITOR_QUEUE_OPERATIONS: 'table-editor-queue-operations-banner',
|
|
RLS_EVENT_TRIGGER: 'rls-event-trigger-banner',
|
|
FREE_MICRO_UPGRADE: 'free-micro-upgrade-banner',
|
|
TOS_UPDATE: 'tos-update-banner',
|
|
} as const
|
|
|
|
export type BannerId = (typeof BANNER_ID)[keyof typeof BANNER_ID]
|
|
|
|
export interface Banner {
|
|
id: BannerId
|
|
content: React.ReactNode
|
|
isDismissed: boolean
|
|
priority?: number
|
|
onDismiss?: () => void
|
|
}
|
|
|
|
interface BannerStackContextType {
|
|
banners: Banner[]
|
|
addBanner: (banner: Banner) => void
|
|
dismissBanner: (id: BannerId) => void
|
|
}
|
|
|
|
const BannerStackContext = createContext<BannerStackContextType | undefined>(undefined)
|
|
|
|
export const BannerStackProvider = ({ children }: { children: React.ReactNode }) => {
|
|
const [banners, setBanners] = useState<Banner[]>([])
|
|
|
|
const addBanner = useCallback((banner: Banner) => {
|
|
setBanners((prev) => {
|
|
const existingIndex = prev.findIndex((b) => b.id === banner.id)
|
|
if (existingIndex !== -1) {
|
|
if (!prev[existingIndex].isDismissed) return prev
|
|
const revived = [...prev]
|
|
revived[existingIndex] = banner
|
|
return revived.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
|
|
}
|
|
const newBanners = [...prev, banner]
|
|
return newBanners.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
|
|
})
|
|
}, [])
|
|
|
|
const dismissBanner = useCallback((id: string) => {
|
|
setBanners((prev) => prev.map((b) => (b.id === id ? { ...b, isDismissed: true } : b)))
|
|
setTimeout(() => {
|
|
setBanners((prev) => prev.filter((b) => b.id !== id))
|
|
}, 300)
|
|
}, [])
|
|
|
|
return (
|
|
<BannerStackContext.Provider value={{ banners, addBanner, dismissBanner }}>
|
|
{children}
|
|
</BannerStackContext.Provider>
|
|
)
|
|
}
|
|
|
|
export const useBannerStack = () => {
|
|
const context = useContext(BannerStackContext)
|
|
if (!context) throw new Error('useBannerStack must be used within BannerStackProvider')
|
|
return context
|
|
}
|