Implement 'Save' button

The 'Save' button will save the newly
added changes of a specific user.

Signed-off-by: Carla Martinez <carlmart@redhat.com>

src/components/UserSettings.tsx

@@ -48,6 +48,7 @@ export interface PropsToUserSettings {
   certData: any;
   onRefresh?: () => void;
   onRevert?: () => void;
+  onSave?: () => void;
   isDataLoading?: boolean;
   from: "active-users" | "stage-users" | "preserved-users";
 }
@@ -111,7 +112,12 @@ const UserSettings = (props: PropsToUserSettings) => {
     {
       key: 2,
       element: (
-        <SecondaryButton isDisabled={!fieldsChanged}>Save</SecondaryButton>
+        <SecondaryButton
+          isDisabled={!fieldsChanged}
+          onClickHandler={props.onSave}
+        >
+          Save
+        </SecondaryButton>
       ),
     },
     {

src/pages/ActiveUsers/ActiveUsersTabs.tsx

@@ -29,7 +29,9 @@ import useUserSettingsData from "src/hooks/useUserSettingsData";
 import {
   BatchResult,
   Command,
+  FindRPCResponse,
   useRefreshUsersMutation,
+  useSaveUserDataMutation,
 } from "src/services/rpc";
 
 const ActiveUsersTabs = () => {
@@ -55,6 +57,9 @@ const ActiveUsersTabs = () => {
   // Define function to execute 'useRefreshUsersMutation' hook (via Mutation)
   const [retrieveUserData] = useRefreshUsersMutation();
 
+  // Define function to execute 'useSaveUserDataMutation' hook (via mutation)
+  const [saveData] = useSaveUserDataMutation();
+
   // Update states on receiving 'batchResponse' from 'useUserSettingsData'
   useEffect(() => {
     if (Object.keys(batchResponse).length > 0) {
@@ -130,6 +135,21 @@ const ActiveUsersTabs = () => {
     // TODO: Set the rest of the values
   };
 
+  // Save button
+  const saveUserData = () => {
+    // Prepare payload
+    // - TODO: Take the new updated data from fields
+    // - TEST
+    const payload = { uid: "alee", params: { title: "Senior", sn: "Lee" } };
+
+    // Make API call
+    saveData(payload).then((response) => {
+      if ("data" in response) {
+        console.log(response.data as FindRPCResponse);
+      }
+    });
+  };
+
   // Tab
   const [activeTabKey, setActiveTabKey] = useState(0);
 
@@ -191,6 +211,7 @@ const ActiveUsersTabs = () => {
               onUserChange={setUser}
               onRefresh={refreshUserData}
               onRevert={revertUserData}
+              onSave={saveUserData}
               isDataLoading={isDataLoading}
               from="active-users"
             />

src/services/rpc.ts

@@ -8,7 +8,7 @@ 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 interface UIDType {
   dn: string;
@@ -120,6 +120,8 @@ export const getBatchCommand = (commandData: Command[], apiVersion: string) => {
   return payloadBatchParams;
 };
 
+type userModData = { uid: string, params: Partial<User> };
+
 // Endpoints that will be called from anywhere in the application.
 // Two types:
 //   - Queries: https://redux-toolkit.js.org/rtk-query/usage/queries
@@ -245,6 +247,30 @@ export const api = createApi({
       transformResponse: (response: BatchResponse): BatchResult[] =>
         response.result.results,
     }),
+    saveUserData: build.mutation<FindRPCResponse, userModData>({
+      query: (data) => {
+        console.log("--> data.params");
+        console.log(data.params);
+        const baseParams = {
+          all: true,
+          rights: true,
+          version: API_VERSION_BACKUP,
+        }
+
+        const fullParams = Object.assign(baseParams, data.params)
+        console.log("--> fullParams");
+        console.log(fullParams);
+
+
+        return getCommand({
+            method: "user_mod",
+            params: [
+              [data.uid],
+              fullParams,
+            ],
+        });
+      },
+    }),
   }),
 });
 
@@ -257,4 +283,5 @@ export const {
   useGetObjectMetadataQuery,
   useGetUsersFullDataQuery,
   useRefreshUsersMutation,
+  useSaveUserDataMutation,
 } = api;