Show expiration date on chip hover (#274)

Author: eguerrant

src/components/MembershipChip.tsx

@@ -3,57 +3,66 @@ import {useNavigate} from 'react-router-dom';
 import {useCurrentUser} from '../authentication';
 import {canManageGroup, isGroupOwner} from '../authorization';
 import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
 
 export interface MembershipChipProps {
-  user: OktaUserGroupMember;
+  okta_user_group_member: OktaUserGroupMember;
   group: PolymorphicGroup;
   removeRoleGroup: (roleGroup: RoleGroup) => void;
   removeDirectAccessAsUser: () => void;
   removeDirectAccessAsGroupManager: () => void;
 }
 
 export default function MembershipChip({
-  user,
+  okta_user_group_member,
   group,
   removeRoleGroup,
   removeDirectAccessAsUser,
   removeDirectAccessAsGroupManager,
 }: MembershipChipProps) {
   const navigate = useNavigate();
   const currentUser = useCurrentUser();
-  const activeRoleGroup = user.active_role_group_mapping?.active_role_group;
+  const activeRoleGroup = okta_user_group_member.active_role_group_mapping?.active_role_group;
+  const ending_date = okta_user_group_member.ended_at ?? 'Never';
   const canManageUserRoleGroup = activeRoleGroup?.id ? isGroupOwner(currentUser, activeRoleGroup.id) : false;
   const canManageThisGroup = group.is_managed && canManageGroup(currentUser, group);
-  const canManageThisUser = group.is_managed && currentUser.id === user.active_user?.id;
+  const canManageThisUser = group.is_managed && currentUser.id === okta_user_group_member.active_user?.id;
+
+  const moveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};
+
   return activeRoleGroup ? (
-    <Chip
-      label={activeRoleGroup.name}
-      variant="outlined"
-      color="primary"
-      onClick={() => navigate(`/roles/${activeRoleGroup.name}`)}
-      onDelete={
-        canManageThisGroup || canManageUserRoleGroup
-          ? () => {
-              removeRoleGroup(activeRoleGroup);
-            }
-          : undefined
-      }
-    />
-  ) : (
-    <Chip
-      label="Direct"
-      color="primary"
-      onDelete={
-        canManageThisUser
-          ? () => {
-              removeDirectAccessAsUser();
-            }
-          : canManageThisGroup
+    <Tooltip title={ending_date} placement="right" PopperProps={moveTooltip}>
+      <Chip
+        label={activeRoleGroup.name}
+        variant="outlined"
+        color="primary"
+        onClick={() => navigate(`/roles/${activeRoleGroup.name}`)}
+        onDelete={
+          canManageThisGroup || canManageUserRoleGroup
             ? () => {
-                removeDirectAccessAsGroupManager();
+                removeRoleGroup(activeRoleGroup);
               }
             : undefined
-      }
-    />
+        }
+      />
+    </Tooltip>
+  ) : (
+    <Tooltip title={ending_date} placement="right" PopperProps={moveTooltip}>
+      <Chip
+        label="Direct"
+        color="primary"
+        onDelete={
+          canManageThisUser
+            ? () => {
+                removeDirectAccessAsUser();
+              }
+            : canManageThisGroup
+              ? () => {
+                  removeDirectAccessAsGroupManager();
+                }
+              : undefined
+        }
+      />
+    </Tooltip>
   );
 }

src/pages/groups/Read.tsx

@@ -586,7 +586,7 @@ export default function ReadGroup() {
                                   directRoleOwnerships.has(user.active_user!.id) ? (
                                     <MembershipChip
                                       key={`${user.active_user?.id}${user.active_role_group_mapping?.active_role_group?.id}`}
-                                      user={user}
+                                      okta_user_group_member={user}
                                       group={group}
                                       removeRoleGroup={(roleGroup) => {
                                         removeGroupFromRole(group, roleGroup, true);
@@ -741,7 +741,7 @@ export default function ReadGroup() {
                                 {users.sort(sortOktaUserGroupMembers).map((user) => (
                                   <MembershipChip
                                     key={`${user.active_user?.id}${user.active_role_group_mapping?.active_role_group?.id}`}
-                                    user={user}
+                                    okta_user_group_member={user}
                                     group={group}
                                     removeRoleGroup={(roleGroup) => {
                                       removeGroupFromRole(group, roleGroup, false);

src/pages/users/Read.tsx

@@ -198,7 +198,7 @@ function OwnerTable({user, ownerships, onClickRemoveGroupFromRole, onClickRemove
                         group.active_group ? (
                           <MembershipChip
                             key={group.active_role_group_mapping?.active_role_group?.name ?? ''}
-                            user={group}
+                            okta_user_group_member={group}
                             group={group.active_group}
                             removeRoleGroup={(roleGroup) => {
                               onClickRemoveGroupFromRole(group.active_group!, roleGroup, true);
@@ -321,7 +321,7 @@ function MemberTable({user, memberships, onClickRemoveGroupFromRole, onClickRemo
                         group.active_group ? (
                           <MembershipChip
                             key={group.active_role_group_mapping?.active_role_group?.name ?? ''}
-                            user={group}
+                            okta_user_group_member={group}
                             group={group.active_group}
                             removeRoleGroup={(roleGroup) => {
                               onClickRemoveGroupFromRole(group.active_group!, roleGroup, false);