From 16a8686eef521d565364f1e219598e8f0d71d132 Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Mon, 2 May 2022 19:53:15 +1000 Subject: [PATCH] chore: implement getLayout in ProjectLayout & DatabaseLayout --- .../layouts/DatabaseLayout/DatabaseLayout.tsx | 4 +- .../layouts/ProjectLayout/ProjectLayout.tsx | 13 ++--- studio/hooks/misc/withAuth.tsx | 4 +- studio/pages/project/[ref]/building.tsx | 18 +++--- .../pages/project/[ref]/database/api-logs.tsx | 28 +++++---- .../pages/project/[ref]/database/backups.tsx | 30 +++++----- .../project/[ref]/database/extensions.tsx | 17 +++--- .../project/[ref]/database/functions.tsx | 29 +++++----- .../[ref]/database/hooks/[id]/logs.tsx | 21 +++---- .../project/[ref]/database/hooks/index.tsx | 33 ++++++----- studio/pages/project/[ref]/database/index.tsx | 16 ++--- .../pages/project/[ref]/database/pooling.tsx | 19 +++--- .../project/[ref]/database/postgres-logs.tsx | 28 +++++---- .../project/[ref]/database/replication.tsx | 34 +++++------ studio/pages/project/[ref]/database/roles.tsx | 31 +++++----- .../pages/project/[ref]/database/tables.tsx | 18 +++--- .../pages/project/[ref]/database/triggers.tsx | 31 +++++----- studio/pages/project/[ref]/index.tsx | 58 +++++++++---------- 18 files changed, 216 insertions(+), 216 deletions(-) diff --git a/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx b/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx index 5df6936a062..1725558e1ba 100644 --- a/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx +++ b/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx @@ -2,7 +2,7 @@ import { FC, ReactNode, useEffect, useState } from 'react' import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' -import { useStore } from 'hooks' +import { useStore, withAuth } from 'hooks' import BaseLayout from '../' import Error from 'components/ui/Error' import ProductMenu from 'components/ui/ProductMenu' @@ -63,4 +63,4 @@ const DatabaseLayout: FC = ({ title, children }) => { ) } -export default observer(DatabaseLayout) +export default withAuth(observer(DatabaseLayout)) diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx index 02427b283f1..479441bbcdf 100644 --- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx +++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx @@ -1,8 +1,8 @@ import Head from 'next/head' -import { FC, ReactNode } from 'react' +import { FC, ReactNode, PropsWithChildren } from 'react' import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' -import { useStore } from 'hooks' +import { useStore, withAuth } from 'hooks' import { PROJECT_STATUS } from 'lib/constants' import Connecting from 'components/ui/Loading' @@ -17,12 +17,11 @@ interface Props { isLoading?: boolean product?: string productMenu?: ReactNode - children: ReactNode hideHeader?: boolean hideIconBar?: boolean } -const ProjectLayout: FC = ({ +const ProjectLayout = ({ title, isLoading = false, product = '', @@ -30,7 +29,7 @@ const ProjectLayout: FC = ({ children, hideHeader = false, hideIconBar = false, -}) => { +}: PropsWithChildren) => { return ( <> @@ -49,7 +48,7 @@ const ProjectLayout: FC = ({
{!hideHeader && } {children} @@ -59,7 +58,7 @@ const ProjectLayout: FC = ({ ) } -export default ProjectLayout +export default withAuth(ProjectLayout) interface MenuBarWrapperProps { isLoading: boolean diff --git a/studio/hooks/misc/withAuth.tsx b/studio/hooks/misc/withAuth.tsx index 2c6e1b84f74..cb8a2640afd 100644 --- a/studio/hooks/misc/withAuth.tsx +++ b/studio/hooks/misc/withAuth.tsx @@ -6,8 +6,8 @@ import Connecting from 'components/ui/Loading' const PLATFORM_ONLY_PAGES = ['storage', 'reports', 'settings'] -export function withAuth( - WrappedComponent: ComponentType, +export function withAuth( + WrappedComponent: ComponentType, options?: { redirectTo: string redirectIfFound?: boolean diff --git a/studio/pages/project/[ref]/building.tsx b/studio/pages/project/[ref]/building.tsx index 87f7a729b3b..9b27c765334 100644 --- a/studio/pages/project/[ref]/building.tsx +++ b/studio/pages/project/[ref]/building.tsx @@ -1,16 +1,17 @@ import { FC, useEffect } from 'react' import { useRouter } from 'next/router' -import { withAuth } from 'hooks' import ProjectLayout from 'components/layouts' +import { NextPageWithLayout } from 'types' -const ProjectBuildingPage: FC = () => { - return ( - - - - ) +const ProjectBuildingPage: NextPageWithLayout = () => { + return } -export default withAuth(ProjectBuildingPage) + +ProjectBuildingPage.getLayout = (page) => ( + {page} +) + +export default ProjectBuildingPage const RedirectToDashboard: FC = () => { const router = useRouter() @@ -27,5 +28,6 @@ const RedirectToDashboard: FC = () => { // just use normal router.push is enough router.push(`/project/${ref}`) }, []) + return null } diff --git a/studio/pages/project/[ref]/database/api-logs.tsx b/studio/pages/project/[ref]/database/api-logs.tsx index 9178054c7a7..dcf797e9f2e 100644 --- a/studio/pages/project/[ref]/database/api-logs.tsx +++ b/studio/pages/project/[ref]/database/api-logs.tsx @@ -1,27 +1,25 @@ import React from 'react' -import { NextPage } from 'next' import { useRouter } from 'next/router' import { observer } from 'mobx-react-lite' -import { withAuth } from 'hooks' -import { DatabaseLayout } from 'components/layouts/' -import { LogsTableName } from 'components/interfaces/Settings/Logs' +import { DatabaseLayout } from 'components/layouts' import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer' +import { NextPageWithLayout } from 'types' -export const LogPage: NextPage = () => { +export const LogPage: NextPageWithLayout = () => { const router = useRouter() const { ref } = router.query return ( - - - + ) } -export default withAuth(observer(LogPage)) +LogPage.getLayout = (page) => {page} + +export default observer(LogPage) diff --git a/studio/pages/project/[ref]/database/backups.tsx b/studio/pages/project/[ref]/database/backups.tsx index af3fa9a8508..3b46cc4d52a 100644 --- a/studio/pages/project/[ref]/database/backups.tsx +++ b/studio/pages/project/[ref]/database/backups.tsx @@ -1,27 +1,25 @@ -import { NextPage } from 'next' import { observer } from 'mobx-react-lite' -import { Typography } from '@supabase/ui' -import { withAuth } from 'hooks' import { DatabaseLayout } from 'components/layouts' import { BackupsList } from 'components/interfaces/Database' +import { NextPageWithLayout } from 'types' -const DatabaseBackups: NextPage = () => { +const DatabaseBackups: NextPageWithLayout = () => { return ( - -
-
-

Backups

-
-

- Projects are backed up daily and can be restored at any time. -

- -
+
+
+

Backups

+
+

+ Projects are backed up daily and can be restored at any time. +

+
- +
) } -export default withAuth(observer(DatabaseBackups)) +DatabaseBackups.getLayout = (page) => {page} + +export default observer(DatabaseBackups) diff --git a/studio/pages/project/[ref]/database/extensions.tsx b/studio/pages/project/[ref]/database/extensions.tsx index 7911b93148c..5d0c2e1da0e 100644 --- a/studio/pages/project/[ref]/database/extensions.tsx +++ b/studio/pages/project/[ref]/database/extensions.tsx @@ -1,18 +1,17 @@ -import { NextPage } from 'next' import { observer } from 'mobx-react-lite' -import { withAuth } from 'hooks' import { DatabaseLayout } from 'components/layouts' import { Extensions } from 'components/interfaces/Database' +import { NextPageWithLayout } from 'types' -const DatabaseExtensions: NextPage = () => { +const DatabaseExtensions: NextPageWithLayout = () => { return ( - -
- -
- +
+ +
) } -export default withAuth(observer(DatabaseExtensions)) +DatabaseExtensions.getLayout = (page) => {page} + +export default observer(DatabaseExtensions) diff --git a/studio/pages/project/[ref]/database/functions.tsx b/studio/pages/project/[ref]/database/functions.tsx index 311d168ac02..7aa87a696d1 100644 --- a/studio/pages/project/[ref]/database/functions.tsx +++ b/studio/pages/project/[ref]/database/functions.tsx @@ -15,14 +15,15 @@ import { } from '@supabase/ui' import { observer } from 'mobx-react-lite' -import { useStore, withAuth } from 'hooks' +import { useStore } from 'hooks' import { DatabaseLayout } from 'components/layouts' import { CreateFunction, DeleteFunction } from 'components/interfaces/Database' import Table from 'components/to-be-cleaned/Table' import AlphaPreview from 'components/to-be-cleaned/AlphaPreview' import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' +import { NextPageWithLayout } from 'types' -const FunctionsPage: FC = () => { +const FunctionsPage: NextPageWithLayout = () => { const { meta, ui } = useStore() const [filterString, setFilterString] = useState('') const [selectedFunction, setSelectedFunction] = useState() @@ -55,7 +56,7 @@ const FunctionsPage: FC = () => { } return ( - + <> = () => { visible={showDeleteFunctionForm} setVisible={setShowDeleteFunctionForm} /> - + ) } -export default withAuth(observer(FunctionsPage)) +FunctionsPage.getLayout = (page) => {page} + +export default observer(FunctionsPage) const PageLayout: FC = observer( ({ @@ -96,7 +99,7 @@ const PageLayout: FC = observer( if (meta.functions.isLoading) { return ( -
+
Loading functions...
@@ -122,18 +125,18 @@ const PageLayout: FC = observer( onClickCta={() => createFunction()} > -

+

PostgreSQL functions, also known as stored procedures, is a set of SQL and procedural commands such as declarations, assignments, loops, flow-of-control, etc.

-

+

It's stored on the database server and can be invoked using the SQL interface.

) : ( -
-
+
+
= observer(
{filteredFunctions.length <= 0 && ( -
+
No results match your filter query
{filteredHooks.length <= 0 && ( -
+
No results match your filter query */} diff --git a/studio/pages/project/[ref]/database/index.tsx b/studio/pages/project/[ref]/database/index.tsx index 067c304d6eb..f9b30878a65 100644 --- a/studio/pages/project/[ref]/database/index.tsx +++ b/studio/pages/project/[ref]/database/index.tsx @@ -1,15 +1,11 @@ -import { NextPage } from 'next' import { observer } from 'mobx-react-lite' - -import { withAuth } from 'hooks' import { DatabaseLayout } from 'components/layouts' +import { NextPageWithLayout } from 'types' -const Database: NextPage = () => { - return ( - - <>{/*

Use this as a page template for database

*/} - - ) +const Database: NextPageWithLayout = () => { + return <>{/*

Use this as a page template for database

*/} } -export default withAuth(observer(Database)) +Database.getLayout = (page) => {page} + +export default observer(Database) diff --git a/studio/pages/project/[ref]/database/pooling.tsx b/studio/pages/project/[ref]/database/pooling.tsx index 8e19e96ac46..647add10af8 100644 --- a/studio/pages/project/[ref]/database/pooling.tsx +++ b/studio/pages/project/[ref]/database/pooling.tsx @@ -1,20 +1,19 @@ -import { NextPage } from 'next' import { observer } from 'mobx-react-lite' -import { withAuth } from 'hooks' import { DatabaseLayout } from 'components/layouts' import { BouncerSettings } from 'components/interfaces/Database' +import { NextPageWithLayout } from 'types' -const DatabasePooling: NextPage = () => { +const DatabasePooling: NextPageWithLayout = () => { return ( - -
-
- -
+
+
+
- +
) } -export default withAuth(observer(DatabasePooling)) +DatabasePooling.getLayout = (page) => {page} + +export default observer(DatabasePooling) diff --git a/studio/pages/project/[ref]/database/postgres-logs.tsx b/studio/pages/project/[ref]/database/postgres-logs.tsx index 291cd5751d1..604a36e2189 100644 --- a/studio/pages/project/[ref]/database/postgres-logs.tsx +++ b/studio/pages/project/[ref]/database/postgres-logs.tsx @@ -1,27 +1,25 @@ import React from 'react' -import { NextPage } from 'next' import { useRouter } from 'next/router' import { observer } from 'mobx-react-lite' -import { withAuth } from 'hooks' -import { DatabaseLayout } from 'components/layouts/' -import { LogsTableName } from 'components/interfaces/Settings/Logs' +import { DatabaseLayout } from 'components/layouts' import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer' +import { NextPageWithLayout } from 'types' -export const LogPage: NextPage = () => { +export const LogPage: NextPageWithLayout = () => { const router = useRouter() const { ref } = router.query return ( - - - + ) } -export default withAuth(observer(LogPage)) +LogPage.getLayout = (page) => {page} + +export default observer(LogPage) diff --git a/studio/pages/project/[ref]/database/replication.tsx b/studio/pages/project/[ref]/database/replication.tsx index 35d8e3dda51..661f42a4731 100644 --- a/studio/pages/project/[ref]/database/replication.tsx +++ b/studio/pages/project/[ref]/database/replication.tsx @@ -1,29 +1,29 @@ -import { NextPage } from 'next' import { useState } from 'react' import { isUndefined } from 'lodash' import { observer } from 'mobx-react-lite' -import { withAuth } from 'hooks' import { DatabaseLayout } from 'components/layouts' import { PublicationsList, PublicationsTables } from 'components/interfaces/Database' +import { NextPageWithLayout } from 'types' -const DatabaseReplication: NextPage = () => { +const DatabaseReplication: NextPageWithLayout = () => { const [selectedPublication, setSelectedPublication] = useState() + return ( - -
- {isUndefined(selectedPublication) ? ( - - ) : ( - setSelectedPublication(undefined)} - onPublicationUpdated={setSelectedPublication} - /> - )} -
- +
+ {isUndefined(selectedPublication) ? ( + + ) : ( + setSelectedPublication(undefined)} + onPublicationUpdated={setSelectedPublication} + /> + )} +
) } -export default withAuth(observer(DatabaseReplication)) +DatabaseReplication.getLayout = (page) => {page} + +export default observer(DatabaseReplication) diff --git a/studio/pages/project/[ref]/database/roles.tsx b/studio/pages/project/[ref]/database/roles.tsx index d7d5572998d..1cd86534d1c 100644 --- a/studio/pages/project/[ref]/database/roles.tsx +++ b/studio/pages/project/[ref]/database/roles.tsx @@ -1,29 +1,28 @@ import { useState } from 'react' -import { NextPage } from 'next' import { observer } from 'mobx-react-lite' import { isUndefined } from 'lodash' -import { withAuth } from 'hooks' import { DatabaseLayout } from 'components/layouts' import { RolesList, RolesSettings } from 'components/interfaces/Database' +import { NextPageWithLayout } from 'types' -const DatabaseRoles: NextPage = () => { +const DatabaseRoles: NextPageWithLayout = () => { const [selectedRole, setSelectedRole] = useState() return ( - -
- {isUndefined(selectedRole) ? ( - - ) : ( - setSelectedRole(undefined)} - /> - )} -
- +
+ {isUndefined(selectedRole) ? ( + + ) : ( + setSelectedRole(undefined)} + /> + )} +
) } -export default withAuth(observer(DatabaseRoles)) +DatabaseRoles.getLayout = (page) => {page} + +export default observer(DatabaseRoles) diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx index 62db6119850..641bd84ac97 100644 --- a/studio/pages/project/[ref]/database/tables.tsx +++ b/studio/pages/project/[ref]/database/tables.tsx @@ -1,18 +1,18 @@ -import { NextPage } from 'next' import { useState } from 'react' import { observer } from 'mobx-react-lite' import { isUndefined } from 'lodash' import { PostgresColumn, PostgresTable } from '@supabase/postgres-meta' import { Modal } from '@supabase/ui' -import { withAuth, useStore } from 'hooks' +import { useStore } from 'hooks' import { DatabaseLayout } from 'components/layouts' import ConfirmationModal from 'components/ui/ConfirmationModal' import { TableList, ColumnList } from 'components/interfaces/Database' import { SidePanelEditor } from 'components/interfaces/TableGridEditor' +import { NextPageWithLayout } from 'types' -const DatabaseTables: NextPage = () => { +const DatabaseTables: NextPageWithLayout = () => { const { meta, ui } = useStore() const [isDeleting, setIsDeleting] = useState(false) @@ -111,7 +111,7 @@ const DatabaseTables: NextPage = () => { } return ( - + <>
{isUndefined(selectedTable) ? ( { header={`Confirm deletion of table "${selectedTableToDelete?.name}"`} children={ -

+

Are you sure you want to delete the selected table? This action cannot be undone.

@@ -152,7 +152,7 @@ const DatabaseTables: NextPage = () => { header={`Confirm deletion of column "${selectedColumnToDelete?.name}"`} children={ -

+

Are you sure you want to delete the selected column? This action cannot be undone.

@@ -171,8 +171,10 @@ const DatabaseTables: NextPage = () => { selectedColumnToEdit={selectedColumnToEdit} selectedTableToEdit={selectedTableToEdit} /> - + ) } -export default withAuth(observer(DatabaseTables)) +DatabaseTables.getLayout = (page) => {page} + +export default observer(DatabaseTables) diff --git a/studio/pages/project/[ref]/database/triggers.tsx b/studio/pages/project/[ref]/database/triggers.tsx index 5edd4fc66eb..10b42ec7e59 100644 --- a/studio/pages/project/[ref]/database/triggers.tsx +++ b/studio/pages/project/[ref]/database/triggers.tsx @@ -14,14 +14,15 @@ import { } from '@supabase/ui' import { observer } from 'mobx-react-lite' -import { useStore, withAuth } from 'hooks' +import { useStore } from 'hooks' import { DatabaseLayout } from 'components/layouts' import Table from 'components/to-be-cleaned/Table' import AlphaPreview from 'components/to-be-cleaned/AlphaPreview' import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' import { CreateTrigger, DeleteTrigger } from 'components/interfaces/Database' +import { NextPageWithLayout } from 'types' -const TriggersPage: FC = () => { +const TriggersPage: NextPageWithLayout = () => { const { meta, ui } = useStore() const [filterString, setFilterString] = useState('') @@ -55,7 +56,7 @@ const TriggersPage: FC = () => { } return ( - + <> = () => { visible={showDeleteTriggerForm} setVisible={setShowDeleteTriggerForm} /> - + ) } -export default withAuth(observer(TriggersPage)) +TriggersPage.getLayout = (page) => {page} + +export default observer(TriggersPage) const TriggersList: FC = observer( ({ @@ -96,7 +99,7 @@ const TriggersList: FC = observer( if (meta.triggers.isLoading) { return ( -
+
Loading triggers...
@@ -122,19 +125,19 @@ const TriggersList: FC = observer( onClickCta={() => createTrigger()} > -

+

A PostgreSQL trigger is a function invoked automatically whenever an event associated with a table occurs.

-

+

An event could be any of the following: INSERT, UPDATE, DELETE. A trigger is a special user-defined function associated with a table.

) : ( -
-
+
+
= observer(
{filteredTriggers.length <= 0 && ( -
+
No results match your filter query