Skip to content

Commit 042de6a

Browse files
emir-karabegemir-karabeg
authored
fix: modals, settings, panel (#2187)
1 parent f44e7e3 commit 042de6a

File tree

20 files changed

+274
-152
lines changed

20 files changed

+274
-152
lines changed

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@ export function Chat() {
219219
const [chatMessage, setChatMessage] = useState('')
220220
const [promptHistory, setPromptHistory] = useState<string[]>([])
221221
const [historyIndex, setHistoryIndex] = useState(-1)
222+
const [moreMenuOpen, setMoreMenuOpen] = useState(false)
222223

223224
// Refs
224225
const inputRef = useRef<HTMLInputElement>(null)
@@ -836,7 +837,7 @@ export function Chat() {
836837

837838
<div className='flex flex-shrink-0 items-center gap-[8px]'>
838839
{/* More menu with actions */}
839-
<Popover variant='default'>
840+
<Popover variant='default' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
840841
<PopoverTrigger asChild>
841842
<Button
842843
variant='ghost'
@@ -858,6 +859,7 @@ export function Chat() {
858859
onClick={(e) => {
859860
e.stopPropagation()
860861
if (activeWorkflowId) exportChatCSV(activeWorkflowId)
862+
setMoreMenuOpen(false)
861863
}}
862864
disabled={workflowMessages.length === 0}
863865
>
@@ -868,6 +870,7 @@ export function Chat() {
868870
onClick={(e) => {
869871
e.stopPropagation()
870872
if (activeWorkflowId) clearChat(activeWorkflowId)
873+
setMoreMenuOpen(false)
871874
}}
872875
disabled={workflowMessages.length === 0}
873876
>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -780,7 +780,7 @@ function AuthSelector({
780780
<Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
781781
{authType === 'email' ? 'Allowed emails' : 'Allowed SSO emails'}
782782
</Label>
783-
<div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
783+
<div className='scrollbar-hide flex max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
784784
{invalidEmails.map((email, index) => (
785785
<EmailTag
786786
key={`invalid-${index}`}
@@ -798,7 +798,7 @@ function AuthSelector({
798798
disabled={disabled}
799799
/>
800800
))}
801-
<Input
801+
<input
802802
type='text'
803803
value={emailInputValue}
804804
onChange={(e) => setEmailInputValue(e.target.value)}
@@ -810,10 +810,7 @@ function AuthSelector({
810810
? 'Add another email'
811811
: 'Enter emails or domains (@example.com)'
812812
}
813-
className={cn(
814-
'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
815-
emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
816-
)}
813+
className='min-w-[180px] flex-1 border-none bg-transparent p-0 font-medium font-sans text-foreground text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
817814
disabled={disabled}
818815
/>
819816
</div>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx‎

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

33
import { useEffect, useState } from 'react'
4-
import { Loader2, Plus } from 'lucide-react'
4+
import { Loader2 } from 'lucide-react'
55
import { Button, Combobox, Input, Label, Textarea } from '@/components/emcn'
66
import {
77
Modal,
@@ -118,7 +118,7 @@ export function TemplateDeploy({
118118

119119
setLoadingCreators(true)
120120
try {
121-
const response = await fetch('/api/creator-profiles')
121+
const response = await fetch('/api/creators')
122122
if (response.ok) {
123123
const data = await response.json()
124124
const profiles = (data.profiles || []).map((profile: any) => ({
@@ -321,24 +321,23 @@ export function TemplateDeploy({
321321
{creatorOptions.length === 0 && !loadingCreators ? (
322322
<Button
323323
type='button'
324-
variant='outline'
324+
variant='primary'
325325
onClick={() => {
326326
try {
327327
const event = new CustomEvent('open-settings', {
328-
detail: { tab: 'creator-profile' },
328+
detail: { tab: 'template-profile' },
329329
})
330330
window.dispatchEvent(event)
331-
logger.info('Opened Settings modal at creator-profile section')
331+
logger.info('Opened Settings modal at template-profile section')
332332
} catch (error) {
333-
logger.error('Failed to open Settings modal for creator profile', {
333+
logger.error('Failed to open Settings modal for template profile', {
334334
error,
335335
})
336336
}
337337
}}
338338
className='gap-[8px]'
339339
>
340-
<Plus className='h-[14px] w-[14px] text-[var(--text-muted)]' />
341-
<span className='text-[var(--text-muted)]'>Create a Creator Profile</span>
340+
<span>Create Template Profile</span>
342341
</Button>
343342
) : (
344343
<Combobox

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

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

33
import { Check } from 'lucide-react'
4-
import {
5-
Button,
6-
Modal,
7-
ModalContent,
8-
ModalDescription,
9-
ModalFooter,
10-
ModalHeader,
11-
ModalTitle,
12-
} from '@/components/emcn'
4+
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
135
import { client } from '@/lib/auth/auth-client'
146
import { createLogger } from '@/lib/logs/console/logger'
157
import {
@@ -339,63 +331,63 @@ export function OAuthRequiredModal({
339331

340332
return (
341333
<Modal open={isOpen} onOpenChange={(open) => !open && onClose()}>
342-
<ModalContent className='sm:max-w-md'>
343-
<ModalHeader>
344-
<ModalTitle>Additional Access Required</ModalTitle>
345-
<ModalDescription>
346-
The "{toolName}" tool requires access to your {providerName} account to function
347-
properly.
348-
</ModalDescription>
349-
</ModalHeader>
350-
<div className='flex flex-col gap-4 py-4'>
351-
<div className='flex items-center gap-4'>
352-
<div className='rounded-full bg-muted p-2'>
353-
<ProviderIcon className='h-5 w-5' />
354-
</div>
355-
<div className='flex-1'>
356-
<p className='font-medium text-sm'>Connect {providerName}</p>
357-
<p className='text-muted-foreground text-sm'>
358-
You need to connect your {providerName} account to continue
359-
</p>
334+
<ModalContent className='w-[460px]'>
335+
<ModalHeader>Connect {providerName}</ModalHeader>
336+
<ModalBody>
337+
<div className='flex flex-col gap-[16px]'>
338+
<div className='flex items-center gap-[14px]'>
339+
<div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-6)]'>
340+
<ProviderIcon className='h-[18px] w-[18px]' />
341+
</div>
342+
<div className='flex-1'>
343+
<p className='font-medium text-[13px] text-[var(--text-primary)]'>
344+
Connect your {providerName} account
345+
</p>
346+
<p className='text-[12px] text-[var(--text-tertiary)]'>
347+
The "{toolName}" tool requires access to your account
348+
</p>
349+
</div>
360350
</div>
361-
</div>
362351

363-
{displayScopes.length > 0 && (
364-
<div className='rounded-md border bg-muted/50'>
365-
<div className='border-b px-4 py-3'>
366-
<h4 className='font-medium text-sm'>Permissions requested</h4>
352+
{displayScopes.length > 0 && (
353+
<div className='rounded-[8px] border bg-[var(--surface-6)]'>
354+
<div className='border-b px-[14px] py-[10px]'>
355+
<h4 className='font-medium text-[13px] text-[var(--text-primary)]'>
356+
Permissions requested
357+
</h4>
358+
</div>
359+
<ul className='max-h-[330px] space-y-[10px] overflow-y-auto px-[14px] py-[12px]'>
360+
{displayScopes.map((scope) => (
361+
<li key={scope} className='flex items-start gap-[10px]'>
362+
<div className='mt-[3px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
363+
<Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
364+
</div>
365+
<div className='flex-1 text-[12px] text-[var(--text-primary)]'>
366+
<span>{getScopeDescription(scope)}</span>
367+
{newScopesSet.has(scope) && (
368+
<span className='ml-[8px] rounded-[4px] border border-amber-500/30 bg-amber-500/10 px-[6px] py-[2px] text-[10px] text-amber-300'>
369+
New
370+
</span>
371+
)}
372+
</div>
373+
</li>
374+
))}
375+
</ul>
367376
</div>
368-
<ul className='max-h-[400px] space-y-3 overflow-y-auto px-4 py-3'>
369-
{displayScopes.map((scope) => (
370-
<li key={scope} className='flex items-start gap-2 text-sm'>
371-
<div className='mt-1 rounded-full bg-muted p-0.5'>
372-
<Check className='h-3 w-3' />
373-
</div>
374-
<div className='text-muted-foreground'>
375-
<span>{getScopeDescription(scope)}</span>
376-
{newScopesSet.has(scope) && (
377-
<span className='ml-2 rounded-[4px] border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] text-amber-300'>
378-
New
379-
</span>
380-
)}
381-
</div>
382-
</li>
383-
))}
384-
</ul>
385-
</div>
386-
)}
387-
</div>
377+
)}
378+
</div>
379+
</ModalBody>
388380
<ModalFooter>
389-
<Button variant='outline' onClick={onClose} className='h-[32px] px-[12px]'>
381+
<Button variant='active' onClick={onClose}>
390382
Cancel
391383
</Button>
392384
<Button
393385
variant='primary'
394386
type='button'
395387
onClick={handleConnectDirectly}
396-
className='h-[32px] px-[12px]'
388+
className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
397389
>
398-
Connect Now
390+
Connect
399391
</Button>
400392
</ModalFooter>
401393
</ModalContent>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -166,18 +166,6 @@ export function Panel() {
166166
setHasHydrated(true)
167167
}, [setHasHydrated])
168168

169-
/**
170-
* Focus Copilot user input when the Copilot tab becomes active or when
171-
* the panel loads with Copilot already selected, after hydration.
172-
*/
173-
useEffect(() => {
174-
if (!_hasHydrated || activeTab !== 'copilot') {
175-
return
176-
}
177-
178-
copilotRef.current?.focusInput()
179-
}, [_hasHydrated, activeTab])
180-
181169
/**
182170
* Handles tab click events
183171
*/

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,13 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
241241
{isLoading ? (
242242
<div className='flex flex-col gap-[16px]'>
243243
<div className='flex flex-col gap-[8px]'>
244-
<Skeleton className='h-[14px] w-[70px]' />
244+
<Skeleton className='h-5 w-[70px]' />
245245
<div className='text-[13px] text-[var(--text-muted)]'>
246-
<Skeleton className='h-[13px] w-[140px]' />
246+
<Skeleton className='h-5 w-[140px]' />
247247
</div>
248248
</div>
249249
<div className='flex flex-col gap-[8px]'>
250-
<Skeleton className='h-[14px] w-[55px]' />
250+
<Skeleton className='h-5 w-[55px]' />
251251
<ApiKeySkeleton />
252252
<ApiKeySkeleton />
253253
</div>
@@ -624,10 +624,10 @@ function ApiKeySkeleton() {
624624
<div className='flex items-center justify-between gap-[12px]'>
625625
<div className='flex min-w-0 flex-col justify-center gap-[1px]'>
626626
<div className='flex items-center gap-[6px]'>
627-
<Skeleton className='h-[14px] w-[80px]' />
628-
<Skeleton className='h-[13px] w-[140px]' />
627+
<Skeleton className='h-5 w-[80px]' />
628+
<Skeleton className='h-5 w-[140px]' />
629629
</div>
630-
<Skeleton className='h-[13px] w-[100px]' />
630+
<Skeleton className='h-5 w-[100px]' />
631631
</div>
632632
<Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
633633
</div>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -752,13 +752,13 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
752752
{isLoading ? (
753753
<>
754754
<div className='flex flex-col gap-[8px]'>
755-
<Skeleton className='h-[14px] w-[70px]' />
755+
<Skeleton className='h-5 w-[70px]' />
756756
<div className='text-[13px] text-[var(--text-muted)]'>
757-
<Skeleton className='h-[13px] w-[160px]' />
757+
<Skeleton className='h-5 w-[160px]' />
758758
</div>
759759
</div>
760760
<div className='flex flex-col gap-[8px]'>
761-
<Skeleton className='h-[14px] w-[55px]' />
761+
<Skeleton className='h-5 w-[55px]' />
762762
{Array.from({ length: 2 }, (_, i) => (
763763
<div key={`personal-${i}`} className={GRID_COLS}>
764764
<Skeleton className='h-9 rounded-[6px]' />

0 commit comments

Comments
 (0)