From 026d62f4274d64869c36c6fc224ea11bbf2c6eaf Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Wed, 25 Oct 2023 15:26:37 +0530 Subject: [PATCH] enable role V2 feature --- .../src/features/core/configs/routes.tsx | 12 + .../features/core/constants/app-constants.ts | 1 + .../edit-group/edit-group-roles-updated.tsx | 148 --- .../edit-group/edit-group-roles.tsx | 1036 ++-------------- .../components/edit-group/edit-group.tsx | 32 +- apps/console/src/features/roles/api/roles.ts | 4 +- .../edit-role/edit-role-basic-updated.tsx | 269 ---- .../components/edit-role/edit-role-basic.tsx | 439 ++----- .../edit-role/edit-role-groups-updated.tsx | 546 --------- .../components/edit-role/edit-role-groups.tsx | 1077 +++++++---------- .../edit-role-permission-updated.tsx | 459 ------- .../edit-role/edit-role-permission.tsx | 513 ++++++-- .../edit-role/edit-role-updated.tsx | 148 --- .../edit-role/edit-role-users-updated.tsx | 549 --------- .../components/edit-role/edit-role-users.tsx | 573 +++++++-- .../roles/components/edit-role/edit-role.tsx | 84 +- .../roles/components/edit-role/index.ts | 23 - .../src/features/roles/components/index.ts | 5 +- .../roles/components/role-list-updated.tsx | 330 ----- .../features/roles/components/role-list.tsx | 212 +--- .../components/wizard-updated/role-basics.tsx | 31 +- .../components/wizard/create-role-wizard.tsx | 542 --------- .../features/roles/components/wizard/index.ts | 5 +- .../roles/components/wizard/role-basics.tsx | 208 ---- .../roles/components/wizard/role-sumary.tsx | 240 ---- .../create-role-wizard.tsx | 22 +- .../console/src/features/roles/pages/index.ts | 20 - .../roles/pages/role-edit-updated.tsx | 188 --- .../src/features/roles/pages/role-edit.tsx | 194 ++- .../src/features/roles/pages/role-updated.tsx | 282 ----- .../console/src/features/roles/pages/role.tsx | 409 ++----- .../features/users/components/edit-user.tsx | 28 +- .../users/components/user-roles-edit.tsx | 993 --------------- ...s-list-updated.tsx => user-roles-list.tsx} | 5 +- 34 files changed, 1965 insertions(+), 7662 deletions(-) delete mode 100644 apps/console/src/features/groups/components/edit-group/edit-group-roles-updated.tsx delete mode 100644 apps/console/src/features/roles/components/edit-role/edit-role-basic-updated.tsx delete mode 100644 apps/console/src/features/roles/components/edit-role/edit-role-groups-updated.tsx delete mode 100644 apps/console/src/features/roles/components/edit-role/edit-role-permission-updated.tsx delete mode 100644 apps/console/src/features/roles/components/edit-role/edit-role-updated.tsx delete mode 100644 apps/console/src/features/roles/components/edit-role/edit-role-users-updated.tsx delete mode 100644 apps/console/src/features/roles/components/edit-role/index.ts delete mode 100644 apps/console/src/features/roles/components/role-list-updated.tsx delete mode 100644 apps/console/src/features/roles/components/wizard/create-role-wizard.tsx delete mode 100644 apps/console/src/features/roles/components/wizard/role-basics.tsx delete mode 100644 apps/console/src/features/roles/components/wizard/role-sumary.tsx rename apps/console/src/features/roles/{components/wizard-updated => pages}/create-role-wizard.tsx (94%) delete mode 100644 apps/console/src/features/roles/pages/index.ts delete mode 100644 apps/console/src/features/roles/pages/role-edit-updated.tsx delete mode 100644 apps/console/src/features/roles/pages/role-updated.tsx delete mode 100644 apps/console/src/features/users/components/user-roles-edit.tsx rename apps/console/src/features/users/components/{user-roles-list-updated.tsx => user-roles-list.tsx} (97%) diff --git a/apps/console/src/features/core/configs/routes.tsx b/apps/console/src/features/core/configs/routes.tsx index eaa2ba89735..b2a5a37b48d 100644 --- a/apps/console/src/features/core/configs/routes.tsx +++ b/apps/console/src/features/core/configs/routes.tsx @@ -1437,6 +1437,18 @@ export const getAppViewRoutes = (useExtendedRoutes: boolean = false): RouteInter path: AppConstants.getPaths().get("ROLE_EDIT"), protected: true, showOnSidePanel: false + }, + { + component: lazy(() => import("../../roles/pages/create-role-wizard")), + exact: true, + icon: { + icon: getSidePanelIcons().childIcon + }, + id: "rolesCreate", + name: "console:manage.features.sidePanel.createRole", + path: AppConstants.getPaths().get("ROLE_CREATE"), + protected: true, + showOnSidePanel: true } ], component: lazy(() => import("../../roles/pages/role")), diff --git a/apps/console/src/features/core/constants/app-constants.ts b/apps/console/src/features/core/constants/app-constants.ts index 3a526fc6a1b..04d06ed5b5a 100644 --- a/apps/console/src/features/core/constants/app-constants.ts +++ b/apps/console/src/features/core/constants/app-constants.ts @@ -326,6 +326,7 @@ export class AppConstants { [ "PRIVACY", `${ AppConstants.getMainViewBasePath() }/privacy` ], [ "REMOTE_REPO_CONFIG", `${ AppConstants.getAdminViewBasePath() }/remote-repository-config` ], [ "ROLES", `${ AppConstants.getAdminViewBasePath() }/roles` ], + [ "ROLE_CREATE", `${ AppConstants.getAdminViewBasePath() }/create-role` ], [ "ROLE_EDIT", `${ AppConstants.getAdminViewBasePath() }/roles/:id` ], [ "ROOT", "/" ], [ "GOVERNANCE_CONNECTORS", `${AppConstants.getAdminViewBasePath()}/governance-connectors/:id` ], diff --git a/apps/console/src/features/groups/components/edit-group/edit-group-roles-updated.tsx b/apps/console/src/features/groups/components/edit-group/edit-group-roles-updated.tsx deleted file mode 100644 index 95e4bf3ad6e..00000000000 --- a/apps/console/src/features/groups/components/edit-group/edit-group-roles-updated.tsx +++ /dev/null @@ -1,148 +0,0 @@ -/** - * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import { Autocomplete, AutocompleteRenderGetTagProps, AutocompleteRenderInputParams } from "@mui/material"; -import TextField from "@oxygen-ui/react/TextField"; -import { IdentifiableComponentInterface, RolesMemberInterface } from "@wso2is/core/models"; -import { EmphasizedSegment, EmptyPlaceholder, Heading } from "@wso2is/react-components"; -import React, { - FunctionComponent, - HTMLAttributes, - ReactElement, - useEffect, - useState -} from "react"; -import { useTranslation } from "react-i18next"; -import { getEmptyPlaceholderIllustrations } from "../../../core/configs/ui"; -import { GroupsInterface } from "../../models/groups"; -import { AutoCompleteRenderOption } from "../group-common-components/auto-complete-render-option"; -import { RenderChip } from "../group-common-components/render-chip"; - -interface EditGroupRolesPropsInterface extends IdentifiableComponentInterface { - /** - * Group profile - */ - group: GroupsInterface; -} - -export const EditGroupRoles: FunctionComponent = ( - props: EditGroupRolesPropsInterface -): ReactElement => { - - const { group } = props; - - const { t } = useTranslation(); - - const [ initialSelectedRolesOptions, setInitialSelectedRolesOptions ] = useState([]); - const [ activeOption, setActiveOption ] = useState(undefined); - const [ showEmptyRolesListPlaceholder, setShowEmptyRolesListPlaceholder ] = useState(false); - - /** - * Set initial selected roles options - */ - useEffect(() => { - if ( group?.roles?.length > 0 ) { - setInitialSelectedRolesOptions(group.roles); - } else { - setShowEmptyRolesListPlaceholder(true); - } - }, [ group ]); - - /** - * Get the place holder components. - * - * @returns place holder components - */ - const getPlaceholders = () => { - if (showEmptyRolesListPlaceholder) { - return ( - // TODO: Need to replace the i18N with the correct one. - - ); - } - }; - - return ( - - - { t("console:manage.features.user.updateUser.roles.editRoles.heading") } - - - { /* TODO: Need to replace this with "View assigned roles for the group." */ } - { t("console:manage.features.groups.edit.roles.subHeading") } - - { - showEmptyRolesListPlaceholder - ? getPlaceholders() - : ( - role.display } - renderInput={ (params: AutocompleteRenderInputParams) => ( - - ) } - renderTags={ ( - value: RolesMemberInterface[], - getTagProps: AutocompleteRenderGetTagProps - ) => value.map((option: RolesMemberInterface, index: number) => ( - - )) } - renderOption={ ( - props: HTMLAttributes, - option: RolesMemberInterface - ) => ( - - ) } - /> - ) - } - - ); -}; - -/** - * Default props for application roles tab component. - */ -EditGroupRoles.defaultProps = { - "data-componentid": "edit-group-roles" -}; diff --git a/apps/console/src/features/groups/components/edit-group/edit-group-roles.tsx b/apps/console/src/features/groups/components/edit-group/edit-group-roles.tsx index 4bd5f81f35f..ef7bd9a7c2b 100644 --- a/apps/console/src/features/groups/components/edit-group/edit-group-roles.tsx +++ b/apps/console/src/features/groups/components/edit-group/edit-group-roles.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except @@ -16,972 +16,136 @@ * under the License. */ -import { - AlertLevels, - RolesMemberInterface, - TestableComponentInterface -} from "@wso2is/core/models"; -import { addAlert } from "@wso2is/core/store"; -import { - EmphasizedSegment, - EmptyPlaceholder, - Heading, - LinkButton, - Popup, - PrimaryButton, - TransferComponent, - TransferList, - TransferListItem, - useWizardAlert -} from "@wso2is/react-components"; -import { AxiosError, AxiosResponse } from "axios"; -import escapeRegExp from "lodash-es/escapeRegExp"; -import forEach from "lodash-es/forEach"; -import forEachRight from "lodash-es/forEachRight"; -import isEmpty from "lodash-es/isEmpty"; -import React, { FunctionComponent, ReactElement, useEffect, useMemo, useState } from "react"; +import Autocomplete, { + AutocompleteRenderGetTagProps, + AutocompleteRenderInputParams +} from "@oxygen-ui/react/Autocomplete"; +import TextField from "@oxygen-ui/react/TextField"; +import { IdentifiableComponentInterface, RolesMemberInterface } from "@wso2is/core/models"; +import { EmphasizedSegment, EmptyPlaceholder, Heading } from "@wso2is/react-components"; +import React, { + FunctionComponent, + HTMLAttributes, + ReactElement, + useEffect, + useState +} from "react"; import { useTranslation } from "react-i18next"; -import { useDispatch, useSelector } from "react-redux"; -import { Dispatch } from "redux"; -import { - Button, - Divider, - Grid, - Icon, - Input, - InputOnChangeData, - Label, - Modal, - Table -} from "semantic-ui-react"; -import { AppState, getEmptyPlaceholderIllustrations, updateResources } from "../../../core"; -import { getOrganizationRoles } from "../../../organizations/api"; -import { - OrganizationResponseInterface, - OrganizationRoleListResponseInterface -} from "../../../organizations/models/organizations"; -import { OrganizationUtils } from "../../../organizations/utils"; -import { getRolesList } from "../../../roles/api/roles"; -import { APPLICATION_DOMAIN, INTERNAL_DOMAIN } from "../../../roles/constants/role-constants"; -import { UserRolePermissions } from "../../../users/components/user-role-permissions"; -import { RolePermissions } from "../../../users/components/wizard/user-role-permissions"; -import { GroupsInterface } from "../../models"; +import { getEmptyPlaceholderIllustrations } from "../../../core/configs/ui"; +import { GroupsInterface } from "../../models/groups"; +import { AutoCompleteRenderOption } from "../group-common-components/auto-complete-render-option"; +import { RenderChip } from "../group-common-components/render-chip"; -interface GroupRolesPropsInterface extends TestableComponentInterface { +interface EditGroupRolesPropsInterface extends IdentifiableComponentInterface { /** - * User profile + * Group profile */ group: GroupsInterface; - /** - * Handle user update callback. - */ - onGroupUpdate: (groupId: string) => void; - /** - * Show if the user is read only. - */ - isReadOnly?: boolean; } -export const GroupRolesList: FunctionComponent = ( - props: GroupRolesPropsInterface +export const EditGroupRoles: FunctionComponent = ( + props: EditGroupRolesPropsInterface ): ReactElement => { - const { - group, - isReadOnly, - onGroupUpdate - } = props; + const { group } = props; const { t } = useTranslation(); - const dispatch: Dispatch = useDispatch(); - - const [ showAddNewRoleModal, setAddNewRoleModalView ] = useState(false); - //TODO: [Fix Type] Ideally this should be a `RolesMemberInterface[]` - //but the existing logic breaks since `RolesMemberInterface` does not have a `displayName` property. - const [ roleList, setRoleList ] = useState([]); - const [ tempRoleList, setTempRoleList ] = useState([]); - const [ initialRoleList, setInitialRoleList ] = useState([]); - const [ initialTempRoleList, setInitialTempRoleList ] = useState([]); - //TODO: [Fix Type] Ideally this should be a `RolesInterface[]` - //but the `setPrimaryRoles` method usage is not consistent with the type. - const [ primaryRoles, setPrimaryRoles ] = useState(undefined); - const [ isSubmitting, setIsSubmitting ] = useState(false); - - // The following constant holds the state of role already assigned roles. - const [ primaryRolesList, setPrimaryRolesList ] = useState>(undefined); - - const [ checkedUnassignedListItems, setCheckedUnassignedListItems ] = useState([]); - const [ checkedAssignedListItems, setCheckedAssignedListItems ] = useState([]); - const [ isSelectUnassignedRolesAllRolesChecked, setIsSelectUnassignedAllRolesChecked ] = useState(false); - const [ isSelectAssignedAllRolesChecked, setIsSelectAssignedAllRolesChecked ] = useState(false); - const [ showRolePermissionModal, setRolePermissionModal ] = useState(false); - const [ selectedRoleId, setSelectedRoleId ] = useState(""); - const [ isRoleSelected, setRoleSelection ] = useState(false); - - // The following constant are used to persist the state of the unassigned roles permissions. - const [ viewRolePermissions, setViewRolePermissions ] = useState(false); - const [ roleId, setRoleId ] = useState(); - const [ isSelected, setSelection ] = useState(false); - - const [ assignedRoles, setAssignedRoles ] = useState([]); - - const currentOrganization: OrganizationResponseInterface = useSelector( - (state: AppState) => state.organization.organization); - - const isRootOrganization: boolean = useMemo( - () => OrganizationUtils.isRootOrganization(currentOrganization), - [ currentOrganization ] - ); - - const [ alert, setAlert, alertComponent ] = useWizardAlert(); - - useEffect(() => { - if (!selectedRoleId) { - return; - } - - if (isRoleSelected) { - handleOpenRolePermissionModal(); - } - }, [ isRoleSelected ]); - - useEffect(() => { - if (!roleId) { - return; - } - - if (isSelected) { - setViewRolePermissions(true); - } - }, [ isSelected ]); - - useEffect(() => { - if (isSelectAssignedAllRolesChecked) { - setCheckedAssignedListItems(tempRoleList); - } else { - setCheckedAssignedListItems([]); - } - }, [ isSelectAssignedAllRolesChecked ]); - useEffect(() => { - if (isSelectUnassignedRolesAllRolesChecked) { - setCheckedUnassignedListItems(roleList); - } else { - setCheckedUnassignedListItems([]); - } - }, [ isSelectUnassignedRolesAllRolesChecked ]); - - useEffect(() => { - if (!(group)) { - return; - } - mapUserRoles(); - setAssignedRoles(group.roles); - }, []); + const [ initialSelectedRolesOptions, setInitialSelectedRolesOptions ] = useState([]); + const [ activeOption, setActiveOption ] = useState(undefined); + const [ showEmptyRolesListPlaceholder, setShowEmptyRolesListPlaceholder ] = useState(false); /** - * The following useEffect will be triggered when the group is updated. + * Set initial selected roles options */ useEffect(() => { - if (!(group)) { - return; - } - mapUserRoles(); - setAssignedRoles(group.roles); - }, [ group ]); - - useEffect(() => { - if (isRootOrganization) { - getRolesList(null) - .then((response: AxiosResponse) => { - setPrimaryRoles(response.data.Resources); - }) - .catch(() => { - dispatch(addAlert({ - description: t("console:manage.features.roles.notifications.fetchRoles." + - "genericError.description"), - level: AlertLevels.ERROR, - message: t("console:manage.features.roles.notifications.fetchRoles.genericError.message") - })); - }); - } else { - getOrganizationRoles(currentOrganization.id, null, 100, null) - .then((response: OrganizationRoleListResponseInterface) => { - setPrimaryRoles(response.Resources); - }) - .catch(() => { - dispatch(addAlert({ - description: t("console:manage.features.roles.notifications." + - "fetchRoles.genericError.description"), - level: AlertLevels.ERROR, - message: t("console:manage.features.roles.notifications." + - "fetchRoles.genericError.message") - })); - }); - } - }, []); - - /** - * The following function remove already assigned roles from the initial roles. - */ - const removeExistingRoles = () => { - //TODO: [Fix Type] Ideally this should be a `RolesInterface[]` - //but the `setPrimaryRoles` method usage is not consistent with the type. - const roleListCopy: any = primaryRoles ? [ ...primaryRoles ] : []; - const addedRoles: any = []; - - if (roleListCopy && primaryRolesList) { - const primaryRolesValues: string[] = Array.from(primaryRolesList?.values()); - - forEach(roleListCopy, (role: any) => { - if (primaryRolesValues?.includes(role.id)) { - addedRoles.push(role); - } - }); - } - setTempRoleList(addedRoles); - setInitialTempRoleList(addedRoles); - setRoleList(roleListCopy.filter((x: any) => !addedRoles?.includes(x))); - setInitialRoleList(roleListCopy.filter((x: any) => !addedRoles?.includes(x))); - }; - - /** - * The following function maps the role list of the group - * the role map available. This is required as the format of the role - * object differs from Users endpoint to Groups endpoint. - */ - const mapUserRoles = () => { - const rolesMap: Map = new Map(); - - if (group.roles && group.roles instanceof Array) { - forEachRight(group.roles, (roles: RolesMemberInterface) => { - const role: string[] = roles.display.split("/"); - - if (role.length >= 1) { - rolesMap.set(roles.display, roles.value); - } - }); - setPrimaryRolesList(rolesMap); - } else { - setPrimaryRolesList(undefined); - } - }; - - const handelAddNewRoleModalClose = () => { - setAddNewRoleModalView(false); - }; - - /** - * This function handles updating the roles of the group. - */ - const updateUserRole = (group: GroupsInterface, roles: any) => { - const roleIds: string[] = []; - - roles.map((role: any) => { - roleIds.push(role.id); - }); - - const bulkData: any = { - Operations: [], - failOnErrors: 1, - schemas: [ "urn:ietf:params:scim:api:messages:2.0:BulkRequest" ] - }; - - //TODO: [Fix Type] Introduce proper type interfaces for patch operations and use here. - let addOperation: { - data: { - Operations: { - op: string; - path: string; - value: { - value: any; - }[]; - }[]; - }; - method: string; - } = { - data: { - "Operations": [ { - "op": "add", - "path": "groups", - "value": [ { - "value": group.id - } ] - } ] - }, - method: "PATCH" - }; - - const removeOperations: { - data: { - Operations: { - op: string; - path: string; - }[]; - }; - method: string; - path: string; - }[] = []; - const addOperations: { - data: { - Operations: { - op: string; - path: string; - value: { - value: any; - }[]; - }[]; - }; - method: string; - }[] = []; - let removedIds: string[] = []; - const addedIds: string[] = []; - - if (primaryRolesList) { - removedIds = [ ...primaryRolesList.values() ]; - } - - if (roleIds?.length > 0) { - roleIds.map((roleId: string) => { - if (removedIds?.includes(roleId)) { - removedIds.splice(removedIds.indexOf(roleId), 1); - } else { - addedIds.push(roleId); - } - }); - } - - if (removedIds && removedIds.length > 0) { - removedIds.map((id: string) => { - //TODO: [Fix Type] Introduce proper type interfaces for patch operations and use here. - const operation: { - data: { - Operations: { - op: string; - path: string; - }[]; - }; - method: string; - path: string; - } = { - data: { - "Operations": [ - { - op: "remove", - path: `groups[value eq ${ group.id }]` - } - ] - }, - method: "PATCH", - path: "/Roles/" + id - }; - - removeOperations.push(operation); - }); - - bulkData.Operations.push(...removeOperations); - } - - if (addedIds && addedIds?.length > 0) { - addedIds.map((id: string) => { - addOperation = { - ...addOperation, - ...{ path: "/Roles/" + id } - }; - addOperations.push(addOperation); - }); - - addOperations.map((operation: { - data: { - Operations: { - op: string; - path: string; - value: { - value: any; - }[]; - }[]; - }; - method: string; - }) => { - bulkData.Operations.push(operation); - }); - } - - setIsSubmitting(true); - - updateResources(bulkData) - .then(() => { - dispatch(addAlert({ - description: t( - "console:manage.features.groups.notifications.updateGroup." + - "success.description" - ), - level: AlertLevels.SUCCESS, - message: t( - "console:manage.features.groups.notifications.updateGroup.success.message" - ) - })); - handelAddNewRoleModalClose(); - onGroupUpdate(group.id); - }) - .catch((error: AxiosError) => { - if (error?.response?.status === 404) { - return; - } - - if (error?.response && error?.response?.data && error?.response?.data?.description) { - setAlert({ - description: error.response?.data?.description, - level: AlertLevels.ERROR, - message: t( - "console:manage.features.groups.notifications.updateGroup.error.message" - ) - }); - - return; - } - - setAlert({ - description: t( - "console:manage.features.groups.notifications.updateGroup.genericError." + - "description" - ), - level: AlertLevels.ERROR, - message: t( - "console:manage.featuresgroups.notifications.updateGroup.genericError.message" - ) - }); - }) - .finally(() => { - setIsSubmitting(false); - }); - }; - - const handleUnselectedListSearch = (e: React.FormEvent, { value }: { value: string }) => { - let isMatch: boolean = false; - const filteredRoleList: any[] = []; - - if (!isEmpty(value)) { - const re: RegExp = new RegExp(escapeRegExp(value), "i"); - - roleList && roleList.map((role: any) => { - isMatch = re.test(role.displayName); - if (isMatch) { - filteredRoleList.push(role); - setRoleList(filteredRoleList); - } - }); - } else { - setRoleList(initialRoleList); - } - }; - - const handleSelectedListSearch = (e: React.FormEvent, { value }: { value: string }) => { - let isMatch: boolean = false; - const filteredRoleList: any[] = []; - - if (!isEmpty(value)) { - const re: RegExp = new RegExp(escapeRegExp(value), "i"); - - tempRoleList && tempRoleList?.map((role: any) => { - isMatch = re.test(role.displayName); - if (isMatch) { - filteredRoleList.push(role); - setTempRoleList(filteredRoleList); - } - }); - } else { - setTempRoleList(initialTempRoleList); - } - }; - - /** - * The following method handles the onChange event of the - * checkbox field of an unassigned item. - */ - const handleUnassignedItemCheckboxChange = (role: RolesMemberInterface) => { - const checkedRoles: RolesMemberInterface[] = [ ...checkedUnassignedListItems ]; - - if (checkedRoles?.includes(role)) { - checkedRoles.splice(checkedRoles.indexOf(role), 1); - setCheckedUnassignedListItems(checkedRoles); - } else { - checkedRoles.push(role); - setCheckedUnassignedListItems(checkedRoles); - } - }; - - /** - * The following method handles the onChange event of the - * checkbox field of an assigned item. - */ - const handleAssignedItemCheckboxChange = (role: RolesMemberInterface) => { - const checkedRoles: RolesMemberInterface[] = [ ...checkedAssignedListItems ]; - - if (checkedRoles?.includes(role)) { - checkedRoles.splice(checkedRoles.indexOf(role), 1); - setCheckedAssignedListItems(checkedRoles); + if ( group?.roles?.length > 0 ) { + setInitialSelectedRolesOptions(group.roles); } else { - checkedRoles.push(role); - setCheckedAssignedListItems(checkedRoles); + setShowEmptyRolesListPlaceholder(true); } - }; - - /** - * The following function enables the group to select all the roles at once. - */ - const selectAllUnAssignedList = () => { - setIsSelectUnassignedAllRolesChecked(!isSelectUnassignedRolesAllRolesChecked); - }; - - /** - * The following function enables the group to deselect all the roles at once. - */ - const selectAllAssignedList = () => { - setIsSelectAssignedAllRolesChecked(!isSelectAssignedAllRolesChecked); - }; - - const addRoles = () => { - const addedRoles: any[] = [ ...tempRoleList ]; - - if (checkedUnassignedListItems?.length > 0) { - checkedUnassignedListItems.map((role: RolesMemberInterface) => { - if (!(tempRoleList?.includes(role))) { - addedRoles.push(role); - } - }); - } - setTempRoleList(addedRoles); - setInitialTempRoleList(addedRoles); - setRoleList(roleList.filter((x: any) => !addedRoles?.includes(x))); - setInitialRoleList(roleList.filter((x: any) => !addedRoles?.includes(x))); - setIsSelectUnassignedAllRolesChecked(false); - }; - - const removeRoles = () => { - const removedRoles: RolesMemberInterface[] = [ ...roleList ]; - - if (checkedAssignedListItems?.length > 0) { - checkedAssignedListItems.map((role: RolesMemberInterface) => { - if (!(roleList?.includes(role))) { - removedRoles.push(role); - } - }); - } - setRoleList(removedRoles); - setInitialRoleList(removedRoles); - setTempRoleList(tempRoleList?.filter((x: any) => !removedRoles?.includes(x))); - setInitialTempRoleList(tempRoleList?.filter((x: any) => !removedRoles?.includes(x))); - setCheckedAssignedListItems(checkedAssignedListItems.filter( - (x: RolesMemberInterface) => !removedRoles?.includes(x))); - setCheckedUnassignedListItems([]); - setIsSelectAssignedAllRolesChecked(false); - }; - - const handleOpenAddNewGroupModal = () => { - removeExistingRoles(); - setAddNewRoleModalView(true); - }; - - const handleCloseAddNewGroupModal = () => { - setAddNewRoleModalView(false); - }; + }, [ group ]); /** - * The following method handles creating a label for the list item. - * - * @param roleName - Role Name to create item label + * Get the place holder components. + * + * @returns place holder components */ - const createItemLabel = (roleName: string) => { - const role: string[] = roleName.split("/"); - - if (role.length > 0) { - if (role[0] == "Application") { - return { - labelColor: null, - labelText: "Application", - name: "application-label" - }; - } else { - return { - labelColor: null, - labelText: "Internal", - name: "internal-label" - }; - } - } - }; - - const handleViewRolePermission = () => { - setViewRolePermissions(!viewRolePermissions); - setSelection(false); - }; - - const handleRoleIdSet = (roleId: string) => { - setRoleId(roleId); - setSelection(true); - }; - - const addNewGroupModal = () => ( - - - { t("console:manage.features.groups.edit.roles.addRolesModal.heading") } - - { t("console:manage.features.groups.edit.roles.addRolesModal.subHeading") } - - - { - viewRolePermissions - ? ( - <> - - { alert && alertComponent } - - - - ); - - const handleAssignedRoleListSearch = (e: React.ChangeEvent, { value }: InputOnChangeData) => { - let isMatch: boolean = false; - const filteredRoleList:RolesMemberInterface[] = []; - - if (!isEmpty(value)) { - const re: RegExp = new RegExp(escapeRegExp(value), "i"); - - assignedRoles && assignedRoles?.map((role: RolesMemberInterface) => { - const groupName: string[] = role.display.split("/"); - - if (groupName.length > 1) { - isMatch = re.test(role.display); - if (isMatch) { - filteredRoleList.push(role); - setAssignedRoles(filteredRoleList); + const getPlaceholders = () => { + if (showEmptyRolesListPlaceholder) { + return ( + // TODO: Need to replace the i18N with the correct one. + + ); } }; - const handleCloseRolePermissionModal = () => { - setRolePermissionModal(false); - setRoleSelection(false); - }; - - const handleOpenRolePermissionModal = () => { - setRolePermissionModal(true); - }; - - const handleSetSelectedId = (roleId: string) => { - setSelectedRoleId(roleId); - setRoleSelection(true); - }; - - const viewRolesPermissionModal = () => { - return ( - - ); - }; - return ( - <> + { t("console:manage.features.user.updateUser.roles.editRoles.heading") } + { /* TODO: Need to replace this with "View assigned roles for the group." */ } { t("console:manage.features.groups.edit.roles.subHeading") } -