update data format

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

src/app/page.tsx

@@ -19,7 +19,7 @@ export default function Home({
   const fileId = searchParams.fileId as string | undefined
 
   const handleFileUpload = (data: DiagnosticData) => {
-    if (data.url && Array.isArray(data.frontendErrors) && Array.isArray(data.backendErrors)) {
+    if (data.basicInfo.url && Array.isArray(data.frontendErrors) && Array.isArray(data.backendErrors)) {
       setDiagnosticData(data)
     } else {
       throw new Error('Invalid file structure: missing required data')

src/components/CreateGithubIssue.test.tsx

@@ -5,9 +5,13 @@ import { render, screen, fireEvent } from '../test/test-utils'
 
 describe('CreateGithubIssue', () => {
   const mockDiagnosticData = {
-    url: 'https://test.metabase.com',
-    description: 'Test description',
-    entityName: 'Test Entity',
+    basicInfo: {
+      url: 'https://test.metabase.com',
+      description: 'Test description',
+    },
+    entityInfo: {
+      entityName: 'Test Entity',
+    }
   }
 
   beforeEach(() => {
@@ -71,8 +75,12 @@ describe('CreateGithubIssue', () => {
 
   it('handles missing optional data gracefully', () => {
     const minimalData = {
-      url: '',
-      entityName: '',
+      basicInfo: {
+        url: '',
+      },
+      entityInfo: {
+        entityName: '',
+      }
     }
 
     render(<CreateGithubIssue diagnosticData={minimalData} />)

src/components/CreateGithubIssue.tsx

@@ -1,13 +1,10 @@
 import { GithubIcon } from 'lucide-react'
 
-import { Button } from './ui/button'
+import type { DiagnosticData } from '@/types/DiagnosticData'
 
+import { Button } from './ui/button'
 interface CreateGithubIssueProps {
-  diagnosticData: {
-    url: string
-    description?: string
-    entityName: string
-  }
+  diagnosticData: DiagnosticData
   slackFileId?: string
 }
 
@@ -18,16 +15,16 @@ export function CreateGithubIssue({ diagnosticData, slackFileId }: CreateGithubI
       ? `https://metaboat.slack.com/files/U02T6V8MXN2/${slackFileId}/diagnostic-info.json`
       : null
 
-    const issueTitle = `[Bug Report] ${diagnosticData.entityName || 'Issue'} - ${
-      diagnosticData.url || 'No URL'
+    const issueTitle = `[Bug Report] ${diagnosticData.entityInfo.entityName || 'Issue'} - ${
+      diagnosticData.basicInfo.url || 'No URL'
     }`
 
     const issueBody = `
 ### Description
-${diagnosticData.description || 'No description provided'}
+${diagnosticData.basicInfo.description || 'No description provided'}
 
 ### Links
-- Original URL: ${diagnosticData.url || 'N/A'}
+- Original URL: ${diagnosticData.basicInfo.url || 'N/A'}
 ${slackFileUrl ? `- Slack File: ${slackFileUrl}` : ''}
 - Bug Report Debugger: ${debuggerUrl}
 `

src/components/DevToolsUi.test.tsx

@@ -8,23 +8,25 @@ import { render, screen } from '../test/test-utils'
 
 describe('DevToolsUI', () => {
   const sampleDiagnosticData: DiagnosticData = {
-    entityName: 'Test Entity',
-    bugReportDetails: {},
-    url: 'https://test.com',
-    description: 'Test description',
-    browserInfo: {
-      browserName: 'Chrome',
-      browserVersion: '100.0.0',
-      os: 'Windows',
-      osVersion: '10',
-      platform: 'Desktop',
-      language: 'en-US',
-    },
-    entityInfo: {
+    basicInfo: {
+      url: 'https://test.com',
+      description: 'Test description',
       bugReportDetails: {},
+      browserInfo: {
+        browserName: 'Chrome',
+        browserVersion: '100.0.0',
+        os: 'Windows',
+        osVersion: '10',
+        platform: 'Desktop',
+        language: 'en-US',
+      },
       'metabase-info': {},
       'system-info': {},
     },
+    entityInfo: {
+      entityName: 'question',
+      name: "Test Question's Name",
+    },
     frontendErrors: [
       '"[webpack-dev-server] ERROR in ./components/ErrorPages/utils.ts\\n  × Module not found: Error message 1"',
       '"[webpack-dev-server] ERROR in ./components/ErrorPages/tab.ts\\n  × Module not found: Error message 1"',
@@ -72,7 +74,7 @@ describe('DevToolsUI', () => {
     const openCall = vi.mocked(window.open).mock.calls[0][0] as string
     const url = new URL(openCall)
 
-    expect(url.searchParams.get('title')).toBe('[Bug Report] Test Entity - https://test.com')
+    expect(url.searchParams.get('title')).toBe('[Bug Report] question - https://test.com')
     expect(url.searchParams.get('body')).toContain('Test description')
     expect(url.searchParams.get('body')).toContain(
       'https://metaboat.slack.com/files/U02T6V8MXN2/TEST123/diagnostic-info.json'
@@ -83,16 +85,17 @@ describe('DevToolsUI', () => {
     render(<DevToolsUI diagnosticData={sampleDiagnosticData} />)
 
     // Check URL and description
-    expect(screen.getByText('URL:')).toBeInTheDocument()
+    expect(screen.getByText('url')).toBeInTheDocument()
     expect(screen.getByText('https://test.com')).toBeInTheDocument()
-    expect(screen.getByText('Description:')).toBeInTheDocument()
+    expect(screen.getByText('description')).toBeInTheDocument()
     expect(screen.getByText('Test description')).toBeInTheDocument()
 
     // Check browser info
-    expect(screen.getByText('Browser:')).toBeInTheDocument()
-    expect(screen.getByText('Chrome 100.0.0')).toBeInTheDocument()
-    expect(screen.getByText('OS:')).toBeInTheDocument()
-    expect(screen.getByText('Windows 10')).toBeInTheDocument()
+    expect(screen.getByText('browserInfo')).toBeInTheDocument()
+    expect(screen.getByText('Chrome')).toBeInTheDocument()
+    expect(screen.getByText('100.0.0')).toBeInTheDocument()
+    expect(screen.getByText('os')).toBeInTheDocument()
+    expect(screen.getByText('Windows')).toBeInTheDocument()
   })
 
   it('switches tabs correctly', async () => {
@@ -129,12 +132,16 @@ describe('DevToolsUI', () => {
 
   it('handles empty diagnostic data', () => {
     const emptyData: DiagnosticData = {
-      entityName: '',
-      bugReportDetails: {},
-      url: '',
-      description: '',
-      browserInfo: {},
-      entityInfo: {},
+      basicInfo: {
+        url: '',
+        bugReportDetails: {},
+        description: '',
+        browserInfo: {},
+      },
+      entityInfo: {
+        entityName: '',
+        name: '',
+      },
       frontendErrors: [],
       backendErrors: [],
       userLogs: [],
@@ -144,8 +151,9 @@ describe('DevToolsUI', () => {
     render(<DevToolsUI diagnosticData={emptyData} />)
 
     // Should still render without errors
-    expect(screen.getByText('Unknown URL')).toBeInTheDocument()
-    expect(screen.queryByText('Unknown browser')).not.toBeInTheDocument()
+    expect(screen.getByText('url')).toBeInTheDocument()
+    expect(screen.getByText('browserInfo')).toBeInTheDocument()
+    expect(screen.getByText('description')).toBeInTheDocument()
   })
 
   it('updates frontend error count', async () => {

src/components/DevToolsUi.tsx

@@ -54,35 +54,7 @@ export const DevToolsUI = ({ diagnosticData, slackFileId }: DevToolsUIProps) =>
           </div>
 
           <TabsContent value="basicInfo" className="h-[calc(100%-3rem)]">
-            <div className="space-y-2">
-              <p>
-                <strong>URL:</strong> {diagnosticData.url || 'Unknown URL'}
-              </p>
-              <p>
-                <strong>Description:</strong> {diagnosticData.description}
-              </p>
-              {diagnosticData.browserInfo && (
-                <>
-                  <p>
-                    <strong>Browser:</strong>{' '}
-                    {diagnosticData.browserInfo.browserName || 'Unknown browser'}{' '}
-                    {diagnosticData.browserInfo.browserVersion || 'Unknown version'}
-                  </p>
-                  <p>
-                    <strong>OS:</strong> {diagnosticData.browserInfo.os || 'Unknown OS'}{' '}
-                    {diagnosticData.browserInfo.osVersion || 'Unknown version'}
-                  </p>
-                  <p>
-                    <strong>Platform:</strong>{' '}
-                    {diagnosticData.browserInfo.platform || 'Unknown platform'}
-                  </p>
-                  <p>
-                    <strong>Language:</strong>{' '}
-                    {diagnosticData.browserInfo.language || 'Unknown language'}
-                  </p>
-                </>
-              )}
-            </div>
+            <MetadataTable metadata={diagnosticData.basicInfo} />
           </TabsContent>
           <TabsContent value="entityInfo" className="h-[calc(100%-3rem)]">
             <MetadataTable metadata={diagnosticData.entityInfo} />

src/components/MetadataTable.test.tsx

@@ -56,6 +56,7 @@ describe('MetadataTable', () => {
   it('handles empty metadata object', () => {
     render(<MetadataTable metadata={{}} />)
     expect(screen.queryByRole('table')).not.toBeInTheDocument()
+    expect(screen.getByText('No data 🙁')).toBeInTheDocument()
   })
 
   it('renders nested objects correctly', () => {

src/components/MetadataTable.tsx

@@ -62,11 +62,13 @@ const MetadataTable: React.FC<MetadataTableProps> = ({ metadata }) => {
     </div>
   )
 
+  if (!metadata || !Object.keys(metadata).length) {
+    return <p className="text-center">No data 🙁</p>
+  }
+
   return (
     <ScrollArea className="h-[calc(100vh-12rem)] w-full">
-      {metadata.bugReportDetails && renderTable(metadata.bugReportDetails)}
-      {metadata['metabase-info'] && renderTable(metadata['metabase-info'])}
-      {metadata['system-info'] && renderTable(metadata['system-info'])}
+      {renderTable(metadata)}
     </ScrollArea>
   )
 }

src/components/UploadDropzone.test.tsx

@@ -29,9 +29,8 @@ describe('UploadDropzone', () => {
       url: 'https://test.com',
       description: 'Test description',
       entityInfo: {
-        'metabase-info': {},
-        'system-info': {},
       },
+
       browserInfo: { browserName: 'Chrome' },
       frontendErrors: [],
       backendErrors: [],
@@ -49,8 +48,10 @@ describe('UploadDropzone', () => {
     expect(mockOnFileUpload).toHaveBeenCalledTimes(1)
     expect(mockOnFileUpload).toHaveBeenCalledWith(
       expect.objectContaining({
-        url: 'https://test.com',
-        description: 'Test description',
+        basicInfo: expect.objectContaining({
+          url: 'https://test.com',
+          description: 'Test description',
+        })
       })
     )
   })

src/components/UploadDropzone.tsx

@@ -20,12 +20,15 @@ const UploadDropzone: React.FC<UploadDropzoneProps> = ({ onFileUpload }) => {
             const parsedData = JSON.parse(result)
 
             const diagnosticData: DiagnosticData = {
-              entityName: parsedData.entityName || '',
-              bugReportDetails: parsedData.bugReportDetails || {},
-              url: parsedData.url || '',
+              basicInfo: {
+                description: parsedData.description || 'No description provided',
+                url: parsedData.url || 'Unknown URL',
+                bugReportDetails: parsedData.bugReportDetails || {},
+                browserInfo: parsedData.browserInfo || {},
+              },
               entityInfo: {
+                entityName: parsedData.entityName || '',
                 ...parsedData.entityInfo,
-                bugReportDetails: parsedData.bugReportDetails,
               },
               frontendErrors: Array.isArray(parsedData.frontendErrors)
                 ? parsedData.frontendErrors
@@ -35,11 +38,8 @@ const UploadDropzone: React.FC<UploadDropzoneProps> = ({ onFileUpload }) => {
                 : [],
               userLogs: Array.isArray(parsedData.userLogs) ? parsedData.userLogs : [],
               logs: Array.isArray(parsedData.logs) ? parsedData.logs : [],
-              description: parsedData.description || 'No description provided',
-              browserInfo: parsedData.browserInfo || {},
               queryResults: parsedData.queryResults || {},
             }
-
             onFileUpload(diagnosticData)
           }
         } catch (error) {

src/components/ui/table.tsx

@@ -74,7 +74,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    className={cn('p-2 align-middle max-w-6 overflow-x-auto [&:has([role=checkbox])]:pr-0', className)}
     {...props}
   />
 ))

src/types/DiagnosticData.ts

@@ -1,18 +1,19 @@
 export interface DiagnosticData {
-  entityName: string
-  url: string
+  basicInfo: {
+    url: string
+    description?: string
+    bugReportDetails: Record<string, any>
+    browserInfo: Record<string, any>
+  },
   entityInfo: {
-    bugReportDetails?: Record<string, any>
-    'metabase-info'?: Record<string, any>
-    'system-info'?: Record<string, any>
-  }
+    entityName: string
+    name: string
+    [key: string]: any
+  },
   frontendErrors: any[]
   backendErrors: any[]
   userLogs: any[]
   logs: any[]
-  bugReportDetails: Record<string, any>
-  description: string
-  browserInfo: Record<string, any>
   queryResults?: {
     cached: boolean | null
     database_id: number