Added feature

frontend/src/app/components/checkbox/CheckBox.jsx

@@ -6,7 +6,7 @@ import CloseIcon from "../icons/close";
 import CheckedIcon from "../icons/switchIcons/checked";
 import UnCheckedIcon from "../icons/switchIcons/unchecked";
 
-const CustomCheckbox = ({ checked, onChange, id }) => {
+const CustomCheckbox = ({ checked, setChecked, id, ...props }) => {
   const [isChecked, setIsChecked] = useState(false);
   return (
     <>
@@ -17,8 +17,9 @@ const CustomCheckbox = ({ checked, onChange, id }) => {
         checked={checked}
         onChange={() => {
           setIsChecked(!isChecked);
-          onChange;
+          setChecked();
         }}
+        {...props}
       />
 
       <label htmlFor={id} className={styles.switch}>

frontend/src/app/components/fields/styles.module.css

@@ -45,3 +45,13 @@
   font-weight: 400;
   line-height: normal;
 }
+
+.input:disabled {
+  background: rgba(75, 79, 109, 0.15);
+  border: 1px solid #616583;
+  color: #85869b;
+  cursor: not-allowed;
+
+  pointer-events: none;
+  user-select: none;
+}

frontend/src/app/components/icons/copy.jsx

@@ -0,0 +1,27 @@
+const CopyIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M5.44531 4.16645C5.44531 3.82756 5.57994 3.50255 5.81957 3.26292C6.05919 3.02329 6.3842 2.88867 6.72309 2.88867H11.8342C12.1731 2.88867 12.4981 3.02329 12.7377 3.26292C12.9774 3.50255 13.112 3.82756 13.112 4.16645V9.27756C13.112 9.61645 12.9774 9.94146 12.7377 10.1811C12.4981 10.4207 12.1731 10.5553 11.8342 10.5553H6.72309C6.3842 10.5553 6.05919 10.4207 5.81957 10.1811C5.57994 9.94146 5.44531 9.61645 5.44531 9.27756V4.16645Z"
+      stroke="black"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M10.5553 10.5554V11.8332C10.5553 12.1721 10.4207 12.4971 10.1811 12.7368C9.94146 12.9764 9.61645 13.111 9.27756 13.111H4.16645C3.82756 13.111 3.50255 12.9764 3.26292 12.7368C3.02329 12.4971 2.88867 12.1721 2.88867 11.8332V6.72211C2.88867 6.38323 3.02329 6.05822 3.26292 5.81859C3.50255 5.57896 3.82756 5.44434 4.16645 5.44434H5.44423"
+      stroke="black"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CopyIcon;

frontend/src/app/organization/add/page.jsx

@@ -31,7 +31,8 @@ const AddCredentials = () => {
                           alt="badge image"
                         />
                       </div>
-                      <div className={styles.addIconContainer}>
+                      <input type="file" id="file" hidden accept="image/*" />
+                      <label className={styles.addIconContainer} for="file">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           width={20}
@@ -54,7 +55,7 @@ const AddCredentials = () => {
                             strokeLinejoin="round"
                           />
                         </svg>
-                      </div>
+                      </label>
                     </div>
                   </div>
                   <div className={styles.labels}>

frontend/src/app/organization/add/styles.module.css

@@ -89,6 +89,13 @@
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
   border-radius: 100px;
   background: #696b95;
+  transition: all 0.1;
+  cursor: pointer;
+}
+.addIconContainer:hover {
+  border-radius: 100px;
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
 }
 .labels {
   display: flex;

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -16,6 +16,9 @@ const AddServices = () => {
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [disableScaling, setDisableScaling] = useState(true);
+  const [disableReadiness, setDisableReadiness] = useState(true);
+  const [disableLiveness, setDisableLiveness] = useState(true);
   return (
     <div className={globalStyle.section}>
       {triggerAddVariable && (
@@ -136,7 +139,10 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Auto Scaling</p>
-                        <CustomCheckbox id="scalingCheckBox" />
+                        <CustomCheckbox
+                          id="scalingCheckBox"
+                          setChecked={() => setDisableScaling(!disableScaling)}
+                        />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -145,11 +151,17 @@ const AddServices = () => {
                           <div>
                             <p>Minimum pods</p>
 
-                            <TextField placeHolder="1" />
+                            <TextField
+                              placeHolder="1"
+                              disabled={disableScaling}
+                            />
                           </div>
                           <div>
                             <p>Maximum pods</p>
-                            <TextField placeHolder="1" />
+                            <TextField
+                              placeHolder="1"
+                              disabled={disableScaling}
+                            />
                           </div>
                         </div>
                       </div>
@@ -161,7 +173,12 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Readiness</p>
-                        <CustomCheckbox id="readiNessCheckBox" />
+                        <CustomCheckbox
+                          id="readiNessCheckBox"
+                          setChecked={() =>
+                            setDisableReadiness(!disableReadiness)
+                          }
+                        />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -170,11 +187,17 @@ const AddServices = () => {
                           <div>
                             <p>Readiness Path</p>
 
-                            <TextField placeHolder="Enter Readiness path" />
+                            <TextField
+                              placeHolder="Enter Readiness path"
+                              disabled={disableReadiness}
+                            />
                           </div>
                           <div>
                             <p>Readiness Port</p>
-                            <TextField placeHolder="Enter Readiness port" />
+                            <TextField
+                              placeHolder="Enter Readiness port"
+                              disabled={disableReadiness}
+                            />
                           </div>
                         </div>
                       </div>
@@ -186,7 +209,13 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Liveness</p>
-                        <CustomCheckbox id="liveNessCheckBox" />
+                        <CustomCheckbox
+                          id="liveNessCheckBox"
+                          setChecked={() => {
+                            console.log("alsdjhfkjas");
+                            setDisableLiveness(!disableLiveness);
+                          }}
+                        />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -194,12 +223,18 @@ const AddServices = () => {
                         <div>
                           <div>
                             <p>Liveness Path</p>
-                            <TextField placeHolder="Enter liveness path" />
+                            <TextField
+                              placeHolder="Enter liveness path"
+                              disabled={disableLiveness}
+                            />
                           </div>
                           <div>
                             <p>Liveness Port</p>
 
-                            <TextField placeHolder="Enter liveness port" />
+                            <TextField
+                              placeHolder="Enter liveness port"
+                              disabled={disableLiveness}
+                            />
                           </div>
                         </div>
                       </div>

frontend/src/app/projects/view/page.jsx

@@ -5,6 +5,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import AddServicesModal from "./AddServicesModal/AddServicesModal";
 import { useRouter, usePathname } from "next/navigation";
+import CopyIcon from "@/app/components/icons/copy";
 const AddProject = () => {
   const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
   const router = useRouter();
@@ -270,7 +271,13 @@ const AddProject = () => {
                             </div>
                           </div>
                         </td>
-                        <td>{services.image}</td>
+                        <td className={styles.imageText}>
+                          <div>
+                            <CopyIcon />
+                            <p>Copy</p>
+                          </div>
+                          <p> {services.image}</p>
+                        </td>
                         <td>{services.ingress}</td>
                         <td>{services.ports}</td>
                         <td>

frontend/src/app/projects/view/styles.module.css

@@ -151,3 +151,32 @@
 .iconButton:hover path {
   stroke: white;
 }
+.imageText {
+  transition: all 0.15s;
+  position: relative;
+}
+.tableContainer > .imageText {
+  padding: 0px;
+}
+.imageText > div {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  transform: translateX(50%) translateY(-50%);
+  border-radius: 100px;
+  background: #fff;
+  box-shadow: 0 0 10px 0 #000;
+  color: black;
+  opacity: 0;
+}
+.imageText > p {
+  height: 100%;
+}
+.imageText:hover > div {
+  opacity: 1;
+}