mirror of
https://github.com/supabase/supabase.git
synced 2026-09-09 03:19:36 +08:00
## Summary This is the final step in merging compute and disk with infrastructure to become a single place to manage everything. This moves everything we've done in compute and disk over to infrastructure along with redirects. - Makes Infrastructure canonical for the completed compute and disk configuration and usage charts. - Moves Service Versions to General Project Settings. - Removes the legacy Infrastructure activity implementation and constants. - Updates settings navigation, shortcuts, banners, billing links, warning CTAs, usage pages, support suggestions, and other internal entry points. - Adds the permanent `/settings/compute-and-disk` redirect, removes its Next and TanStack routes, regenerates the route tree, and updates the migration checklist. - Preserves query parameters and legacy metric anchors, including `#cpu`. ## Stack 1. #48368 2. #48369 3. #48370 (this PR) ## How to test 1. Check out `chore/infra-compute-3-cutover`. 2. Test the Next implementation with `pnpm dev:studio`, then stop it and test TanStack with `STUDIO_FRAMEWORK=tanstack pnpm dev:studio`. 3. In each implementation, open `/project/<ref>/settings/infrastructure`. Confirm the page contains the usage charts and the Scaling, Compute, Disk, and Advanced configuration sections. 4. Open `/project/<ref>/settings/general`. Confirm Service Versions appears there with its existing name, content, and styling, and no longer appears on Infrastructure. 5. Open `/project/<ref>/settings/compute-and-disk?upgrade=micro#disk`. Confirm it permanently redirects to `/project/<ref>/settings/infrastructure?upgrade=micro#disk`, preserving the query string and hash. 6. Confirm the settings menu exposes Infrastructure and no longer exposes Compute and Disk. Repeat with platform and self-hosted settings. 7. Follow representative entry points from billing usage, resource warning CTAs, upgrade banners, shortcuts, and support suggestions. Confirm they land on Infrastructure and preserve any query parameters or metric anchors such as `#cpu`. 8. Smoke-test compute and disk updates from Infrastructure, including validation, the sticky review footer, and warning/critical chart states. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Consolidated compute and disk management under the **Infrastructure** project settings page. * Added a **Service versions** section to **General** project settings. * **Bug Fixes** * Updated links and upgrade CTAs across the product to route to the correct **Infrastructure** or **Service versions** destinations. * Added permanent redirects from legacy **Compute and Disk** to **Infrastructure**, preserving query/hash. * Improved resource warning upgrade routing for compute scenarios. * **Tests** * Expanded automated coverage for **Infrastructure**, **Service versions**, redirects, and warning-link routing. * **Chores** * Updated ESLint rule baseline configuration for the studio app. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
199 lines
8.0 KiB
TypeScript
199 lines
8.0 KiB
TypeScript
import { renderHook } from '@testing-library/react'
|
|
import { useFlag } from 'common'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import { useGenerateSettingsMenu } from './SettingsMenu.utils'
|
|
import { useIsPlatformWebhooksEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
|
|
const getShortcutId = (item: unknown) => (item as { shortcutId?: string } | undefined)?.shortcutId
|
|
|
|
vi.mock('@/lib/constants', async () => {
|
|
const actual = await vi.importActual<Record<string, unknown>>('@/lib/constants')
|
|
return {
|
|
...actual,
|
|
IS_PLATFORM: true,
|
|
}
|
|
})
|
|
|
|
vi.mock('common', () => ({
|
|
useFlag: vi.fn().mockReturnValue(false),
|
|
useParams: vi.fn().mockReturnValue({ ref: 'project-ref' }),
|
|
}))
|
|
|
|
vi.mock('@/hooks/misc/useSelectedOrganization', () => ({
|
|
useSelectedOrganizationQuery: vi.fn().mockReturnValue({ data: { slug: 'my-org' } }),
|
|
}))
|
|
|
|
vi.mock('@/hooks/misc/useSelectedProject', () => ({
|
|
useSelectedProjectQuery: vi.fn().mockReturnValue({ data: { status: 'ACTIVE_HEALTHY' } }),
|
|
}))
|
|
|
|
vi.mock('@/hooks/misc/useIsFeatureEnabled', () => ({
|
|
useIsFeatureEnabled: vi.fn(),
|
|
}))
|
|
|
|
vi.mock('@/components/interfaces/App/FeaturePreview/FeaturePreviewContext', () => ({
|
|
useIsPlatformWebhooksEnabled: vi.fn().mockReturnValue(true),
|
|
}))
|
|
|
|
describe('useGenerateSettingsMenu', () => {
|
|
beforeEach(() => {
|
|
vi.mocked(useFlag).mockReturnValue(false)
|
|
vi.mocked(useIsPlatformWebhooksEnabled).mockReturnValue(true)
|
|
vi.mocked(useIsFeatureEnabled).mockReturnValue({
|
|
projectSettingsLegacyJwtKeys: false,
|
|
billingAll: true,
|
|
logsAll: true,
|
|
projectSettingsLogDrains: true,
|
|
} as any)
|
|
})
|
|
|
|
it('includes webhooks when platformWebhooks feature is enabled', () => {
|
|
vi.mocked(useIsPlatformWebhooksEnabled).mockReturnValue(true)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
const hasWebhooks = configurationGroup?.items.some(
|
|
(item) => item.name === 'Webhooks' && item.url === '/project/project-ref/settings/webhooks'
|
|
)
|
|
|
|
expect(hasWebhooks).toBe(true)
|
|
})
|
|
|
|
it('hides webhooks when platformWebhooks feature is disabled', () => {
|
|
vi.mocked(useIsPlatformWebhooksEnabled).mockReturnValue(false)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
const hasWebhooks = configurationGroup?.items.some((item) => item.name === 'Webhooks')
|
|
|
|
expect(hasWebhooks).toBe(false)
|
|
})
|
|
|
|
it('does not include members link in project settings navigation', () => {
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
const hasMembers = configurationGroup?.items.some((item) => item.name === 'Members')
|
|
|
|
expect(hasMembers).toBe(false)
|
|
})
|
|
|
|
it('uses Infrastructure as the canonical compute and disk destination', () => {
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
|
|
expect(configurationGroup?.items).toEqual(
|
|
expect.arrayContaining([
|
|
expect.objectContaining({
|
|
key: 'infrastructure',
|
|
name: 'Infrastructure',
|
|
url: '/project/project-ref/settings/infrastructure',
|
|
}),
|
|
])
|
|
)
|
|
expect(
|
|
configurationGroup?.items.some(
|
|
(item) => item.key === 'compute-and-disk' || item.name === 'Compute and Disk'
|
|
)
|
|
).toBe(false)
|
|
})
|
|
|
|
it('includes dashboard in configuration when flag is enabled', () => {
|
|
vi.mocked(useFlag).mockReturnValue(true)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
const hasDashboardPreferences = configurationGroup?.items.some(
|
|
(item) => item.name === 'Dashboard' && item.url === '/project/project-ref/settings/dashboard'
|
|
)
|
|
|
|
expect(hasDashboardPreferences).toBe(true)
|
|
expect(result.current.find((group) => group.title === 'Preferences')).toBeUndefined()
|
|
})
|
|
|
|
it('hides dashboard in configuration when flag is disabled', () => {
|
|
vi.mocked(useFlag).mockReturnValue(false)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
|
|
expect(configurationGroup?.items.some((item) => item.name === 'Dashboard')).toBe(false)
|
|
})
|
|
|
|
it('includes log drains when logs:all and project_settings:log_drains are enabled', () => {
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
|
|
expect(configurationGroup?.items.some((item) => item.key === 'log-drains')).toBe(true)
|
|
})
|
|
|
|
it('hides log drains when logs:all is disabled', () => {
|
|
vi.mocked(useIsFeatureEnabled).mockReturnValue({
|
|
projectSettingsLegacyJwtKeys: false,
|
|
billingAll: true,
|
|
logsAll: false,
|
|
projectSettingsLogDrains: true,
|
|
} as any)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
|
|
expect(configurationGroup?.items.some((item) => item.key === 'log-drains')).toBe(false)
|
|
})
|
|
|
|
it('hides log drains when project_settings:log_drains is disabled', () => {
|
|
vi.mocked(useIsFeatureEnabled).mockReturnValue({
|
|
projectSettingsLegacyJwtKeys: false,
|
|
billingAll: true,
|
|
logsAll: true,
|
|
projectSettingsLogDrains: false,
|
|
} as any)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
|
|
expect(configurationGroup?.items.some((item) => item.key === 'log-drains')).toBe(false)
|
|
})
|
|
|
|
it('adds shortcuts to eligible configuration settings items', () => {
|
|
vi.mocked(useFlag).mockReturnValue(true)
|
|
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const configurationGroup = result.current.find((group) => group.title === 'Configuration')
|
|
const shortcutByKey = new Map(
|
|
configurationGroup?.items.map((item) => [item.key, getShortcutId(item)]) ?? []
|
|
)
|
|
|
|
expect(shortcutByKey.get('general')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_GENERAL)
|
|
expect(shortcutByKey.get('infrastructure')).toBe(
|
|
SHORTCUT_IDS.NAV_PROJECT_SETTINGS_INFRASTRUCTURE
|
|
)
|
|
expect(shortcutByKey.get('integrations')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_INTEGRATIONS)
|
|
expect(shortcutByKey.get('webhooks')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_WEBHOOKS)
|
|
expect(shortcutByKey.get('api-keys')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_API_KEYS)
|
|
expect(shortcutByKey.get('jwt')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_JWT_KEYS)
|
|
expect(shortcutByKey.get('log-drains')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_LOG_DRAINS)
|
|
expect(shortcutByKey.get('addons')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_ADDONS)
|
|
expect(shortcutByKey.get('dashboard')).toBe(SHORTCUT_IDS.NAV_PROJECT_SETTINGS_DASHBOARD)
|
|
})
|
|
|
|
it('does not add settings shortcuts to external integration or billing items', () => {
|
|
const { result } = renderHook(() => useGenerateSettingsMenu())
|
|
const integrationGroup = result.current.find((group) => group.title === 'Integrations')
|
|
const billingGroup = result.current.find((group) => group.title === 'Billing')
|
|
|
|
expect(
|
|
getShortcutId(integrationGroup?.items.find((item) => item.key === 'api'))
|
|
).toBeUndefined()
|
|
expect(
|
|
getShortcutId(integrationGroup?.items.find((item) => item.key === 'vault'))
|
|
).toBeUndefined()
|
|
expect(
|
|
getShortcutId(billingGroup?.items.find((item) => item.key === 'subscription'))
|
|
).toBeUndefined()
|
|
expect(getShortcutId(billingGroup?.items.find((item) => item.key === 'usage'))).toBeUndefined()
|
|
})
|
|
})
|