Fixed

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -19,19 +19,26 @@ import RestartIcon from "../icons/restart";
 import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
 import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
+import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
   const [triggerAlert, setTriggerAlert] = useState(false);
   const pathName = usePathname();
   const router = useRouter();
+  const [editState, setEditState] = useState(false);
   const params = useParams();
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
   return (
     <>
-      {triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+        />
+      )}
       <div className={styles.container}>
         <div className={styles.title}>
           {props.requiredButtons.includes("back") && (
@@ -60,11 +67,13 @@ const TopHeader = (props) => {
               onClick={() => props?.trigger(!props?.triggerState)}
             />
           )}
-          {props?.requiredButtons.includes("edit") && (
+          {!editState && props?.requiredButtons.includes("edit") && (
             <PrimaryButton
               icon={<EditIcon />}
               text="Edit"
-              onClick={() => props?.trigger(!props?.triggerState)}
+              onClick={() => {
+                setEditState(true);
+              }}
             />
           )}
           {props?.requiredButtons.includes("add") && (
@@ -74,35 +83,33 @@ const TopHeader = (props) => {
               onClick={handleNavigateToAdd}
             />
           )}
-          {props?.requiredButtons.includes("save") && (
+          {editState || props?.requiredButtons?.includes("save") ? (
             <>
               <div
                 className={styles.button}
                 onClick={() => setTriggerAlert(!triggerAlert)}
               >
                 <CheckIcon width={20} height={20} />
-                <p>{props?.buttonText}</p>
-              </div>
-              <div
-                className={styles.cancelButton}
-                onClick={() => router.back()}
-              >
-                <p>{props?.cancelButtonText}</p>
+                <p>Save</p>
               </div>
+
+              <SecondaryButton
+                text="Cancel"
+                onClick={
+                  editState
+                    ? () => setEditState(!editState)
+                    : () => router.back()
+                }
+              />
             </>
-          )}
+          ) : null}
           {props?.requiredButtons.includes("update") && (
             <>
               <PrimaryButton
                 icon={<UpdateIcon color="white" />}
                 text="Update"
               />
-              <div
-                className={styles.cancelButton}
-                onClick={() => router.back()}
-              >
-                <p>{props.cancelButtonText}</p>
-              </div>
+              <SecondaryButton text="Cancel" onClick={() => router.back()} />
             </>
           )}
           {props?.requiredButtons?.includes("services-drop-down") && (
@@ -144,7 +151,7 @@ const TopHeader = (props) => {
             </div>
           )}
 
-          {props?.requiredButtons.includes("download") && (
+          {props?.requiredButtons.includes("download") && !editState && (
             <div
               className={styles.menu}
               onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}