Skip to content

Commit 06d2db7

Browse files
emir-karabegemir-karabeg
authored
improvement(kb): modals, page layouts (#2330)
1 parent 516dee1 commit 06d2db7

File tree

3 files changed

+136
-107
lines changed

3 files changed

+136
-107
lines changed

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -928,9 +928,22 @@ export function KnowledgeBase({
928928
Tags
929929
</Button>
930930
)}
931-
<Button onClick={() => setShowDeleteDialog(true)} className='h-[32px] rounded-[6px]'>
932-
<Trash className='h-[14px] w-[14px]' />
933-
</Button>
931+
<Tooltip.Root>
932+
<Tooltip.Trigger asChild>
933+
<Button
934+
onClick={() => setShowDeleteDialog(true)}
935+
disabled={!userPermissions.canEdit}
936+
className='h-[32px] rounded-[6px]'
937+
>
938+
<Trash className='h-[14px] w-[14px]' />
939+
</Button>
940+
</Tooltip.Trigger>
941+
{!userPermissions.canEdit && (
942+
<Tooltip.Content>
943+
Write permission required to delete knowledge base
944+
</Tooltip.Content>
945+
)}
946+
</Tooltip.Root>
934947
</div>
935948
</div>
936949

@@ -940,7 +953,7 @@ export function KnowledgeBase({
940953
</p>
941954
)}
942955

943-
<div className='mt-[12px] flex items-center gap-[8px]'>
956+
<div className='mt-[16px] flex items-center gap-[8px]'>
944957
<span className='text-[14px] text-[var(--text-muted)]'>
945958
{pagination.total} {pagination.total === 1 ? 'document' : 'documents'}
946959
</span>

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

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useEffect, useRef, useState } from 'react'
4-
import { AlertCircle, Loader2, RotateCcw, X } from 'lucide-react'
4+
import { Loader2, RotateCcw, X } from 'lucide-react'
55
import { useParams } from 'next/navigation'
66
import {
77
Button,
@@ -283,11 +283,11 @@ export function AddDocumentsModal({
283283
return (
284284
<div
285285
key={index}
286-
className='flex items-center gap-2 rounded-[4px] border p-[8px]'
287-
>
288-
{isFailed && !isRetrying && (
289-
<AlertCircle className='h-4 w-4 flex-shrink-0 text-[var(--text-error)]' />
286+
className={cn(
287+
'flex items-center gap-2 rounded-[4px] border p-[8px]',
288+
isFailed && !isRetrying && 'border-[var(--text-error)]'
290289
)}
290+
>
291291
<span
292292
className={cn(
293293
'min-w-0 flex-1 truncate text-[12px]',
@@ -301,29 +301,31 @@ export function AddDocumentsModal({
301301
{formatFileSize(file.size)}
302302
</span>
303303
<div className='flex flex-shrink-0 items-center gap-1'>
304-
{isFailed && !isRetrying && (
305-
<Button
306-
type='button'
307-
variant='ghost'
308-
className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
309-
onClick={() => handleRetryFile(index)}
310-
disabled={isUploading}
311-
>
312-
<RotateCcw className='h-3.5 w-3.5' />
313-
</Button>
314-
)}
315304
{isProcessing ? (
316305
<Loader2 className='h-4 w-4 animate-spin text-[var(--text-muted)]' />
317306
) : (
318-
<Button
319-
type='button'
320-
variant='ghost'
321-
className='h-4 w-4 p-0'
322-
onClick={() => removeFile(index)}
323-
disabled={isUploading}
324-
>
325-
<X className='h-3.5 w-3.5' />
326-
</Button>
307+
<>
308+
{isFailed && (
309+
<Button
310+
type='button'
311+
variant='ghost'
312+
className='h-4 w-4 p-0'
313+
onClick={() => handleRetryFile(index)}
314+
disabled={isUploading}
315+
>
316+
<RotateCcw className='h-3 w-3' />
317+
</Button>
318+
)}
319+
<Button
320+
type='button'
321+
variant='ghost'
322+
className='h-4 w-4 p-0'
323+
onClick={() => removeFile(index)}
324+
disabled={isUploading}
325+
>
326+
<X className='h-3.5 w-3.5' />
327+
</Button>
328+
</>
327329
)}
328330
</div>
329331
</div>
@@ -336,30 +338,34 @@ export function AddDocumentsModal({
336338
</div>
337339
</ModalBody>
338340

339-
<ModalFooter className='flex-col items-stretch gap-[12px]'>
340-
{uploadError && (
341-
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
342-
{uploadError.message}
343-
</p>
344-
)}
345-
<div className='flex justify-end gap-[8px]'>
346-
<Button variant='default' onClick={handleClose} type='button' disabled={isUploading}>
347-
Cancel
348-
</Button>
349-
<Button
350-
variant='primary'
351-
type='button'
352-
onClick={handleUpload}
353-
disabled={files.length === 0 || isUploading}
354-
>
355-
{isUploading
356-
? uploadProgress.stage === 'uploading'
357-
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
358-
: uploadProgress.stage === 'processing'
359-
? 'Processing...'
360-
: 'Uploading...'
361-
: 'Upload'}
362-
</Button>
341+
<ModalFooter>
342+
<div className='flex w-full items-center justify-between gap-[12px]'>
343+
{uploadError ? (
344+
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
345+
{uploadError.message}
346+
</p>
347+
) : (
348+
<div />
349+
)}
350+
<div className='flex flex-shrink-0 gap-[8px]'>
351+
<Button variant='default' onClick={handleClose} type='button' disabled={isUploading}>
352+
Cancel
353+
</Button>
354+
<Button
355+
variant='primary'
356+
type='button'
357+
onClick={handleUpload}
358+
disabled={files.length === 0 || isUploading}
359+
>
360+
{isUploading
361+
? uploadProgress.stage === 'uploading'
362+
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
363+
: uploadProgress.stage === 'processing'
364+
? 'Processing...'
365+
: 'Uploading...'
366+
: 'Upload'}
367+
</Button>
368+
</div>
363369
</div>
364370
</ModalFooter>
365371
</ModalContent>

‎apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx‎

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

33
import { useEffect, useRef, useState } from 'react'
44
import { zodResolver } from '@hookform/resolvers/zod'
5-
import { AlertCircle, Loader2, RotateCcw, X } from 'lucide-react'
5+
import { Loader2, RotateCcw, X } from 'lucide-react'
66
import { useParams } from 'next/navigation'
77
import { useForm } from 'react-hook-form'
88
import { z } from 'zod'
@@ -449,11 +449,11 @@ export function CreateBaseModal({
449449
return (
450450
<div
451451
key={index}
452-
className='flex items-center gap-2 rounded-[4px] border p-[8px]'
453-
>
454-
{isFailed && !isRetrying && (
455-
<AlertCircle className='h-4 w-4 flex-shrink-0 text-[var(--text-error)]' />
452+
className={cn(
453+
'flex items-center gap-2 rounded-[4px] border p-[8px]',
454+
isFailed && !isRetrying && 'border-[var(--text-error)]'
456455
)}
456+
>
457457
<span
458458
className={cn(
459459
'min-w-0 flex-1 truncate text-[12px]',
@@ -467,32 +467,34 @@ export function CreateBaseModal({
467467
{formatFileSize(file.size)}
468468
</span>
469469
<div className='flex flex-shrink-0 items-center gap-1'>
470-
{isFailed && !isRetrying && (
471-
<Button
472-
type='button'
473-
variant='ghost'
474-
className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
475-
onClick={() => {
476-
setRetryingIndexes((prev) => new Set(prev).add(index))
477-
removeFile(index)
478-
}}
479-
disabled={isUploading}
480-
>
481-
<RotateCcw className='h-3.5 w-3.5' />
482-
</Button>
483-
)}
484470
{isProcessing ? (
485471
<Loader2 className='h-4 w-4 animate-spin text-[var(--text-muted)]' />
486472
) : (
487-
<Button
488-
type='button'
489-
variant='ghost'
490-
className='h-4 w-4 p-0'
491-
onClick={() => removeFile(index)}
492-
disabled={isUploading}
493-
>
494-
<X className='h-3.5 w-3.5' />
495-
</Button>
473+
<>
474+
{isFailed && (
475+
<Button
476+
type='button'
477+
variant='ghost'
478+
className='h-4 w-4 p-0'
479+
onClick={() => {
480+
setRetryingIndexes((prev) => new Set(prev).add(index))
481+
removeFile(index)
482+
}}
483+
disabled={isUploading}
484+
>
485+
<RotateCcw className='h-3 w-3' />
486+
</Button>
487+
)}
488+
<Button
489+
type='button'
490+
variant='ghost'
491+
className='h-4 w-4 p-0'
492+
onClick={() => removeFile(index)}
493+
disabled={isUploading}
494+
>
495+
<X className='h-3.5 w-3.5' />
496+
</Button>
497+
</>
496498
)}
497499
</div>
498500
</div>
@@ -509,32 +511,40 @@ export function CreateBaseModal({
509511
</div>
510512
</ModalBody>
511513

512-
<ModalFooter className='flex-col items-stretch gap-[12px]'>
513-
{(submitStatus?.type === 'error' || uploadError) && (
514-
<p className='text-[11px] text-[var(--text-error)] leading-tight'>
515-
{uploadError?.message || submitStatus?.message}
516-
</p>
517-
)}
518-
<div className='flex justify-end gap-[8px]'>
519-
<Button
520-
variant='default'
521-
onClick={() => handleClose(false)}
522-
type='button'
523-
disabled={isSubmitting}
524-
>
525-
Cancel
526-
</Button>
527-
<Button variant='primary' type='submit' disabled={isSubmitting || !nameValue?.trim()}>
528-
{isSubmitting
529-
? isUploading
530-
? uploadProgress.stage === 'uploading'
531-
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
532-
: uploadProgress.stage === 'processing'
533-
? 'Processing...'
534-
: 'Creating...'
535-
: 'Creating...'
536-
: 'Create'}
537-
</Button>
514+
<ModalFooter>
515+
<div className='flex w-full items-center justify-between gap-[12px]'>
516+
{submitStatus?.type === 'error' || uploadError ? (
517+
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
518+
{uploadError?.message || submitStatus?.message}
519+
</p>
520+
) : (
521+
<div />
522+
)}
523+
<div className='flex flex-shrink-0 gap-[8px]'>
524+
<Button
525+
variant='default'
526+
onClick={() => handleClose(false)}
527+
type='button'
528+
disabled={isSubmitting}
529+
>
530+
Cancel
531+
</Button>
532+
<Button
533+
variant='primary'
534+
type='submit'
535+
disabled={isSubmitting || !nameValue?.trim()}
536+
>
537+
{isSubmitting
538+
? isUploading
539+
? uploadProgress.stage === 'uploading'
540+
? `Uploading ${uploadProgress.filesCompleted}/${uploadProgress.totalFiles}...`
541+
: uploadProgress.stage === 'processing'
542+
? 'Processing...'
543+
: 'Creating...'
544+
: 'Creating...'
545+
: 'Create'}
546+
</Button>
547+
</div>
538548
</div>
539549
</ModalFooter>
540550
</form>

0 commit comments

Comments
 (0)