Fix server-side role search behavior across role selectors (#27737)

* Fix server-side role search behavior across role selectors

* address gitar

* fix failing spec

(cherry picked from commit c5e360a)

Author: harsh-vador

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/SSOConfiguration.spec.ts

@@ -779,15 +779,20 @@ test.describe('SSO Configuration Tests', () => {
       // Typing filters the visible options
       await field.click();
       await field.locator('input').fill('Data');
+      await page.waitForResponse('/api/v1/roles/search?*');
       await expect(
         dropdown.locator(
           '.ant-select-item-option:not(.ant-select-item-option-disabled)'
         )
-      ).not.toHaveCount(0);
+      ).not.toHaveCount(0, { timeout: 15000 });
 
       // Pressing Enter on a non-existent value does not create an arbitrary tag
       await field.locator('input').clear();
+      const missingRoleSearchResponse = page.waitForResponse(
+        '/api/v1/roles/search?*'
+      );
       await field.locator('input').fill('NonExistentRoleXYZ123');
+      await missingRoleSearchResponse;
       await field.locator('input').press('Enter');
       await expect(field.locator('.ant-select-selection-item')).toHaveCount(0);
     });

openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/AddRoleAndAssignToUser.spec.ts

@@ -18,7 +18,7 @@ import {
   descriptionBox,
   generateRandomUsername,
   redirectToHomePage,
-  uuid
+  uuid,
 } from '../../utils/common';
 import { settingClick } from '../../utils/sidebar';
 import { visitUserProfilePage } from '../../utils/user';
@@ -80,9 +80,9 @@ test.describe.serial('Add role and assign it to the user', () => {
   test('Create new user and assign new role to him', async ({ page }) => {
     await settingClick(page, GlobalSettingOptions.USERS);
 
-    await page.waitForLoadState('networkidle');
-
+    const initialRolesResponse = page.waitForResponse('/api/v1/roles/search?*');
     await page.click('[data-testid="add-user"]');
+    await initialRolesResponse;
 
     await page.fill('[data-testid="email"]', user.email);
     await page.fill('[data-testid="displayName"]', userDisplayName);
@@ -99,7 +99,9 @@ test.describe.serial('Add role and assign it to the user', () => {
     await page.waitForSelector('.ant-select-dropdown', {
       state: 'visible',
     });
+    const rolesSearchResponse = page.waitForResponse('/api/v1/roles/search?*');
     await page.fill('#roles', roleName);
+    await rolesSearchResponse;
     await page.click(`[title="${roleName}"]`);
 
     await page.keyboard.press('Escape');

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts

@@ -2687,7 +2687,9 @@ test.describe('Domains Rbac', () => {
 
     // Add domain role to the user
     await visitUserProfilePage(page, user1.responseData.name);
+    const initialRolesResponse = page.waitForResponse('/api/v1/roles/search?*');
     await page.getByTestId('edit-roles-button').click();
+    await initialRolesResponse;
 
     await page.locator('[data-testid="user-profile-edit-popover"]').isVisible();
     const rolesCombobox = page.locator('input[role="combobox"]').nth(1);

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/UserDetails.spec.ts

@@ -503,7 +503,11 @@ test.describe('User with different Roles', () => {
 
     await expect(adminPage.getByTestId('user-profile-roles')).toBeVisible();
 
+    const initialRolesResponse = adminPage.waitForResponse(
+      '/api/v1/roles/search?*'
+    );
     await adminPage.getByTestId('edit-roles-button').click();
+    await initialRolesResponse;
 
     await expect(
       adminPage.getByTestId('profile-edit-roles-select')
@@ -513,6 +517,15 @@ test.describe('User with different Roles', () => {
       state: 'visible',
     });
 
+    await adminPage
+      .getByTestId('profile-edit-roles-select')
+      .locator('input')
+      .fill('Application');
+    await adminPage.waitForResponse('/api/v1/roles/search?*');
+    await adminPage
+      .locator('.ant-select-item-option-content')
+      .getByText('Application bot role', { exact: true })
+      .waitFor({ state: 'visible' });
     await adminPage
       .locator('.ant-select-item-option-content')
       .getByText('Application bot role', { exact: true })

openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts

@@ -690,7 +690,7 @@ export const addUser = async (
   await waitForAllLoadersToDisappear(page);
   await page.click('[data-testid="add-user"]');
 
-  await page.waitForResponse('/api/v1/roles?default=false&limit=100&fields=');
+  await page.waitForResponse('/api/v1/roles/search?*');
   await page.fill('[data-testid="email"]', email);
 
   await page.fill('[data-testid="displayName"]', name);
@@ -701,11 +701,14 @@ export const addUser = async (
   await page.fill('#password', password);
   await page.fill('#confirmPassword', password);
 
-  await page.click('[data-testid="roles-dropdown"] > .ant-select-selector');
-  await page.getByTestId('roles-dropdown').getByRole('combobox').fill(role);
-  await page.waitForSelector('.ant-select-dropdown:visible', {
-    state: 'visible',
-  });
+  const rolesCombobox = page
+    .getByTestId('roles-dropdown')
+    .getByRole('combobox');
+  await expect(rolesCombobox).toBeVisible({ timeout: 120000 });
+  await rolesCombobox.click();
+  const rolesSearchResponse = page.waitForResponse('/api/v1/roles/search?*');
+  await rolesCombobox.fill(role);
+  await rolesSearchResponse;
   const roleOption = page
     .locator('.ant-select-dropdown:visible')
     .locator('.ant-select-item-option')

openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/BotDetails.component.tsx

@@ -14,16 +14,16 @@
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Input, Row, Typography } from 'antd';
 import { AxiosError } from 'axios';
-import { toLower } from 'lodash';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { debounce, toLower, uniqBy } from 'lodash';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as IconBotProfile } from '../../../../assets/svg/bot-profile.svg';
-import { PAGE_SIZE_LARGE, TERM_ADMIN } from '../../../../constants/constants';
+import { TERM_ADMIN } from '../../../../constants/constants';
 import { GlobalSettingOptions } from '../../../../constants/GlobalSettings.constants';
 import { useLimitStore } from '../../../../context/LimitsProvider/useLimitsStore';
 import { EntityType } from '../../../../enums/entity.enum';
 import { Role } from '../../../../generated/entity/teams/role';
-import { getRoles } from '../../../../rest/rolesAPIV1';
+import { searchRoles } from '../../../../rest/rolesAPIV1';
 import { getEntityName } from '../../../../utils/EntityUtils';
 import { getSettingPath } from '../../../../utils/RouterUtils';
 import { showErrorToast } from '../../../../utils/ToastUtils';
@@ -48,6 +48,8 @@ const BotDetails: FC<BotsDetailProps> = ({
   const [isDisplayNameEdit, setIsDisplayNameEdit] = useState(false);
   const [selectedRoles, setSelectedRoles] = useState<Array<string>>([]);
   const [roles, setRoles] = useState<Array<Role>>([]);
+  const [isRolesLoading, setIsRolesLoading] = useState(false);
+  const selectedRolesRef = useRef<string[]>([]);
   const { getResourceLimit, config } = useLimitStore();
 
   const [disableFields, setDisableFields] = useState<string[]>(['token']);
@@ -74,21 +76,29 @@ const BotDetails: FC<BotsDetailProps> = ({
     }
   };
 
-  const fetchRoles = async () => {
+  const fetchRoles = useCallback(async (query = '') => {
+    setIsRolesLoading(true);
+
     try {
-      const { data } = await getRoles(
-        '',
-        undefined,
-        undefined,
-        false,
-        PAGE_SIZE_LARGE
-      );
-      setRoles(data);
+      const data = await searchRoles(query);
+      setRoles((prevRoles) => {
+        const selectedRoleOptions = prevRoles.filter((role) =>
+          selectedRolesRef.current.includes(role.id)
+        );
+
+        return uniqBy([...selectedRoleOptions, ...data], 'id');
+      });
     } catch (err) {
-      setRoles([]);
       showErrorToast(err as AxiosError);
+    } finally {
+      setIsRolesLoading(false);
     }
-  };
+  }, []);
+
+  const debouncedFetchRoles = useMemo(
+    () => debounce(fetchRoles, 300),
+    [fetchRoles]
+  );
 
   const onDisplayNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDisplayName(e.target.value);
@@ -196,7 +206,9 @@ const BotDetails: FC<BotsDetailProps> = ({
         </Col>
         <Col span={24}>
           <RolesCard
+            isRolesLoading={isRolesLoading}
             roles={roles}
+            searchRolesOptions={debouncedFetchRoles}
             selectedRoles={selectedRoles}
             setSelectedRoles={(selectedRoles) =>
               setSelectedRoles(selectedRoles)
@@ -212,13 +224,36 @@ const BotDetails: FC<BotsDetailProps> = ({
     );
   };
 
+  useEffect(() => {
+    selectedRolesRef.current = selectedRoles;
+  }, [selectedRoles]);
+
   useEffect(() => {
     fetchRoles();
     initLimits();
   }, []);
 
+  useEffect(() => {
+    return () => {
+      debouncedFetchRoles.cancel();
+    };
+  }, [debouncedFetchRoles]);
+
   useEffect(() => {
     prepareSelectedRoles();
+    setRoles((prevRoles) =>
+      uniqBy(
+        [
+          ...prevRoles,
+          ...((botUserData.roles ?? []).map((role) => ({
+            id: role.id,
+            name: role.name ?? '',
+            displayName: role.displayName,
+          })) as Role[]),
+        ],
+        'id'
+      )
+    );
   }, [botUserData]);
 
   return (

openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/BotDetails.test.tsx

@@ -14,6 +14,7 @@
 import { act, render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { OperationPermission } from '../../../../context/PermissionProvider/PermissionProvider.interface';
+import { searchRoles } from '../../../../rest/rolesAPIV1';
 import { getAuthMechanismForBotUser } from '../../../../rest/userAPI';
 import AccessTokenCard from '../../Users/AccessTokenCard/AccessTokenCard.component';
 import BotDetails from './BotDetails.component';
@@ -93,6 +94,10 @@ jest.mock('../../../../utils/PermissionsUtils', () => ({
   checkPermission: jest.fn().mockReturnValue(true),
 }));
 
+jest.mock('../../../../rest/rolesAPIV1', () => ({
+  searchRoles: jest.fn().mockResolvedValue([]),
+}));
+
 const mockGetResourceLimit = jest.fn().mockResolvedValue({
   configuredLimit: { disabledFields: [] },
 });
@@ -146,6 +151,10 @@ jest.mock('../../../../context/LimitsProvider/useLimitsStore', () => ({
 }));
 
 describe('Test BotsDetail Component', () => {
+  beforeEach(() => {
+    (searchRoles as jest.Mock).mockResolvedValue([]);
+  });
+
   it('Should render all child elements', async () => {
     await act(async () => {
       render(<BotDetails {...mockProp} />, {