From 5957758f1f87d1732b0cdd9687c091969f74f1a4 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Tue, 26 Jul 2022 10:42:11 +0530
Subject: [PATCH] feat(frontend): updated `Record` to render toggles

 * The `Record` component now accepts `type` and `options` props.
---
 .../components/Modal/Service/Environment.tsx  |  6 ++--
 .../src/components/Modal/Service/General.tsx  | 21 ++++++++++---
 .../src/components/Modal/Service/Labels.tsx   |  6 ++--
 .../src/components/Modal/Service/Volumes.tsx  |  9 ++++--
 services/frontend/src/components/Record.tsx   | 30 +++++++++++++------
 5 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/services/frontend/src/components/Modal/Service/Environment.tsx b/services/frontend/src/components/Modal/Service/Environment.tsx
index c506b08..3a07808 100644
--- a/services/frontend/src/components/Modal/Service/Environment.tsx
+++ b/services/frontend/src/components/Modal/Service/Environment.tsx
@@ -68,12 +68,14 @@ const Environment = () => {
                 {
                   name: `environmentVariables[${index}].key`,
                   placeholder: "Key",
-                  required: true
+                  required: true,
+                  type: "text"
                 },
                 {
                   name: `environmentVariables[${index}].value`,
                   placeholder: "Value",
-                  required: true
+                  required: true,
+                  type: "text"
                 }
               ]}
               onRemove={handleRemoveEnvironmentVariable}
diff --git a/services/frontend/src/components/Modal/Service/General.tsx b/services/frontend/src/components/Modal/Service/General.tsx
index f3b3047..5469120 100644
--- a/services/frontend/src/components/Modal/Service/General.tsx
+++ b/services/frontend/src/components/Modal/Service/General.tsx
@@ -59,7 +59,7 @@ const General = () => {
     formik.setFieldValue(`ports[${ports.length}]`, {
       hostPort: "",
       containerPort: "",
-      protocol: ""
+      protocol: "tcp"
     });
   }, [formik]);
 
@@ -105,15 +105,28 @@ const General = () => {
                     {
                       name: `ports[${index}].hostPort`,
                       placeholder: "Host Port",
-                      required: true
+                      required: true,
+                      type: "text"
                     },
                     {
                       name: `ports[${index}].containerPort`,
-                      placeholder: "Container Port"
+                      placeholder: "Container Port",
+                      type: "text"
                     },
                     {
                       name: `ports[${index}].protocol`,
-                      placeholder: "Protocol"
+                      placeholder: "Protocol",
+                      type: "toggle",
+                      options: [
+                        {
+                          value: "tcp",
+                          text: "TCP"
+                        },
+                        {
+                          value: "udp",
+                          text: "UDP"
+                        }
+                      ]
                     }
                   ]}
                   onRemove={handleRemovePort}
diff --git a/services/frontend/src/components/Modal/Service/Labels.tsx b/services/frontend/src/components/Modal/Service/Labels.tsx
index 2560739..c7e8550 100644
--- a/services/frontend/src/components/Modal/Service/Labels.tsx
+++ b/services/frontend/src/components/Modal/Service/Labels.tsx
@@ -64,12 +64,14 @@ const Labels = () => {
                 {
                   name: `labels[${index}].key`,
                   placeholder: "Key",
-                  required: true
+                  required: true,
+                  type: "text"
                 },
                 {
                   name: `labels[${index}].value`,
                   placeholder: "Value",
-                  required: true
+                  required: true,
+                  type: "text"
                 }
               ]}
               onRemove={handleRemoveLabel}
diff --git a/services/frontend/src/components/Modal/Service/Volumes.tsx b/services/frontend/src/components/Modal/Service/Volumes.tsx
index 85ae7fe..16abafe 100644
--- a/services/frontend/src/components/Modal/Service/Volumes.tsx
+++ b/services/frontend/src/components/Modal/Service/Volumes.tsx
@@ -65,15 +65,18 @@ const Volumes = () => {
                 {
                   name: `volumes[${index}].name`,
                   placeholder: "Name",
-                  required: true
+                  required: true,
+                  type: "text"
                 },
                 {
                   name: `volumes[${index}].containerPath`,
-                  placeholder: "Container path"
+                  placeholder: "Container path",
+                  type: "text"
                 },
                 {
                   name: `volumes[${index}].accessMode`,
-                  placeholder: "Access mode"
+                  placeholder: "Access mode",
+                  type: "text"
                 }
               ]}
               onRemove={handleRemoveVolume}
diff --git a/services/frontend/src/components/Record.tsx b/services/frontend/src/components/Record.tsx
index dbba735..4444a0c 100644
--- a/services/frontend/src/components/Record.tsx
+++ b/services/frontend/src/components/Record.tsx
@@ -1,13 +1,19 @@
-import { FunctionComponent, ReactElement, useCallback } from "react";
+import { Fragment, FunctionComponent, ReactElement, useCallback } from "react";
 import { styled } from "@mui/joy";
 import IconButton from "@mui/joy/IconButton";
 import { MinusSmIcon } from "@heroicons/react/solid";
 import TextField from "./global/FormElements/TextField";
+import Toggle from "./global/FormElements/Toggle";
 
 export interface IFieldType {
   name: string;
   placeholder: string;
   required?: boolean;
+  type: "text" | "toggle";
+  options?: {
+    text: string;
+    value: string;
+  }[];
 }
 
 export interface IRecordProps {
@@ -37,14 +43,20 @@ const Record: FunctionComponent<IRecordProps> = (
 
   return (
     <Root>
-      {fields.map(({ name, placeholder, required }) => (
-        <TextField
-          key={name}
-          id={name}
-          name={name}
-          placeholder={placeholder + (required ? "*" : "")}
-          required={required}
-        />
+      {fields.map(({ type, name, placeholder, required, options }) => (
+        <Fragment key={name}>
+          {type === "text" && (
+            <TextField
+              id={name}
+              name={name}
+              placeholder={placeholder + (required ? "*" : "")}
+              required={required}
+            />
+          )}
+          {type === "toggle" && (
+            <Toggle name={name} label={placeholder} options={options || []} />
+          )}
+        </Fragment>
       ))}
       <RemoveButton
         variant="soft"