fix(clerk-js): Fallback to custom role name if localization is not pr…

…ovided (#2194) This is valuable for AP where custom localization cannot be applied.
clerk · Nov 23, 2023 · dd49f93 · dd49f93
1 parent 7f6a64f
commit dd49f93
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 deletions.
diff --git a/.changeset/dull-wasps-begin.md b/.changeset/dull-wasps-begin.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fallback to custom role name if localization is not provided.
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
@@ -79,6 +79,7 @@ const MemberRow = (props: {
   const user = useCoreUser();
 
   const isCurrentUser = user.id === membership.publicUserData.userId;
+  const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;
 
   return (
     <RowContainer>
@@ -101,7 +102,11 @@ const MemberRow = (props: {
       <Td>
         <Gate
           permission={'org:sys_memberships:manage'}
-          fallback={<Text sx={t => ({ opacity: t.opacity.$inactive })}>{localizeCustomRole(membership.role)}</Text>}
+          fallback={
+            <Text sx={t => ({ opacity: t.opacity.$inactive })}>
+              {localizeCustomRole(membership.role) || unlocalizedRoleLabel}
+            </Text>
+          }
         >
           <RoleSelect
             isDisabled={card.isLoading || !onRoleChange}

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/InvitedMembersList.tsx
@@ -3,7 +3,7 @@ import type { OrganizationInvitationResource } from '@clerk/types';
 import { useCoreOrganization } from '../../contexts';
 import { localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
-import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
+import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
 import { handleError } from '../../utils';
 import { DataTable, RowContainer } from './MemberListTable';
 
@@ -18,6 +18,8 @@ export const InvitedMembersList = () => {
   const card = useCardState();
   const { organization, invitations } = useCoreOrganization(invitationsParams);
 
+  const { options, isLoading: loadingRoles } = useFetchRoles();
+
   if (!organization) {
     return null;
   }
@@ -39,7 +41,7 @@ export const InvitedMembersList = () => {
       itemCount={invitations?.count || 0}
       pageCount={invitations?.pageCount || 0}
       itemsPerPage={invitationsParams.invitations.pageSize}
-      isLoading={invitations?.isLoading}
+      isLoading={invitations?.isLoading || loadingRoles}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
@@ -50,6 +52,7 @@ export const InvitedMembersList = () => {
       rows={(invitations?.data || []).map(i => (
         <InvitationRow
           key={i.id}
+          options={options}
           invitation={i}
           onRevoke={revoke(i)}
         />
@@ -58,9 +61,16 @@ export const InvitedMembersList = () => {
   );
 };
 
-const InvitationRow = (props: { invitation: OrganizationInvitationResource; onRevoke: () => unknown }) => {
-  const { invitation, onRevoke } = props;
+const InvitationRow = (props: {
+  invitation: OrganizationInvitationResource;
+  options: ReturnType<typeof useFetchRoles>['options'];
+  onRevoke: () => unknown;
+}) => {
+  const { invitation, onRevoke, options } = props;
   const { localizeCustomRole } = useLocalizeCustomRoles();
+
+  const unlocalizedRoleLabel = options?.find(a => a.value === invitation.role)?.label;
+
   return (
     <RowContainer>
       <Td>
@@ -73,7 +83,7 @@ const InvitationRow = (props: { invitation: OrganizationInvitationResource; onRe
       <Td>
         <Text
           colorScheme={'neutral'}
-          localizationKey={localizeCustomRole(invitation.role)}
+          localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
         />
       </Td>
       <Td>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -79,6 +79,7 @@ const MemberRow = (props: {
   const user = useCoreUser();
 
   const isCurrentUser = user.id === membership.publicUserData.userId;
+  const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;
 
   return (
     <RowContainer>
@@ -101,7 +102,11 @@ const MemberRow = (props: {
       <Td>
         <Gate
           permission={'org:sys_memberships:manage'}
-          fallback={<Text sx={t => ({ opacity: t.opacity.$inactive })}>{localizeCustomRole(membership.role)}</Text>}
+          fallback={
+            <Text sx={t => ({ opacity: t.opacity.$inactive })}>
+              {localizeCustomRole(membership.role) || unlocalizedRoleLabel}
+            </Text>
+          }
         >
           <RoleSelect
             isDisabled={card.isLoading || !onRoleChange}

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
@@ -3,7 +3,7 @@ import type { OrganizationInvitationResource } from '@clerk/types';
 import { useCoreOrganization } from '../../contexts';
 import { localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
-import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
+import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
 import { handleError } from '../../utils';
 import { DataTable, RowContainer } from './MemberListTable';
 
@@ -18,6 +18,8 @@ export const InvitedMembersList = () => {
   const card = useCardState();
   const { organization, invitations } = useCoreOrganization(invitationsParams);
 
+  const { options, isLoading: loadingRoles } = useFetchRoles();
+
   if (!organization) {
     return null;
   }
@@ -39,7 +41,7 @@ export const InvitedMembersList = () => {
       itemCount={invitations?.count || 0}
       pageCount={invitations?.pageCount || 0}
       itemsPerPage={invitationsParams.invitations.pageSize}
-      isLoading={invitations?.isLoading}
+      isLoading={invitations?.isLoading || loadingRoles}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')}
       headers={[
         localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
@@ -50,6 +52,7 @@ export const InvitedMembersList = () => {
       rows={(invitations?.data || []).map(i => (
         <InvitationRow
           key={i.id}
+          options={options}
           invitation={i}
           onRevoke={revoke(i)}
         />
@@ -58,9 +61,16 @@ export const InvitedMembersList = () => {
   );
 };
 
-const InvitationRow = (props: { invitation: OrganizationInvitationResource; onRevoke: () => unknown }) => {
-  const { invitation, onRevoke } = props;
+const InvitationRow = (props: {
+  invitation: OrganizationInvitationResource;
+  options: ReturnType<typeof useFetchRoles>['options'];
+  onRevoke: () => unknown;
+}) => {
+  const { invitation, onRevoke, options } = props;
   const { localizeCustomRole } = useLocalizeCustomRoles();
+
+  const unlocalizedRoleLabel = options?.find(a => a.value === invitation.role)?.label;
+
   return (
     <RowContainer>
       <Td>
@@ -73,7 +83,7 @@ const InvitationRow = (props: { invitation: OrganizationInvitationResource; onRe
       <Td>
         <Text
           colorScheme={'neutral'}
-          localizationKey={localizeCustomRole(invitation.role)}
+          localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
         />
       </Td>
       <Td>