ref(roles): optional FE value for flagged feature (#53581)

static/app/components/orgRole.tsx

@@ -26,9 +26,12 @@ export function OrgRoleInfo({
   }, [orgRole, orgRoleList]);
 
   const effectiveOrgRole = useMemo(() => {
+    if (!groupOrgRoles) {
+      return orgRoleFromMember;
+    }
     const memberOrgRoles = groupOrgRoles.map(r => r.role.id).concat([orgRole]);
     return getEffectiveOrgRole(memberOrgRoles, orgRoleList);
-  }, [orgRole, groupOrgRoles, orgRoleList]);
+  }, [orgRole, groupOrgRoles, orgRoleList, orgRoleFromMember]);
 
   useEffect(() => {
     if (!orgRoleFromMember) {
@@ -62,11 +65,7 @@ export function OrgRoleInfo({
     return <Fragment>{t('Error Role')}</Fragment>;
   }
 
-  if (groupOrgRoles.length === 0) {
-    return <Fragment>{orgRoleFromMember.name}</Fragment>;
-  }
-
-  if (!effectiveOrgRole) {
+  if (groupOrgRoles?.length === 0 || !effectiveOrgRole || !groupOrgRoles) {
     return <Fragment>{orgRoleFromMember.name}</Fragment>;
   }
 
@@ -87,14 +86,15 @@ export function OrgRoleInfo({
 
       <div>
         <div>{t('Teams')}:</div>
-        {groupOrgRoles
-          .sort((a, b) => a.teamSlug.localeCompare(b.teamSlug))
-          .map(r => (
-            <TeamRow key={r.teamSlug}>
-              <TeamLink to={`${urlPrefix}teams/${r.teamSlug}/`}>#{r.teamSlug}</TeamLink>
-              <div>: {r.role.name}</div>
-            </TeamRow>
-          ))}
+        {groupOrgRoles &&
+          groupOrgRoles
+            .sort((a, b) => a.teamSlug.localeCompare(b.teamSlug))
+            .map(r => (
+              <TeamRow key={r.teamSlug}>
+                <TeamLink to={`${urlPrefix}teams/${r.teamSlug}/`}>#{r.teamSlug}</TeamLink>
+                <div>: {r.role.name}</div>
+              </TeamRow>
+            ))}
       </div>
 
       <div>

static/app/types/organization.tsx

@@ -125,8 +125,6 @@ export interface Member {
     'sso:invalid': boolean;
     'sso:linked': boolean;
   };
-  // TODO: Move to global store
-  groupOrgRoles: {role: OrgRole; teamSlug: string}[];
   id: string;
   inviteStatus: 'approved' | 'requested_to_be_invited' | 'requested_to_join';
   invite_link: string | null;
@@ -137,7 +135,6 @@ export interface Member {
   orgRoleList: OrgRole[];
   pending: boolean | undefined;
   projects: string[];
-
   /**
    * @deprecated use orgRole
    */
@@ -147,8 +144,9 @@ export interface Member {
    * @deprecated use orgRoleList
    */
   roles: OrgRole[];
+  teamRoleList: TeamRole[];
 
-  teamRoleList: TeamRole[]; // TODO: Move to global store
+  // TODO: Move to global store
   teamRoles: {
     role: string | null;
     teamSlug: string;
@@ -156,11 +154,14 @@ export interface Member {
   /**
    * @deprecated use teamRoles
    */
-  teams: string[]; // # Deprecated, use teamRoles
+  teams: string[];
+  // # Deprecated, use teamRoles
   /**
    * User may be null when the member represents an invited member
    */
   user: User | null;
+  // TODO: Move to global store
+  groupOrgRoles?: {role: OrgRole; teamSlug: string}[];
 }
 
 /**