Fix visibility of edge fn charts for enterprise (#37401)

apps/studio/components/interfaces/Reports/ReportChart.tsx

@@ -7,16 +7,19 @@
  * This component acts as a bridge between the data-fetching logic and the
  * presentational chart component.
  */
-import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
+
+import Link from 'next/link'
+import { useRef, useState } from 'react'
+
+import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
 import LogChartHandler from 'components/ui/Charts/LogChartHandler'
+import Panel from 'components/ui/Panel'
+import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
+import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useChartData } from 'hooks/useChartData'
 import type { UpdateDateRange } from 'pages/project/[ref]/reports/database'
-import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import Link from 'next/link'
 import { Button, cn } from 'ui'
-import Panel from 'components/ui/Panel'
-import { useRef, useState } from 'react'
 
 const ReportChart = ({
   chart,
@@ -25,9 +28,7 @@ const ReportChart = ({
   interval,
   updateDateRange,
   functionIds,
-  orgPlanId,
   isLoading,
-  availableIn,
   className,
 }: {
   chart: any
@@ -36,15 +37,17 @@ const ReportChart = ({
   interval: string
   updateDateRange: UpdateDateRange
   functionIds?: string[]
-  orgPlanId?: string
   isLoading?: boolean
-  availableIn?: string[]
   className?: string
 }) => {
   const org = useSelectedOrganization()
+  const { plan: orgPlan } = useCurrentOrgPlan()
+  const orgPlanId = orgPlan?.id
+
   const [isHoveringUpgrade, setIsHoveringUpgrade] = useState(false)
   const isAvailable =
     chart.availableIn === undefined || (orgPlanId && chart.availableIn.includes(orgPlanId))
+
   const canFetch = orgPlanId !== undefined
   const {
     data,
@@ -114,7 +117,9 @@ const ReportChart = ({
           <h2 className="">{chart.label}</h2>
           <p className="text-sm text-foreground-light">
             This chart is available from{' '}
-            <span className="capitalize">{!!availableIn?.length ? availableIn[0] : 'Pro'}</span>{' '}
+            <span className="capitalize">
+              {!!chart.availableIn?.length ? chart.availableIn[0] : 'Pro'}
+            </span>{' '}
             plan and above
           </p>
           <Button
@@ -125,7 +130,9 @@ const ReportChart = ({
           >
             <Link href={`/org/${org?.slug}/billing?panel=subscriptionPlan&source=reports`}>
               Upgrade to{' '}
-              <span className="capitalize">{!!availableIn?.length ? availableIn[0] : 'Pro'}</span>
+              <span className="capitalize">
+                {!!chart.availableIn?.length ? chart.availableIn[0] : 'Pro'}
+              </span>
             </Link>
           </Button>
         </div>

apps/studio/data/reports/auth-charts.ts

@@ -1,4 +1,4 @@
-export const getAuthReportAttributes = (isFreePlan: boolean) => [
+export const getAuthReportAttributes = () => [
   {
     id: 'active-users',
     label: 'Active Users',

apps/studio/data/reports/database-charts.ts

@@ -1,8 +1,8 @@
 import { numberFormatter } from 'components/ui/Charts/Charts.utils'
+import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils'
 import { formatBytes } from 'lib/helpers'
 import { Organization } from 'types'
 import { Project } from '../projects/project-detail-query'
-import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils'
 
 export const getReportAttributes = (org: Organization, project: Project): ReportAttributes[] => {
   const computeSize = project?.infra_compute_size || 'medium'

apps/studio/data/reports/edgefn-charts.ts

@@ -12,7 +12,7 @@ export const getEdgeFunctionReportAttributes = (): ReportAttributes[] => [
     hideChartType: false,
     defaultChartStyle: 'bar',
     titleTooltip: 'The total number of edge function executions by status code.',
-    availableIn: ['free', 'pro', 'team'],
+    availableIn: ['free', 'pro', 'team', 'enterprise'],
     attributes: [
       {
         attribute: 'ExecutionStatusCodes',
@@ -32,7 +32,7 @@ export const getEdgeFunctionReportAttributes = (): ReportAttributes[] => [
     hideChartType: false,
     defaultChartStyle: 'line',
     titleTooltip: 'Average execution time for edge functions.',
-    availableIn: ['free', 'pro', 'team'],
+    availableIn: ['free', 'pro', 'team', 'enterprise'],
     format: 'ms',
     YAxisProps: {
       width: 50,
@@ -58,7 +58,7 @@ export const getEdgeFunctionReportAttributes = (): ReportAttributes[] => [
     hideChartType: false,
     defaultChartStyle: 'bar',
     titleTooltip: 'The total number of edge function invocations by region.',
-    availableIn: ['pro', 'team'],
+    availableIn: ['pro', 'team', 'enterprise'],
     attributes: [
       {
         attribute: 'InvocationsByRegion',

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

@@ -1,26 +1,26 @@
-import { useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, RefreshCw } from 'lucide-react'
-import { useParams } from 'common'
+import { useState } from 'react'
 
+import ReportChart from 'components/interfaces/Reports/ReportChart'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
+import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
-import ReportChart from 'components/interfaces/Reports/ReportChart'
-import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 
-import { getAuthReportAttributes } from 'data/reports/auth-charts'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
-import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import type { NextPageWithLayout } from 'types'
 import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
 import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
-import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import { getAuthReportAttributes } from 'data/reports/auth-charts'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import type { NextPageWithLayout } from 'types'
 
 const AuthReport: NextPageWithLayout = () => {
   return (
@@ -47,8 +47,6 @@ const AuthUsage = () => {
     updateDateRange,
     datePickerValue,
     datePickerHelpers,
-    isOrgPlanLoading,
-    orgPlan,
     showUpgradePrompt,
     setShowUpgradePrompt,
     handleDatePickerChange,
@@ -73,8 +71,7 @@ const AuthUsage = () => {
   const queryClient = useQueryClient()
   const [isRefreshing, setIsRefreshing] = useState(false)
 
-  const isFreePlan = !isOrgPlanLoading && orgPlan?.id === 'free'
-  const AUTH_REPORT_ATTRIBUTES = getAuthReportAttributes(isFreePlan)
+  const AUTH_REPORT_ATTRIBUTES = getAuthReportAttributes()
 
   const onRefreshReport = async () => {
     if (!selectedDateRange) return
@@ -142,7 +139,6 @@ const AuthUsage = () => {
               startDate={selectedDateRange?.period_start?.date}
               endDate={selectedDateRange?.period_end?.date}
               updateDateRange={updateDateRange}
-              orgPlanId={orgPlan?.id}
               isLoading={isRefreshing}
             />
           ))}

apps/studio/pages/project/[ref]/reports/database.tsx

@@ -1,46 +1,46 @@
-import { useEffect, useState } from 'react'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, ExternalLink, RefreshCw } from 'lucide-react'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { AlertDescription_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { useParams } from 'common'
 
+import ReportChart from 'components/interfaces/Reports/ReportChart'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
+import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 import DiskSizeConfigurationModal from 'components/interfaces/Settings/Database/DiskSizeConfigurationModal'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import Table from 'components/to-be-cleaned/Table'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import ChartHandler from 'components/ui/Charts/ChartHandler'
+import ComposedChartHandler from 'components/ui/Charts/ComposedChartHandler'
+import GrafanaPromoBanner from 'components/ui/GrafanaPromoBanner'
 import Panel from 'components/ui/Panel'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import ComposedChartHandler from 'components/ui/Charts/ComposedChartHandler'
-import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
-import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
-import GrafanaPromoBanner from 'components/ui/GrafanaPromoBanner'
-import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import ReportChart from 'components/interfaces/Reports/ReportChart'
 
-import { analyticsKeys } from 'data/analytics/keys'
-import { getReportAttributes, getReportAttributesV2 } from 'data/reports/database-charts'
-import { useDatabaseSizeQuery } from 'data/database/database-size-query'
-import { useDatabaseReport } from 'data/reports/database-report-query'
-import { useProjectDiskResizeMutation } from 'data/config/project-disk-resize-mutation'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useFlag } from 'hooks/ui/useFlag'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
+import { analyticsKeys } from 'data/analytics/keys'
+import { useProjectDiskResizeMutation } from 'data/config/project-disk-resize-mutation'
+import { useDatabaseSizeQuery } from 'data/database/database-size-query'
+import { getReportAttributes, getReportAttributesV2 } from 'data/reports/database-charts'
+import { useDatabaseReport } from 'data/reports/database-report-query'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { useFlag } from 'hooks/ui/useFlag'
 import { formatBytes } from 'lib/helpers'
 
-import type { NextPageWithLayout } from 'types'
 import type { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils'
+import type { NextPageWithLayout } from 'types'
 
 const DatabaseReport: NextPageWithLayout = () => {
   return (
@@ -288,8 +288,6 @@ const DatabaseUsage = () => {
                     startDate={selectedDateRange?.period_start?.date}
                     endDate={selectedDateRange?.period_end?.date}
                     updateDateRange={updateDateRange}
-                    orgPlanId={orgPlan?.id}
-                    availableIn={chart.availableIn}
                   />
                 )
               ))}

apps/studio/pages/project/[ref]/reports/edge-functions.tsx

@@ -1,29 +1,26 @@
-import { useState, useEffect } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, ChevronDown, RefreshCw } from 'lucide-react'
-import { useParams } from 'common'
+import { useEffect, useState } from 'react'
 
+import { Label } from '@ui/components/shadcn/ui/label'
+import ReportChart from 'components/interfaces/Reports/ReportChart'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
+import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
-import ReportChart from 'components/interfaces/Reports/ReportChart'
-import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import {
-  LogsDatePicker,
-  DatePickerValue,
-} from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import { Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
-import { Label } from '@ui/components/shadcn/ui/label'
 
-import { getEdgeFunctionReportAttributes } from 'data/reports/edgefn-charts'
 import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
+import { getEdgeFunctionReportAttributes } from 'data/reports/edgefn-charts'
 
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
 
 import type { NextPageWithLayout } from 'types'
 
@@ -226,7 +223,6 @@ const EdgeFunctionsUsage = () => {
                 endDate={selectedDateRange?.period_end?.date}
                 updateDateRange={updateDateRange}
                 functionIds={functionIds}
-                orgPlanId={orgPlan?.id}
               />
             ))}
         </div>