From 9252c6280144db6a2121e019be370bb2371f81de Mon Sep 17 00:00:00 2001
From: Carla Martinez <carlmart@redhat.com>
Date: Tue, 27 Feb 2024 15:04:32 +0100
Subject: [PATCH] 'Refresh' button functionality (User groups)

The 'Refresh' button should refetch the
data related to the user groups of a given
user. The solution has been implemented
taking the `refetch` functionality.

Signed-off-by: Carla Martinez <carlmart@redhat.com>
---
 src/components/MemberOf/MemberOfUserGroups.tsx | 13 ++++++++++++-
 src/pages/ActiveUsers/UserMemberOf.tsx         | 10 +++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/MemberOf/MemberOfUserGroups.tsx b/src/components/MemberOf/MemberOfUserGroups.tsx
index 75a50193..99267b0f 100644
--- a/src/components/MemberOf/MemberOfUserGroups.tsx
+++ b/src/components/MemberOf/MemberOfUserGroups.tsx
@@ -40,6 +40,8 @@ function filterUserGroupsData<Type extends TypeWithCN>(
 
 interface MemberOfUserGroupsProps {
   user: Partial<User>;
+  isUserDataLoading: boolean;
+  onRefreshUserData: () => void;
 }
 
 const MemberOfUserGroups = (props: MemberOfUserGroupsProps) => {
@@ -85,6 +87,10 @@ const MemberOfUserGroups = (props: MemberOfUserGroupsProps) => {
     }
   }, [fullUserGroupsQuery]);
 
+  React.useEffect(() => {
+    fullUserGroupsQuery.refetch();
+  }, [props.user]);
+
   const [groupsNamesSelected, setGroupsNamesSelected] = React.useState<
     string[]
   >([]);
@@ -121,6 +127,10 @@ const MemberOfUserGroups = (props: MemberOfUserGroupsProps) => {
   };
   const availableUserGroupsItems: AvailableItems[] = parseAvailableItems();
 
+  // Buttons functionality
+  // - Refresh
+  const isRefreshButtonEnabled = !props.isUserDataLoading;
+
   // 'Add' function
   // TODO: Adapt to work with real data
   const onAddUserGroup = (items: AvailableItems[]) => {
@@ -145,7 +155,8 @@ const MemberOfUserGroups = (props: MemberOfUserGroupsProps) => {
       <MemberOfToolbarUserGroups
         searchText={searchValue}
         onSearchTextChange={setSearchValue}
-        refreshButtonEnabled={true}
+        refreshButtonEnabled={isRefreshButtonEnabled}
+        onRefreshButtonClick={props.onRefreshUserData}
         deleteButtonEnabled={someItemSelected}
         onDeleteButtonClick={() => setShowDeleteModal(true)}
         addButtonEnabled={true}
diff --git a/src/pages/ActiveUsers/UserMemberOf.tsx b/src/pages/ActiveUsers/UserMemberOf.tsx
index 2a570057..78514833 100644
--- a/src/pages/ActiveUsers/UserMemberOf.tsx
+++ b/src/pages/ActiveUsers/UserMemberOf.tsx
@@ -82,6 +82,10 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
     }
   }, [userData, userQuery.isFetching]);
 
+  const onRefreshUserData = () => {
+    userQuery.refetch();
+  };
+
   // 'User groups' length to show in tab badge
   const [userGroupsLength, setUserGroupLength] = React.useState(0);
 
@@ -454,7 +458,11 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
               </TabTitleText>
             }
           >
-            <MemberOfUserGroups user={user} />
+            <MemberOfUserGroups
+              user={user}
+              isUserDataLoading={userQuery.isFetching}
+              onRefreshUserData={onRefreshUserData}
+            />
           </Tab>
           <Tab
             eventKey={1}