From b272078f99ad8b65bd5ed8c009bde35d7db7eef7 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 14:28:28 +0530
Subject: [PATCH 1/3] feat(frontend): updated toggles to be optionally empty

---
 .../components/global/FormElements/Toggle.tsx | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/services/frontend/src/components/global/FormElements/Toggle.tsx b/services/frontend/src/components/global/FormElements/Toggle.tsx
index c30dd01..5c2f426 100644
--- a/services/frontend/src/components/global/FormElements/Toggle.tsx
+++ b/services/frontend/src/components/global/FormElements/Toggle.tsx
@@ -33,6 +33,10 @@ const ToggleButton = styled(Button)<IToggleButtonProps>(({ index, total }) => ({
   fontSize: 11
 }));
 
+const ButtonBorder = styled("div")`
+  border-right: 1px solid white;
+`;
+
 const Toggle: FunctionComponent<IToggleProps> = (
   props: IToggleProps
 ): ReactElement => {
@@ -42,23 +46,26 @@ const Toggle: FunctionComponent<IToggleProps> = (
     lodash.get(formik.touched, name) && lodash.get(formik.errors, name);
   const value = lodash.get(formik.values, name);
 
-  const handleChange = (value: string) => () => {
-    formik.setFieldValue(name, value);
+  const handleChange = (newValue: string) => () => {
+    formik.setFieldValue(name, newValue === value ? "" : newValue);
   };
 
   return (
     <Root>
       {options.map((option, index) => (
-        <ToggleButton
-          variant={value === option.value ? "solid" : "soft"}
-          size="sm"
-          color="primary"
-          index={index}
-          total={options.length}
-          onClick={handleChange(option.value)}
-        >
-          {option.text}
-        </ToggleButton>
+        <>
+          <ToggleButton
+            variant={value === option.value ? "solid" : "soft"}
+            size="sm"
+            color="primary"
+            index={index}
+            total={options.length}
+            onClick={handleChange(option.value)}
+          >
+            {option.text}
+          </ToggleButton>
+          {index + 1 < options.length && <ButtonBorder />}
+        </>
       ))}
 
       <div className="mt-1 text-xs text-red-600">

From d727e2c10844d7fb9ba89935c5bb600ee7c8a366 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 14:28:45 +0530
Subject: [PATCH 2/3] feat(frontend): remove default value for protocol

---
 services/frontend/src/components/Modal/service/General.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/frontend/src/components/Modal/service/General.tsx b/services/frontend/src/components/Modal/service/General.tsx
index 60b1df8..24cd90e 100644
--- a/services/frontend/src/components/Modal/service/General.tsx
+++ b/services/frontend/src/components/Modal/service/General.tsx
@@ -63,7 +63,7 @@ const General = () => {
     formik.setFieldValue(`ports[${ports.length}]`, {
       hostPort: "",
       containerPort: "",
-      protocol: "tcp"
+      protocol: ""
     });
   }, [formik]);
 

From 21e1c2526258bcd472337100cc2c794613d36409 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 14:38:11 +0530
Subject: [PATCH 3/3] fix(frontend): fixed missing key warning for toggles

---
 .../frontend/src/components/global/FormElements/Toggle.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/services/frontend/src/components/global/FormElements/Toggle.tsx b/services/frontend/src/components/global/FormElements/Toggle.tsx
index 5c2f426..acf82b2 100644
--- a/services/frontend/src/components/global/FormElements/Toggle.tsx
+++ b/services/frontend/src/components/global/FormElements/Toggle.tsx
@@ -1,6 +1,6 @@
 import lodash from "lodash";
 import { useFormikContext } from "formik";
-import { FunctionComponent, ReactElement, useCallback } from "react";
+import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
 import { Button, styled } from "@mui/joy";
 
 export interface IToggleProps {
@@ -53,7 +53,7 @@ const Toggle: FunctionComponent<IToggleProps> = (
   return (
     <Root>
       {options.map((option, index) => (
-        <>
+        <Fragment key={option.value}>
           <ToggleButton
             variant={value === option.value ? "solid" : "soft"}
             size="sm"
@@ -65,7 +65,7 @@ const Toggle: FunctionComponent<IToggleProps> = (
             {option.text}
           </ToggleButton>
           {index + 1 < options.length && <ButtonBorder />}
-        </>
+        </Fragment>
       ))}
 
       <div className="mt-1 text-xs text-red-600">