Add 'Stage' option ('Preserved users')

The 'Stage' option allows to move a given user from 'Preserved' to 'Stage'. Signed-off-by: Carla Martinez <[email protected]>
carma12 · Jan 19, 2024 · 9bbc0d5 · 9bbc0d5
1 parent acf201e
commit 9bbc0d5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 20 deletions.
diff --git a/src/components/UserSettings.tsx b/src/components/UserSettings.tsx
@@ -56,6 +56,7 @@ import ResetPassword from "./modals/ResetPassword";
 import IssueNewCertificate from "./modals/IssueNewCertificate";
 import AddOtpToken from "./modals/AddOtpToken";
 import ActivateStageUsers from "./modals/ActivateStageUsers";
+import StagePreservedUsers from "./modals/StagePreservedUsers";
 // Utils
 import { API_VERSION_BACKUP } from "src/utils/utils";
 // Navigate
@@ -246,6 +247,12 @@ const UserSettings = (props: PropsToUserSettings) => {
     setIsActivateModalOpen(false);
   };
 
+  // Preserved users - 'Stage' option
+  const [isStageModalOpen, setIsStageModalOpen] = React.useState(false);
+  const onCloseStageModal = () => {
+    setIsStageModalOpen(false);
+  };
+
   // Kebab
   const [isKebabOpen, setIsKebabOpen] = useState(false);
 
@@ -317,7 +324,9 @@ const UserSettings = (props: PropsToUserSettings) => {
   ];
 
   const preservedDropdownItems = [
-    <DropdownItem key="stage">Stage</DropdownItem>,
+    <DropdownItem key="stage" onClick={() => setIsStageModalOpen(true)}>
+      Stage
+    </DropdownItem>,
     <DropdownItem key="restore">Restore</DropdownItem>,
     <DropdownItem key="delete" onClick={() => setIsDeleteModalOpen(true)}>
       Delete
@@ -624,6 +633,13 @@ const UserSettings = (props: PropsToUserSettings) => {
         selectedUids={selectedUsers}
         onSuccess={() => navigate(URL_PREFIX + "/stage-users")}
       />
+      <StagePreservedUsers
+        show={isStageModalOpen}
+        handleModalToggle={onCloseStageModal}
+        selectedUsers={selectedUsers}
+        updateSelectedUsers={setSelectedUsers}
+        onSuccess={() => navigate(URL_PREFIX + "/preserved-users")}
+      />
     </>
   );
 };

diff --git a/src/components/modals/RestorePreservedUsers.tsx b/src/components/modals/RestorePreservedUsers.tsx
@@ -37,7 +37,7 @@ export interface PropsToPreservedUsers {
   show: boolean;
   handleModalToggle: () => void;
   selectedUsersData: SelectedUsersData;
-  onRefresh?: () => void;
+  onSuccess: () => void;
 }
 
 const RestorePreservedUsers = (props: PropsToPreservedUsers) => {
@@ -165,10 +165,8 @@ const RestorePreservedUsers = (props: PropsToPreservedUsers) => {
             // Reset selected values
             props.selectedUsersData.updateSelectedUsers([]);
 
-            // Refresh data
-            if (props.onRefresh !== undefined) {
-              props.onRefresh();
-            }
+            // Refresh data or redirect
+            props.onSuccess();
 
             // Show alert: success
             alerts.addAlert(

diff --git a/src/components/modals/StagePreservedUsers.tsx b/src/components/modals/StagePreservedUsers.tsx
@@ -27,9 +27,16 @@ import ErrorModal from "./ErrorModal";
 import { ErrorData } from "src/utils/datatypes/globalDataTypes";
 // Hooks
 import useAlerts from "src/hooks/useAlerts";
-import { PropsToPreservedUsers } from "./RestorePreservedUsers";
 
-const StagePreservedUsers = (props: PropsToPreservedUsers) => {
+export interface PropsToStagePreservedUsers {
+  show: boolean;
+  handleModalToggle: () => void;
+  selectedUsers: string[];
+  updateSelectedUsers: (newSelectedUsers: string[]) => void;
+  onSuccess: () => void;
+}
+
+const StagePreservedUsers = (props: PropsToStagePreservedUsers) => {
   // Set dispatch (Redux)
   const dispatch = useAppDispatch();
 
@@ -55,7 +62,7 @@ const StagePreservedUsers = (props: PropsToPreservedUsers) => {
       id: "stage-users-table",
       pfComponent: (
         <UsersDisplayTable
-          usersToDisplay={props.selectedUsersData.selectedUsers}
+          usersToDisplay={props.selectedUsers}
           from={"preserved-users"}
         />
       ),
@@ -115,7 +122,7 @@ const StagePreservedUsers = (props: PropsToPreservedUsers) => {
 
     setBtnSpinning(true);
 
-    props.selectedUsersData.selectedUsers.map((uid) => {
+    props.selectedUsers.map((uid) => {
       const payloadItem = {
         method: "user_stage",
         params: [[uid], {}],
@@ -147,22 +154,21 @@ const StagePreservedUsers = (props: PropsToPreservedUsers) => {
             handleAPIError(error);
           } else {
             // Update data from Redux
-            props.selectedUsersData.selectedUsers.map((user) => {
+            props.selectedUsers.map((user) => {
               dispatch(removePreservedUser(user[0]));
             });
 
             // Reset selected values
-            props.selectedUsersData.updateSelectedUsers([]);
-
-            // Refresh data
-            if (props.onRefresh !== undefined) {
-              props.onRefresh();
-            }
+            props.updateSelectedUsers([]);
 
             // Show alert: success
             alerts.addAlert("stage-users-success", "Users staged", "success");
 
+            // Close modal
             closeModal();
+
+            // Navigate to selected page
+            props.onSuccess();
           }
         } else if (error) {
           // Handle error

diff --git a/src/pages/PreservedUsers/PreservedUsers.tsx b/src/pages/PreservedUsers/PreservedUsers.tsx
@@ -497,13 +497,14 @@ const PreservedUsers = () => {
         show={showRestoreModal}
         handleModalToggle={onRestoreModalToggle}
         selectedUsersData={selectedUsersData}
-        onRefresh={refreshUsersData}
+        onSuccess={refreshUsersData}
       />
       <StagePreservedUsers
         show={showStageModal}
         handleModalToggle={onStageModalToggle}
-        selectedUsersData={selectedUsersData}
-        onRefresh={refreshUsersData}
+        selectedUsers={selectedUsers}
+        updateSelectedUsers={setSelectedUsers}
+        onSuccess={refreshUsersData}
       />
     </Page>
   );