fix(mosaic): load member roles only for managers and show table notices as banners

packages/mosaic/src/features/organization-profile/__tests__/organization-profile-members-panel.feature.test.tsx

@@ -54,6 +54,17 @@ describe('OrganizationProfileMembersPanel', () => {
     expect(screen.queryByRole('button', { name: 'Manage Bob Smith' })).toBeNull();
   });
 
+  it('does not load roles for a member who cannot change them', async () => {
+    serve();
+    const roles = holdRequests('get', '/v1/organizations/:organizationId/roles');
+
+    await renderWithClerk(<OrganizationProfileMembersPanel />);
+
+    expect(await screen.findByText('Bob Smith')).toBeVisible();
+    expect(roles.requests).toHaveLength(0);
+    roles.release();
+  });
+
   it('does not fetch or show the list without read permission', async () => {
     serve([]);
     const request = holdRequests('get', '/v1/organizations/:organizationId/memberships');

packages/mosaic/src/features/organization-profile/members-table-tab.controller.ts

@@ -11,7 +11,7 @@ import type { useMembersTableModel } from './members-table-tab.model';
 import type { MembersRoles } from './members-table-tab.types';
 
 interface RolesContext {
-  loadRoles: () => Promise<MembersRoles>;
+  loadRoles: (() => Promise<MembersRoles>) | undefined;
   result: MembersRoles | null;
 }
 
@@ -21,14 +21,15 @@ const { createMachine, assign, fromPromise } = setup<RolesContext, RolesEvent>()
 
 const rolesMachine = createMachine({
   id: 'membersRoles',
-  initial: 'loading',
-  context: { loadRoles: () => Promise.resolve({ roles: [], hasRoleSetMigration: false }), result: null },
+  initial: context => (context.loadRoles ? 'loading' : 'unavailable'),
+  context: { loadRoles: undefined, result: null },
   states: {
+    unavailable: {},
     loading: {
-      invoke: fromPromise(context => context.loadRoles(), {
+      invoke: fromPromise(context => context.loadRoles?.() ?? Promise.resolve(null), {
         onDone: {
           target: 'ready',
-          actions: assign<DoneInvokeEvent<MembersRoles>>((_, event) => ({ result: event.output })),
+          actions: assign<DoneInvokeEvent<MembersRoles | null>>((_, event) => ({ result: event.output })),
         },
         onError: { target: 'failed' },
       }),

packages/mosaic/src/features/organization-profile/members-table-tab.model.ts

@@ -54,16 +54,18 @@ export function useMembersTableModel(query: string) {
 
   return {
     rows,
-    loadRoles: async (): Promise<MembersRoles> => {
-      if (!organization || !canRead) {
-        throw new ClerkRuntimeError('Roles are unavailable.', { code: 'role_unavailable' });
-      }
-      const result = await organization.getRoles({ pageSize: 20 });
-      return {
-        roles: result.data.map(({ key, name }) => ({ key, name })),
-        hasRoleSetMigration: result.has_role_set_migration ?? false,
-      };
-    },
+    loadRoles: canManage
+      ? async (): Promise<MembersRoles> => {
+          if (!organization) {
+            throw new ClerkRuntimeError('Roles are unavailable.', { code: 'role_unavailable' });
+          }
+          const result = await organization.getRoles({ pageSize: 20 });
+          return {
+            roles: result.data.map(({ key, name }) => ({ key, name })),
+            hasRoleSetMigration: result.has_role_set_migration ?? false,
+          };
+        }
+      : undefined,
     pageSize: PAGE_SIZE,
     totalCount: memberships?.count ?? 0,
     page: memberships?.page ?? 1,