diff --git a/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx b/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx index 7ae38d319fe..c6d4e302322 100644 --- a/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx +++ b/apps/studio/components/interfaces/App/AppBannerWrapperContext.tsx @@ -3,44 +3,40 @@ import { PropsWithChildren, createContext, useContext, useEffect, useState } fro import { LOCAL_STORAGE_KEYS } from 'lib/constants' -const AUTH_SMTP_CHANGES_WARNING_KEY = LOCAL_STORAGE_KEYS.AUTH_SMTP_CHANGES_WARNING +const FLY_POSTGRES_DEPRECATION_WARNING_KEY = LOCAL_STORAGE_KEYS.FLY_POSTGRES_DEPRECATION_WARNING // [Joshen] This file is meant to be dynamic - update this as and when we need to use the NoticeBanner type AppBannerContextType = { - authSmtpBannerAcknowledged: string[] - onUpdateAcknowledged: (key: 'auth-smtp', value: boolean | string) => void + flyPostgresBannerAcknowledged: boolean + onUpdateAcknowledged: (key: 'fly-postgres') => void } const AppBannerContext = createContext({ - authSmtpBannerAcknowledged: [], + flyPostgresBannerAcknowledged: false, onUpdateAcknowledged: noop, }) export const useAppBannerContext = () => useContext(AppBannerContext) export const AppBannerContextProvider = ({ children }: PropsWithChildren<{}>) => { - // [Joshen] If project specific, can take a list of refs instead - comma separated strings, no spaces - // Otherwise just a boolean will be fine - const [authSmtpBannerAcknowledged, setAuthSmtpBannerAcknowledged] = useState([]) + const [flyPostgresBannerAcknowledged, setFlyPostgresBannerAcknowledged] = useState(false) useEffect(() => { if (typeof window !== 'undefined') { - const acknowledgedProjectRefs = - localStorage.getItem(AUTH_SMTP_CHANGES_WARNING_KEY)?.split(',') ?? [] - setAuthSmtpBannerAcknowledged(acknowledgedProjectRefs) + const acknowledged = localStorage.getItem(FLY_POSTGRES_DEPRECATION_WARNING_KEY) === 'true' + setFlyPostgresBannerAcknowledged(acknowledged) } }, []) const value = { - authSmtpBannerAcknowledged, - onUpdateAcknowledged: (key: 'auth-smtp', value: boolean | string) => { - if (key === 'auth-smtp' && typeof value === 'string' && value.length > 0) { - const updatedRefs = authSmtpBannerAcknowledged.concat([value]) + flyPostgresBannerAcknowledged, + onUpdateAcknowledged: (key: 'fly-postgres') => { + if (key === 'fly-postgres') { if (typeof window !== 'undefined') { - window.localStorage.setItem(AUTH_SMTP_CHANGES_WARNING_KEY, updatedRefs.join(',')) + window.localStorage.setItem(FLY_POSTGRES_DEPRECATION_WARNING_KEY, 'true') } - setAuthSmtpBannerAcknowledged(updatedRefs) + setFlyPostgresBannerAcknowledged(true) } }, } @@ -49,6 +45,6 @@ export const AppBannerContextProvider = ({ children }: PropsWithChildren<{}>) => } export const useIsNoticeBannerShown = () => { - const { authSmtpBannerAcknowledged } = useAppBannerContext() - return authSmtpBannerAcknowledged + const { flyPostgresBannerAcknowledged } = useAppBannerContext() + return flyPostgresBannerAcknowledged } diff --git a/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx b/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx index a59ab485bc7..6cdd109bdf0 100644 --- a/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx +++ b/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx @@ -2,6 +2,7 @@ import Head from 'next/head' import { useRouter } from 'next/router' import { PropsWithChildren, useEffect } from 'react' +import { AppBannerWrapper } from 'components/interfaces/App' import PartnerIcon from 'components/ui/PartnerIcon' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useSendResetMutation } from 'data/telemetry/send-reset-mutation' @@ -150,6 +151,7 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren
+ {children} diff --git a/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx b/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx index 462350ab40c..df709aa04c4 100644 --- a/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx +++ b/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx @@ -1,44 +1,30 @@ import { ExternalLink } from 'lucide-react' import { useRouter } from 'next/router' -import { useParams } from 'common' import { useAppBannerContext } from 'components/interfaces/App/AppBannerWrapperContext' import { useProfile } from 'lib/profile' import { Button } from 'ui' -import { useAuthConfigQuery } from 'data/auth/auth-config-query' -import { isSmtpEnabled } from 'components/interfaces/Auth/SmtpForm/SmtpForm.utils' // This file, like AppBannerWrapperContext.tsx, is meant to be dynamic - update this as and when we need to use the NoticeBanner -// [Joshen] As of 19th September 24, this notice is around custom SMTP -// https://github.com/orgs/supabase/discussions/29370 +// [Alaister] As of 11th February 2025, this notice is around Fly's Postgres offering +// https://github.com/orgs/supabase/discussions/33413 // Timelines TLDR: -// - 20th September 2024: Email template customization no longer possible without setting up custom SMTP provider -// - 24th September 2024: Projects without custom SMTP will have their custom email templates returned back to default ones -// - 26th September 2024: If no custom SMTP, emails can only be sent to email addresses in your project's organization -// We can probably look to disable this banner perhaps a month from 26th Sept 2024 - so maybe end of October 2024 +// - Before March 14 2025: Users will still be able to access your existing Fly Postgres projects. +// - On March 14 2025: Your Fly Postgres projects are removed from our platform +// We can disable this banner after 14th March 2025 as the Fly Postgres offering is no longer available export const NoticeBanner = () => { const router = useRouter() - const { ref: projectRef } = useParams() - const { isLoading: isLoadingProfile } = useProfile() + const { isLoading: isLoadingProfile, profile } = useProfile() const appBannerContext = useAppBannerContext() - const { authSmtpBannerAcknowledged, onUpdateAcknowledged } = appBannerContext + const { flyPostgresBannerAcknowledged, onUpdateAcknowledged } = appBannerContext - const { data: authConfig } = useAuthConfigQuery({ projectRef }) - const smtpEnabled = isSmtpEnabled(authConfig) - const hasAuthEmailHookEnabled = authConfig?.HOOK_SEND_EMAIL_ENABLED + const isFlyUser = Boolean(profile?.primary_email?.endsWith('customer.fly.io')) + const acknowledged = flyPostgresBannerAcknowledged - const acknowledged = authSmtpBannerAcknowledged.includes(projectRef ?? '') - - if ( - isLoadingProfile || - router.pathname.includes('sign-in') || - smtpEnabled || - hasAuthEmailHookEnabled || - acknowledged - ) { + if (isLoadingProfile || !isFlyUser || router.pathname.includes('sign-in') || acknowledged) { return null } @@ -48,15 +34,14 @@ export const NoticeBanner = () => { className="flex items-center justify-center gap-x-4 bg-surface-100 py-3 transition text-foreground box-border border-b border-default" >

- Action required: Set up a custom SMTP provider, further restrictions will be imposed for the - default email provider + Supabase is deprecating Fly's Postgres offering managed by Supabase on March 14, 2025