diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx index 82c554c7a6a85..4d0551730e34b 100644 --- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx @@ -7,11 +7,6 @@ import { toast } from 'sonner' import * as z from 'zod' import { useParams } from 'common' -import { - ScaffoldSection, - ScaffoldSectionContent, - ScaffoldSectionTitle, -} from 'components/layouts/Scaffold' import { InlineLink } from 'components/ui/InlineLink' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' @@ -181,44 +176,126 @@ export const OAuthServerSettingsForm = () => { } if (isPermissionsLoaded && !canReadConfig) { - return ( - - OAuth Server -
- -
- - ) + return } if (isAuthConfigLoading || isLoadingPermissions) { - return ( -
- -
- ) + return } return ( <> - - - -
- + + + + + ( + + Enable OAuth server functionality for your project to create and manage + OAuth applications.{' '} + + Learn more + + + } + > + + + + + )} + /> + + {/* Site URL and Authorization Path - Only show when OAuth Server is enabled */} + {form.watch('OAUTH_SERVER_ENABLED') && ( + <> + + The base URL of your application, configured in{' '} + + Auth URL Configuration + {' '} + settings. + + } + > + + + + ( + + + + + + )} + /> + {(() => { + const authorizationUrl = `${authConfig?.SITE_URL}${form.watch('OAUTH_SERVER_AUTHORIZATION_PATH') || '/oauth/consent'}` + return ( + + Preview Authorization URL:{' '} + + {authorizationUrl} + + + } + /> + ) + })()} + + ( - Enable OAuth server functionality for your project to create and manage - OAuth applications.{' '} - + Enable dynamic OAuth app registration. Apps can be registered + programmatically via APIs.{' '} + Learn more @@ -227,7 +304,7 @@ export const OAuthServerSettingsForm = () => { @@ -235,122 +312,25 @@ export const OAuthServerSettingsForm = () => { )} /> - {/* Site URL and Authorization Path - Only show when OAuth Server is enabled */} - {form.watch('OAUTH_SERVER_ENABLED') && ( - <> - - - The base URL of your application, configured in{' '} - - Auth URL Configuration - {' '} - settings. - - } - > - - - - ( - - - - - - )} - /> - {(() => { - const authorizationUrl = `${authConfig?.SITE_URL}${form.watch('OAUTH_SERVER_AUTHORIZATION_PATH') || '/oauth/consent'}` - return ( - - Preview Authorization URL:{' '} - - {authorizationUrl} - - - } - /> - ) - })()} - - - ( - - Enable dynamic OAuth app registration. Apps can be registered - programmatically via APIs.{' '} - - Learn more - - - } - > - - - - - )} - /> - - - )} + + )} - - - - - - - -
- + + + + + + + {/* Dynamic Apps Confirmation Modal */} { const { ref } = useParams() @@ -31,25 +38,35 @@ const AdvancedPage: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + Advanced + + Configure advanced authentication server settings + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } AdvancedPage.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/audit-logs.tsx b/apps/studio/pages/project/[ref]/auth/audit-logs.tsx index b3ed3be5f2fa4..7897a65e1639d 100644 --- a/apps/studio/pages/project/[ref]/auth/audit-logs.tsx +++ b/apps/studio/pages/project/[ref]/auth/audit-logs.tsx @@ -3,14 +3,22 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { AuditLogsForm } from 'components/interfaces/Auth/AuditLogsForm' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const AuditLogsPage: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( @@ -23,31 +31,38 @@ const AuditLogsPage: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + Audit Logs + + Track and monitor auth events in your project + + + + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } -const secondaryActions = [] - AuditLogsPage.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/hooks.tsx b/apps/studio/pages/project/[ref]/auth/hooks.tsx index 302f3129d1709..84fa9b5cf39d0 100644 --- a/apps/studio/pages/project/[ref]/auth/hooks.tsx +++ b/apps/studio/pages/project/[ref]/auth/hooks.tsx @@ -3,14 +3,22 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { HooksListing } from 'components/interfaces/Auth/Hooks/HooksListing' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' import { GenericSkeletonLoader } from 'ui-patterns' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const Hooks: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( @@ -23,30 +31,38 @@ const Hooks: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + Auth Hooks + + Use Postgres functions or HTTP endpoints to customize the behavior of Supabase Auth + + + + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } -const secondaryActions = [] Hooks.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/mfa.tsx b/apps/studio/pages/project/[ref]/auth/mfa.tsx index d6919211c3120..3b530fb2e9969 100644 --- a/apps/studio/pages/project/[ref]/auth/mfa.tsx +++ b/apps/studio/pages/project/[ref]/auth/mfa.tsx @@ -4,14 +4,21 @@ import { useParams } from 'common' import { MfaAuthSettingsForm } from 'components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const MfaPage: NextPageWithLayout = () => { const { ref } = useParams() @@ -31,28 +38,35 @@ const MfaPage: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + Multi-Factor Authentication (MFA) + + Requires users to provide additional verification factors to authenticate + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } MfaPage.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx b/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx index 837250177bd75..1afacb80cc8ab 100644 --- a/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx +++ b/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx @@ -1,20 +1,39 @@ import { OAuthAppsList } from 'components/interfaces/Auth/OAuthApps/OAuthAppsList' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' -import { FormHeader } from 'components/ui/Forms/FormHeader' +import { DocsButton } from 'components/ui/DocsButton' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' +import { PageSection, PageSectionContent } from 'ui-patterns' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' const OAuthApps: NextPageWithLayout = () => ( - - -
- - -
- - + <> + + + + OAuth Apps + + + + + + + + + + + + + + ) OAuthApps.getLayout = (page) => ( diff --git a/apps/studio/pages/project/[ref]/auth/oauth-server.tsx b/apps/studio/pages/project/[ref]/auth/oauth-server.tsx index d98b2c4fc5d5a..169a032c191cb 100644 --- a/apps/studio/pages/project/[ref]/auth/oauth-server.tsx +++ b/apps/studio/pages/project/[ref]/auth/oauth-server.tsx @@ -1,33 +1,50 @@ import { OAuthServerSettingsForm } from 'components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' import { DocsButton } from 'components/ui/DocsButton' -import { ScaffoldContainer } from 'components/layouts/Scaffold' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const ProvidersPage: NextPageWithLayout = () => { return ( - - - + <> + + + + OAuth Server + + Configure your project to act as an identity provider for third-party applications + + + + + + + + + + + + + + + ) } -const secondaryActions = [] - ProvidersPage.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/overview.tsx b/apps/studio/pages/project/[ref]/auth/overview.tsx index d68f9c83617ed..619e0208e1cd1 100644 --- a/apps/studio/pages/project/[ref]/auth/overview.tsx +++ b/apps/studio/pages/project/[ref]/auth/overview.tsx @@ -3,14 +3,20 @@ import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewL import { OverviewMetrics } from 'components/interfaces/Auth/Overview/OverviewMetrics' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer } from 'components/layouts/Scaffold' import { DocsButton } from 'components/ui/DocsButton' import { DOCS_URL } from 'lib/constants' import { useRouter } from 'next/router' import { useContext, useEffect } from 'react' import type { NextPageWithLayout } from 'types' import { useAuthOverviewQuery } from 'data/auth/auth-overview-query' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' const AuthOverview: NextPageWithLayout = () => { const router = useRouter() @@ -36,33 +42,33 @@ const AuthOverview: NextPageWithLayout = () => { } return ( - -
+ <> + + + + Overview + + +
+ + Last 24 hours + + +
+ + + + -
- + + ) } AuthOverview.getLayout = (page) => ( - - - - Last 24 hours - - - - } - size="large" - > - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx index d39387fd8c86c..c6503701a2a92 100644 --- a/apps/studio/pages/project/[ref]/auth/policies.tsx +++ b/apps/studio/pages/project/[ref]/auth/policies.tsx @@ -13,9 +13,7 @@ import { PolicyEditorPanel } from 'components/interfaces/Auth/Policies/PolicyEdi import { generatePolicyUpdateSQL } from 'components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import AlertError from 'components/ui/AlertError' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' @@ -34,6 +32,16 @@ import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' import type { NextPageWithLayout } from 'types' import { Button } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' /** * Filter tables by table name and policy name @@ -213,106 +221,112 @@ const AuthPoliciesPage: NextPageWithLayout = () => { } return ( - - -
- { - setSchema(schemaName) - setSearchString('') - }} - /> - { - const str = e.target.value - setSearchString(str) - }} - icon={} - actions={ - searchString ? ( -
+ <> + + + + Policies + + Manage Row Level Security policies for your tables + + + + + + + + + + +
+ { + setSchema(schemaName) + setSearchString('') + }} + /> + { + const str = e.target.value + setSearchString(str) + }} + icon={} + actions={ + searchString ? ( +
+ + {isLoading && } - {isLoading && } + {isError && } - {isError && } + {isSuccess && ( + + 0} + isLocked={isSchemaLocked} + visibleTableIds={visibleTableIds} + onSelectCreatePolicy={handleSelectCreatePolicy} + onSelectEditPolicy={handleSelectEditPolicy} + onResetSearch={handleResetSearch} + /> + + )} - {isSuccess && ( - - 0} - isLocked={isSchemaLocked} - visibleTableIds={visibleTableIds} - onSelectCreatePolicy={handleSelectCreatePolicy} - onSelectEditPolicy={handleSelectEditPolicy} - onResetSearch={handleResetSearch} + searchString={searchString} + selectedTable={isUpdatingPolicy ? undefined : selectedTable} + selectedPolicy={isUpdatingPolicy ? selectedPolicyIdToEdit : undefined} + onSelectCancel={() => { + setSelectedTable(undefined) + if (isUpdatingPolicy) { + setSelectedPolicyIdToEdit(null) + } else { + setShowCreatePolicy(false) + } + }} + authContext="database" /> - - )} - - {/* Create or Edit Policy */} - { - setSelectedTable(undefined) - if (isUpdatingPolicy) { - setSelectedPolicyIdToEdit(null) - } else { - setShowCreatePolicy(false) - } - }} - authContext="database" - /> - - + + + + ) } AuthPoliciesPage.getLayout = (page) => ( - - - } - size="large" - > - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/protection.tsx b/apps/studio/pages/project/[ref]/auth/protection.tsx index efd6eec56a1c7..967a9b15c0ab3 100644 --- a/apps/studio/pages/project/[ref]/auth/protection.tsx +++ b/apps/studio/pages/project/[ref]/auth/protection.tsx @@ -4,14 +4,21 @@ import { useParams } from 'common' import { ProtectionAuthSettingsForm } from 'components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const ProtectionPage: NextPageWithLayout = () => { const { ref } = useParams() @@ -31,28 +38,35 @@ const ProtectionPage: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + Attack Protection + + Configure security settings to protect your project from attacks + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } ProtectionPage.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/providers.tsx b/apps/studio/pages/project/[ref]/auth/providers.tsx index ce10e26e70818..10b456a1ce43b 100644 --- a/apps/studio/pages/project/[ref]/auth/providers.tsx +++ b/apps/studio/pages/project/[ref]/auth/providers.tsx @@ -2,18 +2,18 @@ import { AuthProvidersForm } from 'components/interfaces/Auth/AuthProvidersForm' import { BasicAuthSettingsForm } from 'components/interfaces/Auth/BasicAuthSettingsForm' import { AuthProvidersLayout } from 'components/layouts/AuthLayout/AuthProvidersLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { ScaffoldContainer } from 'components/layouts/Scaffold' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' const ProvidersPage: NextPageWithLayout = () => { const showProviders = useIsFeatureEnabled('authentication:show_providers') return ( - + {showProviders && } - + ) } diff --git a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx index a58829a87915f..bb85a7b191150 100644 --- a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx +++ b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx @@ -4,8 +4,6 @@ import { useParams } from 'common' import { RateLimits } from 'components/interfaces/Auth/RateLimits/RateLimits' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' @@ -14,6 +12,16 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { DOCS_URL } from 'lib/constants' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const RateLimitsPage: NextPageWithLayout = () => { const { ref } = useParams() @@ -33,33 +41,40 @@ const RateLimitsPage: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + Rate Limits + + Safeguard against bursts of incoming traffic to prevent abuse and maximize stability + + + + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } RateLimitsPage.getLayout = (page) => ( - - - } - > - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/sessions.tsx b/apps/studio/pages/project/[ref]/auth/sessions.tsx index eb22314bb1da2..b1a1e5880162a 100644 --- a/apps/studio/pages/project/[ref]/auth/sessions.tsx +++ b/apps/studio/pages/project/[ref]/auth/sessions.tsx @@ -3,12 +3,19 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { SessionsAuthSettingsForm } from 'components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const SessionsPage: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( @@ -21,28 +28,35 @@ const SessionsPage: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - - )} - + <> + + + + User Sessions + + Configure settings for user sessions and refresh tokens + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + + )} + + ) } SessionsPage.getLayout = (page) => ( - - - {page} - - + {page} ) diff --git a/apps/studio/pages/project/[ref]/auth/smtp.tsx b/apps/studio/pages/project/[ref]/auth/smtp.tsx index ba95e4c9eed40..7bc3cf592a53f 100644 --- a/apps/studio/pages/project/[ref]/auth/smtp.tsx +++ b/apps/studio/pages/project/[ref]/auth/smtp.tsx @@ -3,11 +3,12 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { SmtpForm } from 'components/interfaces/Auth/SmtpForm/SmtpForm' import { AuthEmailsLayout } from 'components/layouts/AuthLayout/AuthEmailsLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' import { GenericSkeletonLoader } from 'ui-patterns' +import { PageContainer } from 'ui-patterns/PageContainer' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const SmtpPage: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( @@ -20,15 +21,17 @@ const SmtpPage: NextPageWithLayout = () => { } return ( - + {!isPermissionsLoaded ? ( - - - + + + + + ) : ( )} - + ) } diff --git a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx index e8578974935b5..9ff95a3a5f90d 100644 --- a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx +++ b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx @@ -14,12 +14,6 @@ import { slugifyTitle } from 'components/interfaces/Auth/EmailTemplates/EmailTem import { TemplateEditor } from 'components/interfaces/Auth/EmailTemplates/TemplateEditor' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { - ScaffoldContainer, - ScaffoldSection, - ScaffoldSectionTitle, -} from 'components/layouts/Scaffold' import { DocsButton } from 'components/ui/DocsButton' import NoPermission from 'components/ui/NoPermission' import { useAuthConfigQuery } from 'data/auth/auth-config-query' @@ -39,6 +33,30 @@ import { } from 'ui' import { Admonition, GenericSkeletonLoader } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderAside, + PageHeaderBreadcrumb, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { + PageSection, + PageSectionContent, + PageSectionMeta, + PageSectionSummary, + PageSectionTitle, +} from 'ui-patterns/PageSection' +import { + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from 'ui/src/components/shadcn/ui/breadcrumb' const TemplatePage: NextPageWithLayout = () => { return @@ -158,92 +176,120 @@ const RedirectToTemplates = () => { } return ( - , - ]} - > - + <> + + + + + + Emails + + + + + {template.title} + + + + + + {template.title} + + {template.purpose || 'Configure and customize email templates.'} + + + + + + + + {!isPermissionsLoaded || isLoadingConfig ? ( - - - + + + + + ) : ( <> {showConfigurationSection && ( - - Configuration - -
- - - } - render={({ field }) => ( - - - - - + + + + Configuration + + + + + + + + } + render={({ field }) => ( + + + + + + )} + /> + + + {templateForm.formState.isDirty && ( + )} - /> - - - {templateForm.formState.isDirty && ( - - )} - - - -
- - + + + + + + )} - - {/* Only show title if there is an another section above */} + {showConfigurationSection && ( - Content + + + Content + + )} - - - - + + + + + + )} - - + + ) } diff --git a/apps/studio/pages/project/[ref]/auth/templates/index.tsx b/apps/studio/pages/project/[ref]/auth/templates/index.tsx index dbd048e4938a6..77e7eebe71a0d 100644 --- a/apps/studio/pages/project/[ref]/auth/templates/index.tsx +++ b/apps/studio/pages/project/[ref]/auth/templates/index.tsx @@ -3,11 +3,12 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { EmailTemplates } from 'components/interfaces/Auth/EmailTemplates/EmailTemplates' import { AuthEmailsLayout } from 'components/layouts/AuthLayout/AuthEmailsLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' import { GenericSkeletonLoader } from 'ui-patterns' +import { PageContainer } from 'ui-patterns/PageContainer' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const TemplatesPage: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( @@ -20,15 +21,17 @@ const TemplatesPage: NextPageWithLayout = () => { } return ( - + {!isPermissionsLoaded ? ( - - - + + + + + ) : ( )} - + ) } diff --git a/apps/studio/pages/project/[ref]/auth/third-party.tsx b/apps/studio/pages/project/[ref]/auth/third-party.tsx index 6e989a5d6c58c..1ce5724e89e0d 100644 --- a/apps/studio/pages/project/[ref]/auth/third-party.tsx +++ b/apps/studio/pages/project/[ref]/auth/third-party.tsx @@ -5,12 +5,12 @@ import { ThirdPartyAuthForm } from 'components/interfaces/Auth/ThirdPartyAuthFor import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import { AuthProvidersLayout } from 'components/layouts/AuthLayout/AuthProvidersLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { ScaffoldContainer } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { UnknownInterface } from 'components/ui/UnknownInterface' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' const ThirdPartyPage: NextPageWithLayout = () => { const { ref } = useParams() @@ -34,9 +34,9 @@ const ThirdPartyPage: NextPageWithLayout = () => { {isPermissionsLoaded && !canReadAuthSettings ? ( ) : ( - + - + )} ) diff --git a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx index 442d9e9e25727..d74b75461a0e1 100644 --- a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx +++ b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx @@ -4,12 +4,19 @@ import { RedirectUrls } from 'components/interfaces/Auth/RedirectUrls/RedirectUr import SiteUrl from 'components/interfaces/Auth/SiteUrl/SiteUrl' import AuthLayout from 'components/layouts/AuthLayout/AuthLayout' import DefaultLayout from 'components/layouts/DefaultLayout' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import NoPermission from 'components/ui/NoPermission' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import type { NextPageWithLayout } from 'types' +import { PageContainer } from 'ui-patterns/PageContainer' +import { + PageHeader, + PageHeaderDescription, + PageHeaderMeta, + PageHeaderSummary, + PageHeaderTitle, +} from 'ui-patterns/PageHeader' +import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const URLConfiguration: NextPageWithLayout = () => { const { can: canReadAuthSettings, isSuccess: isPermissionsLoaded } = useAsyncCheckPermissions( @@ -22,31 +29,38 @@ const URLConfiguration: NextPageWithLayout = () => { } return ( - - {!isPermissionsLoaded ? ( - - - - ) : ( - <> - - - - )} - + <> + + + + URL Configuration + + Configure site URL and redirect URLs for authentication + + + + + + {!isPermissionsLoaded ? ( + + + + + + ) : ( + <> + + + + )} + + ) } URLConfiguration.getLayout = (page) => ( - - - {page} - - + {page} )