refactor: apply rev

Signed-off-by: Camila Belo <camilaibs@gmail.com>

.changeset/mighty-sites-call.md

@@ -4,7 +4,8 @@
 
 Enhance user profile card configuration:
 
-- Added a new `maxRelations` numerical configuration that controls over how many user groups are shown directly on the profile card:
+- Added a new optional `maxRelations` numerical configuration that controls over how many user groups are shown directly on the profile card:
+  - If the setting is omitted, all relations will be shown.
   - If `maxRelations` is set to `0`, the list of user groups is not displayed.
   - If `maxRelations` is set to a positive number, up to that many groups are displayed.
   - If the user belongs to more groups than the specified limit, a clickable link appears that opens a dialog showing all associated user groups.
@@ -16,6 +17,6 @@ Enhance user profile card configuration:
     extensions:
       - entity-card:org/user-profile:
           config:
-            maxRelations: 5 # Show up to 5 groups on the card
-            hideIcons: true # Hide the group icons
+            maxRelations: 5 # (optional) Show up to 5 groups on the card
+            hideIcons: true # (optional) Hide the group icons
   ```

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -55,7 +55,6 @@ import { LinksGroup } from '../../Meta';
 import PersonIcon from '@material-ui/icons/Person';
 
 import { useCallback, useState } from 'react';
-import _ from 'lodash';
 
 const useStyles = makeStyles((theme: any) => ({
   closeButton: {
@@ -72,6 +71,7 @@ const useStyles = makeStyles((theme: any) => ({
     minHeight: 400,
   },
 }));
+
 const CardTitle = (props: { title?: string }) =>
   props.title ? (
     <Box display="flex" alignItems="center">
@@ -91,16 +91,13 @@ export const UserProfileCard = (props: {
 
   const classes = useStyles();
   const { entity: user } = useEntity<UserEntity>();
-  const [isViewAllGroupsDialogOpen, setIsViewAllGroupsDialogOpen] =
-    useState(false);
+  const [isAllGroupsDialogOpen, setIsAllGroupsDialogOpen] = useState(false);
 
-  const openViewAllGroupsDialog = useCallback(
-    () => setIsViewAllGroupsDialogOpen(true),
-    [],
-  );
-
-  const closeViewAllGroupsDialog = useCallback(
-    () => setIsViewAllGroupsDialogOpen(false),
+  const toggleAllGroupsDialog = useCallback(
+    () =>
+      setIsAllGroupsDialogOpen(
+        prevIsViewAllGroupsDialogOpen => !prevIsViewAllGroupsDialogOpen,
+      ),
     [],
   );
 
@@ -179,7 +176,7 @@ export const UserProfileCard = (props: {
                       ,
                       <BaseButton
                         className={classes.moreButton}
-                        onClick={openViewAllGroupsDialog}
+                        onClick={toggleAllGroupsDialog}
                         disableRipple
                       >
                         {` ...More (${
@@ -198,8 +195,8 @@ export const UserProfileCard = (props: {
 
       <Dialog
         classes={{ paper: classes.dialogPaper }}
-        open={isViewAllGroupsDialogOpen}
-        onClose={closeViewAllGroupsDialog}
+        open={isAllGroupsDialogOpen}
+        onClose={toggleAllGroupsDialog}
         scroll="paper"
         aria-labelledby="view-all-groups-dialog-title"
         maxWidth="md"
@@ -210,7 +207,7 @@ export const UserProfileCard = (props: {
           <IconButton
             className={classes.closeButton}
             aria-label="close"
-            onClick={closeViewAllGroupsDialog}
+            onClick={toggleAllGroupsDialog}
           >
             <CloseIcon />
           </IconButton>
@@ -219,7 +216,7 @@ export const UserProfileCard = (props: {
           <EntityRefLinks entityRefs={memberOfRelations} defaultKind="Group" />
         </DialogContent>
         <DialogActions>
-          <Button onClick={closeViewAllGroupsDialog}>Close</Button>
+          <Button onClick={toggleAllGroupsDialog}>Close</Button>
         </DialogActions>
       </Dialog>
     </InfoCard>