feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;

.changeset/wild-pugs-kick.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+feat(types,clerk-js): Update types; RoleSelect allows fallbackLabel
+- this updates OrganizationInvitation and OrganizationMembership resource+types to include `roleName` which is already present on frontend-api responses, as `role_name`.
+- this updates RoleSelect to allow rendering a `fallbackLabel` in the event that `value` does not map to any of the supplied roles

packages/clerk-js/src/core/resources/OrganizationInvitation.ts

@@ -17,6 +17,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  publicMetadata: OrganizationInvitationPublicMetadata = {};
  status!: OrganizationInvitationStatus;
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -67,6 +68,7 @@ export class OrganizationInvitation extends BaseResource implements Organization
  this.organizationId = data.organization_id;
  this.publicMetadata = data.public_metadata;
  this.role = data.role;
+ this.roleName = data.role_name;
  this.status = data.status;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -21,6 +21,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  organization!: Organization;
  permissions: OrganizationPermissionKey[] = [];
  role!: OrganizationCustomRoleKey;
+ roleName!: string;
  createdAt!: Date;
  updatedAt!: Date;
 
@@ -77,6 +78,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  }
  this.permissions = Array.isArray(data.permissions) ? [...data.permissions] : [];
  this.role = data.role;
+ this.roleName = data.role_name;
  this.createdAt = unixEpochToDate(data.created_at);
  this.updatedAt = unixEpochToDate(data.updated_at);
  return this;
@@ -91,6 +93,7 @@ export class OrganizationMembership extends BaseResource implements Organization
  public_user_data: this.publicUserData?.__internal_toSnapshot(),
  permissions: this.permissions,
  role: this.role,
+ role_name: this.roleName,
  created_at: this.createdAt.getTime(),
  updated_at: this.updatedAt.getTime(),
  };

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationInvitation.test.ts.snap

@@ -12,6 +12,7 @@ OrganizationInvitation {
  },
  "revoke": [Function],
  "role": "basic_member",
+ "roleName": undefined,
  "status": "pending",
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -55,6 +55,7 @@ OrganizationMembership {
  "userId": undefined,
  },
  "role": "admin",
+ "roleName": undefined,
  "update": [Function],
  "updatedAt": 1970-01-01T00:00:05.678Z,
 }

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -110,6 +110,7 @@ const MemberRow = (props: {
  <RoleSelect
  isDisabled={card.isLoading || !onRoleChange}
  value={membership.role}
+ fallbackLabel={membership.roleName}
  onChange={onRoleChange}
  roles={options}
  />

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -134,19 +134,20 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
 export const RoleSelect = (props: {
  roles: { label: string; value: string }[] | undefined;
  value: string;
+ fallbackLabel?: string;
  onChange: (params: string) => unknown;
  isDisabled?: boolean;
  triggerSx?: ThemableCssProp;
  optionListSx?: ThemableCssProp;
  prefixLocalizationKey?: LocalizationKey | string;
 }) => {
- const { value, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
+ const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
 
  const { localizeCustomRole } = useLocalizeCustomRoles();
 
  const fetchedRoles = useMemo(() => [...(roles || [])], [roles]);
 
- const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]);
+ const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles, value]);
  const { t } = useLocalizations();
 
  const localizedOptions = useMemo(
@@ -195,9 +196,9 @@ export const RoleSelect = (props: {
  textWrap: 'nowrap',
  }))
  }
- isDisabled={isDisabled}
+ isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
  >
- {(selectedRole?.label || selectedRole?.value) && (
+ {selectedRole?.label || selectedRole?.value ? (
  <Flex
  as='span'
  gap={1}
@@ -211,12 +212,19 @@ export const RoleSelect = (props: {
  )}
  <Text
  as='span'
-sx={t => ({ color: t.colors.$colorText })}
+colorScheme='body'
  >
  {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
  </Text>
  </Flex>
- )}
+ ) : fallbackLabel ? (
+ <Text
+ as='span'
+ colorScheme='body'
+ >
+ {fallbackLabel}
+ </Text>
+ ) : null}
  </SelectButton>
  <SelectOptionList sx={optionListSx} />
  </Select>

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
  expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
  expect(getByText('You')).toBeInTheDocument();
  });
+ it('disables the role select when the membership role does not map to fetched roles', async () => {
+ const membersList: OrganizationMembershipResource[] = [
+ createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+ createFakeMember({
+ id: '2',
+ orgId: '1',
+ role: 'org:managed_admin',
+ roleName: 'Managed Admin',
+ identifier: 'test_user2',
+ }),
+ ];
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ id: '1',
+ email_addresses: ['test@clerk.com'],
+ organization_memberships: [{ name: 'Org1', id: '1' }],
+ });
+ });
+
+ fixtures.clerk.organization?.getMemberships.mockReturnValue(
+ Promise.resolve({
+ data: membersList,
+ total_count: 2,
+ }),
+ );
+ fixtures.clerk.organization?.getRoles.mockResolvedValue({
+ total_count: 2,
+ data: [
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'member',
+ key: 'member',
+ name: 'Member',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ {
+ pathRoot: '',
+ reload: jest.fn(),
+ id: 'admin',
+ key: 'admin',
+ name: 'Admin',
+ description: '',
+ permissions: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ ],
+ });
+
+ const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+ await waitForLoadingCompleted(container);
+
+ expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+ expect(getByText('You')).toBeInTheDocument();
+ expect(getByText('Managed Admin')).toBeInTheDocument();
+ await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+ });
 
  describe('InviteMembersScreen', () => {
  it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
  id: string;
  orgId: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  identifier?: string;
  firstName?: string;
  lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
  organization: { id: params.orgId } as any as OrganizationResource,
  id: params.id,
  role: params?.role || 'admin',
+ roleName: params?.roleName || 'Admin',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),
  publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
  id: string;
  role?: OrganizationCustomRoleKey;
+ roleName?: string;
  status?: OrganizationInvitationStatus;
  emailAddress: string;
  organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
  organizationId: params.organizationId,
  publicMetadata: {} as any,
  role: params.role || 'basic_member',
+ roleName: params.roleName || 'Basic Member',
  status: params.status || 'pending',
  createdAt: params?.createdAt || new Date(),
  updatedAt: new Date(),

packages/types/src/json.ts

@@ -392,6 +392,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
  public_metadata: OrganizationMembershipPublicMetadata;
  public_user_data?: PublicUserDataJSON;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }
@@ -404,6 +405,7 @@ export interface OrganizationInvitationJSON extends ClerkResourceJSON {
  public_metadata: OrganizationInvitationPublicMetadata;
  status: OrganizationInvitationStatus;
  role: OrganizationCustomRoleKey;
+ role_name: string;
  created_at: number;
  updated_at: number;
 }

packages/types/src/organizationInvitation.ts

@@ -26,6 +26,7 @@ export interface OrganizationInvitationResource extends ClerkResource {
  organizationId: string;
  publicMetadata: OrganizationInvitationPublicMetadata;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  status: OrganizationInvitationStatus;
  createdAt: Date;
  updatedAt: Date;

packages/types/src/organizationMembership.ts

@@ -50,6 +50,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
  publicMetadata: OrganizationMembershipPublicMetadata;
  publicUserData?: PublicUserData;
  role: OrganizationCustomRoleKey;
+ roleName: string;
  createdAt: Date;
  updatedAt: Date;
  destroy: () => Promise<OrganizationMembershipResource>;