From dfa0052357b9fed74a3acd2aca43b702f37cf548 Mon Sep 17 00:00:00 2001 From: Andrew Valleteau Date: Mon, 28 Jul 2025 11:37:57 +0200 Subject: [PATCH 1/3] fix(docs): move prerequisite on top (#37042) --- .../docs/content/guides/local-development.mdx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/docs/content/guides/local-development.mdx b/apps/docs/content/guides/local-development.mdx index e8ba56d465491..8545ceb17685a 100644 --- a/apps/docs/content/guides/local-development.mdx +++ b/apps/docs/content/guides/local-development.mdx @@ -5,6 +5,17 @@ subtitle: Learn how to develop locally and use the Supabase CLI Develop locally while running the Supabase stack on your machine. + + +As a prerequisite, you must install a container runtime compatible with Docker APIs. + +- [Docker Desktop](https://docs.docker.com/desktop/) (macOS, Windows, Linux) +- [Rancher Desktop](https://rancherdesktop.io/) (macOS, Windows, Linux) +- [Podman](https://podman.io/) (macOS, Windows, Linux) +- [OrbStack](https://orbstack.dev/) (macOS) + + + ## Quickstart 1. Install the Supabase CLI: @@ -101,17 +112,6 @@ Develop locally while running the Supabase stack on your machine. - - - As a prerequisite, you must install a container runtime compatible with Docker APIs. - - - [Docker Desktop](https://docs.docker.com/desktop/) (macOS, Windows, Linux) - - [Rancher Desktop](https://rancherdesktop.io/) (macOS, Windows, Linux) - - [Podman](https://podman.io/) (macOS, Windows, Linux) - - [OrbStack](https://orbstack.dev/) (macOS) - - - 4. View your local Supabase instance at [http://localhost:54323](http://localhost:54323). ## Local development From 1bc28c7f85399dd5d9157dd31394aab64652ef30 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Mon, 28 Jul 2025 11:51:00 +0200 Subject: [PATCH 2/3] feat: Add a toast to refresh the page if there's a new version of Studio available (#36323) * Initial work. * Add missing import. * Minor fixes. * Minor fixes. * Add a feature flag for the refresh toast. * Add a commit for testing. Revert before merging. * Remove header caching for testing. * Tiny lint * Fix * One more --------- Co-authored-by: Joshen Lim --- .../components/layouts/DefaultLayout.tsx | 5 +- .../data/utils/deployment-commit-query.ts | 23 +++++ apps/studio/hooks/use-check-latest-deploy.tsx | 83 +++++++++++++++++++ apps/studio/middleware.ts | 1 + .../studio/pages/api/get-deployment-commit.ts | 40 +++++++++ turbo.json | 2 +- 6 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 apps/studio/data/utils/deployment-commit-query.ts create mode 100644 apps/studio/hooks/use-check-latest-deploy.tsx create mode 100644 apps/studio/pages/api/get-deployment-commit.ts diff --git a/apps/studio/components/layouts/DefaultLayout.tsx b/apps/studio/components/layouts/DefaultLayout.tsx index 4280bacbcce71..c9b8a70542865 100644 --- a/apps/studio/components/layouts/DefaultLayout.tsx +++ b/apps/studio/components/layouts/DefaultLayout.tsx @@ -1,10 +1,11 @@ +import { useRouter } from 'next/router' import { PropsWithChildren } from 'react' import { useParams } from 'common' import { AppBannerWrapper } from 'components/interfaces/App' import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext' import { Sidebar } from 'components/interfaces/Sidebar' -import { useRouter } from 'next/router' +import { useCheckLatestDeploy } from 'hooks/use-check-latest-deploy' import { SidebarProvider } from 'ui' import { LayoutHeader } from './ProjectLayout/LayoutHeader' import MobileNavigationBar from './ProjectLayout/NavigationBar/MobileNavigationBar' @@ -29,6 +30,8 @@ const DefaultLayout = ({ children, headerTitle }: PropsWithChildren diff --git a/apps/studio/data/utils/deployment-commit-query.ts b/apps/studio/data/utils/deployment-commit-query.ts new file mode 100644 index 0000000000000..67403cf23f509 --- /dev/null +++ b/apps/studio/data/utils/deployment-commit-query.ts @@ -0,0 +1,23 @@ +import { useQuery, UseQueryOptions } from '@tanstack/react-query' +import { fetchHandler } from 'data/fetchers' +import { BASE_PATH } from 'lib/constants' +import { ResponseError } from 'types' + +export async function getDeploymentCommit(signal?: AbortSignal) { + const response = await fetchHandler(`${BASE_PATH}/api/get-deployment-commit`) + return (await response.json()) as { commitSha: string; commitTime: string } +} + +export type DeploymentCommitData = Awaited> + +export const useDeploymentCommitQuery = ({ + enabled = true, + ...options +}: UseQueryOptions = {}) => + useQuery( + ['deployment-commit'], + ({ signal }) => getDeploymentCommit(signal), + { + ...options, + } + ) diff --git a/apps/studio/hooks/use-check-latest-deploy.tsx b/apps/studio/hooks/use-check-latest-deploy.tsx new file mode 100644 index 0000000000000..cad2e77b005f8 --- /dev/null +++ b/apps/studio/hooks/use-check-latest-deploy.tsx @@ -0,0 +1,83 @@ +import dayjs from 'dayjs' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import { toast } from 'sonner' + +import { IS_PLATFORM } from 'common' +import { useDeploymentCommitQuery } from 'data/utils/deployment-commit-query' +import { Button, StatusIcon } from 'ui' +import { useFlag } from './ui/useFlag' + +const DeployCheckToast = ({ id }: { id: string | number }) => { + const router = useRouter() + + return ( +
+
+ +
+

A new version of this page is available

+

Refresh to see the latest changes.

+
+
+ +
+ + +
+
+ ) +} + +// This hook checks if the user is using old Studio pages and shows a toast to refresh the page. It's only triggered if +// there's a new version of Studio is available, and the user has been on the old dashboard (based on commit) for more than 24 hours. +// [Joshen] K-Dog has a suggestion here to bring down the time period here by checking commits +export function useCheckLatestDeploy() { + const showRefreshToast = useFlag('showRefreshToast') + + const [currentCommitTime, setCurrentCommitTime] = useState('') + const [isToastShown, setIsToastShown] = useState(false) + + const { data: commit } = useDeploymentCommitQuery({ + enabled: IS_PLATFORM && showRefreshToast, + staleTime: 10000, // 10 seconds + }) + + useEffect(() => { + // if the fetched commit is undefined is undefined + if (!commit || commit.commitTime === 'unknown') { + return + } + + // set the current commit on first load + if (!currentCommitTime) { + setCurrentCommitTime(commit.commitTime) + return + } + + // if the current commit is the same as the fetched commit, do nothing + if (currentCommitTime === commit.commitTime) { + return + } + + // prevent showing the toast again if user has already seen and dismissed it + if (isToastShown) { + return + } + + // check if the time difference between commits is more than 24 hours + const hourDiff = dayjs(commit.commitTime).diff(dayjs(currentCommitTime), 'hour') + if (hourDiff < 24) { + return + } + + // show the toast + toast.custom((id) => , { + duration: Infinity, + position: 'bottom-right', + }) + setIsToastShown(true) + }, [commit, isToastShown, currentCommitTime]) +} diff --git a/apps/studio/middleware.ts b/apps/studio/middleware.ts index 912c8ccb14aa5..17896820bdcbd 100644 --- a/apps/studio/middleware.ts +++ b/apps/studio/middleware.ts @@ -16,6 +16,7 @@ const HOSTED_SUPPORTED_API_URLS = [ '/ai/feedback/classify', '/get-ip-address', '/get-utc-time', + '/get-deployment-commit', '/check-cname', '/edge-functions/test', '/edge-functions/body', diff --git a/apps/studio/pages/api/get-deployment-commit.ts b/apps/studio/pages/api/get-deployment-commit.ts new file mode 100644 index 0000000000000..5b7cde2c50478 --- /dev/null +++ b/apps/studio/pages/api/get-deployment-commit.ts @@ -0,0 +1,40 @@ +import { NextApiRequest, NextApiResponse } from 'next' + +async function getCommitTime(commitSha: string) { + try { + const response = await fetch(`https://github.com/supabase/supabase/commit/${commitSha}.json`, { + headers: { + Accept: 'application/json', + }, + }) + + if (!response.ok) { + throw new Error('Failed to fetch commit details') + } + + const data = await response.json() + return new Date(data.payload.commit.committedDate).toISOString() + } catch (error) { + console.error('Error fetching commit time:', error) + return 'unknown' + } +} + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse<{ commitSha: string; commitTime: string }> +) { + // Set cache control headers for 10 minutes so that we don't get banned by Github API + res.setHeader('Cache-Control', 's-maxage=600') + + // Get the build commit SHA from Vercel environment variable + const commitSha = process.env.VERCEL_GIT_COMMIT_SHA || 'development' + + // Only fetch commit time if we have a valid SHA + const commitTime = commitSha !== 'development' ? await getCommitTime(commitSha) : 'unknown' + + res.status(200).json({ + commitSha, + commitTime, + }) +} diff --git a/turbo.json b/turbo.json index 0e9c09686f08d..c1a8a6dc53fc0 100644 --- a/turbo.json +++ b/turbo.json @@ -102,7 +102,7 @@ "AI_PRO_MODEL", "AI_NORMAL_MODEL" ], - "passThroughEnv": ["CURRENT_CLI_VERSION"], + "passThroughEnv": ["CURRENT_CLI_VERSION", "VERCEL_GIT_COMMIT_SHA"], "outputs": [".next/**", "!.next/cache/**"] }, "www#build": { From d6fdb20a2a5ac3452a0c970dedd437a0f0674b46 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Mon, 28 Jul 2025 18:01:54 +0800 Subject: [PATCH 3/3] Fix visibility of edge fn charts for enterprise (#37401) --- .../interfaces/Reports/ReportChart.tsx | 31 ++++++++++++------- apps/studio/data/reports/auth-charts.ts | 2 +- apps/studio/data/reports/database-charts.ts | 2 +- apps/studio/data/reports/edgefn-charts.ts | 6 ++-- .../pages/project/[ref]/reports/auth.tsx | 26 +++++++--------- .../pages/project/[ref]/reports/database.tsx | 30 +++++++++--------- .../project/[ref]/reports/edge-functions.tsx | 20 +++++------- 7 files changed, 57 insertions(+), 60 deletions(-) diff --git a/apps/studio/components/interfaces/Reports/ReportChart.tsx b/apps/studio/components/interfaces/Reports/ReportChart.tsx index 6c2eb90253dc2..c24edbc1ef6b9 100644 --- a/apps/studio/components/interfaces/Reports/ReportChart.tsx +++ b/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 = ({

{chart.label}

This chart is available from{' '} - {!!availableIn?.length ? availableIn[0] : 'Pro'}{' '} + + {!!chart.availableIn?.length ? chart.availableIn[0] : 'Pro'} + {' '} plan and above

diff --git a/apps/studio/data/reports/auth-charts.ts b/apps/studio/data/reports/auth-charts.ts index 14676a0b23c8f..33f20b979aeb6 100644 --- a/apps/studio/data/reports/auth-charts.ts +++ b/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', diff --git a/apps/studio/data/reports/database-charts.ts b/apps/studio/data/reports/database-charts.ts index 1c7fcb47d33a7..d57f7a0c4ee45 100644 --- a/apps/studio/data/reports/database-charts.ts +++ b/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' diff --git a/apps/studio/data/reports/edgefn-charts.ts b/apps/studio/data/reports/edgefn-charts.ts index aa2dd98de8214..dbcd204e53df8 100644 --- a/apps/studio/data/reports/edgefn-charts.ts +++ b/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', diff --git a/apps/studio/pages/project/[ref]/reports/auth.tsx b/apps/studio/pages/project/[ref]/reports/auth.tsx index bf3b9af1d79cb..3c65f9ca8f2f0 100644 --- a/apps/studio/pages/project/[ref]/reports/auth.tsx +++ b/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} /> ))} diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx index 3876405462fb8..7193534022eef 100644 --- a/apps/studio/pages/project/[ref]/reports/database.tsx +++ b/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 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 Panel from 'components/ui/Panel' +import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' +import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants' import { analyticsKeys } from 'data/analytics/keys' -import { getReportAttributes, getReportAttributesV2 } from 'data/reports/database-charts' +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 { 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 { 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} /> ) ))} diff --git a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx index 0de2d1c7df709..fa2ff6f1c3f78 100644 --- a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx +++ b/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} /> ))}