'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 <[email protected]>
freeipa · Mar 7, 2024 · c3cc12f · c3cc12f
1 parent 598149e
commit c3cc12f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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}