Skip to content

Commit a14d374

Browse files
waleedlatif1waleedlatif1
authored
improvement(kb-connectors): align connector modal controls (#4730)
1 parent 5c19344 commit a14d374

3 files changed

Lines changed: 58 additions & 67 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx‎

Lines changed: 56 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,10 @@ export function AddConnectorModal({
218218
return (
219219
<>
220220
<Modal open={open} onOpenChange={(val) => !isCreating && onOpenChange(val)}>
221-
<ModalContent size='md' className='h-[80vh] max-h-[560px]'>
221+
<ModalContent
222+
size='md'
223+
className={step === 'select-type' ? 'max-h-[520px]' : 'h-[80vh] max-h-[560px]'}
224+
>
222225
<ModalHeader>
223226
{step === 'configure' && (
224227
<Button
@@ -240,10 +243,10 @@ export function AddConnectorModal({
240243
: `Configure the ${connectorConfig?.name} connector settings`}
241244
</ModalDescription>
242245

243-
<ModalBody className='pb-3'>
246+
<ModalBody className={step === 'select-type' ? 'pt-2 pb-3' : 'pb-3'}>
244247
{step === 'select-type' ? (
245-
<div className='flex min-h-0 flex-col gap-2'>
246-
<div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2 py-[5px] transition-colors duration-100 hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-3)]'>
248+
<div className='flex min-h-0 flex-col gap-2.5'>
249+
<div className='flex h-8 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2 transition-colors duration-100 hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-3)]'>
247250
<Search
248251
className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
249252
strokeWidth={2}
@@ -252,10 +255,10 @@ export function AddConnectorModal({
252255
placeholder='Search sources...'
253256
value={searchTerm}
254257
onChange={(e) => setSearchTerm(e.target.value)}
255-
className='h-auto flex-1 border-0 bg-transparent p-0 leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
258+
className='h-auto flex-1 border-0 bg-transparent p-0 font-medium text-small leading-none placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
256259
/>
257260
</div>
258-
<div className='min-h-[400px] overflow-y-auto [scrollbar-gutter:stable]'>
261+
<div className='max-h-[390px] min-h-0 overflow-y-auto [scrollbar-gutter:stable]'>
259262
<div className='flex flex-col gap-0.5 pr-1'>
260263
{filteredEntries.map(([type, config]) => (
261264
<ConnectorTypeCard
@@ -265,7 +268,7 @@ export function AddConnectorModal({
265268
/>
266269
))}
267270
{filteredEntries.length === 0 && (
268-
<div className='rounded-lg bg-[var(--surface-3)] px-3 py-8 text-center text-[var(--text-muted)] text-small'>
271+
<div className='rounded-lg bg-[var(--surface-3)] px-3 py-8 text-center text-[var(--text-muted)] text-caption'>
269272
{CONNECTOR_ENTRIES.length === 0
270273
? 'No connectors available.'
271274
: `No sources found matching "${searchTerm}"`}
@@ -301,7 +304,6 @@ export function AddConnectorModal({
301304
<div className='flex flex-col gap-2'>
302305
<Label>Account</Label>
303306
<Combobox
304-
size='sm'
305307
options={[
306308
...credentials.map(
307309
(cred): ComboboxOption => ({
@@ -325,11 +327,7 @@ export function AddConnectorModal({
325327
onOpenChange={(isOpen) => {
326328
if (isOpen) void refetchCredentials()
327329
}}
328-
placeholder={
329-
credentials.length === 0
330-
? `No ${connectorConfig.name} accounts`
331-
: 'Select account'
332-
}
330+
placeholder={`Select ${connectorConfig.name} account`}
333331
isLoading={credentialsLoading}
334332
/>
335333
</div>
@@ -348,9 +346,7 @@ export function AddConnectorModal({
348346
<div className='flex items-center gap-1'>
349347
<Label>
350348
{field.title}
351-
{field.required && (
352-
<span className='ml-0.5 text-[var(--text-error)]'>*</span>
353-
)}
349+
{field.required && <span className='ml-0.5'>*</span>}
354350
</Label>
355351
{field.description && (
356352
<Tooltip.Root>
@@ -401,7 +397,6 @@ export function AddConnectorModal({
401397
/>
402398
) : field.type === 'dropdown' && field.options ? (
403399
<Combobox
404-
size='sm'
405400
options={field.options.map((opt) => ({
406401
label: opt.label,
407402
value: opt.id,
@@ -432,44 +427,42 @@ export function AddConnectorModal({
432427
{connectorConfig.tagDefinitions && connectorConfig.tagDefinitions.length > 0 && (
433428
<div className='flex flex-col gap-2'>
434429
<Label>Metadata Tags</Label>
435-
<div className='flex flex-col gap-0.5 rounded-lg border border-[var(--border-muted)] bg-[var(--surface-2)] p-1'>
436-
{connectorConfig.tagDefinitions.map((tagDef) => (
437-
<div
438-
key={tagDef.id}
439-
role='checkbox'
440-
aria-checked={!disabledTagIds.has(tagDef.id)}
441-
tabIndex={0}
442-
className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-small transition-colors hover-hover:bg-[var(--surface-active)]'
443-
onClick={() => toggleTagDefinition(tagDef.id)}
444-
onKeyDown={(event) => {
445-
if (event.target !== event.currentTarget) return
446-
handleKeyboardActivation(event, () => toggleTagDefinition(tagDef.id))
430+
{connectorConfig.tagDefinitions.map((tagDef) => (
431+
<div
432+
key={tagDef.id}
433+
role='checkbox'
434+
aria-checked={!disabledTagIds.has(tagDef.id)}
435+
tabIndex={0}
436+
className='flex cursor-pointer items-center gap-2 rounded-sm p-0.5 text-small'
437+
onClick={() => toggleTagDefinition(tagDef.id)}
438+
onKeyDown={(event) => {
439+
if (event.target !== event.currentTarget) return
440+
handleKeyboardActivation(event, () => toggleTagDefinition(tagDef.id))
441+
}}
442+
>
443+
<Checkbox
444+
checked={!disabledTagIds.has(tagDef.id)}
445+
onClick={(e) => e.stopPropagation()}
446+
onCheckedChange={(checked) => {
447+
setDisabledTagIds((prev) => {
448+
const next = new Set(prev)
449+
if (checked) {
450+
next.delete(tagDef.id)
451+
} else {
452+
next.add(tagDef.id)
453+
}
454+
return next
455+
})
447456
}}
448-
>
449-
<Checkbox
450-
checked={!disabledTagIds.has(tagDef.id)}
451-
onClick={(e) => e.stopPropagation()}
452-
onCheckedChange={(checked) => {
453-
setDisabledTagIds((prev) => {
454-
const next = new Set(prev)
455-
if (checked) {
456-
next.delete(tagDef.id)
457-
} else {
458-
next.add(tagDef.id)
459-
}
460-
return next
461-
})
462-
}}
463-
/>
464-
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
465-
{tagDef.displayName}
466-
</span>
467-
<span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
468-
{tagDef.fieldType}
469-
</span>
470-
</div>
471-
))}
472-
</div>
457+
/>
458+
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
459+
{tagDef.displayName}
460+
</span>
461+
<span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
462+
({tagDef.fieldType})
463+
</span>
464+
</div>
465+
))}
473466
</div>
474467
)}
475468

@@ -550,18 +543,19 @@ function ConnectorTypeCard({ config, onClick }: ConnectorTypeCardProps) {
550543
const Icon = config.icon
551544

552545
return (
553-
<button
546+
<Button
554547
type='button'
555-
className='group flex items-center gap-2.5 rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
548+
variant='ghost'
549+
className='group flex min-h-10 w-full justify-start gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
556550
onClick={onClick}
557551
>
558-
<div className='flex size-9 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--surface-4)] transition-colors group-hover:bg-[var(--surface-5)]'>
559-
<Icon className='size-[18px] text-[var(--text-secondary)]' />
560-
</div>
552+
<Icon className='size-[18px] flex-shrink-0' />
561553
<div className='flex min-w-0 flex-1 flex-col gap-[1px]'>
562-
<span className='truncate text-[14px] text-[var(--text-body)]'>{config.name}</span>
563-
<span className='truncate text-[var(--text-muted)] text-xs'>{config.description}</span>
554+
<span className='truncate font-medium text-[var(--text-body)] text-small'>
555+
{config.name}
556+
</span>
557+
<span className='truncate text-[var(--text-muted)] text-caption'>{config.description}</span>
564558
</div>
565-
</button>
559+
</Button>
566560
)
567561
}

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field/connector-selector-field.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export function ConnectorSelectorField({
7272

7373
if (isLoading && isEnabled) {
7474
return (
75-
<div className='flex items-center gap-2 rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 text-[var(--text-muted)] text-caption'>
75+
<div className='flex items-center gap-2 rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium text-[var(--text-muted)] text-sm'>
7676
<Loader className='size-3.5' animate />
7777
Loading…
7878
</div>
@@ -84,7 +84,6 @@ export function ConnectorSelectorField({
8484
return (
8585
<Combobox
8686
multiSelect
87-
size='sm'
8887
options={comboboxOptions}
8988
multiSelectValues={multiValues}
9089
onMultiSelectChange={(values) => onChange(values)}
@@ -106,7 +105,6 @@ export function ConnectorSelectorField({
106105
const singleValue = Array.isArray(value) ? value[0] : value
107106
return (
108107
<Combobox
109-
size='sm'
110108
options={comboboxOptions}
111109
value={singleValue || undefined}
112110
onChange={(next) => onChange(next)}

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ function SettingsTab({
388388
<div className='flex items-center gap-1'>
389389
<Label>
390390
{field.title}
391-
{field.required && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
391+
{field.required && <span className='ml-0.5'>*</span>}
392392
</Label>
393393
{field.description && (
394394
<Tooltip.Root>
@@ -437,7 +437,6 @@ function SettingsTab({
437437
/>
438438
) : field.type === 'dropdown' && field.options ? (
439439
<Combobox
440-
size='sm'
441440
options={field.options.map((opt) => ({
442441
label: opt.label,
443442
value: opt.id,

0 commit comments

Comments
 (0)