Fixed top header to more dynamic

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

@@ -13,6 +13,12 @@ import RobotIcon from "../icons/robot";
 import KeyIcon from "../icons/key";
 import ManageEnvIcon from "../icons/manageEnv";
 import Alert from "../alerts/Alert";
+import DownloadIcon from "../icons/download";
+import OutlineDownloadIcon from "../icons/outlineDownload";
+import RestartIcon from "../icons/restart";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
+import EditIcon from "../icons/edit";
+import UpdateIcon from "../icons/update";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -28,9 +34,7 @@ const TopHeader = (props) => {
       {triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
       <div className={styles.container}>
         <div className={styles.title}>
-          {((pathName.includes("/view") && props.state === "view") ||
-            params.usersId ||
-            params.rolesId) && (
+          {props.requiredButtons.includes("back") && (
             <div onClick={() => router.back()}>
               <BackIcon />
             </div>
@@ -38,35 +42,39 @@ const TopHeader = (props) => {
           <p>{props.topbarTitle}</p>
         </div>
         <div className={styles.actionBar}>
-          {(pathName === "/projects/view" || !props.state) && (
+          {props.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
               <SearchIcon />
             </div>
           )}
-          {pathName === "/credentials" ? (
+          {props.requiredButtons.includes("env") && (
             <div className={styles.mngEnvKeyButton}>
               <EnviromentIcon />
               <p>Manage Env. Key</p>
             </div>
-          ) : (
-            ""
           )}
-          {pathName === "/projects/view" && (
-            <div
-              className={styles.button}
+          {props.requiredButtons.includes("add-services") && (
+            <PrimaryButton
+              icon={<AddIcon />}
+              text={props.buttonText}
               onClick={() => props.trigger(!props.triggerState)}
-            >
-              <AddIcon />
-              <p>{props.buttonText}</p>
-            </div>
+            />
           )}
-          {!props.state && (
-            <div className={styles.button} onClick={handleNavigateToAdd}>
-              <AddIcon />
-              <p>{props.buttonText}</p>
-            </div>
+          {props.requiredButtons.includes("edit") && (
+            <PrimaryButton
+              icon={<EditIcon />}
+              text="Edit"
+              onClick={() => props.trigger(!props.triggerState)}
+            />
           )}
-          {props.state === "add" ? (
+          {props.requiredButtons.includes("add") && (
+            <PrimaryButton
+              icon={<AddIcon />}
+              text={props.buttonText}
+              onClick={handleNavigateToAdd}
+            />
+          )}
+          {props.requiredButtons.includes("save") && (
             <>
               <div
                 className={styles.button}
@@ -82,11 +90,22 @@ const TopHeader = (props) => {
                 <p>{props.cancelButtonText}</p>
               </div>
             </>
-          ) : (
-            ""
           )}
-          {/* Projects 3 dots menu */}
-          {pathName === "/projects/view" && (
+          {props.requiredButtons.includes("update") && (
+            <>
+              <PrimaryButton
+                icon={<UpdateIcon color="white" />}
+                text="Update"
+              />
+              <div
+                className={styles.cancelButton}
+                onClick={() => router.back()}
+              >
+                <p>{props.cancelButtonText}</p>
+              </div>
+            </>
+          )}
+          {props?.requiredButtons?.includes("services-drop-down") && (
             <div
               className={styles.menu}
               onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
@@ -124,6 +143,39 @@ const TopHeader = (props) => {
               )}
             </div>
           )}
+
+          {props.requiredButtons.includes("download") && (
+            <div
+              className={styles.menu}
+              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
+            >
+              <div className={styles.dotMenu}>
+                <MenuIcon />
+              </div>
+              {triggerDropDownMenu && (
+                <div className={styles.dropDown}>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Compose</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Config</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <RestartIcon />
+                      <p>Restart</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>