Skip to content

Commit 9664e7e

Browse files
waleedlatif1waleedlatif1
authored
Revert "fix(integrations): read every service mark from one registry (#6682)" (#6707)
This reverts commit b7a5f22.
1 parent b7a5f22 commit 9664e7e

37 files changed

Lines changed: 1692 additions & 388 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/components/connect-oauth-modal/connect-oauth-modal.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,13 @@ import { useSession } from '@/lib/auth/auth-client'
1919
import type { OAuthReturnContext } from '@/lib/credentials/client-state'
2020
import { ADD_CONNECTOR_SEARCH_PARAM, writeOAuthReturnContext } from '@/lib/credentials/client-state'
2121
import { defaultCredentialDisplayName } from '@/lib/credentials/display-name'
22-
import { resolveIntegrationBlockTypeForOAuth } from '@/lib/integrations'
2322
import {
2423
getProviderIdFromServiceId,
2524
OAUTH_PROVIDERS,
2625
type OAuthProvider,
2726
parseProvider,
2827
} from '@/lib/oauth'
2928
import { getScopeDescription, getServiceConfigByProviderId } from '@/lib/oauth/utils'
30-
import { BlockTile } from '@/blocks/block-tile'
3129
import { useCreateCredentialDraft, useWorkspaceCredentials } from '@/hooks/queries/credentials'
3230
import { useConnectOAuthService } from '@/hooks/queries/oauth/oauth-connections'
3331

@@ -175,20 +173,6 @@ export function ConnectOAuthModal(props: ConnectOAuthModalProps) {
175173
return resolveService(provider, props.serviceId ?? providerId)
176174
}, [props.serviceName, props.serviceIcon, props.provider, props.serviceId, providerId])
177175

178-
/**
179-
* The block behind this OAuth identity, so the dialog wears the same brand
180-
* tile the canvas and the integrations catalog do. Falls back to the bare
181-
* `OAUTH_PROVIDERS` mark for an id no catalog integration claims.
182-
*/
183-
const headerIcon = useMemo(() => {
184-
const blockType = resolveIntegrationBlockTypeForOAuth(
185-
props.serviceId,
186-
props.provider,
187-
providerId
188-
)
189-
return blockType ? <BlockTile blockType={blockType} size='md' /> : ProviderIcon
190-
}, [props.serviceId, props.provider, providerId, ProviderIcon])
191-
192176
const workspaceId = isConnect ? props.workspaceId : ''
193177
const { data: credentials = [], isPending: credentialsLoading } = useWorkspaceCredentials({
194178
workspaceId,
@@ -359,7 +343,7 @@ export function ConnectOAuthModal(props: ConnectOAuthModalProps) {
359343

360344
return (
361345
<ChipModal open={open} onOpenChange={onOpenChange} srTitle={title}>
362-
<ChipModalHeader icon={headerIcon} onClose={handleClose}>
346+
<ChipModalHeader icon={ProviderIcon} onClose={handleClose}>
363347
{title}
364348
</ChipModalHeader>
365349
<ChipModalBody>

‎apps/sim/app/workspace/[workspaceId]/components/provider-icon/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/sim/app/workspace/[workspaceId]/components/provider-icon/provider-icon.tsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ export function useAvailableResources(
258258
id: integration.blockType,
259259
name: integration.name,
260260
iconComponent: integration.icon,
261+
bgColor: integration.bgColor,
261262
})),
262263
},
263264
{

‎apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { randomFloat } from '@sim/utils/random'
77
import { stripVersionSuffix } from '@sim/utils/string'
88
import { useParams } from 'next/navigation'
99
import { usePostHog } from 'posthog-js/react'
10+
import { GmailIcon, SlackIcon } from '@/components/icons'
1011
import {
1112
INTEGRATIONS,
1213
type OAuthServiceMatch,
@@ -15,7 +16,6 @@ import {
1516
} from '@/lib/integrations'
1617
import { captureEvent } from '@/lib/posthog/client'
1718
import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
18-
import { getBlockTileIcon } from '@/blocks/accent'
1919
import { getBareIconStyle } from '@/blocks/brand-icon-style'
2020
import { getAllBlockMeta } from '@/blocks/registry'
2121
import type { ModuleTag } from '@/blocks/types'
@@ -224,37 +224,27 @@ function computeActions(services: readonly ServiceInfo[], signals: Signals): Act
224224
return [...integrations, ...prompts]
225225
}
226226

227-
/**
228-
* Integrations pinned to the first paint. Named by block type so the mark comes
229-
* from the same registry every other surface reads, rather than a second copy
230-
* imported here that could drift from the block's own icon.
231-
*/
232-
const INITIAL_INTEGRATIONS = [
233-
{ blockType: 'slack', slug: 'slack', name: 'Slack' },
234-
{ blockType: 'gmail', slug: 'gmail', name: 'Gmail' },
235-
] as const
236-
237227
/**
238228
* Initial actions rendered on first paint, before OAuth/credentials queries
239229
* resolve. For users with no connections this is also the final result, so the
240230
* section never flashes. Users with existing connections briefly see this
241231
* before the personalized recompute replaces it.
242232
*/
243233
const INITIAL_ACTIONS: Action[] = [
244-
...INITIAL_INTEGRATIONS.flatMap<Action>(({ blockType, slug, name }) => {
245-
const icon = getBlockTileIcon(blockType)
246-
return icon
247-
? [
248-
{
249-
kind: 'integration',
250-
id: `integrate-${slug}`,
251-
label: `Integrate with ${name}`,
252-
icon,
253-
slug,
254-
},
255-
]
256-
: []
257-
}),
234+
{
235+
kind: 'integration',
236+
id: 'integrate-slack',
237+
label: 'Integrate with Slack',
238+
icon: SlackIcon,
239+
slug: 'slack',
240+
},
241+
{
242+
kind: 'integration',
243+
id: 'integrate-gmail',
244+
label: 'Integrate with Gmail',
245+
icon: GmailIcon,
246+
slug: 'gmail',
247+
},
258248
toPromptAction(TABLE_STARTERS[0]),
259249
...CANDIDATES.filter((c) => c.blockType === 'github' && c.featured)
260250
.slice(0, 1)

‎apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ import { useQueryState } from 'nuqs'
88
import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
99
import { isChatEnabled } from '@/lib/core/config/env-flags'
1010
import {
11+
blockTypeToIconMap,
1112
type Integration,
1213
resolveCredentialDisplay,
1314
resolveOAuthServiceForIntegration,
1415
} from '@/lib/integrations'
1516
import { credentialProviderMatchesService } from '@/lib/oauth'
1617
import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
18+
import { RESOURCE_TILE_BASE } from '@/app/workspace/[workspaceId]/components/resource-tile'
1719
import { IntegrationSkillsSection } from '@/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section'
1820
import { connectParam } from '@/app/workspace/[workspaceId]/integrations/[block]/search-params'
1921
import {
@@ -32,7 +34,7 @@ import {
3234
SettingsResourceRow,
3335
} from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row'
3436
import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
35-
import { getBlockTileIcon } from '@/blocks/accent'
37+
import { getTileIconColorClass } from '@/blocks/icon-color'
3638
import { storeCuratedPrompt } from '@/blocks/integration-matcher'
3739
import {
3840
getSuggestedSkillsForBlock,
@@ -62,6 +64,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
6264
useOAuthReturnRouter()
6365
const router = useRouter()
6466
const [connectMode, setConnectMode] = useQueryState(connectParam.key, connectParam.parser)
67+
const Icon = blockTypeToIconMap[integration.type]
6568
const matchingTemplates = getTemplatesForBlock(integration.type)
6669
const suggestedSkills = getSuggestedSkillsForBlock(integration.type)
6770
const oauthService = resolveOAuthServiceForIntegration(integration)
@@ -230,10 +233,16 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
230233
>
231234
<div className='mx-auto flex max-w-[48rem] flex-col gap-7 pb-3'>
232235
<div className='flex flex-col gap-3'>
233-
<IntegrationTile
234-
blockType={integration.type}
235-
fallbackLabel={integration.name.charAt(0)}
236-
/>
236+
{Icon ? (
237+
<IntegrationTile blockType={integration.type} icon={Icon} />
238+
) : (
239+
<div
240+
className={cn(RESOURCE_TILE_BASE, getTileIconColorClass(integration.bgColor))}
241+
style={{ background: integration.bgColor }}
242+
>
243+
{integration.name.charAt(0)}
244+
</div>
245+
)}
237246
<div className='flex flex-col gap-1'>
238247
<h1 className='text-[var(--text-body)] text-lg'>{integration.name}</h1>
239248
<p className='text-[var(--text-muted)] text-md'>{integration.description}</p>
@@ -246,7 +255,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
246255
<SettingsResourceRow
247256
key={credential.id}
248257
iconVariant='custom'
249-
icon={<IntegrationTile blockType={integration.type} />}
258+
icon={Icon && <IntegrationTile blockType={integration.type} icon={Icon} />}
250259
title={credential.displayName}
251260
description={
252261
credential.description || resolveCredentialDisplay(credential).subtitle
@@ -365,7 +374,8 @@ function TemplateIcons({ blockTypes }: TemplateIconsProps) {
365374
return (
366375
<span aria-hidden className='flex items-center'>
367376
{blockTypes.map((bt, idx) => {
368-
if (!getBlockTileIcon(bt)) return null
377+
const ToolIcon = blockTypeToIconMap[bt]
378+
if (!ToolIcon) return null
369379
const z = TEMPLATE_TILE_Z[idx]
370380
if (!z) return null
371381
const isTrailing = idx > 0
@@ -379,7 +389,7 @@ function TemplateIcons({ blockTypes }: TemplateIconsProps) {
379389
'outline outline-2 outline-[var(--bg)] transition-[outline-color] duration-150 group-hover:outline-[var(--surface-active)]'
380390
)}
381391
>
382-
<IntegrationTile blockType={bt} />
392+
<IntegrationTile blockType={bt} icon={ToolIcon} />
383393
</span>
384394
)
385395
})}

‎apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
RESOURCE_TILE_PLAIN,
66
} from '@/app/workspace/[workspaceId]/components/resource-tile'
77
import { getBlock } from '@/blocks'
8-
import { getBlockTileIcon } from '@/blocks/accent'
98
import { getTileIconColorClass } from '@/blocks/icon-color'
109

1110
/**
@@ -60,15 +59,7 @@ function resolveBrandTileBg(blockType: string): string | null {
6059

6160
interface IntegrationTileProps {
6261
blockType: string
63-
/**
64-
* Overrides the block's registered mark. Only for a tile whose identity is
65-
* not the block itself — a credential issued by a family service account
66-
* wears the family's corporate mark. Everything else takes the registry's,
67-
* so the tile cannot end up with its fill and its icon from two sources.
68-
*/
69-
icon?: ComponentType<{ className?: string }>
70-
/** Drawn when neither the override nor the registry supplies a mark. */
71-
fallbackLabel?: string
62+
icon: ComponentType<{ className?: string }>
7263
framed?: boolean
7364
}
7465

@@ -77,37 +68,27 @@ interface IntegrationTileProps {
7768
* is a 36px tile used in list rows and headers; the framed variant adds an
7869
* outer 44px halo used inside the showcase grid.
7970
*/
80-
export function IntegrationTile({
81-
blockType,
82-
icon,
83-
fallbackLabel,
84-
framed = false,
85-
}: IntegrationTileProps) {
71+
export function IntegrationTile({ blockType, icon: Icon, framed = false }: IntegrationTileProps) {
8672
const brandBg = resolveBrandTileBg(blockType)
87-
const Icon = icon ?? getBlockTileIcon(blockType)
88-
const contentClass = getTileIconColorClass(brandBg)
8973

9074
if (!framed) {
9175
return (
9276
<div
93-
className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN, !Icon && contentClass)}
77+
className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}
9478
style={brandBg ? { background: brandBg } : undefined}
9579
>
96-
{Icon ? <Icon className={contentClass} /> : fallbackLabel}
80+
<Icon className={getTileIconColorClass(brandBg)} />
9781
</div>
9882
)
9983
}
10084

10185
return (
10286
<div className='size-11 flex-shrink-0 rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-sm dark:bg-[var(--surface-5)]'>
10387
<div
104-
className={cn(
105-
'flex size-full items-center justify-center rounded-[9px] border border-[var(--border-1)] bg-[var(--bg)]',
106-
!Icon && contentClass
107-
)}
88+
className='flex size-full items-center justify-center rounded-[9px] border border-[var(--border-1)] bg-[var(--bg)]'
10889
style={brandBg ? { background: brandBg } : undefined}
10990
>
110-
{Icon ? <Icon className={cn('size-6', contentClass)} /> : fallbackLabel}
91+
<Icon className={cn('size-6', getTileIconColorClass(brandBg))} />
11192
</div>
11293
</div>
11394
)

‎apps/sim/app/workspace/[workspaceId]/integrations/connected/[credentialId]/connected-credential-detail.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ChipInput,
99
ChipLink,
1010
ChipTextarea,
11+
cn,
1112
Send,
1213
toast,
1314
} from '@sim/emcn'
@@ -27,6 +28,10 @@ import {
2728
UnsavedChangesModal,
2829
useCredentialDetailForm,
2930
} from '@/app/workspace/[workspaceId]/components/credential-detail'
31+
import {
32+
RESOURCE_TILE_BASE,
33+
RESOURCE_TILE_PLAIN,
34+
} from '@/app/workspace/[workspaceId]/components/resource-tile'
3035
import {
3136
ConnectServiceAccountModal,
3237
type ServiceAccountProviderId,
@@ -239,11 +244,15 @@ export function ConnectedCredentialDetail({
239244
<CredentialDetailLayout back={back} actions={actions}>
240245
<CredentialDetailHeading
241246
leading={
242-
<IntegrationTile
243-
blockType={integrationBlockType}
244-
icon={display?.icon ?? undefined}
245-
fallbackLabel={resolveProviderLabel(credential.providerId).slice(0, 1) || '?'}
246-
/>
247+
display?.icon ? (
248+
<IntegrationTile blockType={integrationBlockType} icon={display.icon} />
249+
) : (
250+
<div className={cn(RESOURCE_TILE_BASE, RESOURCE_TILE_PLAIN)}>
251+
<span className='text-[var(--text-tertiary)] text-small'>
252+
{resolveProviderLabel(credential.providerId).slice(0, 1) || '?'}
253+
</span>
254+
</div>
255+
)
247256
}
248257
title={headingTitle}
249258
subtitle={display?.detailSubtitle ?? 'Connected service'}

0 commit comments

Comments
 (0)