Fix Role permission, api resource not displaying bug

.changeset/purple-icons-deny.md

@@ -0,0 +1,5 @@
+---
+"@wso2is/console": patch
+---
+
+role permission, api resource not displaying bug fixed

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.

apps/console/src/features/roles/components/edit-role/edit-role-permission.tsx

@@ -34,6 +34,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,
@@ -303,18 +304,23 @@ 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), []);
 
     /**
      * Handles the selection of an API resource.
      */
     const onAPIResourceSelected = (event: SyntheticEvent<HTMLElement>, data: DropdownProps): void => {
+        event.preventDefault();
         setSelectedAPIResourceId(data.value.toString());
+        setAPIResourceSearchQuery(undefined);
     };
 
     /**
@@ -366,12 +372,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") }

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";

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") }

apps/console/src/features/roles/pages/create-role-wizard.tsx

@@ -36,10 +36,12 @@ import { RoleAudienceTypes } from "../constants";
 import {
     CreateRoleFormData,
     CreateRoleInterface,
+    CreateRolePermissionInterface,
     CreateRoleStateInterface,
     CreateRoleStepsFormTypes,
     SelectedPermissionsInterface
 } from "../models";
+import { ScopeInterface } from "../models/apiResources";
 
 /**
  * Interface which captures create role props.
@@ -88,6 +90,10 @@ const CreateRoleWizard: FunctionComponent<CreateRoleProps> = (props: CreateRoleP
 
             const roleAudience: string = stepperState[ CreateRoleStepsFormTypes.BASIC_DETAILS ].roleAudience;
             const organizationId: string = store.getState().organization.organization.id;
+            const selectedPermissionsList: CreateRolePermissionInterface[] = selectedPermissions?.flatMap(
+                (permission: SelectedPermissionsInterface) => (
+                    permission?.scopes?.map((scope: ScopeInterface) => ({ value: scope?.name })) || []
+                )) || [];
 
             const roleData: CreateRoleInterface = {
                 audience: roleAudience === RoleAudienceTypes.ORGANIZATION
@@ -100,7 +106,7 @@ const CreateRoleWizard: FunctionComponent<CreateRoleProps> = (props: CreateRoleP
                         value: stepperState[ CreateRoleStepsFormTypes.BASIC_DETAILS ].assignedApplicationId
                     },
                 displayName: stepperState[ CreateRoleStepsFormTypes.BASIC_DETAILS ].roleName,
-                permissions: [],
+                permissions: selectedPermissionsList,
                 schemas: []
             };