Skip to content

Commit e19674d

Browse files
BillLeoutsakosvl346Bill Leoutsakos
BillLeoutsakosvl346
and
Bill Leoutsakos
authored
improvement(ui): share knowledge filter headings (#8073)
* improvement(ui): share knowledge filter headings * improvement(ui): share inline filter and pagination actions (#8163) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
1 parent 3821308 commit e19674d

5 files changed

Lines changed: 45 additions & 44 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -536,12 +536,10 @@ const Pagination = memo(function Pagination({
536536
<Button
537537
key={page}
538538
type='button'
539-
variant='ghost'
539+
variant={page === currentPage ? 'subtle' : 'ghost'}
540+
size='inline'
541+
aria-current={page === currentPage ? 'page' : undefined}
540542
onClick={() => onPageChange(page)}
541-
className={cn(
542-
'h-auto p-0 text-sm hover-hover:bg-transparent hover-hover:text-[var(--text-body)]',
543-
page === currentPage ? 'text-[var(--text-body)]' : ''
544-
)}
545543
>
546544
{page}
547545
</Button>

‎apps/sim/app/workspace/[workspaceId]/knowledge/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { KnowledgeFilterHeading } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading'
12
export { CreateBaseModal } from './create-base-modal'
23
export { DeleteKnowledgeBaseModal } from './delete-knowledge-base-modal'
34
export { EditKnowledgeBaseModal } from './edit-knowledge-base-modal'

‎apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Button } from '@sim/emcn'
2+
import { FILTER_SECTION_LABEL_CLASS } from '@/app/workspace/[workspaceId]/components'
3+
4+
interface KnowledgeFilterHeadingProps {
5+
title: string
6+
active: boolean
7+
onClear: () => void
8+
}
9+
10+
/** Heading and conditional clear action for a knowledge-list filter. */
11+
export function KnowledgeFilterHeading({ title, active, onClear }: KnowledgeFilterHeadingProps) {
12+
return (
13+
<div className='flex h-5 items-center justify-between'>
14+
<span className={FILTER_SECTION_LABEL_CLASS}>{title}</span>
15+
{active && (
16+
<Button variant='ghost-secondary' size='inline' onClick={onClear} className='-mr-1'>
17+
Clear
18+
</Button>
19+
)}
20+
</div>
21+
)
22+
}

‎apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@ vi.mock('@/connectors/registry', () => ({ CONNECTOR_META_REGISTRY: {} }))
9696
vi.mock('@/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal', () => ({
9797
BaseTagsModal: () => null,
9898
}))
99-
vi.mock('@/app/workspace/[workspaceId]/knowledge/components', () => ({
99+
vi.mock('@/app/workspace/[workspaceId]/knowledge/components', async () => ({
100+
...(await import('@/app/workspace/[workspaceId]/knowledge/components/knowledge-filter-heading')),
100101
CreateBaseModal: () => null,
101102
EditKnowledgeBaseModal: () => null,
102103
KnowledgeListContextMenu: () => null,

‎apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx‎

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
44
import type { ChipSelectOption } from '@sim/emcn'
5-
import { Button, ChipConfirmModal, ChipSelect, Tooltip, toast } from '@sim/emcn'
5+
import { ChipConfirmModal, ChipSelect, Tooltip, toast } from '@sim/emcn'
66
import { Database, FolderPlus, Pencil, Plus, Trash } from '@sim/emcn/icons'
77
import { createLogger } from '@sim/logger'
88
import { getErrorMessage } from '@sim/utils/errors'
@@ -23,7 +23,6 @@ import type {
2323
} from '@/app/workspace/[workspaceId]/components'
2424
import {
2525
EMPTY_CELL_PLACEHOLDER,
26-
FILTER_SECTION_LABEL_CLASS,
2726
OwnerAvatar,
2827
ownerCell,
2928
Resource,
@@ -70,6 +69,7 @@ import {
7069
DeleteKnowledgeBaseModal,
7170
EditKnowledgeBaseModal,
7271
KnowledgeBaseContextMenu,
72+
KnowledgeFilterHeading,
7373
KnowledgeListContextMenu,
7474
} from '@/app/workspace/[workspaceId]/knowledge/components'
7575
import KnowledgeLoading from '@/app/workspace/[workspaceId]/knowledge/loading'
@@ -1334,18 +1334,11 @@ function KnowledgeContent() {
13341334
() => (
13351335
<div className='flex w-[260px] flex-col gap-3 p-3'>
13361336
<div className='flex flex-col gap-2'>
1337-
<div className='flex h-5 items-center justify-between'>
1338-
<span className={FILTER_SECTION_LABEL_CLASS}>Connectors</span>
1339-
{connectorFilter.length > 0 && (
1340-
<Button
1341-
variant='ghost'
1342-
onClick={() => setConnectorFilter([])}
1343-
className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
1344-
>
1345-
Clear
1346-
</Button>
1347-
)}
1348-
</div>
1337+
<KnowledgeFilterHeading
1338+
title='Connectors'
1339+
active={connectorFilter.length > 0}
1340+
onClear={() => setConnectorFilter([])}
1341+
/>
13491342
<ChipSelect
13501343
showSelectedCheck
13511344
dropdownWidth='trigger'
@@ -1358,18 +1351,11 @@ function KnowledgeContent() {
13581351
/>
13591352
</div>
13601353
<div className='flex flex-col gap-2'>
1361-
<div className='flex h-5 items-center justify-between'>
1362-
<span className={FILTER_SECTION_LABEL_CLASS}>Content</span>
1363-
{contentFilter.length > 0 && (
1364-
<Button
1365-
variant='ghost'
1366-
onClick={() => setContentFilter([])}
1367-
className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
1368-
>
1369-
Clear
1370-
</Button>
1371-
)}
1372-
</div>
1354+
<KnowledgeFilterHeading
1355+
title='Content'
1356+
active={contentFilter.length > 0}
1357+
onClear={() => setContentFilter([])}
1358+
/>
13731359
<ChipSelect
13741360
showSelectedCheck
13751361
dropdownWidth='trigger'
@@ -1383,18 +1369,11 @@ function KnowledgeContent() {
13831369
</div>
13841370
{memberOptions.length > 0 && (
13851371
<div className='flex flex-col gap-2'>
1386-
<div className='flex h-5 items-center justify-between'>
1387-
<span className={FILTER_SECTION_LABEL_CLASS}>Owner</span>
1388-
{ownerFilter.length > 0 && (
1389-
<Button
1390-
variant='ghost'
1391-
onClick={() => setOwnerFilter([])}
1392-
className='-mr-1 h-auto px-1 py-0.5 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-secondary)]'
1393-
>
1394-
Clear
1395-
</Button>
1396-
)}
1397-
</div>
1372+
<KnowledgeFilterHeading
1373+
title='Owner'
1374+
active={ownerFilter.length > 0}
1375+
onClear={() => setOwnerFilter([])}
1376+
/>
13981377
<ChipSelect
13991378
placeholder='All'
14001379
showAllOption

0 commit comments

Comments
 (0)