From bf90f5d0344d64ef1873cdeae28ecb5eebf99813 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Fri, 3 Apr 2026 18:03:33 +0800
Subject: [PATCH] [FE-2942] feat(studio): add partner icon to org selection
 cards (#44513)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../Organization/OrganizationCard.tsx         | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/studio/components/interfaces/Organization/OrganizationCard.tsx b/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
index 49a0b4bad13..492e6024941 100644
--- a/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
+++ b/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
@@ -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>
       }
     />