Skip to content

Commit ebd1f10

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share table sidebar headers
1 parent bdeefd3 commit ebd1f10

5 files changed

Lines changed: 80 additions & 68 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ import {
2525
FieldError,
2626
RequiredLabel,
2727
} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
28+
import {
29+
TableSidebarHeader,
30+
TableSidebarHeaderAction,
31+
} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
2832
import { useAddTableColumn, useUpdateColumn } from '@/hooks/queries/tables'
2933
import { SelectOptionsEditor } from '../select-field'
3034
import { columnTypeOptionsForTable } from './column-types'
@@ -263,19 +267,12 @@ function ColumnConfigBody({
263267

264268
return (
265269
<div className='flex h-full flex-col'>
266-
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
270+
<TableSidebarHeader>
267271
<h2 className='text-[var(--text-primary)] text-small'>Configure column</h2>
268-
<Button
269-
variant='ghost'
270-
size='sm'
271-
onClick={onClose}
272-
iconPadding='sm'
273-
className='size-7'
274-
aria-label='Close'
275-
>
272+
<TableSidebarHeaderAction onClick={onClose} aria-label='Close'>
276273
<X className='size-[14px]' />
277-
</Button>
278-
</div>
274+
</TableSidebarHeaderAction>
275+
</TableSidebarHeader>
279276

280277
<div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
281278
{/* `disabled` on the fieldset reaches every native control inside,

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib
2121
import { columnMatchesRef, getColumnId } from '@/lib/table/column-keys'
2222
import { deriveOutputColumnName } from '@/lib/table/column-naming'
2323
import { FieldError } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
24+
import {
25+
TableSidebarHeader,
26+
TableSidebarHeaderAction,
27+
} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
2428
import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
2529
import {
2630
useAddWorkflowGroup,
@@ -232,31 +236,21 @@ export function EnrichmentConfig({
232236

233237
return (
234238
<div className='flex h-full flex-col'>
235-
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
239+
<TableSidebarHeader>
236240
<div className='flex min-w-0 items-center gap-1.5'>
237-
<Button
238-
variant='ghost'
239-
size='sm'
241+
<TableSidebarHeaderAction
240242
onClick={onBack}
241-
iconPadding='sm'
242-
className='size-7 flex-none'
243+
className='flex-none'
243244
aria-label='Back to enrichments'
244245
>
245246
<ArrowLeft className='size-[14px]' />
246-
</Button>
247+
</TableSidebarHeaderAction>
247248
<OverflowText label={enrichment.name} className='text-[var(--text-primary)] text-small' />
248249
</div>
249-
<Button
250-
variant='ghost'
251-
size='sm'
252-
onClick={onClose}
253-
iconPadding='sm'
254-
className='size-7 flex-none'
255-
aria-label='Close'
256-
>
250+
<TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
257251
<X className='size-[14px]' />
258-
</Button>
259-
</div>
252+
</TableSidebarHeaderAction>
253+
</TableSidebarHeader>
260254

261255
<div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
262256
<div className='flex flex-col gap-[9.5px]'>

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
'use client'
22

33
import { useState } from 'react'
4-
import { Button, ChipInput, cn } from '@sim/emcn'
4+
import { ChipInput, cn } from '@sim/emcn'
55
import { Search, X } from '@sim/emcn/icons'
66
import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
7+
import {
8+
TableSidebarHeader,
9+
TableSidebarHeaderAction,
10+
} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
711
import { ALL_ENRICHMENTS } from '@/enrichments'
812
import { getEnrichment } from '@/enrichments/registry'
913
import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
@@ -71,19 +75,12 @@ function EnrichmentsSidebarBody({
7175
if (editGroup && !editEnrichment) {
7276
return (
7377
<div className='flex h-full flex-col'>
74-
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
78+
<TableSidebarHeader>
7579
<h2 className='text-[var(--text-primary)] text-small'>Enrichment</h2>
76-
<Button
77-
variant='ghost'
78-
size='sm'
79-
onClick={onClose}
80-
iconPadding='sm'
81-
className='size-7 flex-none'
82-
aria-label='Close'
83-
>
80+
<TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
8481
<X className='size-[14px]' />
85-
</Button>
86-
</div>
82+
</TableSidebarHeaderAction>
83+
</TableSidebarHeader>
8784
<div className='flex flex-1 items-center justify-center px-6 text-center'>
8885
<p className='text-[var(--text-tertiary)] text-small'>
8986
This enrichment ("{editGroup.enrichmentId}") is no longer available. Delete the column
@@ -118,19 +115,12 @@ function EnrichmentsSidebarBody({
118115

119116
return (
120117
<div className='flex h-full flex-col'>
121-
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
118+
<TableSidebarHeader>
122119
<h2 className='text-[var(--text-primary)] text-small'>Enrichments</h2>
123-
<Button
124-
variant='ghost'
125-
size='sm'
126-
onClick={onClose}
127-
iconPadding='sm'
128-
className='size-7 flex-none'
129-
aria-label='Close'
130-
>
120+
<TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
131121
<X className='size-[14px]' />
132-
</Button>
133-
</div>
122+
</TableSidebarHeaderAction>
123+
</TableSidebarHeader>
134124

135125
<div className='px-2 pt-3'>
136126
<ChipInput

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
2+
import { Button, cn } from '@sim/emcn'
3+
4+
interface TableSidebarHeaderProps {
5+
children: ReactNode
6+
}
7+
8+
export function TableSidebarHeader({ children }: TableSidebarHeaderProps) {
9+
return (
10+
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
11+
{children}
12+
</div>
13+
)
14+
}
15+
16+
interface TableSidebarHeaderActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
17+
'aria-label': string
18+
}
19+
20+
export const TableSidebarHeaderAction = forwardRef<
21+
HTMLButtonElement,
22+
TableSidebarHeaderActionProps
23+
>(({ className, ...props }, ref) => (
24+
<Button
25+
{...props}
26+
ref={ref}
27+
variant='ghost'
28+
size='sm'
29+
iconPadding='sm'
30+
className={cn(
31+
'size-7 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
32+
className
33+
)}
34+
/>
35+
))
36+
37+
TableSidebarHeaderAction.displayName = 'TableSidebarHeaderAction'

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ import {
4646
FieldError,
4747
RequiredLabel,
4848
} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
49+
import {
50+
TableSidebarHeader,
51+
TableSidebarHeaderAction,
52+
} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
4953
import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
5054
import { BlockTile } from '@/blocks/block-tile'
5155
import { useDeployedWorkflowState } from '@/hooks/queries/deployments'
@@ -630,35 +634,25 @@ export function WorkflowSidebarBody({
630634

631635
return (
632636
<div className='flex h-full flex-col'>
633-
<div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
637+
<TableSidebarHeader>
634638
<div className='flex min-w-0 items-center gap-1.5'>
635639
{showBackButton && (
636-
<Button
637-
variant='ghost'
638-
size='sm'
640+
<TableSidebarHeaderAction
639641
onClick={onBack}
640-
iconPadding='sm'
641-
className='size-7 flex-none'
642+
className='flex-none'
642643
aria-label='Back to enrichments'
643644
>
644645
<ArrowLeft className='size-[14px]' />
645-
</Button>
646+
</TableSidebarHeaderAction>
646647
)}
647648
<h2 className='flex min-w-0'>
648649
<OverflowText label={title} className='text-[var(--text-primary)] text-small' />
649650
</h2>
650651
</div>
651-
<Button
652-
variant='ghost'
653-
size='sm'
654-
onClick={onClose}
655-
iconPadding='sm'
656-
className='size-7 flex-none'
657-
aria-label='Close'
658-
>
652+
<TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
659653
<X className='size-[14px]' />
660-
</Button>
661-
</div>
654+
</TableSidebarHeaderAction>
655+
</TableSidebarHeader>
662656

663657
<div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
664658
{/* Single-output mode renames this column directly. */}

0 commit comments

Comments
 (0)