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

Author: thiskevinwang

.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;
 }