Implement 'Refresh' button

The 'Refresh' button will update the user fields in the 'Settings' section. In this case, this functionality has been applied in the 'Identity settings' subsection only. The data is retrieved from the `useGetUsersFullDataQuery` hook and adds ability to refresh user data in active user tab by utilizing RTKQuery refetch method. Signed-off-by: Petr Vobornik <[email protected]> Signed-off-by: Carla Martinez <[email protected]>
freeipa · Jul 20, 2023 · 524c38f · 524c38f
1 parent a19e249
commit 524c38f
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 41 deletions.
diff --git a/src/components/UserSettings.tsx b/src/components/UserSettings.tsx
@@ -34,17 +34,17 @@ import UsersEmployeeInfo from "src/components/UsersSections/UsersEmployeeInfo";
 import UsersAttributesSMB from "src/components/UsersSections/UsersAttributesSMB";
 
 export interface PropsToUserSettings {
-  user: User; // TODO: Replace with `userData` in all subsections
-  onUserChange: (user: User) => void;
+  user: Partial<User>; // TODO: Replace with `userData` in all subsections
+  onUserChange: (user: Partial<User>) => void;
   metadata: Metadata;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  userData: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   pwPolicyData: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   krbPolicyData: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   certData: any;
+  onRefresh?: () => void;
+  isDataLoading?: boolean;
   from: "active-users" | "stage-users" | "preserved-users";
 }
 
@@ -84,7 +84,11 @@ const UserSettings = (props: PropsToUserSettings) => {
   const toolbarFields = [
     {
       key: 0,
-      element: <SecondaryButton>Refresh</SecondaryButton>,
+      element: (
+        <SecondaryButton onClickHandler={props.onRefresh}>
+          Refresh
+        </SecondaryButton>
+      ),
     },
     {
       key: 1,
@@ -177,7 +181,7 @@ const UserSettings = (props: PropsToUserSettings) => {
                 text="Identity settings"
               />
               <UsersIdentity
-                user={props.userData}
+                user={props.user}
                 onUserChange={props.onUserChange}
                 metadata={props.metadata}
               />

diff --git a/src/components/UsersSections/UsersAccountSettings.tsx b/src/components/UsersSections/UsersAccountSettings.tsx
@@ -28,7 +28,7 @@ import ModalWithTextAreaLayout from "src/components/layouts/ModalWithTextAreaLay
 import CertificateMappingDataModal from "src/components/modals/CertificateMappingDataModal";
 
 interface PropsToUsersAccountSettings {
-  user: User;
+  user: Partial<User>;
 }
 
 // Generic data to pass to the Textbox adder

diff --git a/src/components/UsersSections/UsersContactSettings.tsx b/src/components/UsersSections/UsersContactSettings.tsx
@@ -13,7 +13,7 @@ import { User } from "src/utils/datatypes/globalDataTypes";
 import SecondaryButton from "src/components/layouts/SecondaryButton";
 
 interface PropsToUsersContactSettings {
-  user: User;
+  user: Partial<User>;
 }
 
 interface TelephoneData {

diff --git a/src/components/UsersSections/UsersIdentity.tsx b/src/components/UsersSections/UsersIdentity.tsx
@@ -9,8 +9,8 @@ import { asRecord } from "src/utils/userUtils";
 import IpaTextInput from "../Form/IpaTextInput";
 
 interface PropsToUsersIdentity {
-  user: User;
-  onUserChange: (element: User) => void;
+  user: Partial<User>;
+  onUserChange: (element: Partial<User>) => void;
   metadata: Metadata;
 }
 

diff --git a/src/hooks/useUserSettingsData.tsx b/src/hooks/useUserSettingsData.tsx
@@ -1,19 +1,25 @@
+import { useState, useEffect } from "react";
+
 // RPC
 import {
-  Command,
   useGetObjectMetadataQuery,
   useGetUsersFullDataQuery,
 } from "src/services/rpc";
 
-import { Metadata } from "src/utils/datatypes/globalDataTypes";
+import { Metadata, User } from "src/utils/datatypes/globalDataTypes";
 
 type UserSettingsData = {
   isLoading: boolean;
+  isFetching: boolean;
+  modified: boolean;
   metadata: Metadata;
-  userData?: Record<string, unknown>;
+  originalUser?: Partial<User>;
+  user: Partial<User>;
+  setUser: (user: Partial<User>) => void;
   pwPolicyData?: Record<string, unknown>;
   krbtPolicyData?: Record<string, unknown>;
   certData?: Record<string, unknown>;
+  refetch?: () => void;
 };
 
 const useUserSettingsData = (userId: string): UserSettingsData => {
@@ -26,18 +32,44 @@ const useUserSettingsData = (userId: string): UserSettingsData => {
   const userFullData = userFullDataQuery.data;
   const isFullDataLoading = userFullDataQuery.isLoading;
 
+  // Data displayed and modified by the user
+  const [user, setUser] = useState<Partial<User>>({});
+  useEffect(() => {
+    if (userFullData && !userFullDataQuery.isFetching) {
+      setUser({ ...userFullData.user });
+    }
+  }, [userFullData, userFullDataQuery.isFetching]);
+
   const settingsData = {
     isLoading: metadataLoading || isFullDataLoading,
+    isFetching: userFullDataQuery.isFetching,
     metadata,
+    user,
+    setUser,
+    refetch: userFullDataQuery.refetch,
   } as UserSettingsData;
 
   if (userFullData) {
-    settingsData.userData = userFullData.user;
+    settingsData.originalUser = userFullData.user;
     settingsData.pwPolicyData = userFullData.pwPolicy;
     settingsData.krbtPolicyData = userFullData.krbtPolicy;
     settingsData.certData = userFullData.cert;
   }
 
+  useEffect(() => {
+    if (!userFullData || !userFullData.user) {
+      return;
+    }
+    let modified = false;
+    for (const [key, value] of Object.entries(user)) {
+      if (userFullData.user[key] !== value) {
+        modified = true;
+        break;
+      }
+    }
+    settingsData.modified = modified;
+  }, [user, userFullData]);
+
   return settingsData;
 };
 

diff --git a/src/pages/ActiveUsers/ActiveUsersTabs.tsx b/src/pages/ActiveUsers/ActiveUsersTabs.tsx
@@ -30,11 +30,10 @@ const ActiveUsersTabs = () => {
   // Get location (React Router DOM) and get state data
   const location = useLocation();
   const userData: User = location.state as User;
+  const uid = userData.uid;
 
-  const [user, setUser] = useState<User>(userData);
-
-  // Make API calls needed for user Settings' data
-  const userSettingsData = useUserSettingsData(userData.uid);
+  // Data loaded from DB
+  const userSettingsData = useUserSettingsData(uid);
 
   // Tab
   const [activeTabKey, setActiveTabKey] = useState(0);
@@ -88,13 +87,14 @@ const ActiveUsersTabs = () => {
           >
             <PageSection className="pf-u-pb-0"></PageSection>
             <UserSettings
-              user={user}
+              user={userSettingsData.user}
               metadata={userSettingsData.metadata}
-              userData={userSettingsData.userData}
               pwPolicyData={userSettingsData.pwPolicyData}
               krbPolicyData={userSettingsData.krbtPolicyData}
               certData={userSettingsData.certData}
-              onUserChange={setUser}
+              onUserChange={userSettingsData.setUser}
+              isDataLoading={userSettingsData.isFetching}
+              onRefresh={userSettingsData.refetch}
               from="active-users"
             />
           </Tab>

diff --git a/src/pages/PreservedUsers/PreservedUsersTabs.tsx b/src/pages/PreservedUsers/PreservedUsersTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 // PatternFly
 import {
   Title,
@@ -29,11 +29,10 @@ const PreservedUsersTabs = () => {
   // Get location (React Router DOM) and get state data
   const location = useLocation();
   const userData: User = location.state as User;
+  const uid = userData.uid;
 
-  const [user, setUser] = useState<User>(userData);
-
-  // Make API calls needed for user Settings' data
-  const userSettingsData = useUserSettingsData(userData.uid);
+  // Data loaded from DB
+  const userSettingsData = useUserSettingsData(uid);
 
   // Tab
   const [activeTabKey, setActiveTabKey] = useState(0);
@@ -87,13 +86,12 @@ const PreservedUsersTabs = () => {
           >
             <PageSection className="pf-u-pb-0"></PageSection>
             <UserSettings
-              user={user}
+              user={userSettingsData.user}
               metadata={userSettingsData.metadata}
-              userData={userSettingsData.userData}
               pwPolicyData={userSettingsData.pwPolicyData}
               krbPolicyData={userSettingsData.krbtPolicyData}
               certData={userSettingsData.certData}
-              onUserChange={setUser}
+              onUserChange={userSettingsData.setUser}
               from="preserved-users"
             />
           </Tab>

diff --git a/src/pages/StageUsers/StageUsersTabs.tsx b/src/pages/StageUsers/StageUsersTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 // PatternFly
 import {
   Title,
@@ -29,11 +29,10 @@ const StageUsersTabs = () => {
   // Get location (React Router DOM) and get state data
   const location = useLocation();
   const userData: User = location.state as User;
+  const uid = userData.uid;
 
-  const [user, setUser] = useState<User>(userData);
-
-  // Make API calls needed for user Settings' data
-  const userSettingsData = useUserSettingsData(userData.uid);
+  // Data loaded from DB
+  const userSettingsData = useUserSettingsData(uid);
 
   // Tab
   const [activeTabKey, setActiveTabKey] = useState(0);
@@ -87,13 +86,12 @@ const StageUsersTabs = () => {
           >
             <PageSection className="pf-u-pb-0"></PageSection>
             <UserSettings
-              user={user}
+              user={userSettingsData.user}
               metadata={userSettingsData.metadata}
-              userData={userSettingsData.userData}
               pwPolicyData={userSettingsData.pwPolicyData}
               krbPolicyData={userSettingsData.krbtPolicyData}
               certData={userSettingsData.certData}
-              onUserChange={setUser}
+              onUserChange={userSettingsData.setUser}
               from="stage-users"
             />
           </Tab>

diff --git a/src/services/rpc.ts b/src/services/rpc.ts
@@ -8,10 +8,10 @@ import {
 } from "@reduxjs/toolkit/query/react";
 // Utils
 import { API_VERSION_BACKUP } from "src/utils/utils";
-import { Metadata } from "src/utils/datatypes/globalDataTypes";
+import { Metadata, User } from "src/utils/datatypes/globalDataTypes";
 
 export type UserFullData = {
-  user?: Record<string, unknown>;
+  user?: Partial<User>;
   pwPolicy?: Record<string, unknown>;
   krbtPolicy?: Record<string, unknown>;
   cert?: Record<string, unknown>;

diff --git a/src/utils/userUtils.tsx b/src/utils/userUtils.tsx
@@ -5,8 +5,8 @@ import { User } from "src/utils/datatypes/globalDataTypes";
 // - TODO: Adapt it to work with many types of data
 export const asRecord = (
   // property: string,
-  element: User,
-  onElementChange: (element: User) => void
+  element: Partial<User>,
+  onElementChange: (element: Partial<User>) => void
   // metadata: Metadata
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any