Skip to content

Commit c115ced

Browse files
waleedlatif1waleedlatif1
committed
standardized modals
1 parent 80d4853 commit c115ced

File tree

26 files changed

+135
-92
lines changed

26 files changed

+135
-92
lines changed

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@ export function DocumentTagsModal({
392392

393393
return (
394394
<Modal open={open} onOpenChange={handleClose}>
395-
<ModalContent>
395+
<ModalContent size='sm'>
396396
<ModalHeader>
397397
<div className='flex items-center justify-between'>
398398
<span>Document Tags</span>
@@ -486,7 +486,7 @@ export function DocumentTagsModal({
486486
/>
487487
)}
488488
{tagNameConflict && (
489-
<span className='text-[11px] text-[var(--text-error)]'>
489+
<span className='text-[12px] text-[var(--text-error)]'>
490490
A tag with this name already exists
491491
</span>
492492
)}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,14 +221,14 @@ export function AddDocumentsModal({
221221

222222
return (
223223
<Modal open={open} onOpenChange={handleClose}>
224-
<ModalContent>
224+
<ModalContent size='md'>
225225
<ModalHeader>Add Documents</ModalHeader>
226226

227227
<ModalBody>
228228
<div className='min-h-0 flex-1 overflow-y-auto'>
229229
<div className='space-y-[12px]'>
230230
{fileError && (
231-
<p className='text-[11px] text-[var(--text-error)] leading-tight'>{fileError}</p>
231+
<p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
232232
)}
233233

234234
<div className='flex flex-col gap-[8px]'>
@@ -336,7 +336,7 @@ export function AddDocumentsModal({
336336
<ModalFooter>
337337
<div className='flex w-full items-center justify-between gap-[12px]'>
338338
{uploadError ? (
339-
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
339+
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
340340
{uploadError.message}
341341
</p>
342342
) : (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
306306
return (
307307
<>
308308
<Modal open={open} onOpenChange={handleClose}>
309-
<ModalContent>
309+
<ModalContent size='sm'>
310310
<ModalHeader>
311311
<div className='flex items-center justify-between'>
312312
<span>Tags</span>
@@ -400,7 +400,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
400400
}}
401401
/>
402402
{tagNameConflict && (
403-
<span className='text-[11px] text-[var(--text-error)]'>
403+
<span className='text-[12px] text-[var(--text-error)]'>
404404
A tag with this name already exists
405405
</span>
406406
)}
@@ -417,7 +417,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
417417
placeholder='Select type'
418418
/>
419419
{!hasAvailableSlots(createTagForm.fieldType) && (
420-
<span className='text-[11px] text-[var(--text-error)]'>
420+
<span className='text-[12px] text-[var(--text-error)]'>
421421
No available slots for this type. Choose a different type.
422422
</span>
423423
)}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function RenameDocumentModal({
7777

7878
return (
7979
<Modal open={open} onOpenChange={onOpenChange}>
80-
<ModalContent>
80+
<ModalContent size='sm'>
8181
<ModalHeader>Rename Document</ModalHeader>
8282
<form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
8383
<ModalBody className='!pb-[16px]'>
@@ -108,7 +108,7 @@ export function RenameDocumentModal({
108108
<ModalFooter>
109109
<div className='flex w-full items-center justify-between gap-[12px]'>
110110
{error ? (
111-
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
111+
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
112112
{error}
113113
</p>
114114
) : (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
332332

333333
return (
334334
<Modal open={open} onOpenChange={handleClose}>
335-
<ModalContent>
335+
<ModalContent size='lg'>
336336
<ModalHeader>Create Knowledge Base</ModalHeader>
337337

338338
<form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
@@ -528,7 +528,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
528528
)}
529529

530530
{fileError && (
531-
<p className='text-[11px] text-[var(--text-error)] leading-tight'>{fileError}</p>
531+
<p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
532532
)}
533533
</div>
534534
</div>
@@ -537,7 +537,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
537537
<ModalFooter>
538538
<div className='flex w-full items-center justify-between gap-[12px]'>
539539
{submitStatus?.type === 'error' || uploadError ? (
540-
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
540+
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
541541
{uploadError?.message || submitStatus?.message}
542542
</p>
543543
) : (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function DeleteKnowledgeBaseModal({
3838
}: DeleteKnowledgeBaseModalProps) {
3939
return (
4040
<Modal open={isOpen} onOpenChange={onClose}>
41-
<ModalContent className='w-[400px]'>
41+
<ModalContent size='sm'>
4242
<ModalHeader>Delete Knowledge Base</ModalHeader>
4343
<ModalBody>
4444
<p className='text-[12px] text-[var(--text-secondary)]'>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export function EditKnowledgeBaseModal({
9898

9999
return (
100100
<Modal open={open} onOpenChange={onOpenChange}>
101-
<ModalContent>
101+
<ModalContent size='sm'>
102102
<ModalHeader>Edit Knowledge Base</ModalHeader>
103103

104104
<form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
@@ -118,7 +118,7 @@ export function EditKnowledgeBaseModal({
118118
data-form-type='other'
119119
/>
120120
{errors.name && (
121-
<p className='text-[11px] text-[var(--text-error)]'>{errors.name.message}</p>
121+
<p className='text-[12px] text-[var(--text-error)]'>{errors.name.message}</p>
122122
)}
123123
</div>
124124

@@ -132,7 +132,7 @@ export function EditKnowledgeBaseModal({
132132
className={cn(errors.description && 'border-[var(--text-error)]')}
133133
/>
134134
{errors.description && (
135-
<p className='text-[11px] text-[var(--text-error)]'>
135+
<p className='text-[12px] text-[var(--text-error)]'>
136136
{errors.description.message}
137137
</p>
138138
)}
@@ -143,7 +143,7 @@ export function EditKnowledgeBaseModal({
143143
<ModalFooter>
144144
<div className='flex w-full items-center justify-between gap-[12px]'>
145145
{error ? (
146-
<p className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-error)] leading-tight'>
146+
<p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
147147
{error}
148148
</p>
149149
) : (

‎apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1261,7 +1261,7 @@ export function NotificationSettings({
12611261
</Modal>
12621262

12631263
<Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
1264-
<ModalContent className='w-[400px]'>
1264+
<ModalContent size='sm'>
12651265
<ModalHeader>Delete Notification</ModalHeader>
12661266
<ModalBody>
12671267
<p className='text-[12px] text-[var(--text-secondary)]'>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx‎

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

3-
import { useMemo } from 'react'
3+
import { useMemo, useState } from 'react'
44
import { createLogger } from '@sim/logger'
55
import { Check } from 'lucide-react'
66
import {
@@ -308,6 +308,7 @@ export function OAuthRequiredModal({
308308
serviceId,
309309
newScopes = [],
310310
}: OAuthRequiredModalProps) {
311+
const [error, setError] = useState<string | null>(null)
311312
const { baseProvider } = parseProvider(provider)
312313
const baseProviderConfig = OAUTH_PROVIDERS[baseProvider]
313314

@@ -348,23 +349,24 @@ export function OAuthRequiredModal({
348349
}, [requiredScopes, newScopesSet])
349350

350351
const handleConnectDirectly = async () => {
352+
setError(null)
353+
351354
try {
352355
const providerId = getProviderIdFromServiceId(serviceId)
353356

354-
onClose()
355-
356357
logger.info('Linking OAuth2:', {
357358
providerId,
358359
requiredScopes,
359360
})
360361

361362
if (providerId === 'trello') {
363+
onClose()
362364
window.location.href = '/api/auth/trello/authorize'
363365
return
364366
}
365367

366368
if (providerId === 'shopify') {
367-
// Pass the current URL so we can redirect back after OAuth
369+
onClose()
368370
const returnUrl = encodeURIComponent(window.location.href)
369371
window.location.href = `/api/auth/shopify/authorize?returnUrl=${returnUrl}`
370372
return
@@ -374,8 +376,10 @@ export function OAuthRequiredModal({
374376
providerId,
375377
callbackURL: window.location.href,
376378
})
377-
} catch (error) {
378-
logger.error('Error initiating OAuth flow:', { error })
379+
onClose()
380+
} catch (err) {
381+
logger.error('Error initiating OAuth flow:', { error: err })
382+
setError('Failed to connect. Please try again.')
379383
}
380384
}
381385

@@ -425,10 +429,12 @@ export function OAuthRequiredModal({
425429
</ul>
426430
</div>
427431
)}
432+
433+
{error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
428434
</div>
429435
</ModalBody>
430436
<ModalFooter>
431-
<Button variant='active' onClick={onClose}>
437+
<Button variant='default' onClick={onClose}>
432438
Cancel
433439
</Button>
434440
<Button variant='tertiary' type='button' onClick={handleConnectDirectly}>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx‎

Lines changed: 76 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { useEffect, useMemo, useRef, useState } from 'react'
22
import { createLogger } from '@sim/logger'
3-
import { AlertCircle, Wand2 } from 'lucide-react'
3+
import { AlertCircle, ArrowUp } from 'lucide-react'
44
import { useParams } from 'next/navigation'
55
import {
66
Badge,
77
Button,
8+
Input,
89
Modal,
910
ModalBody,
1011
ModalContent,
@@ -878,35 +879,53 @@ try {
878879
JSON Schema
879880
</Label>
880881
{schemaError && (
881-
<div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
882+
<div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
882883
<AlertCircle className='h-3 w-3 flex-shrink-0' />
883884
<span className='truncate'>{schemaError}</span>
884885
</div>
885886
)}
886887
</div>
887-
<div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
888+
<div className='flex min-w-0 items-center justify-end gap-[4px]'>
888889
{!isSchemaPromptActive ? (
889-
<button
890-
type='button'
890+
<Button
891+
variant='active'
892+
className='-my-1 h-5 px-2 py-0 text-[11px]'
891893
onClick={handleSchemaWandClick}
892894
disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
893-
className='inline-flex h-[16px] w-[16px] items-center justify-center rounded-full hover:bg-transparent disabled:opacity-50'
894-
aria-label='Generate schema with AI'
895895
>
896-
<Wand2 className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
897-
</button>
896+
Generate
897+
</Button>
898898
) : (
899-
<input
900-
ref={schemaPromptInputRef}
901-
type='text'
902-
value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
903-
onChange={(e) => handleSchemaPromptChange(e.target.value)}
904-
onBlur={handleSchemaPromptBlur}
905-
onKeyDown={handleSchemaPromptKeyDown}
906-
disabled={schemaGeneration.isStreaming}
907-
className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
908-
placeholder='Describe schema...'
909-
/>
899+
<div className='-my-1 flex items-center gap-[4px]'>
900+
<Input
901+
ref={schemaPromptInputRef}
902+
value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
903+
onChange={(e) => handleSchemaPromptChange(e.target.value)}
904+
onBlur={handleSchemaPromptBlur}
905+
onKeyDown={handleSchemaPromptKeyDown}
906+
disabled={schemaGeneration.isStreaming}
907+
className={cn(
908+
'h-5 max-w-[200px] flex-1 text-[11px]',
909+
schemaGeneration.isStreaming && 'text-muted-foreground'
910+
)}
911+
placeholder='Generate...'
912+
/>
913+
<Button
914+
variant='tertiary'
915+
disabled={!schemaPromptInput.trim() || schemaGeneration.isStreaming}
916+
onMouseDown={(e) => {
917+
e.preventDefault()
918+
e.stopPropagation()
919+
}}
920+
onClick={(e) => {
921+
e.stopPropagation()
922+
handleSchemaPromptSubmit()
923+
}}
924+
className='h-[20px] w-[20px] flex-shrink-0 p-0'
925+
>
926+
<ArrowUp className='h-[12px] w-[12px]' />
927+
</Button>
928+
</div>
910929
)}
911930
</div>
912931
</div>
@@ -952,35 +971,53 @@ try {
952971
Code
953972
</Label>
954973
{codeError && !codeGeneration.isStreaming && (
955-
<div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
974+
<div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
956975
<AlertCircle className='h-3 w-3 flex-shrink-0' />
957976
<span className='truncate'>{codeError}</span>
958977
</div>
959978
)}
960979
</div>
961-
<div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
980+
<div className='flex min-w-0 items-center justify-end gap-[4px]'>
962981
{!isCodePromptActive ? (
963-
<button
964-
type='button'
982+
<Button
983+
variant='active'
984+
className='-my-1 h-5 px-2 py-0 text-[11px]'
965985
onClick={handleCodeWandClick}
966986
disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
967-
className='inline-flex h-[16px] w-[16px] items-center justify-center rounded-full hover:bg-transparent disabled:opacity-50'
968-
aria-label='Generate code with AI'
969987
>
970-
<Wand2 className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
971-
</button>
988+
Generate
989+
</Button>
972990
) : (
973-
<input
974-
ref={codePromptInputRef}
975-
type='text'
976-
value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
977-
onChange={(e) => handleCodePromptChange(e.target.value)}
978-
onBlur={handleCodePromptBlur}
979-
onKeyDown={handleCodePromptKeyDown}
980-
disabled={codeGeneration.isStreaming}
981-
className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
982-
placeholder='Describe code...'
983-
/>
991+
<div className='-my-1 flex items-center gap-[4px]'>
992+
<Input
993+
ref={codePromptInputRef}
994+
value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
995+
onChange={(e) => handleCodePromptChange(e.target.value)}
996+
onBlur={handleCodePromptBlur}
997+
onKeyDown={handleCodePromptKeyDown}
998+
disabled={codeGeneration.isStreaming}
999+
className={cn(
1000+
'h-5 max-w-[200px] flex-1 text-[11px]',
1001+
codeGeneration.isStreaming && 'text-muted-foreground'
1002+
)}
1003+
placeholder='Generate...'
1004+
/>
1005+
<Button
1006+
variant='tertiary'
1007+
disabled={!codePromptInput.trim() || codeGeneration.isStreaming}
1008+
onMouseDown={(e) => {
1009+
e.preventDefault()
1010+
e.stopPropagation()
1011+
}}
1012+
onClick={(e) => {
1013+
e.stopPropagation()
1014+
handleCodePromptSubmit()
1015+
}}
1016+
className='h-[20px] w-[20px] flex-shrink-0 p-0'
1017+
>
1018+
<ArrowUp className='h-[12px] w-[12px]' />
1019+
</Button>
1020+
</div>
9841021
)}
9851022
</div>
9861023
</div>

0 commit comments

Comments
 (0)