fix(ui): fix search not working in roles input in user profile page (#13897)

* fix search in roles input in user profile page

* minor change

* changes as per comments

* minor changes

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/SearchIndexDetails.spec.js

@@ -257,7 +257,9 @@ describe('Prerequisite for data steward role tests', () => {
 
     cy.get('[data-testid="edit-roles-button"]').click();
 
-    cy.get('[data-testid="inline-edit-container"] #select-role').click();
+    cy.get('[data-testid="inline-edit-container"] #select-role')
+      .click()
+      .type(role.name);
 
     cy.get(`[title=${role.name}]`).click();
 

openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx

@@ -37,6 +37,7 @@ import { EntityReference } from '../../generated/entity/type';
 import { AuthProvider } from '../../generated/settings/settings';
 import { checkEmailInUse, generateRandomPwd } from '../../rest/auth-API';
 import { getJWTTokenExpiryOptions } from '../../utils/BotsUtils';
+import { handleSearchFilterOption } from '../../utils/CommonUtils';
 import { getEntityName } from '../../utils/EntityUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
@@ -346,9 +347,7 @@ const CreateUser = ({
             <Select
               data-testid="roles-dropdown"
               disabled={isEmpty(roles)}
-              filterOption={(input, option) =>
+              filterOption={handleSearchFilterOption}
-                (option?.label ?? '').includes(input)
-              }
               mode="multiple"
               options={roleOptions}
               placeholder={t('label.please-select-entity', {

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/CustomControls.component.tsx

@@ -38,6 +38,7 @@ import {
   ZOOM_SLIDER_STEP,
   ZOOM_TRANSITION_DURATION,
 } from '../../../constants/Lineage.constants';
+import { handleSearchFilterOption } from '../../../utils/CommonUtils';
 import { getLoadingStatusValue } from '../../../utils/EntityLineageUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
 import SVGIcons, { Icons } from '../../../utils/SvgUtils';
@@ -100,16 +101,6 @@ const CustomControls: FC<ControlProps> = ({
     fitView?.(fitViewParams);
   }, [fitView, fitViewParams]);
 
-  const handleSearchFilterOption = (
-    input: string,
-    option?: {
-      label: string;
-      value: string;
-    }
-  ) => {
-    return (option?.label || '').toLowerCase().includes(input.toLowerCase());
-  };
-
   const onRangeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const zoomValue = parseFloat(event.target.value);
     onZoomHandler(zoomValue);

openmetadata-ui/src/main/resources/ui/src/components/Users/UsersProfile/UserProfileRoles/UserProfileRoles.component.tsx

@@ -29,6 +29,7 @@ import {
 import { Role } from '../../../../generated/entity/teams/role';
 import { useAuth } from '../../../../hooks/authHooks';
 import { getRoles } from '../../../../rest/rolesAPIV1';
+import { handleSearchFilterOption } from '../../../../utils/CommonUtils';
 import { getEntityName } from '../../../../utils/EntityUtils';
 import { showErrorToast } from '../../../../utils/ToastUtils';
 import { UserProfileRolesProps } from './UserProfileRoles.interface';
@@ -172,6 +173,8 @@ const UserProfileRoles = ({
               showSearch
               aria-label="Select roles"
               className="w-full"
+              data-testid="select-user-roles"
+              filterOption={handleSearchFilterOption}
               id="select-role"
               loading={isRolesLoading}
               maxTagCount={4}

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -25,6 +25,7 @@ import {
   isNull,
   isString,
   isUndefined,
+  toLower,
   toNumber,
 } from 'lodash';
 import {
@@ -871,3 +872,17 @@ export const getUniqueArray = (count: number) =>
   [...Array(count)].map((_, index) => ({
     key: `key${index}`,
   }));
+
+/**
+ * @param searchValue search input
+ * @param option select options list
+ * @returns boolean
+ */
+export const handleSearchFilterOption = (
+  searchValue: string,
+  option?: {
+    label: string;
+    value: string;
+  }
+) => toLower(option?.label).includes(toLower(searchValue));
+// Check label while searching anything and filter that options out if found matching