fix(OH2-440): Add cancel action on user/group creation/update (#705)

SteveGT96 · SteveGT96 · web-flow · commit 4733480d7328 · 2024-11-28T22:27:42.000+01:00
Co-authored-by: SteveGT96 &lt;steve.tsala@intesys.it&gt;
diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -6,6 +6,7 @@ import { useParams } from "react-router";
 import { useNavigate } from "react-router-dom";
 
 import checkIcon from "../../../../../assets/check-icon.png";
+import warningIcon from "../../../../../assets/warning-icon.png";
 import Button from "../../../button/Button";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
@@ -42,6 +43,8 @@ export const EditGroup = () => {
   const { id } = useParams();
   const canUpdatePermissions = usePermission("grouppermission.update");
 
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
+
   const update = useAppSelector((state) => state.usergroups.update);
   const permissions = useAppSelector((state) => state.permissions.getAll);
   const group = useAppSelector((state) => state.usergroups.currentGroup);
@@ -130,9 +133,9 @@ export const EditGroup = () => {
     };
   }, []);
 
-  const handleFormReset = () => {
-    resetForm();
-    setGroupPermissions(group.data?.permissions ?? []);
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    navigate(-1);
   };
 
   const handleCheckboxChange = useCallback(
@@ -262,16 +265,27 @@ export const EditGroup = () => {
               </div>
               <div className="reset_button">
                 <Button
+                  dataCy="cancel-form"
                   type="reset"
                   variant="text"
-                  disabled={!!update.isLoading || !(dirty || dirtyPermissions)}
-                  onClick={handleFormReset}
+                  disabled={update.isLoading}
+                  onClick={() => setOpenResetConfirmation(true)}
                 >
-                  {t("common.reset")}
+                  {t("common.cancel")}
                 </Button>
               </div>
             </div>
           </form>
+          <ConfirmationDialog
+            isOpen={openResetConfirmation}
+            title={t("common.cancel")}
+            info={t("common.resetform")}
+            icon={warningIcon}
+            primaryButtonLabel={t("common.ok")}
+            secondaryButtonLabel={t("common.discard")}
+            handlePrimaryButtonClick={handleResetConfirmation}
+            handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+          />
           <ConfirmationDialog
             isOpen={update.hasSucceeded}
             title={t("user.groupUpdated")}
diff --git a/src/components/accessories/admin/users/editGroup/styles.scss b/src/components/accessories/admin/users/editGroup/styles.scss
@@ -62,6 +62,7 @@
     margin-top: 25px;
     padding: 0px 15px;
     flex-direction: row-reverse;
+    gap: 2px;
     @include susy-media($smartphone_small) {
       display: block;
     }
diff --git a/src/components/accessories/admin/users/editUser/EditUserForm.tsx b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
@@ -5,13 +5,14 @@ import {
   TextField as MuiTextField,
 } from "@mui/material";
 import { useFormik } from "formik";
-import React, { ReactNode, useCallback } from "react";
+import React, { ReactNode, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import { UserDTO, UserGroupDTO } from "../../../../../generated";
 
 import checkIcon from "../../../../../assets/check-icon.png";
+import warningIcon from "../../../../../assets/warning-icon.png";
 import Button from "../../../button/Button";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
@@ -44,6 +45,8 @@ export const EditUserForm = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
+
   const handleFormSubmit = (values: UserDTO & { passwd2: string }) => {
     const { passwd2, ...userDTO } = values;
     if (userDTO.passwd === undefined) {
@@ -59,7 +62,6 @@ export const EditUserForm = ({
     getFieldProps,
     isValid,
     dirty,
-    resetForm,
     errors,
     touched,
     values,
@@ -71,6 +73,11 @@ export const EditUserForm = ({
     onSubmit: handleFormSubmit,
   });
 
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    navigate(-1);
+  };
+
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
       setFieldValue(fieldName, value);
@@ -192,18 +199,27 @@ export const EditUserForm = ({
           </div>
           <div className="reset_button">
             <Button
+              dataCy="cancel-form"
               type="reset"
               variant="text"
-              disabled={!!isLoading || !dirty}
-              onClick={async () => {
-                resetForm();
-              }}
+              disabled={isLoading}
+              onClick={() => setOpenResetConfirmation(true)}
             >
-              {t("common.reset")}
+              {t("common.cancel")}
             </Button>
           </div>
         </div>
       </form>
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.cancel")}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.ok")}
+        secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleResetConfirmation}
+        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+      />
       <ConfirmationDialog
         isOpen={hasSucceeded}
         title={t("user.updatedSuccessTitle")}
diff --git a/src/components/accessories/admin/users/editUser/styles.scss b/src/components/accessories/admin/users/editUser/styles.scss
@@ -61,6 +61,7 @@
     display: flex;
     margin-top: 25px;
     padding: 0px 15px;
+    gap: 2px;
     flex-direction: row-reverse;
     @include susy-media($smartphone_small) {
       display: block;
diff --git a/src/components/accessories/admin/users/newGroup/NewGroup.tsx b/src/components/accessories/admin/users/newGroup/NewGroup.tsx
@@ -1,10 +1,11 @@
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import checkIcon from "../../../../../assets/check-icon.png";
+import warningIcon from "../../../../../assets/warning-icon.png";
 import Button from "../../../button/Button";
 import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
@@ -32,6 +33,8 @@ export const NewGroup = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
+
   const create = useAppSelector((state) => state.usergroups.create);
 
   const {
@@ -40,7 +43,6 @@ export const NewGroup = () => {
     getFieldProps,
     isValid,
     dirty,
-    resetForm,
     errors,
     touched,
     values,
@@ -59,6 +61,11 @@ export const NewGroup = () => {
     };
   }, [dispatch]);
 
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    navigate(-1);
+  };
+
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
       setFieldValue(fieldName, value);
@@ -123,18 +130,27 @@ export const NewGroup = () => {
           </div>
           <div className="reset_button">
             <Button
+              dataCy="cancel-form"
               type="reset"
               variant="text"
-              disabled={!!create.isLoading || !dirty}
-              onClick={async () => {
-                resetForm();
-              }}
+              disabled={create.isLoading}
+              onClick={() => setOpenResetConfirmation(true)}
             >
-              {t("common.reset")}
+              {t("common.cancel")}
             </Button>
           </div>
         </div>
       </form>
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.cancel")}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.ok")}
+        secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleResetConfirmation}
+        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+      />
       <ConfirmationDialog
         isOpen={create.hasSucceeded}
         title={t("user.groupCreated")}
diff --git a/src/components/accessories/admin/users/newGroup/styles.scss b/src/components/accessories/admin/users/newGroup/styles.scss
@@ -61,6 +61,7 @@
     display: flex;
     margin-top: 25px;
     padding: 0px 15px;
+    gap: 2px;
     flex-direction: row-reverse;
     @include susy-media($smartphone_small) {
       display: block;
diff --git a/src/components/accessories/admin/users/newUser/NewUser.tsx b/src/components/accessories/admin/users/newUser/NewUser.tsx
@@ -6,7 +6,7 @@ import {
 } from "@mui/material";
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
-import React, { ReactNode, useCallback, useEffect } from "react";
+import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import checkIcon from "../../../../../assets/check-icon.png";
@@ -41,6 +41,8 @@ export const NewUser = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
+
   const create = useAppSelector((state) => state.users.create);
 
   const userGroupsTypeState = useAppSelector(
@@ -78,6 +80,11 @@ export const NewUser = () => {
     };
   }, [create.hasSucceeded, dispatch, navigate]);
 
+  const handleResetConfirmation = () => {
+    setOpenResetConfirmation(false);
+    navigate(-1);
+  };
+
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
       setFieldValue(fieldName, value);
@@ -200,12 +207,11 @@ export const NewUser = () => {
           </div>
           <div className="reset_button">
             <Button
+              dataCy="cancel-form"
               type="reset"
               variant="text"
-              disabled={!!create.isLoading}
-              onClick={() => {
-                navigate(PATHS.admin_users);
-              }}
+              disabled={create.isLoading}
+              onClick={() => setOpenResetConfirmation(true)}
             >
               {t("common.cancel")}
             </Button>
@@ -222,6 +228,16 @@ export const NewUser = () => {
           }}
           handleSecondaryButtonClick={() => ({})}
         />
+        <ConfirmationDialog
+          isOpen={openResetConfirmation}
+          title={t("common.cancel")}
+          info={t("common.resetform")}
+          icon={warningIcon}
+          primaryButtonLabel={t("common.ok")}
+          secondaryButtonLabel={t("common.discard")}
+          handlePrimaryButtonClick={handleResetConfirmation}
+          handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+        />
         <ConfirmationDialog
           isOpen={create.hasFailed}
           title={t("errors.internalerror")}
diff --git a/src/components/accessories/admin/users/newUser/styles.scss b/src/components/accessories/admin/users/newUser/styles.scss
@@ -61,6 +61,7 @@
     display: flex;
     margin-top: 25px;
     padding: 0px 15px;
+    gap: 2px;
     flex-direction: row-reverse;
     @include susy-media($smartphone_small) {
       display: block;
diff --git a/src/components/accessories/confirmationDialog/styles.scss b/src/components/accessories/confirmationDialog/styles.scss
@@ -1,44 +1,45 @@
-@import "../../../styles/variables";
-@import "../../../../node_modules/susy/sass/susy";
-
-.dialog__title {
-  width: 100%;
-  text-align: center;
-  font-weight: bold;
-}
-
-.dialog__icon {
-  height: 90px;
-  margin-top: 20px;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.dialog__info {
-  margin: 25px 0px 40px;
-}
-
-.dialog__divider {
-  width: 100%;
-  background-color: $c-grey-light;
-  height: 0.5px;
-}
-
-.dialog__buttonSet {
-  display: flex;
-  flex-direction: row-reverse;
-  margin-bottom: 10px;
-  @include susy-media($smartphone_small) {
-    display: block;
-  }
-
-  .submit_button,
-  .reset_button {
-    .MuiButton-label {
-      font-size: smaller;
-      letter-spacing: 1px;
-      font-weight: 600;
-    }
-  }
-}
+@import "../../../styles/variables";
+@import "../../../../node_modules/susy/sass/susy";
+
+.dialog__title {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+}
+
+.dialog__icon {
+  height: 90px;
+  margin-top: 20px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.dialog__info {
+  margin: 25px 0px 40px;
+}
+
+.dialog__divider {
+  width: 100%;
+  background-color: $c-grey-light;
+  height: 0.5px;
+}
+
+.dialog__buttonSet {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-bottom: 10px;
+  gap: 2px;
+  @include susy-media($smartphone_small) {
+    display: block;
+  }
+
+  .submit_button,
+  .reset_button {
+    .MuiButton-label {
+      font-size: smaller;
+      letter-spacing: 1px;
+      font-weight: 600;
+    }
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@`
`62`	`62`	`margin-top: 25px;`
`63`	`63`	`padding: 0px 15px;`
`64`	`64`	`flex-direction: row-reverse;`
	`65`	`+ gap: 2px;`
`65`	`66`	`@include susy-media($smartphone_small) {`
`66`	`67`	`display: block;`
`67`	`68`	`}`