[FE-2942] feat(studio): add partner icon to org selection cards (#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>
This commit is contained in:
authored and GitHub committed 2026-04-03 18:03:33 +08:00
1 parent d970327ef7
commit bf90f5d034
1 file changed
+14 -10
@@ -5,6 +5,7 @@ import { Fragment } from 'react'
import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { ActionCard } from '@/components/ui/ActionCard'
import PartnerIcon from '@/components/ui/PartnerIcon'
import { useOrgProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
import type { Organization } from '@/types'
@@ -49,16 +50,19 @@ export const OrganizationCard = ({
</>
)}
</div>
{isMfaRequired && (
<Tooltip>
<TooltipTrigger className="cursor-default">
<Lock size={12} />
</TooltipTrigger>
<TooltipContent side="bottom" className={!isUserMFAEnabled ? 'w-80' : ''}>
MFA enforced
</TooltipContent>
</Tooltip>
)}
<div className="flex items-center gap-x-2">
<PartnerIcon organization={organization} />
{isMfaRequired && (
<Tooltip>
<TooltipTrigger className="cursor-default">
<Lock size={12} />
</TooltipTrigger>
<TooltipContent side="bottom" className={!isUserMFAEnabled ? 'w-80' : ''}>
MFA enforced
</TooltipContent>
</Tooltip>
)}
</div>
</div>
}
/>