(
+
+ Include dashboard activity log
+
+ }
+ description={
+
+
+ Share sanitized logs of recent dashboard actions to help reproduce the issue.
+
+
+
+
+ Preview log
+
+
+
+ {sanitizedLogJson}
+
+
+
+
We will reach out to you at {respondToEmail}.
- {selectedProject !== 'no-project' && (
+ {selectedProject !== NO_PROJECT_MARKER && (
Your ticket has been logged for the project{' '}
{projectName}, reference ID:{' '}
diff --git a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
index bdb5b8df1ee..a5b49bc2e01 100644
--- a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
+++ b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
@@ -35,6 +35,7 @@ export function SupportAccessToggle({ form }: SupportAccessToggleProps) {
render={({ field }) => {
return (
diff --git a/apps/studio/components/interfaces/Support/SupportForm.schema.ts b/apps/studio/components/interfaces/Support/SupportForm.schema.ts
index 79c9af8cfeb..29b160027f8 100644
--- a/apps/studio/components/interfaces/Support/SupportForm.schema.ts
+++ b/apps/studio/components/interfaces/Support/SupportForm.schema.ts
@@ -20,6 +20,7 @@ const createFormSchema = (showClientLibraries: boolean) => {
message: z.string().min(1, "Please add a message about the issue that you're facing"),
affectedServices: z.string(),
allowSupportAccess: z.boolean(),
+ attachDashboardLogs: z.boolean(),
dashboardSentryIssueId: z.string().optional(),
})
diff --git a/apps/studio/components/interfaces/Support/SupportForm.utils.tsx b/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
index 991fbcb3c03..853600d4d76 100644
--- a/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
+++ b/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
@@ -3,16 +3,16 @@ import {
createLoader,
createParser,
createSerializer,
- parseAsString,
type inferParserType,
+ parseAsString,
type UseQueryStatesKeysMap,
} from 'nuqs'
// End of third-party imports
import {
- DocsSearchResultType as PageType,
type DocsSearchResult as Page,
type DocsSearchResultSection as PageSection,
+ DocsSearchResultType as PageType,
} from 'common'
import { getProjectDetail } from 'data/projects/project-detail-query'
import dayjs from 'dayjs'
@@ -28,11 +28,13 @@ export const formatMessage = ({
attachments = [],
error,
commit,
+ dashboardLogUrl,
}: {
message: string
attachments?: string[]
error: string | null | undefined
commit: { commitSha: string; commitTime: string } | undefined
+ dashboardLogUrl?: string
}) => {
const errorString = error != null ? `\n\nError: ${error}` : ''
const attachmentsString =
@@ -41,7 +43,8 @@ export const formatMessage = ({
commit != undefined
? `\n\n---\nSupabase Studio version: SHA ${commit.commitSha} deployed at ${commit.commitTime === 'unknown' ? 'unknown time' : dayjs(commit.commitTime).format('YYYY-MM-DD HH:mm:ss Z')}`
: ''
- return `${message}${errorString}${attachmentsString}${commitString}`
+ const logString = dashboardLogUrl ? `\nDashboard logs: ${dashboardLogUrl}` : ''
+ return `${message}${errorString}${attachmentsString}${commitString}${logString}`
}
export function getPageIcon(page: Page) {
@@ -119,8 +122,8 @@ const parseAsCategoryOption = createParser({
})
const supportFormUrlState = {
- projectRef: parseAsString.withDefault(NO_PROJECT_MARKER),
- orgSlug: parseAsString.withDefault(NO_ORG_MARKER),
+ projectRef: parseAsString.withDefault(''),
+ orgSlug: parseAsString.withDefault(''),
category: parseAsCategoryOption,
subject: parseAsString.withDefault(''),
message: parseAsString.withDefault(''),
@@ -134,7 +137,7 @@ export const loadSupportFormInitialParams = createLoader(supportFormUrlState)
const serializeSupportFormInitialParams = createSerializer(supportFormUrlState)
-export function createSupportFormUrl(initialParams: SupportFormUrlKeys) {
+export function createSupportFormUrl(initialParams: Partial) {
const serializedParams = serializeSupportFormInitialParams(initialParams)
return `/support/new${serializedParams ?? ''}`
}
diff --git a/apps/studio/components/interfaces/Support/SupportFormPage.tsx b/apps/studio/components/interfaces/Support/SupportFormPage.tsx
index e4d48d0b9a4..064a4c6fe22 100644
--- a/apps/studio/components/interfaces/Support/SupportFormPage.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormPage.tsx
@@ -23,8 +23,8 @@ import type { SupportFormValues } from './SupportForm.schema'
import {
createInitialSupportFormState,
type SupportFormActions,
- supportFormReducer,
type SupportFormState,
+ supportFormReducer,
} from './SupportForm.state'
import { SupportFormV2 } from './SupportFormV2'
import { useSupportForm } from './useSupportForm'
diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
index 04b62436b14..398857db16b 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
@@ -8,10 +8,11 @@ import { CLIENT_LIBRARIES } from 'common/constants'
import { getProjectAuthConfig } from 'data/auth/auth-config-query'
import { useSendSupportTicketMutation } from 'data/feedback/support-ticket-send'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useGenerateAttachmentURLsMutation } from 'data/support/generate-attachment-urls-mutation'
import { useDeploymentCommitQuery } from 'data/utils/deployment-commit-query'
import { detectBrowser } from 'lib/helpers'
import { useProfile } from 'lib/profile'
-import { DialogSectionSeparator, Form_Shadcn_, Separator } from 'ui'
+import { DialogSectionSeparator, Form_Shadcn_ } from 'ui'
import {
AffectedServicesSelector,
CATEGORIES_WITHOUT_AFFECTED_SERVICES,
@@ -19,6 +20,7 @@ import {
import { AttachmentUploadDisplay, useAttachmentUpload } from './AttachmentUpload'
import { CategoryAndSeverityInfo } from './CategoryAndSeverityInfo'
import { ClientLibraryInfo } from './ClientLibraryInfo'
+import { DashboardLogsToggle } from './DashboardLogsToggle'
import { MessageField } from './MessageField'
import { OrganizationSelector } from './OrganizationSelector'
import { ProjectAndPlanInfo } from './ProjectAndPlanInfo'
@@ -33,6 +35,7 @@ import {
NO_ORG_MARKER,
NO_PROJECT_MARKER,
} from './SupportForm.utils'
+import { DASHBOARD_LOG_CATEGORIES, uploadDashboardLog } from './dashboard-logs'
const useIsSimplifiedForm = (slug: string) => {
const simplifiedSupportForm = useFlag('simplifiedSupportForm')
@@ -64,6 +67,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
const subscriptionPlanId = getOrgSubscriptionPlan(organizations, selectedOrgSlug)
const attachmentUpload = useAttachmentUpload()
+ const { mutateAsync: uploadDashboardLogFn } = useGenerateAttachmentURLsMutation()
const { data: commit } = useDeploymentCommitQuery({
staleTime: 1000 * 60 * 10, // 10 minutes
@@ -86,9 +90,19 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
},
})
- const onSubmit: SubmitHandler = async (values) => {
+ const onSubmit: SubmitHandler = async (formValues) => {
dispatch({ type: 'SUBMIT' })
- const attachments = await attachmentUpload.createAttachments()
+
+ const { attachDashboardLogs: formAttachDashboardLogs, ...values } = formValues
+ const attachDashboardLogs =
+ formAttachDashboardLogs && DASHBOARD_LOG_CATEGORIES.includes(values.category)
+
+ const [attachments, dashboardLogUrl] = await Promise.all([
+ attachmentUpload.createAttachments(),
+ attachDashboardLogs
+ ? uploadDashboardLog({ userId: profile?.gotrue_id, uploadDashboardLogFn })
+ : undefined,
+ ])
const selectedLibrary = values.library
? CLIENT_LIBRARIES.find((library) => library.language === values.library)
@@ -111,6 +125,7 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
attachments,
error: initialError,
commit,
+ dashboardLogUrl: dashboardLogUrl?.[0],
}),
verified: true,
tags: ['dashboard-support-form'],
@@ -195,13 +210,21 @@ export const SupportFormV2 = ({ form, initialError, state, dispatch }: SupportFo
-
- {SUPPORT_ACCESS_CATEGORIES.includes(category) && (
- <>
-
-
-
- )}
+ {DASHBOARD_LOG_CATEGORIES.includes(category) && (
+ <>
+
+
+
+ )}
+
+ {SUPPORT_ACCESS_CATEGORIES.includes(category) && (
+ <>
+
+
+
+ )}
+
+
} & Omit, 'href'>
+>) => {
+ const href = createSupportFormUrl(queryParams ?? {})
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Support/__tests__/SupportFormPage.test.tsx b/apps/studio/components/interfaces/Support/__tests__/SupportFormPage.test.tsx
index 5f6f45a3f09..03ec0e4e773 100644
--- a/apps/studio/components/interfaces/Support/__tests__/SupportFormPage.test.tsx
+++ b/apps/studio/components/interfaces/Support/__tests__/SupportFormPage.test.tsx
@@ -88,11 +88,22 @@ vi.mock('react-inlinesvg', () => ({
default: () => null,
}))
-// Mock the support storage client module - will be configured per test
vi.mock('../support-storage-client', () => ({
createSupportStorageClient: vi.fn(),
}))
+vi.mock(import('lib/breadcrumbs'), async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ getOwnershipOfBreadcrumbSnapshot: vi.fn(),
+ }
+})
+
+let createSupportStorageClientMock: ReturnType
+let getBreadcrumbSnapshotMock: ReturnType
+let generateAttachmentUrlSpy: ReturnType
+
// Mock sonner toast
vi.mock('sonner', () => ({
toast: {
@@ -221,6 +232,13 @@ const selectLibraryOption = async (screen: Screen, optionLabel: string) => {
await userEvent.click(option)
}
+const getDashboardLogsToggle = (screen: Screen, type: 'find' | 'query' = 'find') => {
+ const labelMatcher = /dashboard .* log/i
+ return type === 'find'
+ ? screen.findByRole('switch', { name: labelMatcher })
+ : screen.queryByRole('switch', { name: labelMatcher })
+}
+
const getSupportForm = () => {
const form = document.querySelector('form#support-form')
expect(form).not.toBeNull()
@@ -273,10 +291,69 @@ describe('SupportFormPage', () => {
})
})
- beforeEach(() => {
+ beforeEach(async () => {
mockUseDeploymentCommitQuery.mockReturnValue({
data: { commitSha: mockCommitSha, commitTime: mockCommitTime },
})
+ const { createSupportStorageClient } = await import('../support-storage-client')
+ createSupportStorageClientMock = vi.mocked(createSupportStorageClient)
+ createSupportStorageClientMock.mockReset()
+ createSupportStorageClientMock.mockReturnValue({
+ storage: {
+ from: vi.fn(() => ({
+ upload: vi.fn(async (path: string) => ({
+ data: { path },
+ error: null,
+ })),
+ createSignedUrls: vi.fn(async (paths: string[]) => ({
+ data: paths.map((path) => ({
+ signedUrl: `https://storage.example.com/${path}`,
+ path,
+ error: null,
+ })),
+ error: null,
+ })),
+ })),
+ },
+ } as any)
+
+ generateAttachmentUrlSpy = vi.fn()
+ mswServer.use(
+ http.post('*/rest/v1/rpc/docs_search_fts', async () => {
+ return HttpResponse.json([])
+ }),
+ http.post('*/rest/v1/rpc/docs_search_fts_nimbus', async () => {
+ return HttpResponse.json([])
+ }),
+ http.post('*/functions/v1/search-embeddings', async () => {
+ return HttpResponse.json([])
+ }),
+ http.post('http://localhost:3000/api/generate-attachment-url', async ({ request }) => {
+ const body = (await request.json()) as {
+ bucket?: string
+ filenames?: string[]
+ }
+ generateAttachmentUrlSpy(body)
+ const filenames = body.filenames ?? []
+ return HttpResponse.json(
+ filenames.map((filename) => `https://storage.example.com/signed/${filename}`)
+ )
+ })
+ )
+
+ const breadcrumbsModule = await import('lib/breadcrumbs')
+ getBreadcrumbSnapshotMock = vi.mocked(breadcrumbsModule.getOwnershipOfBreadcrumbSnapshot)
+ getBreadcrumbSnapshotMock.mockReset()
+ getBreadcrumbSnapshotMock.mockReturnValue([
+ {
+ timestamp: 1_710_000_000,
+ category: 'ui.action',
+ message: 'Clicked button',
+ level: 'info',
+ data: { route: '/project/_/dashboard' },
+ },
+ ])
+
Object.defineProperty(window.navigator, 'userAgent', {
value:
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
@@ -427,6 +504,20 @@ describe('SupportFormPage', () => {
})
})
+ test('loading a URL with explicit no project ref falls back to first organization and no project', async () => {
+ Object.defineProperty(window, 'location', {
+ value: createMockLocation(`?projectRef=${NO_PROJECT_MARKER}`),
+ writable: true,
+ })
+
+ renderSupportFormPage()
+
+ await waitFor(() => {
+ expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
+ expect(getProjectSelector(screen)).toHaveTextContent('No specific project')
+ })
+ })
+
test('loading a URL with an invalid project slug falls back to first organization and project', async () => {
mswServer.use(
http.get(`${API_URL}/platform/projects/:ref`, () =>
@@ -597,10 +688,13 @@ describe('SupportFormPage', () => {
renderSupportFormPage()
- await waitFor(() => {
- expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
- expect(getProjectSelector(screen)).toHaveTextContent('Project 1')
- })
+ await waitFor(
+ () => {
+ expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
+ expect(getProjectSelector(screen)).toHaveTextContent('Project 1')
+ },
+ { timeout: 5_000 }
+ )
await selectCategoryOption(screen, 'Dashboard bug')
await waitFor(() => {
@@ -1043,6 +1137,241 @@ describe('SupportFormPage', () => {
}
}, 10_000)
+ test('shows dashboard logs toggle only for Dashboard bug issues', async () => {
+ renderSupportFormPage()
+
+ await waitFor(() => {
+ expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
+ })
+
+ expect(getDashboardLogsToggle(screen, 'query')).not.toBeInTheDocument()
+
+ await selectCategoryOption(screen, 'Dashboard bug')
+ await waitFor(() => {
+ expect(getCategorySelector(screen)).toHaveTextContent('Dashboard bug')
+ })
+
+ const dashboardLogToggle = await getDashboardLogsToggle(screen)
+ expect(dashboardLogToggle).toBeChecked()
+
+ await selectCategoryOption(screen, 'APIs and client libraries')
+ await waitFor(() => {
+ expect(getCategorySelector(screen)).toHaveTextContent('APIs and client libraries')
+ })
+ await waitFor(() => {
+ expect(getDashboardLogsToggle(screen, 'query')).not.toBeInTheDocument()
+ })
+
+ await selectCategoryOption(screen, 'Dashboard bug')
+ await waitFor(() => {
+ expect(getCategorySelector(screen)).toHaveTextContent('Dashboard bug')
+ })
+ const dashboardLogToggleAgain = await getDashboardLogsToggle(screen)
+ expect(dashboardLogToggleAgain).toBeChecked()
+ })
+
+ test('skips dashboard log upload when toggle is disabled', async () => {
+ const submitSpy = vi.fn()
+ const upload = vi.fn(async () => ({
+ data: { path: 'dashboard-logs/mock.log.json' },
+ error: null,
+ }))
+ const createSignedUrls = vi.fn(async (paths: string[]) => ({
+ data: paths.map((path) => ({
+ signedUrl: `https://storage.example.com/${path}`,
+ path,
+ error: null,
+ })),
+ error: null,
+ }))
+
+ createSupportStorageClientMock.mockReturnValue({
+ storage: {
+ from: vi.fn(() => ({
+ upload,
+ createSignedUrls,
+ })),
+ },
+ } as any)
+
+ addAPIMock({
+ method: 'post',
+ path: '/platform/feedback/send',
+ response: async ({ request }) => {
+ submitSpy(await request.json())
+ return HttpResponse.json({ ok: true })
+ },
+ })
+
+ renderSupportFormPage()
+
+ await waitFor(() => {
+ expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
+ })
+
+ await selectCategoryOption(screen, 'Dashboard bug')
+ await waitFor(() => {
+ expect(getCategorySelector(screen)).toHaveTextContent('Dashboard bug')
+ })
+
+ const dashboardLogToggle = await getDashboardLogsToggle(screen)
+ expect(dashboardLogToggle).toBeChecked()
+ await userEvent.click(dashboardLogToggle!)
+ expect(dashboardLogToggle).not.toBeChecked()
+
+ await userEvent.type(getSummaryField(screen), 'Dashboard charts crashing')
+ await userEvent.type(getMessageField(screen), 'Charts throw error on load')
+
+ await userEvent.click(getSubmitButton(screen))
+
+ await waitFor(() => {
+ expect(submitSpy).toHaveBeenCalledTimes(1)
+ })
+
+ expect(upload).not.toHaveBeenCalled()
+ expect(createSignedUrls).not.toHaveBeenCalled()
+
+ const payload = submitSpy.mock.calls[0]?.[0]
+ expect(payload.message).toContain('Charts throw error on load')
+ expect(payload.message).not.toContain('Dashboard logs:')
+ })
+
+ test('skips dashboard log upload when toggle hidden', async () => {
+ const submitSpy = vi.fn()
+ const upload = vi.fn(async () => ({
+ data: { path: 'dashboard-logs/mock.log.json' },
+ error: null,
+ }))
+ const createSignedUrls = vi.fn(async (paths: string[]) => ({
+ data: paths.map((path) => ({
+ signedUrl: `https://storage.example.com/${path}`,
+ path,
+ error: null,
+ })),
+ error: null,
+ }))
+
+ createSupportStorageClientMock.mockReturnValue({
+ storage: {
+ from: vi.fn(() => ({
+ upload,
+ createSignedUrls,
+ })),
+ },
+ } as any)
+
+ addAPIMock({
+ method: 'post',
+ path: '/platform/feedback/send',
+ response: async ({ request }) => {
+ submitSpy(await request.json())
+ return HttpResponse.json({ ok: true })
+ },
+ })
+
+ renderSupportFormPage()
+
+ await waitFor(() => {
+ expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
+ })
+
+ await selectCategoryOption(screen, 'Database unresponsive')
+ await waitFor(() => {
+ expect(getCategorySelector(screen)).toHaveTextContent('Database unresponsive')
+ })
+
+ expect(getDashboardLogsToggle(screen, 'query')).not.toBeInTheDocument()
+
+ await userEvent.type(getSummaryField(screen), 'Dashboard charts crashing')
+ await userEvent.type(getMessageField(screen), 'Charts throw error on load')
+
+ await userEvent.click(getSubmitButton(screen))
+
+ await waitFor(() => {
+ expect(submitSpy).toHaveBeenCalledTimes(1)
+ })
+
+ expect(upload).not.toHaveBeenCalled()
+ expect(createSignedUrls).not.toHaveBeenCalled()
+
+ const payload = submitSpy.mock.calls[0]?.[0]
+ expect(payload.message).toContain('Charts throw error on load')
+ expect(payload.message).not.toContain('Dashboard logs:')
+ })
+
+ test('uploads dashboard logs when enabled and appends link to message', async () => {
+ const submitSpy = vi.fn()
+ const upload = vi.fn(async (path: string) => ({ data: { path }, error: null }))
+ const createSignedUrls = vi.fn(async (paths: string[], _expiry: number) => ({
+ data: paths.map((path) => ({
+ signedUrl: `https://storage.example.com/signed/${path}`,
+ path,
+ error: null,
+ })),
+ error: null,
+ }))
+
+ createSupportStorageClientMock.mockReturnValue({
+ storage: {
+ from: vi.fn(() => ({
+ upload,
+ createSignedUrls,
+ })),
+ },
+ } as any)
+
+ addAPIMock({
+ method: 'post',
+ path: '/platform/feedback/send',
+ response: async ({ request }) => {
+ submitSpy(await request.json())
+ return HttpResponse.json({ ok: true })
+ },
+ })
+
+ renderSupportFormPage()
+
+ await waitFor(() => {
+ expect(getOrganizationSelector(screen)).toHaveTextContent('Organization 1')
+ })
+
+ await selectCategoryOption(screen, 'Dashboard bug')
+ await waitFor(() => {
+ expect(getCategorySelector(screen)).toHaveTextContent('Dashboard bug')
+ })
+
+ const dashboardLogToggle = await screen.findByRole('switch', {
+ name: /include dashboard activity log/i,
+ })
+ expect(dashboardLogToggle).toBeChecked()
+
+ await userEvent.type(getSummaryField(screen), 'Dashboard navigation broken')
+ await userEvent.type(
+ getMessageField(screen),
+ 'Navigation menu does not respond after latest deploy'
+ )
+
+ await userEvent.click(getSubmitButton(screen))
+
+ await waitFor(() => {
+ expect(submitSpy).toHaveBeenCalledTimes(1)
+ })
+
+ expect(upload).toHaveBeenCalledTimes(1)
+ await waitFor(() => {
+ expect(generateAttachmentUrlSpy).toHaveBeenCalledTimes(1)
+ })
+ expect(generateAttachmentUrlSpy.mock.calls[0]?.[0]).toMatchObject({
+ bucket: 'dashboard-logs',
+ })
+
+ const payload = submitSpy.mock.calls[0]?.[0]
+ expect(payload.message).toContain('Navigation menu does not respond after latest deploy')
+ expect(payload.message).toMatch(
+ /Dashboard logs: https:\/\/storage\.example\.com\/signed\/.+\.json/
+ )
+ })
+
test('shows toast on submission error and allows form re-editing and resubmission', async () => {
const submitSpy = vi.fn()
const toastErrorSpy = vi.fn()
@@ -1111,9 +1440,10 @@ describe('SupportFormPage', () => {
const payload = submitSpy.mock.calls[0]?.[0]
expect(payload.subject).toBe('Cannot access settings')
- expect(payload.message).toBe(
+ expect(payload.message).toMatch(
'Settings page shows 500 error - updated description' + supportVersionInfo
)
+ expect(payload.message).toMatch(/Dashboard logs: https:\/\/storage\.example\.com\/.+\.json/)
await waitFor(() => {
expect(toastSuccessSpy).toHaveBeenCalledWith('Support request sent. Thank you!')
@@ -1149,7 +1479,6 @@ describe('SupportFormPage', () => {
'https://storage.example.com/signed/file2.jpg?token=def456',
]
- const { createSupportStorageClient } = await import('../support-storage-client')
const mockStorageClient = {
storage: {
from: vi.fn(() => ({
@@ -1160,7 +1489,8 @@ describe('SupportFormPage', () => {
})),
},
}
- vi.mocked(createSupportStorageClient).mockReturnValue(mockStorageClient as any)
+
+ createSupportStorageClientMock.mockReturnValue(mockStorageClient as any)
mswServer.use(
http.post('http://localhost:3000/api/generate-attachment-url', async ({ request }) => {
@@ -1271,7 +1601,7 @@ describe('SupportFormPage', () => {
unmount?.()
url.createObjectURL = originalCreateObjectURL
url.revokeObjectURL = originalRevokeObjectURL
- vi.mocked(createSupportStorageClient).mockReset()
+ createSupportStorageClientMock.mockReset()
}
}, 10_000)
@@ -1313,6 +1643,11 @@ describe('SupportFormPage', () => {
expect(getCategorySelector(screen)).toHaveTextContent('Dashboard bug')
})
+ const dashboardLogToggle = await getDashboardLogsToggle(screen)
+ expect(dashboardLogToggle).toBeChecked()
+ await userEvent.click(dashboardLogToggle!)
+ expect(dashboardLogToggle).not.toBeChecked()
+
await userEvent.type(getSummaryField(screen), 'Cannot access my account')
await userEvent.type(getMessageField(screen), 'I need help accessing my Supabase account')
diff --git a/apps/studio/components/interfaces/Support/dashboard-logs.ts b/apps/studio/components/interfaces/Support/dashboard-logs.ts
new file mode 100644
index 00000000000..93da930b3a8
--- /dev/null
+++ b/apps/studio/components/interfaces/Support/dashboard-logs.ts
@@ -0,0 +1,77 @@
+import * as Sentry from '@sentry/nextjs'
+
+import { SupportCategories } from '@supabase/shared-types/out/constants'
+import type {
+ GenerateAttachmentURLsData,
+ GenerateAttachmentURLsVariables,
+} from 'data/support/generate-attachment-urls-mutation'
+import { getMirroredBreadcrumbs, getOwnershipOfBreadcrumbSnapshot } from 'lib/breadcrumbs'
+import { uuidv4 } from 'lib/helpers'
+import { sanitizeArrayOfObjects } from 'lib/sanitize'
+import { createSupportStorageClient } from './support-storage-client'
+import type { ExtendedSupportCategories } from './Support.constants'
+
+export type DashboardBreadcrumb = Sentry.Breadcrumb
+
+export const DASHBOARD_LOG_BUCKET = 'dashboard-logs'
+
+export const DASHBOARD_LOG_CATEGORIES: ExtendedSupportCategories[] = [
+ SupportCategories.DASHBOARD_BUG,
+]
+
+export const getSanitizedBreadcrumbs = (): unknown[] => {
+ const breadcrumbs = getOwnershipOfBreadcrumbSnapshot() ?? getMirroredBreadcrumbs()
+ return sanitizeArrayOfObjects(breadcrumbs)
+}
+
+export const uploadDashboardLog = async ({
+ userId,
+ uploadDashboardLogFn,
+}: {
+ userId: string | undefined
+ uploadDashboardLogFn: (
+ vars: GenerateAttachmentURLsVariables
+ ) => Promise
+}): Promise => {
+ if (!userId) {
+ console.error(
+ '[SupportForm > uploadDashboardLog] Cannot upload dashboard log: user ID is undefined'
+ )
+ return []
+ }
+
+ const sanitized = getSanitizedBreadcrumbs()
+ if (sanitized.length === 0) return []
+
+ try {
+ const supportStorageClient = createSupportStorageClient()
+ const objectKey = `${userId}/${uuidv4()}.json`
+ const body = new Blob([JSON.stringify(sanitized, null, 2)], {
+ type: 'application/json',
+ })
+
+ const { error: uploadError } = await supportStorageClient.storage
+ .from(DASHBOARD_LOG_BUCKET)
+ .upload(objectKey, body, {
+ cacheControl: '3600',
+ contentType: 'application/json',
+ upsert: false,
+ })
+
+ if (uploadError) {
+ console.error(
+ '[SupportForm > uploadDashboardLog] Failed to upload dashboard log to support storage bucket',
+ uploadError
+ )
+ return []
+ }
+
+ return uploadDashboardLogFn({
+ bucket: DASHBOARD_LOG_BUCKET,
+ filenames: [objectKey],
+ })
+ } catch (error) {
+ console.error('[SupportForm] Unexpected error uploading dashboard log', error)
+ return []
+ }
+}
diff --git a/apps/studio/components/interfaces/Support/useSupportForm.ts b/apps/studio/components/interfaces/Support/useSupportForm.ts
index b3aa32e06c3..34575b4c873 100644
--- a/apps/studio/components/interfaces/Support/useSupportForm.ts
+++ b/apps/studio/components/interfaces/Support/useSupportForm.ts
@@ -24,6 +24,7 @@ const supportFormDefaultValues: DefaultValues = {
message: '',
affectedServices: '',
allowSupportAccess: true,
+ attachDashboardLogs: true,
dashboardSentryIssueId: '',
}
@@ -83,10 +84,7 @@ export function useSupportForm(dispatch: Dispatch): UseSuppo
urlParamsRef.current.orgSlug && urlParamsRef.current.orgSlug !== NO_ORG_MARKER
? urlParamsRef.current.orgSlug
: null
- const projectRefFromUrl =
- urlParamsRef.current.projectRef && urlParamsRef.current.projectRef !== NO_PROJECT_MARKER
- ? urlParamsRef.current.projectRef
- : null
+ const projectRefFromUrl = urlParamsRef.current.projectRef ?? null
selectInitialOrgAndProject({
projectRef: projectRefFromUrl,
diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
index b12a696178f..0b6a7975d45 100644
--- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -5,6 +5,7 @@ import { useParams } from 'common'
import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
import { ExampleProject } from 'components/interfaces/Home/ExampleProject'
import { EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
import { useInvalidateProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query'
import { useInvalidateProjectDetailsQuery } from 'data/projects/project-detail-query'
@@ -112,7 +113,7 @@ const BuildingState = () => {
support ticket.
}
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
index 54e30a670a7..c73d79a0562 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
@@ -1,7 +1,7 @@
import { Lightbulb, TriangleAlert } from 'lucide-react'
-import Link from 'next/link'
import { useState } from 'react'
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
import { Button, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_ } from 'ui'
import { FeedbackWidget } from './FeedbackWidget'
@@ -42,13 +42,13 @@ export const FeedbackDropdown = ({ className }: { className?: string }) => {
What would you like to share?
diff --git a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
index f6b7a6688b7..67018c65260 100644
--- a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
+++ b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
@@ -1,10 +1,11 @@
import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
import dayjs from 'dayjs'
import { X } from 'lucide-react'
-import Link from 'next/link'
import { useEffect, useState } from 'react'
+import { SupportCategories } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
+import { SupportLink } from 'components/interfaces/Support/SupportLink'
import { useProjectUpgradingStatusQuery } from 'data/config/project-upgrade-status-query'
import { IS_PLATFORM } from 'lib/constants'
import { Alert, Button } from 'ui'
@@ -60,13 +61,16 @@ export const ProjectUpgradeFailedBanner = () => {
actions={
diff --git a/apps/studio/pages/api/generate-attachment-url.ts b/apps/studio/pages/api/generate-attachment-url.ts
index 87c3b892117..1bb8fcbff42 100644
--- a/apps/studio/pages/api/generate-attachment-url.ts
+++ b/apps/studio/pages/api/generate-attachment-url.ts
@@ -2,6 +2,7 @@ import { createClient } from '@supabase/supabase-js'
import type { NextApiRequest, NextApiResponse } from 'next'
import z from 'zod'
+import { DASHBOARD_LOG_BUCKET } from 'components/interfaces/Support/dashboard-logs'
import apiWrapper from 'lib/api/apiWrapper'
import { getUserClaims } from 'lib/gotrue'
@@ -9,7 +10,9 @@ export const maxDuration = 120
const GenerateAttachmentUrlSchema = z.object({
filenames: z.array(z.string()),
- bucket: z.enum(['support-attachments', 'feedback-attachments']).default('support-attachments'),
+ bucket: z
+ .enum(['support-attachments', 'feedback-attachments', DASHBOARD_LOG_BUCKET])
+ .default('support-attachments'),
})
async function handlePost(req: NextApiRequest, res: NextApiResponse) {
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 1aca37d67f9..54d41edfe57 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -81,8 +81,8 @@ const LabelContainerVariants = cva('transition-all duration-500 ease-in-out', {
layout: {
horizontal: 'flex flex-col gap-2 col-span-4',
vertical: 'flex flex-row gap-2 justify-between',
- flex: 'flex flex-col gap-0',
- 'flex-row-reverse': 'flex flex-col',
+ flex: 'flex flex-col gap-0 min-w-0',
+ 'flex-row-reverse': 'flex flex-col min-w-0',
},
labelLayout: {
horizontal: '',