fix(roles): optimize user fetching and resolve N+1 query issue (#37235)

superset-frontend/src/features/roles/RoleListEditModal.test.tsx

@@ -24,6 +24,7 @@ import {
   waitFor,
 } from 'spec/helpers/testing-library';
 import { SupersetClient } from '@superset-ui/core';
+import rison from 'rison';
 import RoleListEditModal from './RoleListEditModal';
 import {
   updateRoleName,
@@ -208,4 +209,40 @@ describe('RoleListEditModal', () => {
     expect(screen.getByTitle('User Name')).toBeInTheDocument();
     expect(screen.getByTitle('Email')).toBeInTheDocument();
   });
+
+  test('fetches users with correct role relationship filter', async () => {
+    const mockGet = SupersetClient.get as jest.Mock;
+    mockGet.mockResolvedValue({
+      json: {
+        count: 0,
+        result: [],
+      },
+    });
+
+    render(<RoleListEditModal {...mockProps} />);
+
+    await waitFor(() => {
+      expect(mockGet).toHaveBeenCalled();
+    });
+
+    // verify the endpoint and query parameters
+    const callArgs = mockGet.mock.calls[0][0];
+    expect(callArgs.endpoint).toContain('/api/v1/security/users/');
+
+    const urlMatch = callArgs.endpoint.match(/\?q=(.+)/);
+    expect(urlMatch).toBeTruthy();
+
+    const decodedQuery = rison.decode(urlMatch[1]);
+    expect(decodedQuery).toEqual({
+      page_size: 100,
+      page: 0,
+      filters: [
+        {
+          col: 'roles',
+          opr: 'rel_m_m',
+          value: mockRole.id,
+        },
+      ],
+    });
+  });
 });

superset-frontend/src/features/roles/RoleListEditModal.tsx

@@ -104,7 +104,7 @@ function RoleListEditModal({
   permissions,
   groups,
 }: RoleListEditModalProps) {
-  const { id, name, permission_ids, user_ids, group_ids } = role;
+  const { id, name, permission_ids, group_ids } = role;
   const [activeTabKey, setActiveTabKey] = useState(roleTabs.edit.key);
   const { addDangerToast, addSuccessToast } = useToasts();
   const [roleUsers, setRoleUsers] = useState<UserObject[]>([]);
@@ -112,13 +112,7 @@ function RoleListEditModal({
   const formRef = useRef<FormInstance | null>(null);
 
   useEffect(() => {
-    if (!user_ids.length) {
-      setRoleUsers([]);
-      setLoadingRoleUsers(false);
-      return;
-    }
-
-    const filters = [{ col: 'id', opr: 'in', value: user_ids }];
+    const filters = [{ col: 'roles', opr: 'rel_m_m', value: id }];
 
     fetchPaginatedData({
       endpoint: `/api/v1/security/users/`,
@@ -137,7 +131,7 @@ function RoleListEditModal({
         email: user.email,
       }),
     });
-  }, [user_ids]);
+  }, [id]);
 
   useEffect(() => {
     if (!loadingRoleUsers && formRef.current && roleUsers.length >= 0) {