chore(studio): remove project usage settings callout (#45393)

## What kind of change does this PR introduce?

Dashboard cleanup and docs update.

## What is the current behaviour?

Project Settings > General still shows a legacy "Project usage" section
explaining that usage statistics moved to organisation settings. One
troubleshooting page also links to the old project billing usage page.

## What is the new behaviour?

The legacy Project Settings usage callout is removed, while the existing
old usage route redirect remains in place for stale links. The MAU
troubleshooting page now points users to the organisation usage page and
tells them to select a specific project from the dropdown.

| Before | After |
| --- | --- |
| <img width="1450" height="1314" alt="CleanShot 2026-04-30 at 16 11
16@2x"
src="https://github.com/user-attachments/assets/3ad8c41f-2eab-406c-bfd8-f5737ae9a5a3"
/> | <img width="1474" height="1004" alt="CleanShot 2026-04-30 at 16 11
04@2x-7CACB175-B6A9-4811-968F-030745F685AE"
src="https://github.com/user-attachments/assets/f541ee60-0c24-49e4-9446-3bd58c516797"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Updated Monthly Active Users (MAU) documentation to reflect accessing
usage data from the organization-level page instead of project settings

* **Refactor**
* Removed project-level usage viewing option from project settings
interface

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Danny White authored and GitHub committed 2026-04-30 16:48:51 +10:00
1 parent 1293282d20
commit 5dee242aa3
3 files changed
+7 -59

No files matched your search

@@ -7,7 +7,7 @@ keywords = [ "MAU", "Monthly active users" ]
database_id = "1759134d-a98d-4bfa-9501-71e06180700e"
---
You can see the usage in your [projects usage page](https://app.supabase.com/project/_/settings/billing/usage).
You can view Monthly Active Users usage on the [organisation's usage page](/dashboard/org/_/usage). To view usage for a specific project, select it from the project dropdown.
For MAU, we rely on the [Auth Server](https://github.com/supabase/auth) logs. MAU count is relative to your billing cycle and resets whenever your billing cycle resets. You can check your Auth logs in your [projects logs & analytics section](/dashboard/project/_/logs/auth-logs).
@@ -4,17 +4,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { Project } from './Project'
const {
mockUseIsFeatureEnabled,
mockUseProjectPauseStatusQuery,
mockUseSelectedOrganizationQuery,
mockUseSelectedProjectQuery,
} = vi.hoisted(() => ({
mockUseIsFeatureEnabled: vi.fn(),
mockUseProjectPauseStatusQuery: vi.fn(),
mockUseSelectedOrganizationQuery: vi.fn(),
mockUseSelectedProjectQuery: vi.fn(),
}))
const { mockUseIsFeatureEnabled, mockUseProjectPauseStatusQuery, mockUseSelectedProjectQuery } =
vi.hoisted(() => ({
mockUseIsFeatureEnabled: vi.fn(),
mockUseProjectPauseStatusQuery: vi.fn(),
mockUseSelectedProjectQuery: vi.fn(),
}))
vi.mock('next/link', () => ({
default: ({ href, children }: { href: string; children: ReactNode }) => (
@@ -68,10 +63,6 @@ vi.mock('@/hooks/misc/useIsFeatureEnabled', () => ({
useIsFeatureEnabled: mockUseIsFeatureEnabled,
}))
vi.mock('@/hooks/misc/useSelectedOrganization', () => ({
useSelectedOrganizationQuery: mockUseSelectedOrganizationQuery,
}))
vi.mock('@/hooks/misc/useSelectedProject', () => ({
useSelectedProjectQuery: mockUseSelectedProjectQuery,
}))
@@ -84,10 +75,6 @@ describe('Project settings availability', () => {
projectSettingsRestartProject: true,
})
mockUseSelectedOrganizationQuery.mockReturnValue({
data: { slug: 'supabase' },
})
mockUseProjectPauseStatusQuery.mockReturnValue({
data: undefined,
isError: false,
@@ -1,4 +1,3 @@
import { BarChart2 } from 'lucide-react'
import Link from 'next/link'
import { Button, Card, CardContent } from 'ui'
import {
@@ -15,14 +14,11 @@ import RestartServerButton from './Infrastructure/RestartServerButton'
import { ResumeProjectButton } from '@/components/interfaces/Project/ResumeProjectButton'
import { useProjectPauseStatusQuery } from '@/data/projects/project-pause-status-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from '@/lib/constants'
export const Project = () => {
const { data: project } = useSelectedProjectQuery()
const { data: organization } = useSelectedOrganizationQuery()
const isBranch = Boolean(project?.parent_project_ref)
const isPaused = project?.status === PROJECT_STATUS.INACTIVE
const { projectSettingsRestartProject } = useIsFeatureEnabled([
'project_settings:restart_project',
@@ -109,41 +105,6 @@ export const Project = () => {
</Card>
</PageSectionContent>
</PageSection>
{!isBranch && (
<PageSection>
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Project usage</PageSectionTitle>
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<Card>
<CardContent>
<div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
<div className="flex space-x-4">
<BarChart2 strokeWidth={2} />
<div>
<p className="text-sm">Project usage statistics have moved</p>
<p className="text-foreground-light text-sm">
Project usage is now viewable within organization settings.
</p>
</div>
</div>
{!!organization && !!project && (
<Button asChild type="default">
<Link href={`/org/${organization.slug}/usage?projectRef=${project.ref}`}>
View project usage
</Link>
</Button>
)}
</div>
</CardContent>
</Card>
</PageSectionContent>
</PageSection>
)}
</>
)
}