github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-07 22:24:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

improvement: required permissions, oauth modal badge (#2609)

Browse Source
This commit is contained in:
Emir Karabeg
2025-12-27 15:18:03 -08:00
committed by GitHub
parent 2e1ccb16f5
commit fdba1cfac2
3 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,15 @@
import { useMemo } from 'react'
import { createLogger } from '@sim/logger'
import { Check } from 'lucide-react'
import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
import {
Badge,
Button,
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader,
} from '@/components/emcn'
import { client } from '@/lib/auth/auth-client'
import {
getProviderIdFromServiceId,
@@ -407,9 +415,9 @@ export function OAuthRequiredModal({
<div className='flex flex-1 items-center gap-[8px] text-[12px] text-[var(--text-primary)]'>
<span>{getScopeDescription(scope)}</span>
{newScopesSet.has(scope) && (
<span className='inline-flex items-center gap-[6px] rounded-[6px] bg-[#fde68a] px-[7px] py-[1px] font-medium text-[#a16207] text-[11px] dark:bg-[rgba(245,158,11,0.2)] dark:text-[#fcd34d]'>
<Badge variant='amber' size='sm'>
New
</span>
</Badge>
)}
</div>
</li>

21
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
View File

@@ -228,7 +228,7 @@ export function CredentialSelector({
)
return (
<>
<div>
<Combobox
options={comboboxOptions}
value={inputValue}
@@ -247,9 +247,20 @@ export function CredentialSelector({
/>
{needsUpdate && (
<div className='mt-2 flex items-center justify-between rounded-[6px] border border-amber-300/40 bg-amber-50/60 px-2 py-1 font-medium text-[12px] transition-colors dark:bg-amber-950/10'>
<span>Additional permissions required</span>
{!isForeign && <Button onClick={() => setShowOAuthModal(true)}>Update access</Button>}
<div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
<div className='flex items-center font-medium text-[12px]'>
<span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
Additional permissions required
</div>
{!isForeign && (
<Button
variant='active'
onClick={() => setShowOAuthModal(true)}
className='w-full px-[8px] py-[4px] font-medium text-[12px]'
>
Update access
</Button>
)}
</div>
)}
@@ -264,7 +275,7 @@ export function CredentialSelector({
serviceId={serviceId}
/>
)}
</>
</div>
)
}

21
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx
View File

@@ -200,7 +200,7 @@ export function ToolCredentialSelector({
)
return (
<>
<div>
<Combobox
options={comboboxOptions}
value={inputValue}
@@ -217,9 +217,20 @@ export function ToolCredentialSelector({
/>
{needsUpdate && (
<div className='mt-2 flex items-center justify-between rounded-[6px] border border-amber-300/40 bg-amber-50/60 px-2 py-1 font-medium text-[12px] transition-colors dark:bg-amber-950/10'>
<span>Additional permissions required</span>
{!isForeign && <Button onClick={() => setShowOAuthModal(true)}>Update access</Button>}
<div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
<div className='flex items-center font-medium text-[12px]'>
<span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
Additional permissions required
</div>
{!isForeign && (
<Button
variant='active'
onClick={() => setShowOAuthModal(true)}
className='w-full px-[8px] py-[4px] font-medium text-[12px]'
>
Update access
</Button>
)}
</div>
)}
@@ -234,7 +245,7 @@ export function ToolCredentialSelector({
serviceId={serviceId}
/>
)}
</>
</div>
)
}