From 087882cd9049895326857afb97d89e127fb2abfc Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 13 Aug 2024 19:57:51 +0800
Subject: [PATCH] added PartnerIcon

---
 .../Home/ProjectList/ProjectList.tsx          |  9 ++--
 .../Integrations/OrganizationPicker.tsx       |  2 +
 .../layouts/AccountLayout/WithSidebar.tsx     | 16 ++++---
 .../AppLayout/OrganizationDropdown.tsx        |  6 ++-
 apps/studio/components/ui/partner-icon.tsx    | 44 +++++++++++++++++++
 5 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 apps/studio/components/ui/partner-icon.tsx

diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index 29ee738b473..2c477479df5 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -18,9 +18,10 @@ import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
 import { makeRandomString } from 'lib/helpers'
 import { Plus } from 'lucide-react'
 import type { Organization, ResponseError } from 'types'
-import { Button, cn } from 'ui'
+import { Button, cn, Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui'
 import ProjectCard from './ProjectCard'
 import ShimmeringCard from './ShimmeringCard'
+import { PartnerIcon } from 'components/ui/partner-icon'
 
 export interface ProjectListProps {
   rewriteHref?: (projectRef: string) => string
@@ -222,8 +223,10 @@ const OrganizationProjects = ({
   return (
     <div className="space-y-3" key={organization.slug}>
       <div className="flex space-x-4 items-center">
-        <h4 className="text-lg flex items-center">{organization.name}</h4>
-
+        <div className="flex items-center gap-2">
+          <h4 className="text-lg flex items-center">{organization.name}</h4>{' '}
+          <PartnerIcon organizationSlug={organization.slug} />
+        </div>
         {!!overdueInvoices.length && (
           <div>
             <Button asChild type="danger">
diff --git a/apps/studio/components/interfaces/Integrations/OrganizationPicker.tsx b/apps/studio/components/interfaces/Integrations/OrganizationPicker.tsx
index 1953efb56ad..ec6ef34e670 100644
--- a/apps/studio/components/interfaces/Integrations/OrganizationPicker.tsx
+++ b/apps/studio/components/interfaces/Integrations/OrganizationPicker.tsx
@@ -1,4 +1,5 @@
 import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils'
+import { PartnerIcon } from 'components/ui/partner-icon'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import type { IntegrationName } from 'data/integrations/integrations.types'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
@@ -111,6 +112,7 @@ const OrganizationPicker = ({
                         setOpen(false)
                       }}
                     >
+                      <PartnerIcon organizationSlug={org.slug} />
                       <span className="truncate">{org.name}</span>{' '}
                       {configurationId && installed[org.slug] && (
                         <Badge className="!flex-none">Integration Installed</Badge>
diff --git a/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx b/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
index 4dafdbb9c76..df53e13e6ad 100644
--- a/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
+++ b/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
@@ -6,6 +6,7 @@ import { useFlag } from 'hooks/ui/useFlag'
 import { Badge, IconArrowUpRight, IconLogOut, Menu } from 'ui'
 import { LayoutHeader } from '../ProjectLayout/LayoutHeader'
 import type { SidebarLink, SidebarSection } from './AccountLayout.types'
+import { PartnerIcon } from 'components/ui/partner-icon'
 
 interface WithSidebarProps {
   title: string
@@ -202,12 +203,15 @@ const SidebarLinkItem = ({
             <IconArrowUpRight size={'tiny'} />
           </span>
         )}
-        <span
-          title={label}
-          className="w-full truncate text-sm text-foreground-light transition group-hover:text-foreground"
-        >
-          {isSubitem ? <p>{label}</p> : label}
-        </span>
+        <div className="flex items-center gap-1.5 flex-shrink-0">
+          <span
+            title={label}
+            className="w-full truncate text-sm text-foreground-light transition group-hover:text-foreground"
+          >
+            {isSubitem ? <p>{label}</p> : label}
+          </span>
+          <PartnerIcon organizationSlug={id} />
+        </div>
       </span>
     </Link>
   )
diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
index b5ef61ce270..89ac12a69bd 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
@@ -23,6 +23,7 @@ import {
   Popover_Shadcn_,
   ScrollArea,
 } from 'ui'
+import { PartnerIcon } from 'components/ui/partner-icon'
 
 interface OrganizationDropdownProps {
   isNewNav?: boolean
@@ -83,7 +84,10 @@ const OrganizationDropdown = ({ isNewNav = false }: OrganizationDropdownProps) =
                         onClick={() => setOpen(false)}
                       >
                         <Link href={href} className="w-full flex items-center justify-between">
-                          {org.name}
+                          <div className="flex items-center gap-2">
+                            <span>{org.name}</span>
+                            <PartnerIcon organizationSlug={org.slug} />
+                          </div>
                           {org.slug === slug && <Check size={16} />}
                         </Link>
                       </CommandItem_Shadcn_>
diff --git a/apps/studio/components/ui/partner-icon.tsx b/apps/studio/components/ui/partner-icon.tsx
new file mode 100644
index 00000000000..085efe67a68
--- /dev/null
+++ b/apps/studio/components/ui/partner-icon.tsx
@@ -0,0 +1,44 @@
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { Organization } from 'types'
+import { Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui'
+
+export function PartnerIcon({
+  organizationSlug: _organizationSlug,
+}: {
+  organizationSlug: Organization['slug']
+}) {
+  // default is the selected organization
+  let organizationSlug = useSelectedOrganization()?.slug
+
+  if (_organizationSlug) {
+    // if organization is passed, use that instead
+    organizationSlug = _organizationSlug
+  }
+
+  console.log('organizationSlug', organizationSlug)
+
+  // hardcoded to Vercel currently
+  return organizationSlug?.includes('vercel_icfg_') ? (
+    <Tooltip_Shadcn_>
+      <TooltipTrigger_Shadcn_ asChild>
+        <div className="h-5 w-5 bg-surface-100 dark:bg-surface-200 border rounded flex items-center justify-center hover:bg-surface-400 hover:border-stronger flex-shrink-0">
+          <svg
+            className="w-2.5 h-2.5"
+            viewBox="0 0 76 65"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            ∏
+            <path
+              d="M37.5274 0L75.0548 65H0L37.5274 0Z"
+              fill="hsl(var(--foreground-default) / 1)"
+            />
+          </svg>
+        </div>
+      </TooltipTrigger_Shadcn_>
+      <TooltipContent_Shadcn_>
+        This organization is managed by Vercel Marketplace.
+      </TooltipContent_Shadcn_>
+    </Tooltip_Shadcn_>
+  ) : null
+}