From 5dd91c902cac66e71f3bd751e53a018398c104ed Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 1 Nov 2022 19:44:48 +0800
Subject: [PATCH] chore: fix edge logs naming, move postgrest/pgbouncer pages

---
 .../DatabaseLayout/DatabaseMenu.utils.ts      |  2 -
 .../layouts/LogsLayout/LogsMenu.utils.ts      | 37 ++++++++++++++++---
 .../postgrest-logs.tsx => logs/edge-logs.tsx} | 10 ++---
 .../{database => logs}/pgbouncer-logs.tsx     |  2 +-
 .../project/[ref]/logs/postgrest-logs.tsx     | 10 ++---
 5 files changed, 42 insertions(+), 19 deletions(-)
 rename studio/pages/project/[ref]/{database/postgrest-logs.tsx => logs/edge-logs.tsx} (63%)
 rename studio/pages/project/[ref]/{database => logs}/pgbouncer-logs.tsx (96%)

diff --git a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts
index 2a3889277c5..b22828ad94b 100644
--- a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts
+++ b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts
@@ -1,7 +1,5 @@
 import { Project } from 'types'
-import { IS_PLATFORM } from 'lib/constants'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
-import { useFlag } from 'hooks'
 
 export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
   const ref = project?.ref ?? 'default'
diff --git a/studio/components/layouts/LogsLayout/LogsMenu.utils.ts b/studio/components/layouts/LogsLayout/LogsMenu.utils.ts
index 300c227774f..48f8df97651 100644
--- a/studio/components/layouts/LogsLayout/LogsMenu.utils.ts
+++ b/studio/components/layouts/LogsLayout/LogsMenu.utils.ts
@@ -1,9 +1,14 @@
 import { Project } from 'types'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
 import { IS_PLATFORM } from 'lib/constants'
+import { useFlag } from 'hooks'
 
 export const generateLogsMenu = (project?: Project): ProductMenuGroup[] => {
   const ref = project?.ref ?? 'default'
+
+  const logsPostgrest = useFlag('logsPostgrest')
+  const logsPgbouncer = useFlag('logsPgbouncer')
+
   return [
     ...(IS_PLATFORM
       ? [
@@ -15,18 +20,38 @@ export const generateLogsMenu = (project?: Project): ProductMenuGroup[] => {
                 url: `/project/${ref}/logs/explorer`,
                 items: [],
               },
+              {
+                name: 'Edge',
+                key: 'edge-logs',
+                url: `/project/${ref}/logs/edge-logs`,
+                items: [],
+              },
               {
                 name: 'Postgres',
                 key: 'postgres-logs',
                 url: `/project/${ref}/logs/postgres-logs`,
                 items: [],
               },
-              {
-                name: 'PostgREST',
-                key: 'postgrest-logs',
-                url: `/project/${ref}/logs/postgrest-logs`,
-                items: [],
-              },
+              ...(logsPostgrest
+                ? [
+                    {
+                      name: 'PostgREST',
+                      key: 'postgrest-logs',
+                      url: `/project/${ref}/logs/postgrest-logs`,
+                      items: [],
+                    },
+                  ]
+                : []),
+              ...(logsPgbouncer
+                ? [
+                    {
+                      name: 'PgBouncer',
+                      key: 'pgbouncer-logs',
+                      url: `/project/${ref}/logs/pgbouncer-logs`,
+                      items: [],
+                    },
+                  ]
+                : []),
               {
                 name: 'Auth',
                 key: 'auth-logs',
diff --git a/studio/pages/project/[ref]/database/postgrest-logs.tsx b/studio/pages/project/[ref]/logs/edge-logs.tsx
similarity index 63%
rename from studio/pages/project/[ref]/database/postgrest-logs.tsx
rename to studio/pages/project/[ref]/logs/edge-logs.tsx
index 78efcdc97f6..9c8b817e535 100644
--- a/studio/pages/project/[ref]/database/postgrest-logs.tsx
+++ b/studio/pages/project/[ref]/logs/edge-logs.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { DatabaseLayout } from 'components/layouts'
+import { LogsLayout } from 'components/layouts'
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import { NextPageWithLayout } from 'types'
-import { LogsTableName } from 'components/interfaces/Settings/Logs'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -14,12 +13,13 @@ export const LogPage: NextPageWithLayout = () => {
     <LogsPreviewer
       projectRef={ref as string}
       condensedLayout={true}
-      tableName={LogsTableName.POSTGREST}
-      queryType="postgrest"
+      // @ts-ignore
+      tableName={'edge_logs'}
+      queryType={'api'}
     />
   )
 }
 
-LogPage.getLayout = (page) => <DatabaseLayout title="Database">{page}</DatabaseLayout>
+LogPage.getLayout = (page) => <LogsLayout title="Database">{page}</LogsLayout>
 
 export default observer(LogPage)
diff --git a/studio/pages/project/[ref]/database/pgbouncer-logs.tsx b/studio/pages/project/[ref]/logs/pgbouncer-logs.tsx
similarity index 96%
rename from studio/pages/project/[ref]/database/pgbouncer-logs.tsx
rename to studio/pages/project/[ref]/logs/pgbouncer-logs.tsx
index b8bd4023d61..0a4ddf0b520 100644
--- a/studio/pages/project/[ref]/database/pgbouncer-logs.tsx
+++ b/studio/pages/project/[ref]/logs/pgbouncer-logs.tsx
@@ -15,7 +15,7 @@ export const LogPage: NextPageWithLayout = () => {
       projectRef={ref as string}
       condensedLayout={true}
       tableName={LogsTableName.PGBOUNCER}
-      queryType='pgbouncer'
+      queryType="pgbouncer"
     />
   )
 }
diff --git a/studio/pages/project/[ref]/logs/postgrest-logs.tsx b/studio/pages/project/[ref]/logs/postgrest-logs.tsx
index 9c8b817e535..78efcdc97f6 100644
--- a/studio/pages/project/[ref]/logs/postgrest-logs.tsx
+++ b/studio/pages/project/[ref]/logs/postgrest-logs.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { LogsLayout } from 'components/layouts'
+import { DatabaseLayout } from 'components/layouts'
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import { NextPageWithLayout } from 'types'
+import { LogsTableName } from 'components/interfaces/Settings/Logs'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -13,13 +14,12 @@ export const LogPage: NextPageWithLayout = () => {
     <LogsPreviewer
       projectRef={ref as string}
       condensedLayout={true}
-      // @ts-ignore
-      tableName={'edge_logs'}
-      queryType={'api'}
+      tableName={LogsTableName.POSTGREST}
+      queryType="postgrest"
     />
   )
 }
 
-LogPage.getLayout = (page) => <LogsLayout title="Database">{page}</LogsLayout>
+LogPage.getLayout = (page) => <DatabaseLayout title="Database">{page}</DatabaseLayout>
 
 export default observer(LogPage)