Skip to content

Commit 7ba5e88

Browse files
nedtwiggnedtwigg
committed
Improve commonality between prod and test.
1 parent 2a72e6f commit 7ba5e88

File tree

5 files changed

+149
-131
lines changed

5 files changed

+149
-131
lines changed

‎browser-extension/src/components/SpotRow.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { TableCell, TableRow } from '@/components/ui/table'
2+
import type { CommentState } from '@/entrypoints/background'
3+
import type { EnhancerRegistry } from '@/lib/registries'
4+
import { cn } from '@/lib/utils'
5+
6+
interface SpotRowProps {
7+
commentState: CommentState
8+
enhancerRegistry: EnhancerRegistry
9+
onClick: () => void
10+
className?: string
11+
cellClassName?: string
12+
errorClassName?: string
13+
}
14+
15+
export function SpotRow({
16+
commentState,
17+
enhancerRegistry,
18+
onClick,
19+
className,
20+
cellClassName = 'p-3',
21+
errorClassName = 'text-red-500',
22+
}: SpotRowProps) {
23+
const enhancer = enhancerRegistry.enhancerFor(commentState.spot)
24+
25+
if (!enhancer) {
26+
return (
27+
<TableRow className={cn('cursor-pointer', className)} onClick={onClick}>
28+
<TableCell className={cellClassName}>
29+
<div className={errorClassName}>Unknown spot type: {commentState.spot.type}</div>
30+
</TableCell>
31+
</TableRow>
32+
)
33+
}
34+
35+
return (
36+
<TableRow className={cn('cursor-pointer', className)} onClick={onClick}>
37+
<TableCell className={cellClassName}>{enhancer.tableRow(commentState.spot)}</TableCell>
38+
</TableRow>
39+
)
40+
}

‎browser-extension/src/components/SpotTable.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/components/ui/table'
2+
import type { CommentState } from '@/entrypoints/background'
3+
import type { EnhancerRegistry } from '@/lib/registries'
4+
import { SpotRow } from './SpotRow'
5+
6+
interface SpotTableProps {
7+
spots: CommentState[]
8+
enhancerRegistry: EnhancerRegistry
9+
onSpotClick: (spot: CommentState) => void
10+
title?: string
11+
description?: string
12+
headerText?: string
13+
className?: string
14+
headerClassName?: string
15+
rowClassName?: string
16+
cellClassName?: string
17+
emptyStateMessage?: string
18+
showHeader?: boolean
19+
}
20+
21+
export function SpotTable({
22+
spots,
23+
enhancerRegistry,
24+
onSpotClick,
25+
title,
26+
description,
27+
headerText = 'Comment Spots',
28+
className,
29+
headerClassName = 'p-3 font-medium text-muted-foreground',
30+
rowClassName,
31+
cellClassName,
32+
emptyStateMessage = 'No comment spots available',
33+
showHeader = true,
34+
}: SpotTableProps) {
35+
if (spots.length === 0) {
36+
return <div className='p-10 text-center text-muted-foreground italic'>{emptyStateMessage}</div>
37+
}
38+
39+
const tableContent = (
40+
<Table>
41+
{showHeader && (
42+
<TableHeader>
43+
<TableRow>
44+
<TableHead className={headerClassName}>{headerText}</TableHead>
45+
</TableRow>
46+
</TableHeader>
47+
)}
48+
<TableBody>
49+
{spots.map((spot) => (
50+
<SpotRow
51+
key={spot.spot.unique_key}
52+
commentState={spot}
53+
enhancerRegistry={enhancerRegistry}
54+
onClick={() => onSpotClick(spot)}
55+
className={rowClassName || ''}
56+
cellClassName={cellClassName || 'p-3'}
57+
/>
58+
))}
59+
</TableBody>
60+
</Table>
61+
)
62+
63+
if (title || description) {
64+
return (
65+
<div className={className}>
66+
{(title || description) && (
67+
<div className='p-6 border-b border-border'>
68+
{title && <h2 className='text-xl font-semibold text-foreground'>{title}</h2>}
69+
{description && <p className='text-muted-foreground text-sm mt-1'>{description}</p>}
70+
</div>
71+
)}
72+
{tableContent}
73+
</div>
74+
)
75+
}
76+
77+
return <div className={className}>{tableContent}</div>
78+
}

‎browser-extension/src/entrypoints/popup/main.tsx‎

Lines changed: 14 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
11
import './style.css'
22
import React from 'react'
33
import { createRoot } from 'react-dom/client'
4-
import {
5-
Table,
6-
TableBody,
7-
TableCell,
8-
TableHead,
9-
TableHeader,
10-
TableRow,
11-
} from '@/components/ui/table'
4+
import { SpotTable } from '@/components/SpotTable'
125
import type { CommentState } from '@/entrypoints/background'
136
import { logger } from '@/lib/logger'
147
import type { GetOpenSpotsMessage, GetOpenSpotsResponse, SwitchToTabMessage } from '@/lib/messages'
158
import { EnhancerRegistry } from '@/lib/registries'
16-
import { cn } from '@/lib/utils'
17-
18-
const enhancers = new EnhancerRegistry()
199

2010
async function getOpenSpots(): Promise<CommentState[]> {
2111
logger.debug('Sending message to background script...')
@@ -40,38 +30,7 @@ function switchToTab(tabId: number, windowId: number): void {
4030
window.close()
4131
}
4232

43-
interface SpotRowProps {
44-
commentState: CommentState
45-
onClick: () => void
46-
}
47-
48-
function SpotRow({ commentState, onClick }: SpotRowProps) {
49-
const enhancer = enhancers.enhancerFor(commentState.spot)
50-
51-
if (!enhancer) {
52-
logger.error('No enhancer found for:', commentState.spot)
53-
logger.error('Only have enhancers for:', enhancers.byType)
54-
return null
55-
}
56-
57-
return (
58-
<TableRow
59-
className={cn(
60-
'cursor-pointer transition-colors hover:bg-muted/50',
61-
'border-b border-border/40',
62-
)}
63-
onClick={onClick}
64-
>
65-
<TableCell className='p-3'>
66-
<div className='flex items-center gap-2'>
67-
<div className='font-medium text-sm text-foreground overflow-hidden text-ellipsis whitespace-nowrap'>
68-
{enhancer.tableRow(commentState.spot)}
69-
</div>
70-
</div>
71-
</TableCell>
72-
</TableRow>
73-
)
74-
}
33+
const enhancers = new EnhancerRegistry()
7534

7635
function PopupApp() {
7736
const [spots, setSpots] = React.useState<CommentState[]>([])
@@ -96,33 +55,25 @@ function PopupApp() {
9655
return <div className='p-4 text-center text-muted-foreground'>Loading...</div>
9756
}
9857

99-
if (spots.length === 0) {
100-
return (
101-
<div className='p-10 text-center text-muted-foreground italic'>No open comment spots</div>
102-
)
58+
const handleSpotClick = (spot: CommentState) => {
59+
switchToTab(spot.tab.tabId, spot.tab.windowId)
10360
}
10461

10562
return (
10663
<div className='w-full'>
10764
<h2 className='mb-4 text-lg font-semibold text-foreground'>Open Comment Spots</h2>
10865

10966
<div className='border rounded-md'>
110-
<Table>
111-
<TableHeader>
112-
<TableRow>
113-
<TableHead className='p-3 font-medium text-muted-foreground'>Comment Spots</TableHead>
114-
</TableRow>
115-
</TableHeader>
116-
<TableBody>
117-
{spots.map((spot) => (
118-
<SpotRow
119-
key={spot.spot.unique_key}
120-
commentState={spot}
121-
onClick={() => switchToTab(spot.tab.tabId, spot.tab.windowId)}
122-
/>
123-
))}
124-
</TableBody>
125-
</Table>
67+
<SpotTable
68+
spots={spots}
69+
enhancerRegistry={enhancers}
70+
onSpotClick={handleSpotClick}
71+
headerClassName='p-3 font-medium text-muted-foreground'
72+
rowClassName='transition-colors hover:bg-muted/50 border-b border-border/40'
73+
cellClassName='p-3'
74+
emptyStateMessage='No open comment spots'
75+
showHeader={true}
76+
/>
12677
</div>
12778
</div>
12879
)

‎browser-extension/tests/playground/TablePlayground.tsx‎

Lines changed: 17 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,26 @@
1-
import {
2-
Table,
3-
TableBody,
4-
TableCell,
5-
TableHead,
6-
TableHeader,
7-
TableRow,
8-
} from '@/components/ui/table'
1+
import { SpotTable } from '@/components/SpotTable'
92
import type { CommentState } from '@/entrypoints/background'
10-
import { cn } from '@/lib/utils'
11-
import { enhancerRegistry, sampleSpots } from './mockData'
12-
13-
interface SpotRowProps {
14-
commentState: CommentState
15-
onClick: () => void
16-
}
17-
18-
function SpotRow({ commentState, onClick }: SpotRowProps) {
19-
const enhancer = enhancerRegistry.enhancerFor(commentState.spot)
20-
21-
if (!enhancer) {
22-
return (
23-
<TableRow className='cursor-pointer' onClick={onClick}>
24-
<TableCell className='p-3'>
25-
<div className='text-red-500'>Unknown spot type: {commentState.spot.type}</div>
26-
</TableCell>
27-
</TableRow>
28-
)
29-
}
30-
31-
return (
32-
<TableRow
33-
className={cn(
34-
'cursor-pointer transition-colors hover:bg-slate-50',
35-
'border-b border-slate-200',
36-
)}
37-
onClick={onClick}
38-
>
39-
<TableCell className='p-4'>{enhancer.tableRow(commentState.spot)}</TableCell>
40-
</TableRow>
41-
)
42-
}
3+
import { EnhancerRegistry } from '@/lib/registries'
4+
import { sampleSpots } from './mockData'
435

446
export function TablePlayground() {
457
const handleSpotClick = (spot: CommentState) => {
468
alert(`Clicked: ${spot.spot.type}\nTab: ${spot.tab.tabId}`)
479
}
48-
10+
const enhancers = new EnhancerRegistry()
4911
return (
50-
<div className='bg-white rounded-lg shadow-sm border border-slate-200'>
51-
<div className='p-6 border-b border-slate-200'>
52-
<h2 className='text-xl font-semibold text-slate-900'>Comment Spots</h2>
53-
<p className='text-slate-600 text-sm mt-1'>Click on any row to simulate tab switching</p>
54-
</div>
55-
56-
<Table>
57-
<TableHeader>
58-
<TableRow>
59-
<TableHead className='p-4 font-medium text-slate-700'>Spot Details</TableHead>
60-
</TableRow>
61-
</TableHeader>
62-
<TableBody>
63-
{sampleSpots.map((spot) => (
64-
<SpotRow
65-
key={spot.spot.unique_key}
66-
commentState={spot}
67-
onClick={() => handleSpotClick(spot)}
68-
/>
69-
))}
70-
</TableBody>
71-
</Table>
72-
</div>
12+
<SpotTable
13+
spots={sampleSpots}
14+
enhancerRegistry={enhancers}
15+
onSpotClick={handleSpotClick}
16+
title='Comment Spots'
17+
description='Click on any row to simulate tab switching'
18+
headerText='Spot Details'
19+
className='bg-white rounded-lg shadow-sm border border-slate-200'
20+
headerClassName='p-4 font-medium text-slate-700'
21+
rowClassName='cursor-pointer transition-colors hover:bg-slate-50 border-b border-slate-200'
22+
cellClassName='p-4'
23+
showHeader={true}
24+
/>
7325
)
7426
}

‎browser-extension/tests/playground/mockData.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { CommentState } from '@/entrypoints/background'
22
import type { CommentSpot } from '@/lib/enhancer'
33
import type { GitHubIssueAddCommentSpot } from '@/lib/enhancers/github/githubIssueAddComment'
44
import type { GitHubPRAddCommentSpot } from '@/lib/enhancers/github/githubPRAddComment'
5-
import { EnhancerRegistry } from '@/lib/registries'
65

76
const gh_pr: GitHubPRAddCommentSpot = {
87
domain: 'github.com',
@@ -39,5 +38,3 @@ export const sampleSpots: CommentState[] = spots.map((spot) => {
3938
}
4039
return state
4140
})
42-
43-
export const enhancerRegistry = new EnhancerRegistry()

0 commit comments

Comments
 (0)