[Fix]: Handle undefined report.availableIn and improve plan display in ReportChartUpsell (supabase#39451) (supabase#39648)

* Fixes: supabase#39451

* commit

* d

* yes

* format fix

* Fix import statement in table-row-query test

Author: Adityakk9031

apps/studio/components/interfaces/Reports/v2/ReportChartUpsell.tsx

@@ -44,7 +44,9 @@ export const ReportChartUpsell = ({ report, orgSlug }: ReportsChartUpsellProps)
         <p className="text-sm text-foreground-light">
           This chart is available from{' '}
           <span className="capitalize">
-            {!!report.availableIn?.length ? report.availableIn[0] : 'Pro'}
+            {Array.isArray(report.availableIn) && report.availableIn.length > 0
+              ? report.availableIn[0]
+              : 'Pro'}
           </span>{' '}
           plan and above
         </p>
@@ -58,7 +60,9 @@ export const ReportChartUpsell = ({ report, orgSlug }: ReportsChartUpsellProps)
           <Link href={`/org/${orgSlug || '_'}/billing?panel=subscriptionPlan&source=reports`}>
             Upgrade to{' '}
             <span className="capitalize">
-              {!!report.availableIn?.length ? report.availableIn[0] : 'Pro'}
+              {Array.isArray(report.availableIn) && report.availableIn.length > 0
+                ? report.availableIn[0]
+                : 'Pro'}
             </span>
           </Link>
         </Button>

apps/studio/components/interfaces/Reports/v2/ReportChartV2.tsx

@@ -68,8 +68,7 @@ export const ReportChartV2 = ({
   const { plan: orgPlan } = useCurrentOrgPlan()
   const orgPlanId = orgPlan?.id
 
-  const isAvailable =
-    report.availableIn === undefined || (orgPlanId && report.availableIn.includes(orgPlanId))
+  const isAvailable = !report?.availableIn || (orgPlanId && report.availableIn?.includes(orgPlanId))
 
   const canFetch = orgPlanId !== undefined && isAvailable