diff --git a/frontend/src/ManageGranularAccess/AddResourcePermissionsMenu.jsx b/frontend/src/ManageGranularAccess/AddResourcePermissionsMenu.jsx index 5a0a98d3de..26c750c67c 100644 --- a/frontend/src/ManageGranularAccess/AddResourcePermissionsMenu.jsx +++ b/frontend/src/ManageGranularAccess/AddResourcePermissionsMenu.jsx @@ -52,7 +52,7 @@ function AddResourcePermissionsMenu({ openAddPermissionModal, resourcesOptions, openAddPermissionModal(); }} > - App + Add apps ); diff --git a/frontend/src/ManageGranularAccess/AppResourcePermission.jsx b/frontend/src/ManageGranularAccess/AppResourcePermission.jsx index 850e3d7966..6619ee54d1 100644 --- a/frontend/src/ManageGranularAccess/AppResourcePermission.jsx +++ b/frontend/src/ManageGranularAccess/AppResourcePermission.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useState } from 'react'; import GroupChipTD from '@/ManageGroupPermissionsV2/ResourceChip'; import '../ManageGroupPermissionsV2/groupPermissions.theme.scss'; import SolidIcon from '@/_ui/Icon/SolidIcons'; @@ -10,8 +10,7 @@ function AppResourcePermissions({ currentGroupPermission, openEditPermissionModal, }) { - console.log('Logging permissions'); - console.log(permissions); + const [onHover, setHover] = useState(false); const isRoleGroup = currentGroupPermission.name == 'admin'; const disableEditUpdate = currentGroupPermission.name == 'end-user'; const appsPermissions = permissions.appsGroupPermissions; @@ -21,7 +20,18 @@ function AppResourcePermissions({ if (apps.length == 0 || permissions.isAll) apps = ['All apps']; return ( -
+
{ + setHover(true); + }} + onMouseOut={() => { + setHover(false); + }} + onClick={() => { + !isRoleGroup && openEditPermissionModal(permissions); + }} + >
{permissions.name}
@@ -36,6 +46,7 @@ function AppResourcePermissions({ updateOnlyGranularPermissions(permissions, { canEdit: !appsPermissions.canEdit, canView: appsPermissions.canEdit, + ...(!appsPermissions.canEdit && { hideFromDashboard: false }), }); }} checked={appsPermissions.canEdit} @@ -77,7 +88,7 @@ function AppResourcePermissions({ }); }} checked={appsPermissions.hideFromDashboard} - disabled={isRoleGroup} + disabled={isRoleGroup || !appsPermissions.canView} data-cy="app-delete-checkbox" /> @@ -91,15 +102,17 @@ function AppResourcePermissions({
- { - openEditPermissionModal(permissions); - }} - disabled={isRoleGroup} - /> + {onHover && ( + { + openEditPermissionModal(permissions); + }} + disabled={isRoleGroup} + /> + )}
); diff --git a/frontend/src/ManageGranularAccess/index.jsx b/frontend/src/ManageGranularAccess/index.jsx index f94e893318..35b8fd06f7 100644 --- a/frontend/src/ManageGranularAccess/index.jsx +++ b/frontend/src/ManageGranularAccess/index.jsx @@ -13,6 +13,8 @@ import '../ManageGroupPermissionsV2/groupPermissions.theme.scss'; import ChangeRoleModal from '@/ManageGroupPermissionResourcesV2/ChangeRoleModal'; import AppResourcePermissions from '@/ManageGranularAccess/AppResourcePermission'; import AddResourcePermissionsMenu from '@/ManageGranularAccess/AddResourcePermissionsMenu'; +import { ConfirmDialog } from '@/_components'; +import { ToolTip } from '@/_components/ToolTip'; class ManageGranularAccessComponent extends React.Component { constructor(props) { @@ -46,6 +48,8 @@ class ManageGranularAccessComponent extends React.Component { updateParam: {}, updatingPermission: {}, updateType: '', + deleteConfirmationModal: false, + deletingPermissions: false, }; } @@ -92,6 +96,9 @@ class ManageGranularAccessComponent extends React.Component { deleteGranularPermissions = () => { const { currentEditingPermissions } = this.state; + this.setState({ + deleteGranularPermissions: true, + }); groupPermissionV2Service .deleteGranularPermission(currentEditingPermissions.id) .then(() => { @@ -101,6 +108,12 @@ class ManageGranularAccessComponent extends React.Component { }) .catch((err) => { toast.error(err.error); + }) + .finally(() => { + this.setState({ + deleteConfirmationModal: false, + deleteGranularPermissions: false, + }); }); }; @@ -128,13 +141,16 @@ class ManageGranularAccessComponent extends React.Component { }) .catch(({ error }) => { this.closeAddPermissionModal(); - this.props.updateParentState({ - showEditRoleErrorModal: true, - errorTitle: error?.title ? error?.title : 'Cannot remove last admin', - errorMessage: error.error, - errorIconName: 'usergear', - errorListItems: error.data, - }); + if (error?.error) { + this.props.updateParentState({ + showEditRoleErrorModal: true, + errorTitle: error?.title ? error?.title : 'Cannot add granular permissions', + errorMessage: error.error, + errorIconName: 'usergear', + errorListItems: error.data, + }); + } + toast.error(error); }); // .then(()) }; @@ -237,8 +253,6 @@ class ManageGranularAccessComponent extends React.Component { allowRoleChange, }; - console.log(body); - groupPermissionV2Service .updateGranularPermission(currentEditingPermissions.id, body) .then(() => { @@ -360,11 +374,14 @@ class ManageGranularAccessComponent extends React.Component { updateParam, updatingPermission, updateType, + deleteConfirmationModal, + deletingPermissions, } = this.state; const resourcesOptions = ['Apps']; const currentGroupPermission = this.props?.groupPermission; const isRoleGroup = currentGroupPermission.name == 'admin'; + const defaultGroup = currentGroupPermission.type === 'default'; const showPermissionInfo = currentGroupPermission.name == 'admin' || currentGroupPermission.name == 'end-user'; const disableEditUpdate = currentGroupPermission.name == 'end-user'; const addPermissionTooltipMessage = !newPermissionName @@ -374,6 +391,16 @@ class ManageGranularAccessComponent extends React.Component { : ''; return (
+ this.deleteGranularPermissions()} + onCancel={() => { + this.setState({ deleteConfirmationModal: false, deletingPermissions: false }); + }} + darkMode={this.props.darkMode} + /> { + this.setState({ + deleteConfirmationModal: true, + showAddPermissionModal: false, + }); + }} />
)} @@ -464,7 +496,8 @@ class ManageGranularAccessComponent extends React.Component { initialPermissionState: { ...prevState.initialPermissionState, canEdit: !prevState.initialPermissionState.canEdit, - ...(!prevState.initialPermissionState.canEdit && { canView: false }), + canView: prevState.initialPermissionState.canEdit, + ...(prevState.initialPermissionState.canEdit && { hideFromDashboard: false }), }, })); }} @@ -488,7 +521,8 @@ class ManageGranularAccessComponent extends React.Component { initialPermissionState: { ...prevState.initialPermissionState, canView: !prevState.initialPermissionState.canView, - ...(!prevState.initialPermissionState.canView && { canEdit: false }), + canEdit: prevState.initialPermissionState.canView, + ...(prevState.initialPermissionState.canEdit && { hideFromDashboard: false }), }, })); }} @@ -502,6 +536,7 @@ class ManageGranularAccessComponent extends React.Component { { this.setState((prevState) => ({ @@ -617,8 +652,8 @@ class ManageGranularAccessComponent extends React.Component { updateOnlyGranularPermissions={this.updateOnlyGranularPermissions} permissions={permissions} currentGroupPermission={currentGroupPermission} - key={index} openEditPermissionModal={this.openEditPermissionModal} + key={index} /> ))} diff --git a/frontend/src/ManageGroupPermissionResourcesV2/index.jsx b/frontend/src/ManageGroupPermissionResourcesV2/index.jsx index 0bccc0f8f3..4b6219cf2b 100644 --- a/frontend/src/ManageGroupPermissionResourcesV2/index.jsx +++ b/frontend/src/ManageGroupPermissionResourcesV2/index.jsx @@ -67,6 +67,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component { componentDidUpdate(prevProps) { if (this.props.groupPermissionId && this.props.groupPermissionId !== prevProps.groupPermissionId) { this.fetchGroupAndResources(this.props.groupPermissionId); + this.setState({ + showUserSearchBox: false, + }); } } @@ -363,6 +366,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component { updateParam: {}, isLoadingGroup: false, isLoadingUsers: false, + isAddingUsers: false, }); }; @@ -518,7 +522,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component { isLoading={isLoadingGroup || isLoadingUsers} />
- {isLoadingGroup ? ( + {isLoadingGroup || isLoadingUsers ? ( ) : (
@@ -527,7 +531,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component { className="font-weight-500 tj-text-md" // data-cy={`${this.props.selectedGroup.toLowerCase().replace(/\s+/g, '-')}-title`} > - {this.props.selectedGroup} + {`${this.props.selectedGroup} (${usersInGroup.length})`}

{groupPermission.type === 'default' && ( @@ -557,7 +561,7 @@ class ManageGroupPermissionResourcesComponent extends React.Component {