Fixed

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

@@ -42,56 +42,56 @@ const TopHeader = (props) => {
           <p>{props.topbarTitle}</p>
         </div>
         <div className={styles.actionBar}>
-          {props.requiredButtons.includes("search") && (
+          {props?.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
               <SearchIcon />
             </div>
           )}
-          {props.requiredButtons.includes("env") && (
+          {props?.requiredButtons.includes("env") && (
             <div className={styles.mngEnvKeyButton}>
               <EnviromentIcon />
               <p>Manage Env. Key</p>
             </div>
           )}
-          {props.requiredButtons.includes("add-services") && (
+          {props?.requiredButtons.includes("add-services") && (
             <PrimaryButton
               icon={<AddIcon />}
               text={props.buttonText}
-              onClick={() => props.trigger(!props.triggerState)}
+              onClick={() => props?.trigger(!props?.triggerState)}
             />
           )}
-          {props.requiredButtons.includes("edit") && (
+          {props?.requiredButtons.includes("edit") && (
             <PrimaryButton
               icon={<EditIcon />}
               text="Edit"
-              onClick={() => props.trigger(!props.triggerState)}
+              onClick={() => props?.trigger(!props?.triggerState)}
             />
           )}
-          {props.requiredButtons.includes("add") && (
+          {props?.requiredButtons.includes("add") && (
             <PrimaryButton
               icon={<AddIcon />}
-              text={props.buttonText}
+              text={props?.buttonText}
               onClick={handleNavigateToAdd}
             />
           )}
-          {props.requiredButtons.includes("save") && (
+          {props?.requiredButtons.includes("save") && (
             <>
               <div
                 className={styles.button}
                 onClick={() => setTriggerAlert(!triggerAlert)}
               >
                 <CheckIcon width={20} height={20} />
-                <p>{props.buttonText}</p>
+                <p>{props?.buttonText}</p>
               </div>
               <div
                 className={styles.cancelButton}
                 onClick={() => router.back()}
               >
-                <p>{props.cancelButtonText}</p>
+                <p>{props?.cancelButtonText}</p>
               </div>
             </>
           )}
-          {props.requiredButtons.includes("update") && (
+          {props?.requiredButtons.includes("update") && (
             <>
               <PrimaryButton
                 icon={<UpdateIcon color="white" />}
@@ -144,7 +144,7 @@ const TopHeader = (props) => {
             </div>
           )}
 
-          {props.requiredButtons.includes("download") && (
+          {props?.requiredButtons.includes("download") && (
             <div
               className={styles.menu}
               onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}

frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 import styles from "./styles.module.css";
 import CloseIcon from "@/app/components/icons/close";
@@ -6,6 +7,7 @@ import AddIcon from "@/app/components/icons/add";
 import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
 import SelectField from "@/app/components/select/SelectField";
 const AddVariableModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState();
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -66,7 +68,7 @@ const AddVariableModal = (props) => {
                         <div>
                           <p>Variable Name</p>
                         </div>
-                        <TextField />
+                        <TextField placeHolder="Enter a variable name" />
                       </div>
                     </div>
                     <div className={styles.horizontalInput}>
@@ -117,7 +119,7 @@ const AddVariableModal = (props) => {
           </div>
         </div>
         <div className={styles.addButtonContainer}>
-          <PrimaryButton />
+          <PrimaryButton text="  Add " icon={<AddIcon />} />
         </div>
       </div>
     </div>