|
| 1 | +'use client' |
| 2 | + |
| 3 | +import { useState } from 'react' |
| 4 | +import { Chip, ChipConfirmModal, toast } from '@sim/emcn' |
| 5 | +import { ArrowLeft } from '@sim/emcn/icons' |
| 6 | +import { getErrorMessage } from '@sim/utils/errors' |
| 7 | +import type { PersonalOrganizationAccount } from '@/lib/api/contracts/organization-accounts' |
| 8 | +import { getManagedMcpConnectorIcon } from '@/lib/credential-groups/managed-mcp-connector-icons' |
| 9 | +import { |
| 10 | + getManagedMcpConnector, |
| 11 | + isManagedMcpConnectorId, |
| 12 | +} from '@/lib/credential-groups/managed-mcp-connectors' |
| 13 | +import { getServiceConfigByProviderId } from '@/lib/oauth/utils' |
| 14 | +import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu' |
| 15 | +import { |
| 16 | + SettingsEmptyState, |
| 17 | + SettingsQueryErrorState, |
| 18 | +} from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state' |
| 19 | +import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel' |
| 20 | +import { |
| 21 | + RESOURCE_LIST_STACK, |
| 22 | + SettingsResourceRow, |
| 23 | +} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row' |
| 24 | +import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section' |
| 25 | +import { |
| 26 | + useDisconnectPersonalOrganizationAccount, |
| 27 | + usePersonalOrganizationAccounts, |
| 28 | +} from '@/hooks/queries/organization-accounts' |
| 29 | + |
| 30 | +const STATUS_LABELS = { |
| 31 | + active: null, |
| 32 | + needs_reauth: 'Reconnect needed', |
| 33 | + revoked: 'Disconnected', |
| 34 | +} as const satisfies Record<PersonalOrganizationAccount['status'], string | null> |
| 35 | + |
| 36 | +const LOAD_ERROR = 'Failed to load connected accounts' |
| 37 | + |
| 38 | +interface OrganizationAccountsProps { |
| 39 | + onBack: () => void |
| 40 | +} |
| 41 | + |
| 42 | +function accountService(account: PersonalOrganizationAccount) { |
| 43 | + if (account.kind === 'mcp') { |
| 44 | + if (!isManagedMcpConnectorId(account.providerId)) return null |
| 45 | + return { |
| 46 | + name: getManagedMcpConnector(account.providerId).name, |
| 47 | + icon: getManagedMcpConnectorIcon(account.providerId), |
| 48 | + } |
| 49 | + } |
| 50 | + return getServiceConfigByProviderId(account.providerId) |
| 51 | +} |
| 52 | + |
| 53 | +function groupByOrganization(accounts: PersonalOrganizationAccount[]) { |
| 54 | + const groups = new Map<string, { name: string; accounts: PersonalOrganizationAccount[] }>() |
| 55 | + for (const account of accounts) { |
| 56 | + const group = groups.get(account.organizationId) |
| 57 | + if (group) group.accounts.push(account) |
| 58 | + else groups.set(account.organizationId, { name: account.organizationName, accounts: [account] }) |
| 59 | + } |
| 60 | + return [...groups.entries()].sort(([, left], [, right]) => left.name.localeCompare(right.name)) |
| 61 | +} |
| 62 | + |
| 63 | +/** |
| 64 | + * The accounts this person connected for an organization. Membership does not |
| 65 | + * gate it: someone who left an organization still disconnects their own grants |
| 66 | + * here, because the organization's Integrations page is closed to them. |
| 67 | + */ |
| 68 | +export function OrganizationAccounts({ onBack }: OrganizationAccountsProps) { |
| 69 | + const accounts = usePersonalOrganizationAccounts() |
| 70 | + const disconnect = useDisconnectPersonalOrganizationAccount() |
| 71 | + const [pendingDisconnectId, setPendingDisconnectId] = useState<string | null>(null) |
| 72 | + |
| 73 | + const list = accounts.data?.pages.flatMap((page) => page.accounts) ?? [] |
| 74 | + const pendingDisconnect = |
| 75 | + list.find((account) => account.credentialId === pendingDisconnectId) ?? null |
| 76 | + |
| 77 | + const confirmDisconnect = () => { |
| 78 | + if (!pendingDisconnect) return |
| 79 | + disconnect.mutate( |
| 80 | + { |
| 81 | + credentialId: pendingDisconnect.credentialId, |
| 82 | + organizationId: pendingDisconnect.organizationId, |
| 83 | + }, |
| 84 | + { |
| 85 | + onSuccess: () => toast.success(`Disconnected ${pendingDisconnect.displayName}`), |
| 86 | + onError: (error) => toast.error(getErrorMessage(error, 'Failed to disconnect account')), |
| 87 | + onSettled: () => setPendingDisconnectId(null), |
| 88 | + } |
| 89 | + ) |
| 90 | + } |
| 91 | + |
| 92 | + return ( |
| 93 | + <> |
| 94 | + <SettingsPanel |
| 95 | + back={{ text: 'General', icon: ArrowLeft, onSelect: onBack }} |
| 96 | + title='Connected organization accounts' |
| 97 | + description='Disconnect accounts you connected for an organization, including ones you have left.' |
| 98 | + > |
| 99 | + {accounts.isError && accounts.data === undefined ? ( |
| 100 | + <SettingsQueryErrorState |
| 101 | + error={accounts.error} |
| 102 | + fallback={LOAD_ERROR} |
| 103 | + isRetrying={accounts.isFetching} |
| 104 | + onRetry={() => accounts.refetch()} |
| 105 | + /> |
| 106 | + ) : accounts.isPending ? ( |
| 107 | + <SettingsEmptyState>Loading connected accounts…</SettingsEmptyState> |
| 108 | + ) : list.length === 0 ? ( |
| 109 | + <SettingsEmptyState>No accounts connected for an organization</SettingsEmptyState> |
| 110 | + ) : ( |
| 111 | + <> |
| 112 | + {groupByOrganization(list).map(([organizationId, group]) => ( |
| 113 | + <SettingsSection key={organizationId} label={group.name}> |
| 114 | + <div className={RESOURCE_LIST_STACK}> |
| 115 | + {group.accounts.map((account) => { |
| 116 | + const service = accountService(account) |
| 117 | + const statusLabel = STATUS_LABELS[account.status] |
| 118 | + return ( |
| 119 | + <SettingsResourceRow |
| 120 | + key={account.credentialId} |
| 121 | + icon={service ? <service.icon /> : undefined} |
| 122 | + title={account.displayName} |
| 123 | + description={service?.name ?? account.providerId} |
| 124 | + badge={ |
| 125 | + statusLabel && ( |
| 126 | + <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'> |
| 127 | + {statusLabel} |
| 128 | + </span> |
| 129 | + ) |
| 130 | + } |
| 131 | + trailing={ |
| 132 | + account.status !== 'revoked' && ( |
| 133 | + <RowActionsMenu |
| 134 | + label='Connected account actions' |
| 135 | + actions={[ |
| 136 | + { |
| 137 | + label: 'Disconnect', |
| 138 | + destructive: true, |
| 139 | + onSelect: () => setPendingDisconnectId(account.credentialId), |
| 140 | + }, |
| 141 | + ]} |
| 142 | + /> |
| 143 | + ) |
| 144 | + } |
| 145 | + /> |
| 146 | + ) |
| 147 | + })} |
| 148 | + </div> |
| 149 | + </SettingsSection> |
| 150 | + ))} |
| 151 | + {accounts.isError && ( |
| 152 | + <SettingsQueryErrorState |
| 153 | + error={accounts.error} |
| 154 | + fallback={LOAD_ERROR} |
| 155 | + isRetrying={accounts.isFetching} |
| 156 | + onRetry={() => |
| 157 | + accounts.isFetchNextPageError ? accounts.fetchNextPage() : accounts.refetch() |
| 158 | + } |
| 159 | + variant='inline' |
| 160 | + /> |
| 161 | + )} |
| 162 | + {accounts.hasNextPage && !accounts.isError && ( |
| 163 | + <Chip |
| 164 | + fullWidth |
| 165 | + disabled={accounts.isFetching} |
| 166 | + onClick={() => accounts.fetchNextPage()} |
| 167 | + > |
| 168 | + {accounts.isFetchingNextPage ? 'Loading…' : 'Load more'} |
| 169 | + </Chip> |
| 170 | + )} |
| 171 | + </> |
| 172 | + )} |
| 173 | + </SettingsPanel> |
| 174 | + |
| 175 | + <ChipConfirmModal |
| 176 | + open={pendingDisconnect !== null} |
| 177 | + onOpenChange={(open) => { |
| 178 | + if (!open && !disconnect.isPending) setPendingDisconnectId(null) |
| 179 | + }} |
| 180 | + srTitle='Disconnect account' |
| 181 | + title='Disconnect account' |
| 182 | + text={[ |
| 183 | + 'Disconnecting ', |
| 184 | + { text: pendingDisconnect?.displayName ?? 'this account', bold: true }, |
| 185 | + ' removes it from ', |
| 186 | + { text: pendingDisconnect?.organizationName ?? 'the organization', bold: true }, |
| 187 | + '. ', |
| 188 | + { text: 'Workflows using this account will lose access.', error: true }, |
| 189 | + ]} |
| 190 | + confirm={{ |
| 191 | + label: 'Disconnect', |
| 192 | + onClick: confirmDisconnect, |
| 193 | + pending: disconnect.isPending, |
| 194 | + pendingLabel: 'Disconnecting…', |
| 195 | + }} |
| 196 | + /> |
| 197 | + </> |
| 198 | + ) |
| 199 | +} |
0 commit comments