Skip to content

Commit bf90f5d

Browse files
alaisterclaude
andauthored
[FE-2942] feat(studio): add partner icon to org selection cards (supabase#44513)
Show Vercel/AWS partner badge on organization selection cards, matching the existing behaviour in the org dropdown switcher. Uses the existing `PartnerIcon` component. **Added:** - `PartnerIcon` to `OrganizationCard` – renders alongside the MFA lock icon on the right side of each card <img width="626" height="275" alt="Screenshot 2026-04-03 at 5 36 54 PM" src="https://github.com/user-attachments/assets/f3cd2eb4-bf9d-4b42-b94c-e4636ebf7303" /> ## To test - Verify Vercel-managed orgs show the Vercel triangle badge <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Partner icon now appears in the organization card header next to the MFA/security indicator. * **Style** * Improved alignment and spacing of header elements; MFA tooltip now appears alongside the icon with consistent sizing. * Cleaner grouping of header metadata for easier scanning and visual clarity. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent d970327 commit bf90f5d

File tree

1 file changed

+14
-10
lines changed

1 file changed

+14
-10
lines changed

apps/studio/components/interfaces/Organization/OrganizationCard.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Fragment } from 'react'
55
import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
66

77
import { ActionCard } from '@/components/ui/ActionCard'
8+
import PartnerIcon from '@/components/ui/PartnerIcon'
89
import { useOrgProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
910
import type { Organization } from '@/types'
1011

@@ -49,16 +50,19 @@ export const OrganizationCard = ({
4950
</>
5051
)}
5152
</div>
52-
{isMfaRequired && (
53-
<Tooltip>
54-
<TooltipTrigger className="cursor-default">
55-
<Lock size={12} />
56-
</TooltipTrigger>
57-
<TooltipContent side="bottom" className={!isUserMFAEnabled ? 'w-80' : ''}>
58-
MFA enforced
59-
</TooltipContent>
60-
</Tooltip>
61-
)}
53+
<div className="flex items-center gap-x-2">
54+
<PartnerIcon organization={organization} />
55+
{isMfaRequired && (
56+
<Tooltip>
57+
<TooltipTrigger className="cursor-default">
58+
<Lock size={12} />
59+
</TooltipTrigger>
60+
<TooltipContent side="bottom" className={!isUserMFAEnabled ? 'w-80' : ''}>
61+
MFA enforced
62+
</TooltipContent>
63+
</Tooltip>
64+
)}
65+
</div>
6266
</div>
6367
}
6468
/>

0 commit comments

Comments
 (0)