[pull] master from supabase:master

apps/docs/content/guides/platform/backups.mdx

@@ -21,21 +21,19 @@ Once a project is deleted all associated data will be permanently removed, inclu
 
 Database backups can be categorized into two types: **logical** and **physical**. You can learn more about them [here](/blog/postgresql-physical-logical-backups).
 
-As a general rule of thumb, projects will either have logical or physical backups based on plan, database size, and add-ons:
+<Admonition type="note" label="Physical backups are not enabled by default">
 
-| Plan       | Database Size (0-15GB) | [Database Size (>15GB)](#backup-process-for-large-databases) | [PITR](#point-in-time-recovery) | [Read Replicas](./read-replicas#prerequisites) |
-| ---------- | ---------------------- | ------------------------------------------------------------ | ------------------------------- | ---------------------------------------------- |
-| Pro        | logical                | physical                                                     | physical                        | physical                                       |
-| Team       | logical                | physical                                                     | physical                        | physical                                       |
-| Enterprise | physical               | physical                                                     | physical                        | physical                                       |
+To enable physical backups, you have three options:
 
-<Admonition type="note">
+- Enable [Point-in-Time Recovery (PITR)](#point-in-time-recovery)
+- [Increase your disk size](/docs/guides/platform/database-size) to greater than 15GB
+- [Create a read replica](/docs/guides/platform/read-replicas)
 
-Once a project satisfies at least one of the requirements for physical backups then logical backups will no longer be taken. However, your project may revert back to logical backups if add-ons are removed.
+Once a project satisfies at least one of the requirements for physical backups then logical backups are no longer made. However, your project may revert back to logical backups if you remove add-ons.
 
 </Admonition>
 
-You can confirm your project's backup type by navigating to [Database Backups > Scheduled backups](/dashboard/project/_/database/backups/scheduled) and if you can download a backup then it is logical, otherwise it is physical.
+You can confirm your project's backup type by navigating to [**Database Backups > Scheduled backups**](/dashboard/project/_/database/backups/scheduled) and if you can download a backup then it is logical, otherwise it is physical.
 
 However, if your project has the Point-in-Time Recovery (PITR) add-on then the backups are physical and you can view them in [Database Backups > Point in time](/dashboard/project/_/database/backups/pitr).
 

apps/docs/public/humans.txt

@@ -3,6 +3,7 @@ TEAM
 Supabase is 100% remote.
 
 Aaron Byrne
+Adam Mokan
 Alaister Young
 Alan De Los Santos
 Aleksi Immonen

apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx

@@ -0,0 +1,15 @@
+import { ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
+import { Card } from 'ui'
+
+export const OverviewLearnMore = () => {
+  return (
+    <ScaffoldSection isFullWidth>
+      <ScaffoldSectionTitle className="mb-4">Learn more</ScaffoldSectionTitle>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 opacity-30 pointer-events-none">
+        <Card className="aspect-square" />
+        <Card className="aspect-square" />
+        <Card className="aspect-square" />
+      </div>
+    </ScaffoldSection>
+  )
+}

apps/studio/components/interfaces/Auth/Overview/OverviewMonitoring.tsx

@@ -0,0 +1,16 @@
+import { ScaffoldSectionTitle, ScaffoldSection } from 'components/layouts/Scaffold'
+import { Card } from 'ui'
+
+export const OverviewMonitoring = () => {
+  return (
+    <ScaffoldSection isFullWidth>
+      <ScaffoldSectionTitle className="mb-4">Monitoring</ScaffoldSectionTitle>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 opacity-30 pointer-events-none">
+        <Card className="h-36" />
+        <Card className="h-36" />
+        <Card className="aspect-video" />
+        <Card className="aspect-video" />
+      </div>
+    </ScaffoldSection>
+  )
+}

apps/studio/components/interfaces/Auth/Overview/OverviewUsage.tsx

@@ -0,0 +1,14 @@
+import { ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
+import { Card } from 'ui'
+
+export const OverviewUsage = () => {
+  return (
+    <ScaffoldSection isFullWidth>
+      <ScaffoldSectionTitle className="mb-4">Usage</ScaffoldSectionTitle>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 opacity-30 pointer-events-none">
+        <Card className="aspect-video" />
+        <Card className="aspect-video" />
+      </div>
+    </ScaffoldSection>
+  )
+}

apps/studio/components/interfaces/Sidebar.tsx

@@ -46,6 +46,7 @@ import {
   useIsNewStorageUIEnabled,
   useUnifiedLogsPreview,
 } from './App/FeaturePreview/FeaturePreviewContext'
+import { useFlag } from 'common'
 
 export const ICON_SIZE = 32
 export const ICON_STROKE_WIDTH = 1.5
@@ -244,12 +245,15 @@ const ProjectLinks = () => {
     'realtime:all',
   ])
 
+  const authOverviewPageEnabled = useFlag('authOverviewPage')
+
   const toolRoutes = generateToolRoutes(ref, project)
   const productRoutes = generateProductRoutes(ref, project, {
     auth: authEnabled,
     edgeFunctions: edgeFunctionsEnabled,
     storage: storageEnabled,
     realtime: realtimeEnabled,
+    authOverviewPage: authOverviewPageEnabled,
     isStorageV2,
   })
   const otherRoutes = generateOtherRoutes(ref, project, {

apps/studio/components/layouts/AuthLayout/AuthLayout.tsx

@@ -8,11 +8,14 @@ import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { withAuth } from 'hooks/misc/withAuth'
 import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateAuthMenu } from './AuthLayout.utils'
+import { useFlag } from 'common'
 
 const AuthProductMenu = () => {
   const router = useRouter()
   const { ref: projectRef = 'default' } = useParams()
 
+  const authenticationShowOverview = useFlag('authOverviewPage')
+
   const {
     authenticationSignInProviders,
     authenticationRateLimits,
@@ -42,6 +45,7 @@ const AuthProductMenu = () => {
         authenticationMultiFactor,
         authenticationAttackProtection,
         authenticationAdvanced,
+        authenticationShowOverview,
       })}
     />
   )

apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts

@@ -10,6 +10,7 @@ export const generateAuthMenu = (
     authenticationMultiFactor: boolean
     authenticationAttackProtection: boolean
     authenticationAdvanced: boolean
+    authenticationShowOverview: boolean
   }
 ): ProductMenuGroup[] => {
   const {
@@ -19,12 +20,18 @@ export const generateAuthMenu = (
     authenticationMultiFactor,
     authenticationAttackProtection,
     authenticationAdvanced,
+    authenticationShowOverview,
   } = flags ?? {}
 
   return [
     {
       title: 'Manage',
-      items: [{ name: 'Users', key: 'users', url: `/project/${ref}/auth/users`, items: [] }],
+      items: [
+        ...(authenticationShowOverview
+          ? [{ name: 'Overview', key: 'overview', url: `/project/${ref}/auth/overview`, items: [] }]
+          : []),
+        { name: 'Users', key: 'users', url: `/project/${ref}/auth/users`, items: [] },
+      ],
     },
     {
       title: 'Configuration',

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx

@@ -50,6 +50,7 @@ export const generateProductRoutes = (
     edgeFunctions?: boolean
     storage?: boolean
     realtime?: boolean
+    authOverviewPage?: boolean
     isStorageV2?: boolean
   }
 ): Route[] => {
@@ -61,6 +62,7 @@ export const generateProductRoutes = (
   const edgeFunctionsEnabled = features?.edgeFunctions ?? true
   const storageEnabled = features?.storage ?? true
   const realtimeEnabled = features?.realtime ?? true
+  const authOverviewPageEnabled = features?.authOverviewPage ?? false
   const isStorageV2 = features?.isStorageV2 ?? false
 
   const databaseMenu = generateDatabaseMenu(project)
@@ -86,7 +88,13 @@ export const generateProductRoutes = (
             key: 'auth',
             label: 'Authentication',
             icon: <Auth size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
-            link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/auth/users`),
+            link:
+              ref &&
+              (isProjectBuilding
+                ? buildingUrl
+                : authOverviewPageEnabled
+                  ? `/project/${ref}/auth/overview`
+                  : `/project/${ref}/auth/users`),
             items: authMenu,
           },
         ]

apps/studio/pages/project/[ref]/auth/overview.tsx

@@ -0,0 +1,57 @@
+import { NextPageWithLayout } from 'types'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { DocsButton } from 'components/ui/DocsButton'
+import { DOCS_URL } from 'lib/constants'
+import { OverviewMonitoring } from 'components/interfaces/Auth/Overview/OverviewMonitoring'
+import { OverviewUsage } from 'components/interfaces/Auth/Overview/OverviewUsage'
+import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewLearnMore'
+import { useRouter } from 'next/router'
+import { FeatureFlagContext, useFlag, useParams } from 'common'
+import { useContext, useEffect } from 'react'
+
+const AuthOverview: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = useParams()
+  const { hasLoaded } = useContext(FeatureFlagContext)
+  const authOverviewPageEnabled = useFlag('authOverviewPage')
+
+  useEffect(() => {
+    if (hasLoaded && !authOverviewPageEnabled) {
+      router.replace(`/project/${ref}/auth/users`)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authOverviewPageEnabled, router, ref])
+
+  if (!authOverviewPageEnabled) {
+    return null
+  }
+
+  return (
+    <ScaffoldContainer size="large">
+      <div className="mb-4 flex flex-col gap-2">
+        <OverviewMonitoring />
+        <OverviewUsage />
+        <OverviewLearnMore />
+      </div>
+    </ScaffoldContainer>
+  )
+}
+
+AuthOverview.getLayout = (page) => (
+  <DefaultLayout>
+    <AuthLayout>
+      <PageLayout
+        title="Overview"
+        secondaryActions={<DocsButton href={`${DOCS_URL}/guides/auth`} />}
+        size="large"
+      >
+        {page}
+      </PageLayout>
+    </AuthLayout>
+  </DefaultLayout>
+)
+
+export default AuthOverview