From db1525c96e1a23372c7e25bc9f379b799040dd89 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Thu, 26 Oct 2023 22:26:23 +0530
Subject: [PATCH 1/3] Improve roles UI in sub-organizations

---
 apps/console/src/features/roles/api/roles.ts  |  11 +-
 .../edit-role/edit-role-permission.tsx        | 252 +++++++++++-------
 .../roles/components/edit-role/edit-role.tsx  |   9 +-
 .../features/roles/components/role-list.tsx   |  33 ++-
 .../src/features/roles/pages/role-edit.tsx    |   8 +-
 .../console/src/features/roles/pages/role.tsx |  14 +-
 .../i18n/src/models/namespaces/console-ns.ts  |   7 +-
 .../src/translations/en-US/portals/console.ts |   9 +-
 .../src/translations/fr-FR/portals/console.ts |   9 +-
 .../src/translations/si-LK/portals/console.ts |   9 +-
 10 files changed, 239 insertions(+), 122 deletions(-)

diff --git a/apps/console/src/features/roles/api/roles.ts b/apps/console/src/features/roles/api/roles.ts
index 9edd793b309..26daf2c4d9b 100644
--- a/apps/console/src/features/roles/api/roles.ts
+++ b/apps/console/src/features/roles/api/roles.ts
@@ -478,7 +478,8 @@ export const useRolesList = <Data = RoleListInterface, Error = RequestErrorInter
  * @deprecated This is a temporary hook until the API resource feature moved to the features folder.
  */
 export const useAPIResourcesList = <Data = APIResourceListInterface, Error = RequestErrorInterface>(
-    filter?: string
+    filter?: string,
+    shouldFetch: boolean = true
 ): RequestResultInterface<Data, Error> => {
 
     const requestConfig: RequestConfigInterface = {
@@ -499,7 +500,7 @@ export const useAPIResourcesList = <Data = APIResourceListInterface, Error = Req
         isValidating,
         mutate,
         response
-    } = useRequest<Data, Error>(requestConfig);
+    } = useRequest<Data, Error>(shouldFetch ? requestConfig : null);
 
     return {
         data,
@@ -519,7 +520,8 @@ export const useAPIResourcesList = <Data = APIResourceListInterface, Error = Req
  * @deprecated This is a temporary hook until the API resource feature moved to the features folder.
  */
 export const useAPIResourceDetails = <Data = APIResourceInterface, Error = RequestErrorInterface>(
-    apiResourceId: string
+    apiResourceId: string,
+    shouldFetch: boolean = true
 ): RequestResultInterface<Data, Error> => {
 
     const requestConfig: RequestConfigInterface = {
@@ -534,7 +536,8 @@ export const useAPIResourceDetails = <Data = APIResourceInterface, Error = Reque
     /**
      * Pass `null` if the `apiResourceId` is not available. This will prevent the request from being called.
      */
-    const { data, error, isValidating, mutate } = useRequest<Data, Error>(apiResourceId ? requestConfig : null);
+    const { data, error, isValidating, mutate } = useRequest<Data, Error>((apiResourceId && shouldFetch)
+        ? requestConfig : null);
 
     return {
         data,
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..3c25dafe6e1 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
@@ -16,8 +16,13 @@
  * under the License.
  */
 
+import Autocomplete, {
+    AutocompleteRenderGetTagProps,
+    AutocompleteRenderInputParams
+} from "@oxygen-ui/react/Autocomplete";
 import Button from "@oxygen-ui/react/Button";
 import Grid from "@oxygen-ui/react/Grid";
+import TextField from "@oxygen-ui/react/TextField";
 import {
     AlertInterface,
     AlertLevels,
@@ -29,11 +34,20 @@ 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 React, { FunctionComponent, ReactElement, SyntheticEvent, useCallback, useEffect, useState } from "react";
+import React, {
+    FunctionComponent,
+    ReactElement,
+    ReactNode,
+    SyntheticEvent,
+    useCallback,
+    useEffect,
+    useState
+} from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
 import { DropdownProps } from "semantic-ui-react";
+import { RenderChip } from "./edit-role-common/render-chip";
 import { RoleAPIResourcesListItem } from "./edit-role-common/role-api-resources-list-item";
 import { getAPIResourceDetailsBulk, updateRoleDetails, useAPIResourceDetails, useAPIResourcesList } from "../../api";
 import { RoleConstants } from "../../constants/role-constants";
@@ -94,7 +108,7 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
         isLoading: isAPIResourcesListFetchRequestLoading,
         error: apiResourcsListFetchRequestError,
         mutate: mutateAPIResourcesListFetchRequest
-    } = useAPIResourcesList(apiResourceSearchQuery);
+    } = useAPIResourcesList(apiResourceSearchQuery, !isReadOnly);
 
     const {
         data: selectedAPIResource,
@@ -104,7 +118,7 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
     } = useAPIResourceDetails(selectedAPIResourceId);
 
     useEffect(() => {
-        getExistingAPIResources();
+        !isReadOnly && getExistingAPIResources();
     }, [ role ]);
 
     /**
@@ -341,105 +355,155 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
         }));
     };
 
+    const editablePermissionList = (): ReactNode => (
+        <Grid container direction="column" justifyContent="center" alignItems="flex-start" spacing={ 2 }>
+            <Grid xs={ 8 }>
+                <Form
+                    id={ componentId } 
+                    uncontrolledForm={ false } 
+                    onSubmit={ undefined }
+                >
+                    <Field.Dropdown
+                        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") }
+                        noResultsMessage={
+                            isAPIResourcesListFetchRequestLoading
+                                ? t("common:searching")
+                                : t("common:noResultsFound")
+                        }
+                        loading={ isAPIResourcesSearching }
+                        onSearchChange={ onSearchChangeAPIResources }
+                        onChange={ onAPIResourceSelected }
+                    />
+                </Form>
+            </Grid>
+            <Grid xs={ 12 }>
+                {
+                    selectedAPIResources?.length > 0 
+                        ? (
+                            <div className="role-permission-list field">
+                                <label className="form-label">
+                                    { t("console:manage.features.roles.addRoleWizard." +
+                                        "forms.rolePermission.permissions.label") }
+                                </label>
+                                <EmphasizedSegment
+                                    className="mt-2"
+                                    data-componentid={ componentId }
+                                    basic
+                                    loading={ 
+                                        selectedAPIResourceId &&
+                                        (isSelectedAPIResourceFetchRequestLoading 
+                                            || isSelectedAPIResourceFetchRequestValidating) 
+                                    }
+                                >
+                                    {
+                                        selectedAPIResources?.map((apiResource: APIResourceInterface) => {
+                                            return (
+                                                <RoleAPIResourcesListItem 
+                                                    key={ apiResource?.id }
+                                                    apiResource={ apiResource }
+                                                    onChangeScopes={ onChangeScopes }
+                                                    onRemoveAPIResource={ onRemoveAPIResource }
+                                                    initialSelectedPermissions={ initialSelectedPermissions?.find(
+                                                        (selectedPermission: SelectedPermissionsInterface) =>
+                                                            selectedPermission.apiResourceId === apiResource?.id)
+                                                        ?.scopes
+                                                    }
+                                                    selectedPermissions={ selectedPermissions?.find(
+                                                        (selectedPermission: SelectedPermissionsInterface) =>
+                                                            selectedPermission.apiResourceId === apiResource?.id)
+                                                        ?.scopes
+                                                    }
+                                                /> 
+                                            );
+                                        })
+                                    }
+                                </EmphasizedSegment>
+                            </div>
+                        ) : null
+                }
+            </Grid>
+        </Grid>
+    );
+
+    const readOnlyPermissionList = (): ReactNode => (
+        <Autocomplete
+            readOnly
+            multiple
+            options={ role?.permissions ?? [] }
+            defaultValue={ role?.permissions ?? [] }
+            getOptionLabel={ (scope: RolePermissionInterface) => scope.display }
+            renderInput={ (params: AutocompleteRenderInputParams) => (
+                <TextField
+                    { ...params }
+                    data-componentid={ `${componentId}-textfield` }
+                />
+            ) }
+            renderTags={ (
+                value: RolePermissionInterface[], 
+                getTagProps: AutocompleteRenderGetTagProps
+            ) => value.map((option: RolePermissionInterface, index: number) => (
+                <RenderChip 
+                    { ...getTagProps({ index }) }
+                    key={ index }
+                    className="pt-5 m-1"
+                    primaryText={ option.display }
+                    secondaryText={ option.value }
+                    option={ option }
+                    activeOption={ null }
+                    setActiveOption={ () => null }
+                    variant="solid"
+                />
+            )) }
+        />
+    );
+
     return (
         <EmphasizedSegment padded="very">
             <Grid xs={ 8 }>
                 <Heading as="h4">
                     { t("console:manage.features.roles.edit.permissions.heading") }
                 </Heading>
-                <Heading as="h6" color="grey" subHeading className="mb-5">
-                    { t("console:manage.features.roles.edit.permissions.subHeading") }
-                </Heading>
+                {
+                    isReadOnly ? (
+                        <Heading as="h6" color="grey" subHeading className="mb-5">
+                            { t("console:manage.features.roles.edit.permissions.readOnlySubHeading") }
+                        </Heading>
+                    ) : (
+                        <Heading as="h6" color="grey" subHeading className="mb-5">
+                            { t("console:manage.features.roles.edit.permissions.subHeading") }
+                        </Heading>
+                    )
+                }
             </Grid>
-            <Grid container direction="column" justifyContent="center" alignItems="flex-start" spacing={ 2 }>
-                <Grid xs={ 8 }>
-                    <Form
-                        id={ componentId } 
-                        uncontrolledForm={ false } 
-                        onSubmit={ undefined }
+            {
+                isReadOnly ? readOnlyPermissionList() : editablePermissionList()
+            }
+            {
+                !isReadOnly && (
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        size="small"
+                        className="mt-5"
+                        loading={ isSubmitting }
+                        disabled={ isReadOnly }
+                        onClick={ () => {
+                            updateRolePermissions();
+                        } }
+                        data-componentid={ `${ componentId }-update-button` }
                     >
-                        <Field.Dropdown
-                            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") }
-                            noResultsMessage={
-                                isAPIResourcesListFetchRequestLoading
-                                    ? t("common:searching")
-                                    : t("common:noResultsFound")
-                            }
-                            loading={ isAPIResourcesSearching }
-                            onSearchChange={ onSearchChangeAPIResources }
-                            onChange={ onAPIResourceSelected }
-                        />
-                    </Form>
-                </Grid>
-                <Grid xs={ 12 }>
-                    {
-                        selectedAPIResources?.length > 0 
-                            ? (
-                                <div className="role-permission-list field">
-                                    <label className="form-label">
-                                        { t("console:manage.features.roles.addRoleWizard.forms.rolePermission." +
-                                            "permissions.label") }
-                                    </label>
-                                    <EmphasizedSegment
-                                        className="mt-2"
-                                        data-componentid={ componentId }
-                                        basic
-                                        loading={ 
-                                            selectedAPIResourceId &&
-                                            (isSelectedAPIResourceFetchRequestLoading 
-                                                || isSelectedAPIResourceFetchRequestValidating) 
-                                        }
-                                    >
-                                        {
-                                            selectedAPIResources?.map((apiResource: APIResourceInterface) => {
-                                                return (
-                                                    <RoleAPIResourcesListItem 
-                                                        key={ apiResource?.id }
-                                                        apiResource={ apiResource }
-                                                        onChangeScopes={ onChangeScopes }
-                                                        onRemoveAPIResource={ onRemoveAPIResource }
-                                                        initialSelectedPermissions={ initialSelectedPermissions?.find(
-                                                            (selectedPermission: SelectedPermissionsInterface) =>
-                                                                selectedPermission.apiResourceId === apiResource?.id)
-                                                            ?.scopes
-                                                        }
-                                                        selectedPermissions={ selectedPermissions?.find(
-                                                            (selectedPermission: SelectedPermissionsInterface) =>
-                                                                selectedPermission.apiResourceId === apiResource?.id)
-                                                            ?.scopes
-                                                        }
-                                                    /> 
-                                                );
-                                            })
-                                        }
-                                    </EmphasizedSegment>
-                                </div>
-                            ) : null
-                    }
-                </Grid>
-            </Grid>
-            <Button
-                color="primary"
-                variant="contained"
-                size="small"
-                className="mt-5"
-                loading={ isSubmitting }
-                disabled={ isReadOnly }
-                onClick={ () => {
-                    updateRolePermissions();
-                } }
-                data-componentid={ `${ componentId }-update-button` }
-            >
-                { t("common:update") }
-            </Button>
+                        { t("common:update") }
+                    </Button>
+                )
+            }
         </EmphasizedSegment>
     );
 };
diff --git a/apps/console/src/features/roles/components/edit-role/edit-role.tsx b/apps/console/src/features/roles/components/edit-role/edit-role.tsx
index 3d458925691..ab58334a705 100644
--- a/apps/console/src/features/roles/components/edit-role/edit-role.tsx
+++ b/apps/console/src/features/roles/components/edit-role/edit-role.tsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import { OrganizationType } from "@wso2is/common";
 import { RoleConstants } from "@wso2is/core/constants";
 import { hasRequiredScopes } from "@wso2is/core/helpers";
 import { RolesInterface, SBACInterface } from "@wso2is/core/models";
@@ -28,6 +29,7 @@ import { RoleGroupsList } from "./edit-role-groups";
 import { UpdatedRolePermissionDetails } from "./edit-role-permission";
 import { RoleUsersList } from "./edit-role-users";
 import { AppState, FeatureConfigInterface } from "../../../core";
+import { useGetOrganizationType } from "../../../organizations/hooks/use-get-organization-type";
 
 /**
  * Captures props needed for edit role component
@@ -66,12 +68,15 @@ export const EditRole: FunctionComponent<EditRoleProps> = (props: EditRoleProps)
     } = props;
 
     const { t } = useTranslation();
+    const orgType: OrganizationType = useGetOrganizationType();
 
     const featureConfig: FeatureConfigInterface = useSelector((state: AppState) => state?.config?.ui?.features);
     const allowedScopes: string = useSelector((state: AppState) => state?.auth?.allowedScopes);
 
     const [ isAdminRole, setIsAdminRole ] = useState<boolean>(false);
 
+    const isSubOrg: boolean = orgType === OrganizationType.SUBORGANIZATION;
+
     /**
      * Set the if the role is `Internal/admin`.
      */
@@ -89,7 +94,7 @@ export const EditRole: FunctionComponent<EditRoleProps> = (props: EditRoleProps)
                 render: () => (
                     <ResourceTab.Pane controlledSegmentation attached={ false }>
                         <BasicRoleDetails
-                            isReadOnly={ isAdminRole
+                            isReadOnly={ isSubOrg || isAdminRole
                                 || !hasRequiredScopes(
                                     featureConfig?.roles, featureConfig?.roles?.scopes?.update, allowedScopes) }
                             role={ roleObject }
@@ -104,7 +109,7 @@ export const EditRole: FunctionComponent<EditRoleProps> = (props: EditRoleProps)
                 render: () => (
                     <ResourceTab.Pane controlledSegmentation attached={ false }>
                         <UpdatedRolePermissionDetails 
-                            isReadOnly={ isAdminRole
+                            isReadOnly={ isSubOrg || isAdminRole
                                 || !hasRequiredScopes(
                                     featureConfig?.roles, featureConfig?.roles?.scopes?.update, allowedScopes) }
                             role={ roleObject }
diff --git a/apps/console/src/features/roles/components/role-list.tsx b/apps/console/src/features/roles/components/role-list.tsx
index 467df90d69f..f6fadb31ddd 100644
--- a/apps/console/src/features/roles/components/role-list.tsx
+++ b/apps/console/src/features/roles/components/role-list.tsx
@@ -68,6 +68,10 @@ interface RoleListProps extends LoadableComponentInterface, IdentifiableComponen
      * Search query for the list.
      */
     searchQuery?: string;
+    /**
+     * Is the current org a sub org.
+     */
+    isSubOrg?: boolean;
 }
 
 /**
@@ -79,6 +83,7 @@ export const RoleList: React.FunctionComponent<RoleListProps> = (props: RoleList
 
     const {
         handleRoleDelete,
+        isSubOrg,
         onEmptyListPlaceholderActionClick,
         onSearchQueryClear,
         roleList,
@@ -131,7 +136,7 @@ export const RoleList: React.FunctionComponent<RoleListProps> = (props: RoleList
             return (
                 <EmptyPlaceholder
                     data-componentid={ `${ componentId }-empty-list-empty-placeholder` }
-                    action={ (
+                    action={ !isSubOrg && (
                         <Show when={ AccessControlConstants.ROLE_WRITE }>
                             <PrimaryButton
                                 data-componentid={ `${ componentId }-empty-list-empty-placeholder-add-button` }
@@ -145,16 +150,22 @@ export const RoleList: React.FunctionComponent<RoleListProps> = (props: RoleList
                     ) }
                     image={ getEmptyPlaceholderIllustrations().newList }
                     imageSize="tiny"
-                    title={ t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.title",
+                    title={ !isSubOrg && t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.title",
                         { type: "role" }) }
-                    subtitle={ [
-                        t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.0",
-                            { type: "roles" }),
-                        t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.1",
-                            { type: "role" }),
-                        t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.2",
-                            { type: "role" })
-                    ] }
+                    subtitle={ isSubOrg
+                        ? [
+                            t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.0",
+                                { type: "roles" })
+                        ]
+                        : [
+                            t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.0",
+                                { type: "roles" }),
+                            t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.1",
+                                { type: "role" }),
+                            t("console:manage.features.roles.list.emptyPlaceholders.emptyRoleList.subtitles.2",
+                                { type: "role" })
+                        ]
+                    }
                 />
             );
         }
@@ -260,7 +271,7 @@ export const RoleList: React.FunctionComponent<RoleListProps> = (props: RoleList
                 renderer: "semantic-icon"
             },
             {
-                hidden: (role: RolesInterface) => (role?.displayName === RoleConstants.ADMIN_ROLE ||
+                hidden: (role: RolesInterface) => isSubOrg || (role?.displayName === RoleConstants.ADMIN_ROLE ||
                     role?.displayName === RoleConstants.ADMIN_GROUP)
                     || !hasRequiredScopes(featureConfig?.roles, featureConfig?.roles?.scopes?.delete, allowedScopes),
                 icon: (): SemanticICONS => "trash alternate",
diff --git a/apps/console/src/features/roles/pages/role-edit.tsx b/apps/console/src/features/roles/pages/role-edit.tsx
index b32e85faa48..9addf09f9a7 100644
--- a/apps/console/src/features/roles/pages/role-edit.tsx
+++ b/apps/console/src/features/roles/pages/role-edit.tsx
@@ -137,8 +137,12 @@ const RoleEditPage: FunctionComponent<RoleEditPagePropsInterface> = (
                     description={ (
                         <Grid container alignItems="center">
                             <Grid>
-                                { `${t("console:manage.features.roles.list.columns.managedBy.label")}
-                                    ${roleObject?.audience?.type}` }
+                                {
+                                    RoleAudienceTypes.ORGANIZATION === roleObject?.audience?.type.toUpperCase()
+                                        ? t("console:manage.features.roles.list.columns.managedByOrg.label")
+                                        : t("console:manage.features.roles.list.columns.managedByApp.label")
+                                }
+                                { roleObject?.audience?.type }
                             </Grid>
                             <Grid>
                                 <Label
diff --git a/apps/console/src/features/roles/pages/role.tsx b/apps/console/src/features/roles/pages/role.tsx
index 4c726a7df48..783afde8bbe 100644
--- a/apps/console/src/features/roles/pages/role.tsx
+++ b/apps/console/src/features/roles/pages/role.tsx
@@ -17,6 +17,7 @@
  */
 
 import { AccessControlConstants, Show } from "@wso2is/access-control";
+import { OrganizationType } from "@wso2is/common";
 import { AlertInterface, AlertLevels, IdentifiableComponentInterface, RolesInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
 import { ListLayout, PageLayout, PrimaryButton } from "@wso2is/react-components";
@@ -28,6 +29,7 @@ import { Dispatch } from "redux";
 import { Dropdown, DropdownItemProps, DropdownProps, Icon, PaginationProps } from "semantic-ui-react";
 import { AdvancedSearchWithBasicFilters, AppConstants, UIConstants } from "../../core";
 import { history } from "../../core/helpers";
+import { useGetOrganizationType } from "../../organizations/hooks/use-get-organization-type";
 import { deleteRoleById, useRolesList } from "../api";
 import { RoleList } from "../components/role-list";
 import { RoleConstants } from "../constants";
@@ -50,12 +52,16 @@ const RolesPage: FunctionComponent<RolesPagePropsInterface> = (
     const dispatch: Dispatch = useDispatch();
     const { t } = useTranslation();
 
+    const orgType: OrganizationType = useGetOrganizationType();
+
     const [ listItemLimit, setListItemLimit ] = useState<number>(UIConstants.DEFAULT_RESOURCE_LIST_ITEM_LIMIT);
     const [ listOffset, setListOffset ] = useState<number>(0);
     const [ filterBy, setFilterBy ] = useState<string>(undefined);
     const [ isEmptyResults ] = useState<boolean>(false);
     const [ triggerClearQuery, setTriggerClearQuery ] = useState<boolean>(false);
 
+    const isSubOrg: boolean = orgType === OrganizationType.SUBORGANIZATION;
+
     const {
         data: rolesList,
         isLoading: isRolesListLoading,
@@ -174,7 +180,7 @@ const RolesPage: FunctionComponent<RolesPagePropsInterface> = (
     return (
         <PageLayout
             action={
-                !isRolesListLoading
+                !isSubOrg && !isRolesListLoading && isEmptyResults
                     ? (
                         <Show when={ AccessControlConstants.ROLE_WRITE }>
                             <PrimaryButton
@@ -192,7 +198,9 @@ const RolesPage: FunctionComponent<RolesPagePropsInterface> = (
             }
             title={ t("console:manage.pages.roles.title") }
             pageTitle={ t("console:manage.pages.roles.title") }
-            description={ t("console:manage.pages.roles.subTitle") }
+            description={ isSubOrg
+                ? t("console:manage.pages.roles.subOrg.subTitle")
+                : t("console:manage.pages.roles.subTitle") }
         >
             {
                 !isEmptyResults && (
@@ -235,6 +243,7 @@ const RolesPage: FunctionComponent<RolesPagePropsInterface> = (
                         listItemLimit={ listItemLimit }
                         onItemsPerPageDropdownChange={ handleItemsPerPageDropdownChange }
                         onPageChange={ handlePaginationChange }
+                        showTopActionPanel={ !isRolesListLoading && isEmptyResults }
                         rightActionPanel={
                             (
                                 <Dropdown
@@ -257,6 +266,7 @@ const RolesPage: FunctionComponent<RolesPagePropsInterface> = (
                             onSearchQueryClear={ handleSearchQueryClear }
                             roleList={ rolesList }
                             searchQuery={ filterBy }
+                            isSubOrg={ isSubOrg }
                         />
                     </ListLayout>
                 )
diff --git a/modules/i18n/src/models/namespaces/console-ns.ts b/modules/i18n/src/models/namespaces/console-ns.ts
index 685c7c3b36b..7044d900726 100644
--- a/modules/i18n/src/models/namespaces/console-ns.ts
+++ b/modules/i18n/src/models/namespaces/console-ns.ts
@@ -5378,6 +5378,7 @@ export interface ConsoleNS {
                     permissions: {
                         heading: string;
                         subHeading: string;
+                        readOnlySubHeading: string;
                         removedPermissions: string;
                     };
                 };
@@ -5390,7 +5391,11 @@ export interface ConsoleNS {
                         actions: string;
                         lastModified: string;
                         name: string;
-                        managedBy: {
+                        managedByOrg: {
+                            label: string;
+                            header: string;
+                        };
+                        managedByApp: {
                             label: string;
                             header: string;
                         };
diff --git a/modules/i18n/src/translations/en-US/portals/console.ts b/modules/i18n/src/translations/en-US/portals/console.ts
index bc76ab62374..ec502972ed8 100644
--- a/modules/i18n/src/translations/en-US/portals/console.ts
+++ b/modules/i18n/src/translations/en-US/portals/console.ts
@@ -10316,6 +10316,7 @@ export const console: ConsoleNS = {
                     },
                     permissions: {
                         heading: "Assigned Permissions",
+                        readOnlySubHeading: "View the assigned permissions of the role.",
                         removedPermissions: "Removed Permissions",
                         subHeading: "Manage assigned permissions in the role."
                     }
@@ -10329,8 +10330,12 @@ export const console: ConsoleNS = {
                         actions: "Actions",
                         audience: "Audience",
                         lastModified: "Modified Time",
-                        managedBy: {
-                            label: "Managed by",
+                        managedByApp: {
+                            label: "Can be used only in the application: ",
+                            header: "Managed By"
+                        },
+                        managedByOrg: {
+                            label: "Can be used within the organization: ",
                             header: "Managed By"
                         },
                         name: "Role"
diff --git a/modules/i18n/src/translations/fr-FR/portals/console.ts b/modules/i18n/src/translations/fr-FR/portals/console.ts
index e957ea58d1a..6ee50d83ebe 100755
--- a/modules/i18n/src/translations/fr-FR/portals/console.ts
+++ b/modules/i18n/src/translations/fr-FR/portals/console.ts
@@ -8560,6 +8560,7 @@ export const console: ConsoleNS = {
                     },
                     permissions: {
                         heading: "Autorisations attribuées",
+                        readOnlySubHeading: "Voir les autorisations attribuées du rôle.",
                         removedPermissions: "Autorisations supprimées",
                         subHeading: "Gérer les autorisations attribuées dans le rôle."
                     }
@@ -8573,8 +8574,12 @@ export const console: ConsoleNS = {
                         actions: "Actions",
                         audience: "Public",
                         lastModified: "Dernière modification",
-                        managedBy: {
-                            label: "Dirigé par",
+                        managedByApp: {
+                            label: "Ne peut être utilisé que dans l'application: ",
+                            header: "Dirigé par"
+                        },
+                        managedByOrg: {
+                            label: "Peut être utilisé au sein de l'organisation: ",
                             header: "Dirigé par"
                         },
                         name: "Nom"
diff --git a/modules/i18n/src/translations/si-LK/portals/console.ts b/modules/i18n/src/translations/si-LK/portals/console.ts
index dd26c64092b..59b84f8bea6 100755
--- a/modules/i18n/src/translations/si-LK/portals/console.ts
+++ b/modules/i18n/src/translations/si-LK/portals/console.ts
@@ -8383,6 +8383,7 @@ export const console: ConsoleNS = {
                     },
                     permissions: {
                         heading: "පවරා ඇති අවසර",
+                        readOnlySubHeading: "භූමිකාවේ පවරා ඇති අවසරයන් බලන්න.",
                         removedPermissions: "අවසර ඉවත් කරන ලද අවසර",
                         subHeading: "මෙම භූමිකාව තුළ පවරා ඇති අවසරයන් කළමනාකරණය කරන්න."
                     }
@@ -8396,8 +8397,12 @@ export const console: ConsoleNS = {
                         actions: "ක්‍රියා",
                         audience: "ප්‍රවේශමෙන්නිය",
                         lastModified: "අවසන් වරට වෙනස් කරන ලදි",
-                        managedBy: {
-                            label: "කළමනාකරණය",
+                        managedByApp: {
+                            label: "යෙදුමේ පමණක් භාවිතා කළ හැකිය: ",
+                            header: "කළමනාකරණය"
+                        },
+                        managedByOrg: {
+                            label: "සංවිධානය තුළ භාවිතා කළ හැකිය: ",
                             header: "කළමනාකරණය"
                         },
                         name: "නම"

From b6c1d6b1172ae5f3d13520e0091c7c556f84e049 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Thu, 26 Oct 2023 22:42:16 +0530
Subject: [PATCH 2/3] Add translation

---
 apps/console/src/features/roles/pages/role-edit.tsx    | 1 -
 apps/console/src/features/roles/pages/role.tsx         | 2 +-
 modules/i18n/src/translations/en-US/portals/console.ts | 1 +
 modules/i18n/src/translations/fr-FR/portals/console.ts | 1 +
 modules/i18n/src/translations/si-LK/portals/console.ts | 1 +
 5 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/console/src/features/roles/pages/role-edit.tsx b/apps/console/src/features/roles/pages/role-edit.tsx
index 9addf09f9a7..ccaaf46d920 100644
--- a/apps/console/src/features/roles/pages/role-edit.tsx
+++ b/apps/console/src/features/roles/pages/role-edit.tsx
@@ -142,7 +142,6 @@ const RoleEditPage: FunctionComponent<RoleEditPagePropsInterface> = (
                                         ? t("console:manage.features.roles.list.columns.managedByOrg.label")
                                         : t("console:manage.features.roles.list.columns.managedByApp.label")
                                 }
-                                { roleObject?.audience?.type }
                             </Grid>
                             <Grid>
                                 <Label
diff --git a/apps/console/src/features/roles/pages/role.tsx b/apps/console/src/features/roles/pages/role.tsx
index 783afde8bbe..5047b13d2b1 100644
--- a/apps/console/src/features/roles/pages/role.tsx
+++ b/apps/console/src/features/roles/pages/role.tsx
@@ -199,7 +199,7 @@ const RolesPage: FunctionComponent<RolesPagePropsInterface> = (
             title={ t("console:manage.pages.roles.title") }
             pageTitle={ t("console:manage.pages.roles.title") }
             description={ isSubOrg
-                ? t("console:manage.pages.roles.subOrg.subTitle")
+                ? t("console:manage.pages.roles.alternateSubTitle")
                 : t("console:manage.pages.roles.subTitle") }
         >
             {
diff --git a/modules/i18n/src/translations/en-US/portals/console.ts b/modules/i18n/src/translations/en-US/portals/console.ts
index ec502972ed8..2744ca0d03e 100644
--- a/modules/i18n/src/translations/en-US/portals/console.ts
+++ b/modules/i18n/src/translations/en-US/portals/console.ts
@@ -12353,6 +12353,7 @@ export const console: ConsoleNS = {
                 title: "Welcome, {{firstName}}"
             },
             roles: {
+                alternateSubTitle: "View and manage roles.",
                 subTitle: "Create and manage roles, assign permissions for roles.",
                 title: "Roles"
             },
diff --git a/modules/i18n/src/translations/fr-FR/portals/console.ts b/modules/i18n/src/translations/fr-FR/portals/console.ts
index 6ee50d83ebe..7c7c42fabf3 100755
--- a/modules/i18n/src/translations/fr-FR/portals/console.ts
+++ b/modules/i18n/src/translations/fr-FR/portals/console.ts
@@ -10657,6 +10657,7 @@ export const console: ConsoleNS = {
                 title: "Bienvenue, {{firstName}}"
             },
             roles: {
+                alternateSubTitle: "Afficher et gérer les rôles.",
                 subTitle: "Créer et gérer les rôles, attribuer des permissions.",
                 title: "Rôles"
             },
diff --git a/modules/i18n/src/translations/si-LK/portals/console.ts b/modules/i18n/src/translations/si-LK/portals/console.ts
index 59b84f8bea6..d6f172a5df3 100755
--- a/modules/i18n/src/translations/si-LK/portals/console.ts
+++ b/modules/i18n/src/translations/si-LK/portals/console.ts
@@ -10418,6 +10418,7 @@ export const console: ConsoleNS = {
                 title: "සාදරයෙන් පිළිගනිමු, {{firstName}}"
             },
             roles: {
+                alternateSubTitle: "භූමිකාවන් බලන්න සහ කළමනාකරණය කරන්න.",
                 subTitle: "භූමිකාවන් සාදන්න සහ කළමනාකරණය කරන්න, භූමිකාවන් සඳහා අවසර ලබා දෙන්න.",
                 title: "භූමිකාවන්"
             },

From 917be49917c1eaa6eb60ef031413c39ef36d22e7 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Fri, 27 Oct 2023 09:51:38 +0530
Subject: [PATCH 3/3] Fix commit suggestions

---
 .../roles/components/edit-role/edit-role-permission.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 3c25dafe6e1..51cf862408b 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
@@ -118,7 +118,9 @@ export const UpdatedRolePermissionDetails: FunctionComponent<RolePermissionDetai
     } = useAPIResourceDetails(selectedAPIResourceId);
 
     useEffect(() => {
-        !isReadOnly && getExistingAPIResources();
+        !isReadOnly 
+            ? getExistingAPIResources()
+            : null;
     }, [ role ]);
 
     /**