This is an automated email from the ASF dual-hosted git repository. kishor pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/ranger.git
commit a64f2f217c32e9938eee23a6e6bde8d75ad3ec04 Author: Brijesh Bhalala <brijeshbhalala2...@gmail.com> AuthorDate: Wed Jun 21 10:34:31 2023 +0530 RANGER-4293: Long User/group/role name overflowing from delete confirmation dialog box Signed-off-by: Kishor Gollapalliwar <kishor.gollapalli...@gmail.com> --- .../main/webapp/react-webapp/src/styles/style.css | 5 +++- .../react-webapp/src/views/CustomBreadcrumb.jsx | 10 +++++-- .../groups_details/GroupListing.jsx | 32 +++++++++++++--------- .../role_details/RoleListing.jsx | 27 ++++++++++-------- .../users_details/UserListing.jsx | 27 ++++++++++-------- 5 files changed, 61 insertions(+), 40 deletions(-) diff --git a/security-admin/src/main/webapp/react-webapp/src/styles/style.css b/security-admin/src/main/webapp/react-webapp/src/styles/style.css index c8d4dcc4b..0d54a20e2 100644 --- a/security-admin/src/main/webapp/react-webapp/src/styles/style.css +++ b/security-admin/src/main/webapp/react-webapp/src/styles/style.css @@ -1708,7 +1708,7 @@ header { } .more-less-width { - max-width: 200px; + max-width: 28rem; } .fixed-headertable thead tr { @@ -2496,3 +2496,6 @@ li.list-group-item:hover { .manage-service .dropdown-toggle::after { vertical-align: 0.125em; } +.text-word-break { + word-break: break-all; +} diff --git a/security-admin/src/main/webapp/react-webapp/src/views/CustomBreadcrumb.jsx b/security-admin/src/main/webapp/react-webapp/src/views/CustomBreadcrumb.jsx index e3ba45f0e..57f6790c5 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/CustomBreadcrumb.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/CustomBreadcrumb.jsx @@ -52,13 +52,19 @@ export const CustomBreadcrumb = (props) => { > {isEmpty(link) ? ( <Link to="#" onClick={(e) => e.preventDefault()}> - <p className="" title={data[index][obj].text}> + <p + className="trim-containt-breadcrumb" + title={data[index][obj].text} + > {data[index][obj].text} </p> </Link> ) : ( <Link to={link}> - <p className="" title={data[index][obj].text}> + <p + className="trim-containt-breadcrumb" + title={data[index][obj].text} + > {data[index][obj].text} </p> </Link> diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupListing.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupListing.jsx index b77c0fe73..f705ee8ce 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupListing.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupListing.jsx @@ -627,18 +627,21 @@ function Groups() { /> <Modal show={showModal} onHide={toggleConfirmModal}> - <Modal.Body> - Are you sure you want to delete - {selectedRows.current.length === 1 ? ( - <span> - <b>"{selectedRows.current[0].original.name}"</b> group ? - </span> - ) : ( - <span> - <b>"{selectedRows.current.length}"</b> groups ? - </span> - )} - </Modal.Body> + <Modal.Header closeButton> + <span className="text-word-break"> + {" "} + Are you sure you want to delete group + {selectedRows.current.length === 1 ? ( + <> + "<b>{selectedRows.current[0].original.name}</b>" ? + </> + ) : ( + <> + "<b>{selectedRows.current.length}</b>" ? + </> + )} + </span> + </Modal.Header> <Modal.Footer> <Button variant="secondary" @@ -687,7 +690,10 @@ function Groups() { <Modal.Title> <div className="d-flex"> User's List : - <div className="pl-2 more-less-width"> + <div + className="pl-2 more-less-width text-truncate" + title={showAssociateUserModal?.groupName} + > {showAssociateUserModal.groupName} </div> </div> diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleListing.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleListing.jsx index 86059c463..a6ee46413 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleListing.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleListing.jsx @@ -402,18 +402,21 @@ function Roles() { /> <Modal show={showModal} onHide={toggleConfirmModal}> - <Modal.Body> - Are you sure you want to delete - {selectedRows.current.length === 1 ? ( - <span> - <b>"{selectedRows.current[0].original.name}"</b> role ? - </span> - ) : ( - <span> - <b>"{selectedRows.current.length}"</b> roles ? - </span> - )} - </Modal.Body> + <Modal.Header closeButton> + <span className="text-word-break"> + {" "} + Are you sure you want to delete group + {selectedRows.current.length === 1 ? ( + <> + "<b>{selectedRows.current[0].original.name}</b>" ? + </> + ) : ( + <> + "<b>{selectedRows.current.length}</b>" ? + </> + )} + </span> + </Modal.Header> <Modal.Footer> <Button variant="secondary" diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserListing.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserListing.jsx index 4e1fc9205..625e5d1c1 100644 --- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserListing.jsx +++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserListing.jsx @@ -693,18 +693,21 @@ function Users() { /> <Modal show={showModal} onHide={toggleConfirmModal}> - <Modal.Body> - Are you sure you want to delete - {selectedRows.current.length === 1 ? ( - <span> - <b>"{selectedRows.current[0].original.name}"</b> user ? - </span> - ) : ( - <span> - <b>"{selectedRows.current.length}"</b> users ? - </span> - )} - </Modal.Body> + <Modal.Header closeButton> + <span className="text-word-break"> + {" "} + Are you sure you want to delete user + {selectedRows.current.length === 1 ? ( + <> + "<b>{selectedRows.current[0].original.name}</b>" ? + </> + ) : ( + <> + "<b>{selectedRows.current.length}</b>" ? + </> + )} + </span> + </Modal.Header> <Modal.Footer> <Button variant="secondary"