From 4e61cf22c0cb2ede08f4e848b0f9fa8d0754bf27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 28 Jul 2022 14:27:38 +0100
Subject: [PATCH] fix: small ui fixes related to groups and tooltips (#1167)

---
 .../src/component/admin/groups/Group/Group.tsx     | 10 +---------
 .../component/admin/groups/GroupForm/GroupForm.tsx | 14 ++++++++++----
 .../GroupFormUsersTable/GroupFormUsersTable.tsx    |  2 --
 .../groups/GroupsList/GroupCard/GroupCard.tsx      |  4 +---
 .../GroupCardActions/GroupCardActions.tsx          |  8 +-------
 .../ActionsCell/ActionsCell.tsx                    |  8 +-------
 .../ProjectGroupView/ProjectGroupView.tsx          |  1 +
 7 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/frontend/src/component/admin/groups/Group/Group.tsx b/frontend/src/component/admin/groups/Group/Group.tsx
index f50bd58b92..d7ccb7d91c 100644
--- a/frontend/src/component/admin/groups/Group/Group.tsx
+++ b/frontend/src/component/admin/groups/Group/Group.tsx
@@ -132,13 +132,7 @@ export const Group: VFC = () => {
                 align: 'center',
                 Cell: ({ row: { original: rowUser } }: any) => (
                     <ActionCell>
-                        <Tooltip
-                            title="Edit user"
-                            arrow
-                            placement="bottom-end"
-                            describeChild
-                            enterDelay={1000}
-                        >
+                        <Tooltip title="Edit user" arrow describeChild>
                             <IconButton
                                 onClick={() => {
                                     setSelectedUser(rowUser);
@@ -151,9 +145,7 @@ export const Group: VFC = () => {
                         <Tooltip
                             title="Remove user from group"
                             arrow
-                            placement="bottom-end"
                             describeChild
-                            enterDelay={1000}
                         >
                             <IconButton
                                 onClick={() => {
diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
index 9a387b06fd..d5ef3190c3 100644
--- a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
+++ b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
@@ -24,6 +24,10 @@ const StyledInput = styled(Input)(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
+const StyledGroupFormUsersTableWrapper = styled('div')(({ theme }) => ({
+    marginBottom: theme.spacing(6),
+}));
+
 const StyledButtonContainer = styled('div')(() => ({
     marginTop: 'auto',
     display: 'flex',
@@ -101,10 +105,12 @@ export const GroupForm: FC<IGroupForm> = ({
                             users={users}
                             setUsers={setUsers}
                         />
-                        <GroupFormUsersTable
-                            users={users}
-                            setUsers={setUsers}
-                        />
+                        <StyledGroupFormUsersTableWrapper>
+                            <GroupFormUsersTable
+                                users={users}
+                                setUsers={setUsers}
+                            />
+                        </StyledGroupFormUsersTableWrapper>
                     </>
                 }
             />
diff --git a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx
index abbfc907e5..b25d8cf80c 100644
--- a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx
+++ b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx
@@ -83,9 +83,7 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
                         <Tooltip
                             title="Remove user from group"
                             arrow
-                            placement="bottom-end"
                             describeChild
-                            enterDelay={1000}
                         >
                             <IconButton
                                 onClick={() =>
diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
index 2f78c3e6bc..8373b42d2e 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -102,11 +102,9 @@ export const GroupCard = ({ group }: IGroupCardProps) => {
                                 ))}
                                 elseShow={
                                     <Tooltip
-                                        title="This project is not used in any project"
+                                        title="This group is not used in any project"
                                         arrow
-                                        placement="bottom-end"
                                         describeChild
-                                        enterDelay={1000}
                                     >
                                         <Badge>Not used</Badge>
                                     </Tooltip>
diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx
index 24fc4db856..3106eb91ca 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx
@@ -52,13 +52,7 @@ export const GroupCardActions: FC<IGroupCardActions> = ({
                 e.stopPropagation();
             }}
         >
-            <Tooltip
-                title="Group actions"
-                arrow
-                placement="bottom-end"
-                describeChild
-                enterDelay={1000}
-            >
+            <Tooltip title="Group actions" arrow describeChild>
                 <IconButton
                     id={id}
                     aria-controls={open ? menuId : undefined}
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
index e063751971..3d28b972d4 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx
@@ -59,13 +59,7 @@ export const ActionsCell: VFC<IActionsCellProps> = ({
 
     return (
         <Box className={classes.cell}>
-            <Tooltip
-                title="Feature toggle actions"
-                arrow
-                placement="bottom-end"
-                describeChild
-                enterDelay={1000}
-            >
+            <Tooltip title="Feature toggle actions" arrow describeChild>
                 <IconButton
                     id={id}
                     aria-controls={open ? menuId : undefined}
diff --git a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
index 44a9afbe9e..39a2c954f2 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
@@ -23,6 +23,7 @@ import { sortTypes } from 'utils/sortTypes';
 
 const StyledPageContent = styled(PageContent)(({ theme }) => ({
     height: '100vh',
+    overflow: 'auto',
     padding: theme.spacing(7.5, 6),
     '& .header': {
         padding: theme.spacing(0, 0, 2, 0),