diff --git a/.changeset/lovely-experts-deny.md b/.changeset/lovely-experts-deny.md new file mode 100644 index 00000000000..83eddb98abc --- /dev/null +++ b/.changeset/lovely-experts-deny.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +--- + +Remove legacy roles fallback +After the release of Custom Roles, roles should always be dynamically fetched. diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx index 98f33d6faac..d5e491271fe 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx @@ -1,5 +1,5 @@ import type { MembershipRole } from '@clerk/types'; -import React from 'react'; +import React, { useMemo } from 'react'; import type { LocalizationKey } from '../../customizables'; import { Col, descriptors, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr } from '../../customizables'; @@ -129,24 +129,20 @@ export const RoleSelect = (props: { }) => { const { value, roles, onChange, isDisabled, triggerSx, optionListSx } = props; - const shouldDisplayLegacyRoles = !roles; - - const legacyRoles: Array<{ label: string; value: MembershipRole }> = [ - { label: 'admin', value: 'admin' }, - { label: 'basic_member', value: 'basic_member' }, - ]; - - const legacyExcludedRoles: Array<{ label: string; value: MembershipRole }> = [ - { label: 'guest_member', value: 'guest_member' }, - ]; const { localizeCustomRole } = useLocalizeCustomRoles(); - const selectedRole = [...(roles || []), ...legacyRoles, ...legacyExcludedRoles].find(r => r.value === value); + const fetchedRoles = useMemo(() => [...(roles || [])], [roles]); - const localizedOptions = (!shouldDisplayLegacyRoles ? roles : legacyRoles).map(role => ({ - value: role.value, - label: localizeCustomRole(role.value) || role.label, - })); + const selectedRole = useMemo(() => fetchedRoles.find(r => r.value === value), [fetchedRoles]); + + const localizedOptions = useMemo( + () => + fetchedRoles.map(role => ({ + value: role.value, + label: localizeCustomRole(role.value) || role.label, + })), + [fetchedRoles, localizeCustomRole], + ); return (