Implement 'Revert' and 'Save' buttons

Signed-off-by: Carla Martinez <[email protected]>

src/components/UserSettings.tsx

@@ -32,8 +32,13 @@ import UsersContactSettings from "src/components/UsersSections/UsersContactSetti
 import UsersMailingAddress from "src/components/UsersSections/UsersMailingAddress";
 import UsersEmployeeInfo from "src/components/UsersSections/UsersEmployeeInfo";
 import UsersAttributesSMB from "src/components/UsersSections/UsersAttributesSMB";
+// RPC
+import { useSaveUserMutation } from "src/services/rpc";
+// Hooks
+import useAlerts from "src/hooks/useAlerts";
 
 export interface PropsToUserSettings {
+  originalUser: Partial<User>;
   user: Partial<User>; // TODO: Replace with `userData` in all subsections
   onUserChange: (user: Partial<User>) => void;
   metadata: Metadata;
@@ -43,12 +48,21 @@ export interface PropsToUserSettings {
   krbPolicyData: any;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   certData: any;
-  onRefresh?: () => void;
+  onRefresh: () => void;
+  isModified: boolean;
   isDataLoading?: boolean;
+  modifiedValues: () => Partial<User>;
+  onResetValues: () => void;
   from: "active-users" | "stage-users" | "preserved-users";
 }
 
 const UserSettings = (props: PropsToUserSettings) => {
+  // Alerts to show in the UI
+  const alerts = useAlerts();
+
+  // RTK hook: save user
+  const [saveUser] = useSaveUserMutation();
+
   // Kebab
   const [isKebabOpen, setIsKebabOpen] = useState(false);
 
@@ -80,6 +94,38 @@ const UserSettings = (props: PropsToUserSettings) => {
     setIsKebabOpen(!isKebabOpen);
   };
 
+  // 'Revert' handler method
+  const onRevert = () => {
+    props.onUserChange(props.originalUser);
+    alerts.addAlert("revert-success", "User data reverted", "success");
+  };
+
+  // 'Save' handler method
+  const onSave = () => {
+    const modifiedValues = props.modifiedValues();
+    // Assign uid
+    modifiedValues.uid = props.user.uid;
+
+    // Make API call
+    saveUser(modifiedValues).then((response) => {
+      if ("data" in response) {
+        if (response.data.result) {
+          // Show toast notification: success
+          alerts.addAlert("save-success", "User modified", "success");
+        } else if (response.data.error) {
+          // Show toast notification: error
+          alerts.addAlert(
+            "save-error",
+            response.data.error || "Error when modifying user",
+            "danger"
+          );
+        }
+        // TODO: Reset values. Disable 'revert' and 'save' buttons
+        props.onResetValues();
+      }
+    });
+  };
+
   // Toolbar
   const toolbarFields = [
     {
@@ -92,11 +138,22 @@ const UserSettings = (props: PropsToUserSettings) => {
     },
     {
       key: 1,
-      element: <SecondaryButton isDisabled={true}>Revert</SecondaryButton>,
+      element: (
+        <SecondaryButton
+          isDisabled={!props.isModified}
+          onClickHandler={onRevert}
+        >
+          Revert
+        </SecondaryButton>
+      ),
     },
     {
       key: 2,
-      element: <SecondaryButton isDisabled={true}>Save</SecondaryButton>,
+      element: (
+        <SecondaryButton isDisabled={!props.isModified} onClickHandler={onSave}>
+          Save
+        </SecondaryButton>
+      ),
     },
     {
       key: 3,
@@ -117,6 +174,7 @@ const UserSettings = (props: PropsToUserSettings) => {
   // 'UserSettings' render
   return (
     <>
+      <alerts.ManagedAlerts />
       <PageSection
         id="settings-page"
         variant={PageSectionVariants.light}

src/hooks/useUserSettingsData.tsx

@@ -12,14 +12,16 @@ type UserSettingsData = {
   isLoading: boolean;
   isFetching: boolean;
   modified: boolean;
+  resetValues: () => void;
   metadata: Metadata;
-  originalUser?: Partial<User>;
+  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;
+  refetch: () => void;
+  modifiedValues: () => Partial<User>;
 };
 
 const useUserSettingsData = (userId: string): UserSettingsData => {
@@ -32,6 +34,8 @@ const useUserSettingsData = (userId: string): UserSettingsData => {
   const userFullData = userFullDataQuery.data;
   const isFullDataLoading = userFullDataQuery.isLoading;
 
+  const [modified, setModified] = useState(false);
+
   // Data displayed and modified by the user
   const [user, setUser] = useState<Partial<User>>({});
   useEffect(() => {
@@ -43,19 +47,37 @@ const useUserSettingsData = (userId: string): UserSettingsData => {
   const settingsData = {
     isLoading: metadataLoading || isFullDataLoading,
     isFetching: userFullDataQuery.isFetching,
+    modified,
     metadata,
     user,
     setUser,
     refetch: userFullDataQuery.refetch,
   } as UserSettingsData;
 
   if (userFullData) {
-    settingsData.originalUser = userFullData.user;
+    settingsData.originalUser = userFullData.user || {};
     settingsData.pwPolicyData = userFullData.pwPolicy;
     settingsData.krbtPolicyData = userFullData.krbtPolicy;
     settingsData.certData = userFullData.cert;
+  } else {
+    settingsData.originalUser = {};
   }
 
+  const getModifiedValues = (): Partial<User> => {
+    if (!userFullData || !userFullData.user) {
+      return {};
+    }
+
+    const modifiedValues = {};
+    for (const [key, value] of Object.entries(user)) {
+      if (userFullData.user[key] !== value) {
+        modifiedValues[key] = value;
+      }
+    }
+    return modifiedValues;
+  };
+  settingsData.modifiedValues = getModifiedValues;
+
   useEffect(() => {
     if (!userFullData || !userFullData.user) {
       return;
@@ -67,9 +89,14 @@ const useUserSettingsData = (userId: string): UserSettingsData => {
         break;
       }
     }
-    settingsData.modified = modified;
+    setModified(modified);
   }, [user, userFullData]);
 
+  const onResetValues = () => {
+    setModified(false);
+  };
+  settingsData.resetValues = onResetValues;
+
   return settingsData;
 };
 

src/pages/ActiveUsers/ActiveUsersTabs.tsx

@@ -87,6 +87,7 @@ const ActiveUsersTabs = () => {
           >
             <PageSection className="pf-u-pb-0"></PageSection>
             <UserSettings
+              originalUser={userSettingsData.originalUser}
               user={userSettingsData.user}
               metadata={userSettingsData.metadata}
               pwPolicyData={userSettingsData.pwPolicyData}
@@ -95,6 +96,9 @@ const ActiveUsersTabs = () => {
               onUserChange={userSettingsData.setUser}
               isDataLoading={userSettingsData.isFetching}
               onRefresh={userSettingsData.refetch}
+              isModified={userSettingsData.modified}
+              onResetValues={userSettingsData.resetValues}
+              modifiedValues={userSettingsData.modifiedValues}
               from="active-users"
             />
           </Tab>

src/pages/PreservedUsers/PreservedUsersTabs.tsx

@@ -86,12 +86,18 @@ const PreservedUsersTabs = () => {
           >
             <PageSection className="pf-u-pb-0"></PageSection>
             <UserSettings
+              originalUser={userSettingsData.originalUser}
               user={userSettingsData.user}
               metadata={userSettingsData.metadata}
               pwPolicyData={userSettingsData.pwPolicyData}
               krbPolicyData={userSettingsData.krbtPolicyData}
               certData={userSettingsData.certData}
               onUserChange={userSettingsData.setUser}
+              isDataLoading={userSettingsData.isFetching}
+              onRefresh={userSettingsData.refetch}
+              isModified={userSettingsData.modified}
+              onResetValues={userSettingsData.resetValues}
+              modifiedValues={userSettingsData.modifiedValues}
               from="preserved-users"
             />
           </Tab>

src/pages/StageUsers/StageUsersTabs.tsx

@@ -86,12 +86,18 @@ const StageUsersTabs = () => {
           >
             <PageSection className="pf-u-pb-0"></PageSection>
             <UserSettings
+              originalUser={userSettingsData.originalUser}
               user={userSettingsData.user}
               metadata={userSettingsData.metadata}
               pwPolicyData={userSettingsData.pwPolicyData}
               krbPolicyData={userSettingsData.krbtPolicyData}
               certData={userSettingsData.certData}
               onUserChange={userSettingsData.setUser}
+              isDataLoading={userSettingsData.isFetching}
+              onRefresh={userSettingsData.refetch}
+              isModified={userSettingsData.modified}
+              onResetValues={userSettingsData.resetValues}
+              modifiedValues={userSettingsData.modifiedValues}
               from="stage-users"
             />
           </Tab>

src/services/rpc.ts

@@ -9,6 +9,7 @@ import {
 // Utils
 import { API_VERSION_BACKUP } from "src/utils/utils";
 import { Metadata, User } from "src/utils/datatypes/globalDataTypes";
+import { apiToUser } from "src/utils/userUtils";
 
 export type UserFullData = {
   user?: Partial<User>;
@@ -271,14 +272,30 @@ export const api = createApi({
       transformResponse: (response: BatchResponse): UserFullData => {
         const results = response.result.results;
         return {
-          user: results[0].result,
+          user: apiToUser(results[0].result),
           pwPolicy: results[1].result,
           krbtPolicy: results[2].result,
           cert: results[3].result,
         };
       },
       providesTags: ["FullUserData"],
     }),
+    saveUser: build.mutation<FindRPCResponse, Partial<User>>({
+      query: (user) => {
+        const params = {
+          version: API_VERSION_BACKUP,
+          ...user,
+        };
+
+        delete params["uid"];
+
+        return getCommand({
+          method: "user_mod",
+          params: [[user.uid], params],
+        });
+      },
+      invalidatesTags: ["FullUserData"],
+    }),
   }),
 });
 
@@ -290,4 +307,5 @@ export const {
   useGettingUserDataQuery,
   useGetObjectMetadataQuery,
   useGetUsersFullDataQuery,
+  useSaveUserMutation,
 } = api;

src/utils/ipaObjectUtils.ts

@@ -166,3 +166,22 @@ export function convertToString(value: BasicType): string {
     return String(value);
   }
 }
+
+export function convertApiObj(
+  apiRecord: Record<string, unknown>,
+  simpleValues: Set<string>,
+  dateValues: Set<string>
+) {
+  const obj = {};
+  for (const [key, value] of Object.entries(apiRecord)) {
+    if (simpleValues.has(key)) {
+      obj[key] = convertToString(value as BasicType);
+    } else if (dateValues.has(key)) {
+      // TODO convert to Datetime object
+      obj[key] = value;
+    } else {
+      obj[key] = value;
+    }
+  }
+  return obj;
+}

src/utils/userUtils.tsx

@@ -1,5 +1,6 @@
 // Data types
 import { User } from "src/utils/datatypes/globalDataTypes";
+import { convertApiObj } from "src/utils/ipaObjectUtils";
 
 // Parse the 'textInputField' data into expected data type
 // - TODO: Adapt it to work with many types of data
@@ -18,3 +19,55 @@ export const asRecord = (
 
   return { ipaObject, recordOnChange };
 };
+
+const simpleValues = new Set([
+  "title",
+  "givenname",
+  "sn",
+  "cn",
+  "displayname",
+  "initials",
+  "gecos",
+  "userclass",
+  "uid",
+  "uidnumber",
+  "gidnumber",
+  "loginshell",
+  "homedirectory",
+  "ipatokenradiusconfiglink",
+  "ipatokenradiususername",
+  "ipaidpconfiglink",
+  "ipaidpsub",
+  "krbmaxpwdlife",
+  "krbminpwdlife",
+  "krbpwdhistorylength",
+  "krbpwdmindiffchars",
+  "krbpwdminlength",
+  "krbpwdmaxfailure",
+  "krbpwdfailurecountinterval",
+  "krbpwdlockoutduration",
+  "passwordgracelimit",
+  "krbmaxrenewableage",
+  "krbmaxticketlife",
+  "street",
+  "l",
+  "st",
+  "postalcode",
+  "ou",
+  "manager",
+  "employeenumber",
+  "employeetype",
+  "preferredlanguage",
+  "ipantlogonscript",
+  "ipantprofilepath",
+  "ipanthomedirectory",
+  "ipanthomedirectorydrive",
+  "ipauniqueid",
+  "ipantsecurityidentifier",
+  "dn",
+]);
+const dateValues = new Set(["krbpasswordexpiration", "krbprincipalexpiration"]);
+
+export function apiToUser(apiRecord: Record<string, unknown>) {
+  return convertApiObj(apiRecord, simpleValues, dateValues) as Partial<User>;
+}