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 <pvoborni@redhat.com>
Signed-off-by: Carla Martinez <carlmart@redhat.com>

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}
               />

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

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 {

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;
 }
 

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;
 };
 

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>

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>

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>

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>;

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