From 481348a477350188afa39b498e0dccb6b5b425ff Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Fri, 27 Oct 2023 11:57:42 +0530
Subject: [PATCH] role permission, api resource not displaying bug fixed

---
 .../components/edit-role/edit-role-basic.tsx     |  2 +-
 .../edit-role/edit-role-permission.tsx           | 14 +++++++++++---
 .../components/permissions-list.tsx              |  5 ++++-
 .../role-permissions/role-permissions.tsx        | 16 ++++++++++++----
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/apps/console/src/features/roles/components/edit-role/edit-role-basic.tsx b/apps/console/src/features/roles/components/edit-role/edit-role-basic.tsx
index 839fd55b558..2655f732762 100644
--- a/apps/console/src/features/roles/components/edit-role/edit-role-basic.tsx
+++ b/apps/console/src/features/roles/components/edit-role/edit-role-basic.tsx
@@ -62,7 +62,7 @@ export const BasicRoleDetails: FunctionComponent<BasicRoleProps> = (props: Basic
         isLoading: isRolesListLoading,
         error: rolesListError,
         isValidating: isRolesListValidating
-    } = useRolesList( undefined, undefined, roleNameSearchQuery);
+    } = useRolesList(undefined, undefined, roleNameSearchQuery);
 
     /**
      * Dispatches the alert object to the redux store.
diff --git a/apps/console/src/features/roles/components/edit-role/edit-role-permission.tsx b/apps/console/src/features/roles/components/edit-role/edit-role-permission.tsx
index 29c5bed25c7..cf3ce94cea0 100644
--- a/apps/console/src/features/roles/components/edit-role/edit-role-permission.tsx
+++ b/apps/console/src/features/roles/components/edit-role/edit-role-permission.tsx
@@ -29,6 +29,7 @@ import { addAlert } from "@wso2is/core/store";
 import { Field, Form } from "@wso2is/form";
 import { EmphasizedSegment, Heading } from "@wso2is/react-components";
 import debounce, { DebouncedFunc } from "lodash-es/debounce";
+import isEmpty from "lodash-es/isEmpty";
 import React, { FunctionComponent, ReactElement, SyntheticEvent, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
@@ -287,10 +288,13 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
      */
     const searchAPIResources: DebouncedFunc<(query: string) => void> = 
         useCallback(debounce((query: string) => {
-            setAPIResourceSearchQuery(`name co ${query}`);
+            setAPIResourceSearchQuery(
+                !isEmpty(query) 
+                    ? `name co ${query}` 
+                    : null
+            );
             mutateAPIResourcesListFetchRequest().finally(() => {
                 setAPIResourcesSearching(false);
-                setAPIResourceSearchQuery(undefined);
             });
         }, RoleConstants.DEBOUNCE_TIMEOUT), []);
 
@@ -298,7 +302,9 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
      * Handles the selection of an API resource.
      */
     const onAPIResourceSelected = (event: SyntheticEvent<HTMLElement>, data: DropdownProps): void => {
+        event.preventDefault();
         setSelectedAPIResourceId(data.value.toString());
+        setAPIResourceSearchQuery(undefined);
     };
 
     /**
@@ -359,12 +365,14 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
                         onSubmit={ undefined }
                     >
                         <Field.Dropdown
+                            search
+                            selection
+                            selectOnNavigation={ false }
                             ariaLabel="assignedApplication"
                             name="assignedApplication"
                             label={ t("console:manage.features.roles.addRoleWizard.forms.rolePermission." +
                                 "apiResource.label") }
                             options={ apiResourcesListOptions }
-                            search
                             data-componentid={ `${componentId}-typography-font-family-dropdown` }
                             placeholder={ t("console:manage.features.roles.addRoleWizard.forms.rolePermission." +
                                 "apiResource.placeholder") }
diff --git a/apps/console/src/features/roles/components/wizard-updated/role-permissions/components/permissions-list.tsx b/apps/console/src/features/roles/components/wizard-updated/role-permissions/components/permissions-list.tsx
index 23b4883ca66..713f54341d0 100644
--- a/apps/console/src/features/roles/components/wizard-updated/role-permissions/components/permissions-list.tsx
+++ b/apps/console/src/features/roles/components/wizard-updated/role-permissions/components/permissions-list.tsx
@@ -16,7 +16,10 @@
  * under the License.
  */
 
-import { Autocomplete, AutocompleteRenderGetTagProps, AutocompleteRenderInputParams } from "@mui/material";
+import Autocomplete, {  
+    AutocompleteRenderGetTagProps, 
+    AutocompleteRenderInputParams 
+} from "@oxygen-ui/react/Autocomplete";
 import TextField from "@oxygen-ui/react/TextField";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import React, { FunctionComponent, HTMLAttributes, ReactElement, SyntheticEvent } from "react";
diff --git a/apps/console/src/features/roles/components/wizard-updated/role-permissions/role-permissions.tsx b/apps/console/src/features/roles/components/wizard-updated/role-permissions/role-permissions.tsx
index fd0679bc24c..ee62dfb3f7a 100644
--- a/apps/console/src/features/roles/components/wizard-updated/role-permissions/role-permissions.tsx
+++ b/apps/console/src/features/roles/components/wizard-updated/role-permissions/role-permissions.tsx
@@ -23,6 +23,7 @@ import { addAlert } from "@wso2is/core/store";
 import { Field, Form } from "@wso2is/form";
 import { EmphasizedSegment } from "@wso2is/react-components";
 import debounce, { DebouncedFunc } from "lodash-es/debounce";
+import isEmpty from "lodash-es/isEmpty";
 import React, { FunctionComponent, ReactElement, SyntheticEvent, useCallback, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
@@ -173,7 +174,7 @@ export const RolePermissionsList: FunctionComponent<RolePermissionsListProp> =
                     }
                 });
             }
-        
+
             setAPIResourcesListOptions(options);
         }, [ authorizedAPIListForApplication, apiResourcesList, selectedAPIResources ]);
 
@@ -199,10 +200,13 @@ export const RolePermissionsList: FunctionComponent<RolePermissionsListProp> =
          */
         const searchAPIResources: DebouncedFunc<(query: string) => void> = 
             useCallback(debounce((query: string) => {
-                setAPIResourceSearchQuery(`name co ${query}`);
+                setAPIResourceSearchQuery(
+                    !isEmpty(query) 
+                        ? `name co ${query}` 
+                        : null
+                );
                 mutateAPIResourcesListFetchRequest().finally(() => {
                     setAPIResourcesSearching(false);
-                    setAPIResourceSearchQuery(undefined);
                 });
             }, RoleConstants.DEBOUNCE_TIMEOUT), []);
 
@@ -224,6 +228,7 @@ export const RolePermissionsList: FunctionComponent<RolePermissionsListProp> =
          * else add the API resource to the selected API resources list from the authorized API list.
          */
         const onAPIResourceSelected = (event: SyntheticEvent<HTMLElement>, data: DropdownProps): void => {
+            event.preventDefault();
             if(roleAudience === RoleAudienceTypes.ORGANIZATION) {
                 setSelectedAPIResourceId(data.value.toString());
             } else {
@@ -240,6 +245,7 @@ export const RolePermissionsList: FunctionComponent<RolePermissionsListProp> =
                     ...selectedAPIResources 
                 ]);
             }
+            setAPIResourceSearchQuery(undefined);
         };
 
         /**
@@ -304,12 +310,14 @@ export const RolePermissionsList: FunctionComponent<RolePermissionsListProp> =
                         onSubmit={ undefined }
                     >
                         <Field.Dropdown
+                            search
+                            selection
+                            selectOnNavigation={ false }
                             ariaLabel="assignedApplication"
                             name="assignedApplication"
                             label={ t("console:manage.features.roles.addRoleWizard.forms.rolePermission." +
                                 "apiResource.label") }
                             options={ apiResourcesListOptions }
-                            search
                             data-componentid={ `${componentId}-typography-font-family-dropdown` }
                             placeholder={ t("console:manage.features.roles.addRoleWizard.forms.rolePermission." +
                                 "apiResource.placeholder") }