Merge pull request wso2#4474 from dasuni-30/fix/17351

Improve the application selection dropdown under Application audience role creation
savindi7 · Nov 1, 2023 · 7cf21cf · 7cf21cf
2 parents 853016c + cb509f3
commit 7cf21cf
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 6 deletions.
diff --git a/.changeset/itchy-experts-raise.md b/.changeset/itchy-experts-raise.md
@@ -0,0 +1,6 @@
+---
+"@wso2is/console": patch
+"@wso2is/i18n": patch
+---
+
+Improve the application selection dropdown under Application audience role creation
diff --git a/apps/console/src/features/applications/models/application.ts b/apps/console/src/features/applications/models/application.ts
@@ -41,6 +41,7 @@ export interface ApplicationBasicInterface {
     templateId?: string;
     isManagementApp?: boolean;
     advancedConfigurations?: AdvancedConfigurationsInterface;
+    associatedRoles?: AssociatedRolesInterface;
 }
 
 export enum ApplicationAccessTypes {

diff --git a/apps/console/src/features/roles/components/wizard-updated/role-basics.tsx b/apps/console/src/features/roles/components/wizard-updated/role-basics.tsx
@@ -93,12 +93,17 @@ export const RoleBasics: FunctionComponent<RoleBasicProps> = (props: RoleBasicPr
 
     const noApplicationsAvailable: MutableRefObject<boolean> = useRef<boolean>(false);
 
+    /**
+     * Index of the roles tab.
+     */
+    const ROLES_TAB_INDEX: number = 5;
+
     const {
         data: applicationList,
         isLoading: isApplicationListFetchRequestLoading,
         error: applicationListFetchRequestError,
         mutate: mutateApplicationListFetchRequest
-    } = useApplicationList("clientId", null, null, applicationSearchQuery);
+    } = useApplicationList("clientId,associatedRoles.allowedAudience", null, null, applicationSearchQuery);
 
     const {
         data: rolesList,
@@ -137,10 +142,26 @@ export const RoleBasics: FunctionComponent<RoleBasicProps> = (props: RoleBasicPr
                     content: (
                         <ListItemText 
                             primary={ application.name } 
-                            secondary={ t("console:manage.features.roles.addRoleWizard.forms.roleBasicDetails." + 
-                                "assignedApplication.applicationSubTitle.application") } 
+                            secondary={ 
+                                application?.associatedRoles?.allowedAudience === RoleAudienceTypes.ORGANIZATION
+                                    ? (
+                                        <>
+                                            { t("console:manage.features.roles.addRoleWizard.forms.roleBasicDetails." + 
+                                                "assignedApplication.applicationSubTitle.application") }
+                                            <Link
+                                                data-componentid={ `${componentId}-link-navigate-roles` }
+                                                onClick={ () => navigateToApplicationEdit(application?.id) }
+                                                external={ false }
+                                            >
+                                                Change the audience
+                                            </Link>
+                                        </>
+                                    ) : t("console:manage.features.roles.addRoleWizard.forms.roleBasicDetails." + 
+                                        "assignedApplication.applicationSubTitle.organization")
+                            } 
                         />
                     ),
+                    disabled: application?.associatedRoles?.allowedAudience === RoleAudienceTypes.ORGANIZATION,
                     key: application.id,
                     text: application.name,
                     value: application.id
@@ -204,6 +225,15 @@ export const RoleBasics: FunctionComponent<RoleBasicProps> = (props: RoleBasicPr
      */
     const navigateToApplications = () => history.push(AppConstants.getPaths().get("APPLICATIONS"));
 
+    /**
+     * Navigate to the Applications Edit page.
+     */
+    const navigateToApplicationEdit = (appId: string) => 
+        history.push({
+            pathname: AppConstants.getPaths().get("APPLICATION_SIGN_IN_METHOD_EDIT")
+                .replace(":id", appId).replace(":tabName", `#tab=${ ROLES_TAB_INDEX }`)
+        });
+
     /**
      * Validates the Form.
      *

diff --git a/modules/i18n/src/translations/en-US/portals/console.ts b/modules/i18n/src/translations/en-US/portals/console.ts
@@ -10170,7 +10170,7 @@ export const console: ConsoleNS = {
                                 label: "Assigned application",
                                 placeholder: "Select application to assign the role",
                                 applicationSubTitle: {
-                                    application: "Support application-scoped roles",
+                                    application: "Support application-scoped roles. ",
                                     organization: "Support organization-scoped roles"
                                 },
                                 validations: {

diff --git a/modules/i18n/src/translations/fr-FR/portals/console.ts b/modules/i18n/src/translations/fr-FR/portals/console.ts
@@ -8401,7 +8401,7 @@ export const console: ConsoleNS = {
                                 label: "Application attribuée",
                                 placeholder: "Sélectionnez l'application pour attribuer le rôle",
                                 applicationSubTitle: {
-                                    application: "Prise en charge des rôles à application",
+                                    application: "Prise en charge des rôles à application. ",
                                     organization: "Rôles de soutien à l'organisation"
                                 },
                                 validations: {

diff --git a/modules/i18n/src/translations/si-LK/portals/console.ts b/modules/i18n/src/translations/si-LK/portals/console.ts
@@ -8222,7 +8222,7 @@ export const console: ConsoleNS = {
                                 label: "පවරා ඇති අයදුම්පත",
                                 placeholder: "භූමිකාව පැවරීම සඳහා අයදුම්පත තෝරන්න",
                                 applicationSubTitle: {
-                                    application: "අයදුම්පත් සහිත භූමිකාවන් සහාය",
+                                    application: "අයදුම්පත් සහිත භූමිකාවන් සහාය. ",
                                     organization: "සංවිධාන භූමිකාවන් සහාය"
                                 },
                                 validations: {