chore(clerk-js,types): Remove system delete permission for domains and memberships (#2256) (#2270)

Author: panteliselef

.changeset/moody-zoos-deliver.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Drop `org:sys_domains:delete` and `org:sys_memberships:delete` as those have now been merged with the respective `manage` ones.

packages/clerk-js/src/core/test/fixtures.ts

@@ -56,10 +56,8 @@ export const createOrganizationMembership = (params: OrgParams): OrganizationMem
     public_metadata: {},
     role: role || 'admin',
     permissions: permissions || [
-      'org:sys_domains:delete',
       'org:sys_domains:manage',
       'org:sys_domains:read',
-      'org:sys_memberships:delete',
       'org:sys_memberships:manage',
       'org:sys_memberships:read',
       'org:sys_profile:delete',

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

@@ -122,7 +122,7 @@ const MemberRow = (props: {
         </Gate>
       </Td>
       <Td>
-        <Gate permission={'org:sys_memberships:delete'}>
+        <Gate permission={'org:sys_memberships:manage'}>
           <ThreeDotsMenu
             actions={[
               {

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

@@ -23,37 +23,24 @@ type DomainListProps = GetDomainsParams & {
   fallback?: React.ReactNode;
 };
 
-const useDomainList = () => {
-  const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
-  const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });
-
-  return {
-    showDotMenu: canDeleteDomain || canVerifyDomain,
-    canVerifyDomain,
-    canDeleteDomain,
-  };
-};
-
 const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
   trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));
 
 const useMenuActions = (
   parentPath: string,
   domainId: string,
 ): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
-  const { canDeleteDomain, canVerifyDomain } = useDomainList();
+  const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
+
   const { navigate } = useRouter();
 
   const menuActions = [];
 
-  if (canVerifyDomain) {
+  if (canManageDomain) {
     menuActions.push({
       label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
       onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
     });
-  }
-
-  if (canDeleteDomain) {
     menuActions.push({
       label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
       isDestructive: true,
@@ -84,7 +71,7 @@ export const DomainList = withGate(
       },
     });
 
-    const { showDotMenu } = useDomainList();
+    const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
     const { ref } = useInView({
       threshold: 0,
       onChange: inView => {
@@ -123,7 +110,7 @@ export const DomainList = withGate(
       <Col>
         {domainList.length === 0 && !domains?.isLoading && fallback}
         {domainList.map(d => {
-          if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
+          if (!(d.verification && d.verification.status === 'verified') || !canManageDomain) {
             return (
               <BlockWithTrailingComponent
                 key={d.id}
@@ -136,7 +123,7 @@ export const DomainList = withGate(
                 })}
                 badge={<EnrollmentBadge organizationDomain={d} />}
                 trailingComponent={
-                  showDotMenu ? (
+                  canManageDomain ? (
                     <DomainListDotMenu
                       redirectSubPath={redirectSubPath}
                       domainId={d.id}

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

@@ -69,15 +69,15 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
                   </Route>
                   <Route path=':id/remove'>
                     <Gate
-                      permission={'org:sys_domains:delete'}
+                      permission={'org:sys_domains:manage'}
                       redirectTo='../../'
                     >
                       <RemoveDomainPage />
                     </Gate>
                   </Route>
                   <Route path=':id'>
                     <Gate
-                      some={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
+                      permission={'org:sys_domains:manage'}
                       redirectTo='../../'
                     >
                       <VerifiedDomainPage />

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

@@ -62,7 +62,6 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   });
 
   const { isAuthorizedUser: canManageDomain } = useGate({ permission: 'org:sys_domains:manage' });
-  const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
 
   const { navigateToFlowStart } = useNavigateToFlowStart();
   const { params, navigate, queryParams } = useRouter();
@@ -210,7 +209,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                 )}
               />
             )}
-            {allowsEdit && canDeleteDomain && (
+            {allowsEdit && canManageDomain && (
               <Tab
                 localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.start.headerTitle__danger')}
               />
@@ -270,7 +269,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                 </Form.Root>
               </TabPanel>
             )}
-            {allowsEdit && canDeleteDomain && (
+            {allowsEdit && canManageDomain && (
               <TabPanel
                 direction={'col'}
                 gap={4}

packages/types/src/organizationMembership.ts

@@ -46,12 +46,10 @@ export type MembershipRole = 'admin' | 'basic_member' | 'guest_member' | (string
 
 export type OrganizationPermission =
   | 'org:sys_domains:manage'
-  | 'org:sys_domains:delete'
   | 'org:sys_profile:manage'
   | 'org:sys_profile:delete'
   | 'org:sys_memberships:read'
   | 'org:sys_memberships:manage'
-  | 'org:sys_memberships:delete'
   | 'org:sys_domains:read';
 
 export type UpdateOrganizationMembershipParams = {