From 2215362cc816204099908091e8431b60550d07c4 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 21 Oct 2025 14:05:01 -0700
Subject: [PATCH] improvement: add managed by badge to add identity to project
 select

---
 .../server/routes/v2/identity-org-router.ts   |  2 +-
 .../IdentityTab/components/IdentityModal.tsx  | 38 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/backend/src/server/routes/v2/identity-org-router.ts b/backend/src/server/routes/v2/identity-org-router.ts
index 8680a2dca..630e09dda 100644
--- a/backend/src/server/routes/v2/identity-org-router.ts
+++ b/backend/src/server/routes/v2/identity-org-router.ts
@@ -60,7 +60,7 @@ export const registerIdentityOrgRouter = async (server: FastifyZodProvider) => {
                 permissions: true,
                 description: true
               }).optional(),
-              identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
+              identity: IdentitiesSchema.pick({ name: true, id: true, orgId: true }).extend({
                 authMethods: z.array(z.string())
               })
             })
diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/IdentityModal.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/IdentityModal.tsx
index 7261ba839..ce8ca2fbd 100644
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/IdentityModal.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/IdentityModal.tsx
@@ -1,11 +1,16 @@
 import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { components, OptionProps } from "react-select";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import { faGlobe } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Link } from "@tanstack/react-router";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
+  Badge,
   Button,
   FilterableSelect,
   FormControl,
@@ -24,7 +29,7 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z.object({
-  identity: z.object({ name: z.string(), id: z.string() }),
+  identity: z.object({ name: z.string(), id: z.string(), isManagedByRootOrg: z.boolean() }),
   role: z.object({ name: z.string(), slug: z.string() })
 });
 
@@ -35,6 +40,29 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };
 
+const Option = ({
+  isSelected,
+  children,
+  ...props
+}: OptionProps<{ name: string; id: string; isManagedByRootOrg: boolean }>) => {
+  return (
+    <components.Option isSelected={isSelected} {...props}>
+      <div className="flex flex-row items-center justify-between">
+        <p className="truncate">{children}</p>
+        {props.data.isManagedByRootOrg && (
+          <Badge variant="org" className="ml-auto cursor-pointer">
+            <FontAwesomeIcon icon={faGlobe} />
+            Managed by Root Org
+          </Badge>
+        )}
+        {isSelected && (
+          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+        )}
+      </div>
+    </components.Option>
+  );
+};
+
 const Content = ({ popUp, handlePopUpToggle }: Props) => {
   const { currentOrg } = useOrganization();
   const { projectId } = useProject();
@@ -131,9 +159,15 @@ const Content = ({ popUp, handlePopUpToggle }: Props) => {
               value={value}
               onChange={onChange}
               placeholder="Select identity..."
-              options={filteredIdentityMembershipOrgs.map((membership) => membership.identity)}
+              options={filteredIdentityMembershipOrgs.map((membership) => ({
+                ...membership.identity,
+                isManagedByRootOrg: membership.identity.orgId !== currentOrg.id
+              }))}
               getOptionValue={(option) => option.id}
               getOptionLabel={(option) => option.name}
+              components={{
+                Option
+              }}
             />
           </FormControl>
         )}