These changes are necessary to support incoming security-related notification templates.
Given that the list of our email templates is doubling in size, this change requires some
- wider interface changes. Ones that we think make for a clearer experience overall. Win
- win!
+ wider interface changes. Ones that we think make for a clearer experience overall.
diff --git a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert/EmailRateLimitsAlert.tsx b/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx
similarity index 95%
rename from apps/studio/components/interfaces/Auth/EmailRateLimitsAlert/EmailRateLimitsAlert.tsx
rename to apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx
index 09ea5b0e90820..f2ebefc51a2e0 100644
--- a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert/EmailRateLimitsAlert.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx
@@ -6,7 +6,7 @@ import { DOCS_URL } from 'lib/constants'
import { Button } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
-export function EmailRateLimitsAlert() {
+export const EmailRateLimitsAlert = () => {
const { ref } = useParams()
return (
diff --git a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert/index.tsx b/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert/index.tsx
deleted file mode 100644
index ab1bdb81f1779..0000000000000
--- a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { EmailRateLimitsAlert } from './EmailRateLimitsAlert'
-
-export default EmailRateLimitsAlert
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
index 433675f8bd351..fb159110cff80 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -1,21 +1,26 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, ExternalLink, X } from 'lucide-react'
import Link from 'next/link'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod'
-import { useParams } from 'common'
+import { LOCAL_STORAGE_KEYS, useParams } from 'common'
+import { FEATURE_PREVIEWS } from 'components/interfaces/App/FeaturePreview/FeaturePreview.constants'
import { useIsSecurityNotificationsEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
import AlertError from 'components/ui/AlertError'
+import { InlineLink } from 'components/ui/InlineLink'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import { useAuthConfigQuery } from 'data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { DOCS_URL } from 'lib/constants'
import {
+ Badge,
Button,
Card,
CardContent,
@@ -28,9 +33,13 @@ import {
TabsContent_Shadcn_,
TabsList_Shadcn_,
TabsTrigger_Shadcn_,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
} from 'ui'
+import { Admonition } from 'ui-patterns'
import { TEMPLATES_SCHEMAS } from '../AuthTemplatesValidation'
-import EmailRateLimitsAlert from '../EmailRateLimitsAlert'
+import { EmailRateLimitsAlert } from '../EmailRateLimitsAlert'
import { slugifyTitle } from './EmailTemplates.utils'
import { TemplateEditor } from './TemplateEditor'
@@ -50,6 +59,10 @@ const NotificationsFormSchema = z.object({
),
})
+const SECURITY_NOTIFICATIONS_DISCUSSIONS_URL = FEATURE_PREVIEWS.find(
+ (f) => f.key === LOCAL_STORAGE_KEYS.UI_PREVIEW_SECURITY_NOTIFICATIONS
+)?.discussionsUrl
+
export const EmailTemplates = () => {
const { ref: projectRef } = useParams()
const isSecurityNotificationsEnabled = useIsSecurityNotificationsEnabled()
@@ -58,6 +71,11 @@ export const EmailTemplates = () => {
'custom_config_gotrue'
)
+ const [acknowledged, setAcknowledged] = useLocalStorageQuery(
+ LOCAL_STORAGE_KEYS.SECURITY_NOTIFICATIONS_ACKNOWLEDGED(projectRef ?? ''),
+ false
+ )
+
const {
data: authConfig,
error: authConfigError,
@@ -161,6 +179,60 @@ export const EmailTemplates = () => {
+ Notify users about security-sensitive actions on their accounts
+
+
+
+ We’ve expanded our email templates to handle security-sensitive actions.
+ The list of templates will continue to grow as our feature-set changes
+ {SECURITY_NOTIFICATIONS_DISCUSSIONS_URL && (
+ <>
+ {' '}
+ and as we{' '}
+
+ gather feedback
+ {' '}
+ from our community
+ >
+ )}
+ .
+