feat: initial overview preset report

studio/pages/project/[ref]/reports/dashboard.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+
+import { NextPageWithLayout } from 'types'
+import { checkPermissions, useFlag, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { useProjectContentStore } from 'stores/projectContentStore'
+import Loading from 'components/ui/Loading'
+import { ProjectLayoutWithAuth } from 'components/layouts'
+import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import { createReport } from 'components/to-be-cleaned/Reports/Reports.utils'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+
+export const DashboardReportPage: NextPageWithLayout = () => {
+  const [loading, setLoading] = useState(true)
+  const reportsOverview = useFlag('reportsOverview')
+  const Layout = reportsOverview ? ReportsLayout : ProjectLayoutWithAuth
+
+  const router = useRouter()
+  const { ref } = router.query
+
+  const { ui } = useStore()
+  const project = ui.selectedProject
+
+  // const canCreateReport = checkPermissions(PermissionAction.CREATE, 'user_content', {
+  //   resource: { type: 'report' },
+  // })
+  const contentStore = useProjectContentStore(ref)
+
+  useEffect(() => {
+    if (project && project.status === PROJECT_STATUS.INACTIVE) {
+      post(`${API_URL}/projects/${ref}/restore`, {})
+    }
+  }, [project])
+
+  async function loadReports() {
+    await contentStore.load()
+    const reports = contentStore.reports()
+
+    if (reports.length >= 1) {
+      router.push(`/project/${ref}/reports/${reports[0].id}`)
+    } else {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadReports()
+  }, [ref])
+
+  return (
+    // TODO: use .getLayout when reportsOverview flag is removed
+    <Layout>
+      <div className="mx-auto my-16 w-full max-w-7xl flex-grow space-y-16">
+        {loading ? (
+          <Loading />
+        ) : (
+          <ProductEmptyState
+            title="Reports"
+            ctaButtonLabel="Create report"
+            onClickCta={() => {
+              try {
+                createReport({ router })
+              } catch (error: any) {
+                ui.setNotification({
+                  category: 'error',
+                  message: `Failed to create report: ${error.message}`,
+                })
+              }
+            }}
+          >
+            <p className="text-scale-1100 text-sm">Create custom reports for your projects.</p>
+            <p className="text-scale-1100 text-sm">
+              Get a high level overview of your network traffic, user actions, and infrastructure
+              health.
+            </p>
+          </ProductEmptyState>
+        )}
+      </div>
+    </Layout>
+  )
+}
+
+// TODO: uncomment when reportsOverview flag is removed
+// hooks do not work with next.js .getLayout
+// DashboardReportPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
+
+export default observer(DashboardReportPage)

studio/pages/project/[ref]/reports/dashboard/[id].tsx

@@ -17,7 +17,7 @@ import {
   IconSettings,
 } from '@supabase/ui'
 
-import { checkPermissions } from 'hooks'
+import { checkPermissions, useFlag } from 'hooks'
 import { uuidv4 } from 'lib/helpers'
 import { METRIC_CATEGORIES, METRICS, TIME_PERIODS_REPORTS } from 'lib/constants'
 import { useProjectContentStore } from 'stores/projectContentStore'
@@ -28,6 +28,7 @@ import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import { NextPageWithLayout } from 'types'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 
 const ReactGridLayout = WidthProvider(RGL)
 
@@ -35,21 +36,22 @@ const LAYOUT_COLUMN_COUNT = 24
 const DEFAULT_CHART_COLUMN_COUNT = 12
 const DEFAULT_CHART_ROW_COUNT = 4
 
-/*
- * PageLayout is used to setup layout - as usual it will requires inject global store
- */
 const PageLayout: NextPageWithLayout = () => {
+  const reportsOverview = useFlag('reportsOverview')
+  const Layout = reportsOverview ? ReportsLayout : ProjectLayoutWithAuth
   return (
-    <>
+    // TODO: use .getLayout when reportsOverview flag is removed
+    <Layout>
       <div className="mx-auto my-8 w-full max-w-7xl">
         <Reports />
       </div>
       <EditReportModal />
-    </>
+    </Layout>
   )
 }
 
-PageLayout.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
+// TODO: uncomment when reportsOverview flag is removed
+// PageLayout.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
 export default observer(PageLayout)
 

studio/pages/project/[ref]/reports/index.tsx

@@ -1,81 +1,35 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
-import { post } from 'lib/common/fetch'
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { useProjectContentStore } from 'stores/projectContentStore'
-import Loading from 'components/ui/Loading'
+import { useFlag, useStore } from 'hooks'
 import { ProjectLayoutWithAuth } from 'components/layouts'
-import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
-import { createReport } from 'components/to-be-cleaned/Reports/Reports.utils'
-
-const PageLayout: NextPageWithLayout = () => {
-  const [loading, setLoading] = useState(true)
+import PresetReport from 'components/interfaces/Reports/PresetReport'
+import { Presets } from 'components/interfaces/Reports/Reports.types'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { DashboardReportPage } from './dashboard'
 
+export const ReportsOverviewPage: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
+  const reportsOverview = useFlag('reportsOverview')
 
-  const { ui } = useStore()
-  const project = ui.selectedProject
-
-  // const canCreateReport = checkPermissions(PermissionAction.CR
-  const contentStore = useProjectContentStore(ref)
-
-  useEffect(() => {
-    if (project && project.status === PROJECT_STATUS.INACTIVE) {
-      post(`${API_URL}/projects/${ref}/restore`, {})
-    }
-  }, [project])
-
-  async function loadReports() {
-    await contentStore.load()
-    const reports = contentStore.reports()
-
-    if (reports.length >= 1) {
-      router.push(`/project/${ref}/reports/${reports[0].id}`)
-    } else {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    loadReports()
-  }, [ref])
+  const Layout = reportsOverview ? ReportsLayout : ProjectLayoutWithAuth
 
   return (
-    <div className="mx-auto my-16 w-full max-w-7xl flex-grow space-y-16">
-      {loading ? (
-        <Loading />
+    <Layout>
+      {reportsOverview ? (
+        <PresetReport preset={Presets.OVERVIEW} projectRef={ref as string} />
       ) : (
-        <ProductEmptyState
-          title="Reports"
-          ctaButtonLabel="Create report"
-          onClickCta={() => {
-            try {
-              createReport({ router })
-            } catch (error: any) {
-              ui.setNotification({
-                category: 'error',
-                message: `Failed to create report: ${error.message}`,
-              })
-            }
-          }}
-        >
-          <p className="text-scale-1100 text-sm">Create custom reports for your projects.</p>
-          <p className="text-scale-1100 text-sm">
-            Get a high level overview of your network traffic, user actions, and infrastructure
-            health.
-          </p>
-        </ProductEmptyState>
+        <DashboardReportPage />
       )}
-    </div>
+    </Layout>
   )
 }
 
-PageLayout.getLayout = (page) => <ProjectLayoutWithAuth>{page}</ProjectLayoutWithAuth>
+// TODO: uncomment when reportsOverview flag is removed
+// hooks do not work with next.js .getLayout
+// ReportsOverviewPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(PageLayout)
+export default observer(ReportsOverviewPage)