From 379de7c3e82358545f1e347afa72bc6d5888a2fd Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sat, 23 Jul 2022 12:05:53 +0530
Subject: [PATCH] feat(frontend): updated create/edit tab forms to use new
 state shape

---
 .../components/Modal/Service/Environment.tsx  | 41 +++++++++----------
 .../src/components/Modal/Service/General.tsx  | 41 +++++++++----------
 .../src/components/Modal/Service/Labels.tsx   | 23 +++++------
 .../src/components/Modal/Service/Volumes.tsx  | 19 ++++-----
 4 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/services/frontend/src/components/Modal/Service/Environment.tsx b/services/frontend/src/components/Modal/Service/Environment.tsx
index a613252..c506b08 100644
--- a/services/frontend/src/components/Modal/Service/Environment.tsx
+++ b/services/frontend/src/components/Modal/Service/Environment.tsx
@@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline";
 import { Button, styled } from "@mui/joy";
 import { useFormikContext } from "formik";
 import Record from "../../Record";
-import { IService } from "../../../types";
+import { IEditServiceForm } from "../../../types";
 
 const Root = styled("div")`
   display: flex;
@@ -30,51 +30,50 @@ const Description = styled("p")`
 `;
 
 const Environment = () => {
-  const formik = useFormikContext<{
-    serviceConfig: IService;
-  }>();
-  const environment = (formik.values.serviceConfig.environment as []) || [];
+  const formik = useFormikContext<IEditServiceForm>();
+  const { environmentVariables } = formik.values;
 
   const handleNewEnvironmentVariable = useCallback(() => {
-    formik.setFieldValue(`serviceConfig.environment[${environment.length}]`, {
-      key: "",
-      value: ""
-    });
+    formik.setFieldValue(
+      `environmentVariables[${environmentVariables.length}]`,
+      {
+        key: "",
+        value: ""
+      }
+    );
   }, [formik]);
 
   const handleRemoveEnvironmentVariable = useCallback(
     (index: number) => {
-      const newEnvironmentVariables = environment.filter(
+      const newEnvironmentVariables = environmentVariables.filter(
         (_: unknown, currentIndex: number) => currentIndex != index
       );
-      formik.setFieldValue(
-        `serviceConfig.environment`,
-        newEnvironmentVariables
-      );
+      formik.setFieldValue("environmentVariables", newEnvironmentVariables);
     },
     [formik]
   );
 
   const emptyEnvironmentVariables =
-    environment && environment.length === 0 ? true : false;
+    environmentVariables && environmentVariables.length === 0 ? true : false;
 
   return (
     <Root>
       {!emptyEnvironmentVariables && (
         <Records>
-          {environment.map((_: unknown, index: number) => (
+          {environmentVariables.map((_: unknown, index: number) => (
             <Record
               key={index}
               index={index}
-              formik={formik}
               fields={[
                 {
-                  name: `serviceConfig.environment[${index}].key`,
-                  placeholder: "Key"
+                  name: `environmentVariables[${index}].key`,
+                  placeholder: "Key",
+                  required: true
                 },
                 {
-                  name: `serviceConfig.environment[${index}].value`,
-                  placeholder: "Value"
+                  name: `environmentVariables[${index}].value`,
+                  placeholder: "Value",
+                  required: true
                 }
               ]}
               onRemove={handleRemoveEnvironmentVariable}
diff --git a/services/frontend/src/components/Modal/Service/General.tsx b/services/frontend/src/components/Modal/Service/General.tsx
index 0528894..9cd04ff 100644
--- a/services/frontend/src/components/Modal/Service/General.tsx
+++ b/services/frontend/src/components/Modal/Service/General.tsx
@@ -4,7 +4,7 @@ import { PlusIcon } from "@heroicons/react/outline";
 import { Button, styled } from "@mui/joy";
 import { useFormikContext } from "formik";
 import Record from "../../Record";
-import { IService } from "../../../types";
+import { IEditServiceForm } from "../../../types";
 
 const Root = styled("div")`
   display: flex;
@@ -38,66 +38,63 @@ const GroupTitle = styled("h5")`
 `;
 
 const General = () => {
-  const formik = useFormikContext<{
-    serviceConfig: IService;
-  }>();
-  const labels = (formik.values.serviceConfig.labels as []) || [];
+  const formik = useFormikContext<IEditServiceForm>();
+  const { ports } = formik.values;
 
-  const handleNewLabel = useCallback(() => {
-    formik.setFieldValue(`serviceConfig.labels[${labels.length}]`, {
+  const handleNewPort = useCallback(() => {
+    formik.setFieldValue(`ports[${ports.length}]`, {
       key: "",
       value: ""
     });
   }, [formik]);
 
-  const handleRemoveLabel = useCallback(
+  const handleRemovePort = useCallback(
     (index: number) => {
-      const newLabels = labels.filter(
+      const newPorts = ports.filter(
         (_: unknown, currentIndex: number) => currentIndex != index
       );
-      formik.setFieldValue(`serviceConfig.labels`, newLabels);
+      formik.setFieldValue(`ports`, newPorts);
     },
     [formik]
   );
 
-  const emptyLabels = labels && labels.length === 0 ? true : false;
+  const emptyPorts = ports && ports.length === 0 ? true : false;
 
   return (
     <>
-      <TextField label="Service name" name="canvasConfig.node_name" />
-      <TextField label="Container name" name="serviceConfig.container_name" />
+      <TextField label="Service name" name="serviceName" required={true} />
+      <TextField label="Container name" name="containerName" required={true} />
 
       <GroupTitle>Ports</GroupTitle>
 
       <Root>
-        {!emptyLabels && (
+        {!emptyPorts && (
           <Records>
-            {labels.map((_: unknown, index: number) => (
+            {ports.map((_: unknown, index: number) => (
               <Record
                 key={index}
                 index={index}
-                formik={formik}
                 fields={[
                   {
-                    name: `serviceConfig.ports[${index}].hostPort`,
+                    name: `ports[${index}].hostPort`,
                     placeholder: "Host Port",
                     required: true
                   },
                   {
-                    name: `serviceConfig.ports[${index}].containerPort`,
+                    name: `ports[${index}].containerPort`,
                     placeholder: "Container Port"
                   },
                   {
-                    name: `serviceConfig.ports[${index}].protocol`,
+                    name: `ports[${index}].protocol`,
                     placeholder: "Protocol"
                   }
                 ]}
-                onRemove={handleRemoveLabel}
+                onRemove={handleRemovePort}
               />
             ))}
           </Records>
         )}
-        {emptyLabels && (
+        {emptyPorts && (
           <Description>
             This service does not have any ports.
             <br />
@@ -105,7 +102,7 @@ const General = () => {
           </Description>
         )}
 
-        <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
+        <AddButton size="sm" variant="plain" onClick={handleNewPort}>
           <PlusIcon className="h-4 w-4 mr-2" />
           New port
         </AddButton>
diff --git a/services/frontend/src/components/Modal/Service/Labels.tsx b/services/frontend/src/components/Modal/Service/Labels.tsx
index a27865f..2560739 100644
--- a/services/frontend/src/components/Modal/Service/Labels.tsx
+++ b/services/frontend/src/components/Modal/Service/Labels.tsx
@@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline";
 import { Button, styled } from "@mui/joy";
 import { useFormikContext } from "formik";
 import Record from "../../Record";
-import { IService } from "../../../types";
+import { IEditServiceForm, IService } from "../../../types";
 
 const Root = styled("div")`
   display: flex;
@@ -30,13 +30,11 @@ const Description = styled("p")`
 `;
 
 const Labels = () => {
-  const formik = useFormikContext<{
-    serviceConfig: IService;
-  }>();
-  const labels = (formik.values.serviceConfig.labels as []) || [];
+  const formik = useFormikContext<IEditServiceForm>();
+  const { labels } = formik.values;
 
   const handleNewLabel = useCallback(() => {
-    formik.setFieldValue(`serviceConfig.labels[${labels.length}]`, {
+    formik.setFieldValue(`labels[${labels.length}]`, {
       key: "",
       value: ""
     });
@@ -47,7 +45,7 @@ const Labels = () => {
       const newLabels = labels.filter(
         (_: unknown, currentIndex: number) => currentIndex != index
       );
-      formik.setFieldValue(`serviceConfig.labels`, newLabels);
+      formik.setFieldValue(`labels`, newLabels);
     },
     [formik]
   );
@@ -62,15 +60,16 @@ const Labels = () => {
             <Record
               key={index}
               index={index}
-              formik={formik}
               fields={[
                 {
-                  name: `serviceConfig.labels[${index}].key`,
-                  placeholder: "Key"
+                  name: `labels[${index}].key`,
+                  placeholder: "Key",
+                  required: true
                 },
                 {
-                  name: `serviceConfig.labels[${index}].value`,
-                  placeholder: "Value"
+                  name: `labels[${index}].value`,
+                  placeholder: "Value",
+                  required: true
                 }
               ]}
               onRemove={handleRemoveLabel}
diff --git a/services/frontend/src/components/Modal/Service/Volumes.tsx b/services/frontend/src/components/Modal/Service/Volumes.tsx
index d4d6764..607f5c3 100644
--- a/services/frontend/src/components/Modal/Service/Volumes.tsx
+++ b/services/frontend/src/components/Modal/Service/Volumes.tsx
@@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline";
 import { Button, styled } from "@mui/joy";
 import { useFormikContext } from "formik";
 import Record from "../../Record";
-import { IService } from "../../../types";
+import { IEditServiceForm } from "../../../types";
 
 const Root = styled("div")`
   display: flex;
@@ -30,13 +30,11 @@ const Description = styled("p")`
 `;
 
 const Volumes = () => {
-  const formik = useFormikContext<{
-    serviceConfig: IService;
-  }>();
-  const volumes = (formik.values.serviceConfig.volumes as []) || [];
+  const formik = useFormikContext<IEditServiceForm>();
+  const { volumes } = formik.values;
 
   const handleNewVolume = useCallback(() => {
-    formik.setFieldValue(`serviceConfig.volumes[${volumes.length}]`, {
+    formik.setFieldValue(`volumes[${volumes.length}]`, {
       key: "",
       value: ""
     });
@@ -47,7 +45,7 @@ const Volumes = () => {
       const newVolumes = volumes.filter(
         (_: unknown, currentIndex: number) => currentIndex != index
       );
-      formik.setFieldValue(`serviceConfig.volumes`, newVolumes);
+      formik.setFieldValue(`volumes`, newVolumes);
     },
     [formik]
   );
@@ -62,19 +60,18 @@ const Volumes = () => {
             <Record
               key={index}
               index={index}
-              formik={formik}
               fields={[
                 {
-                  name: `serviceConfig.volumes[${index}].name`,
+                  name: `volumes[${index}].name`,
                   placeholder: "Name",
                   required: true
                 },
                 {
-                  name: `serviceConfig.volumes[${index}].key`,
+                  name: `volumes[${index}].key`,
                   placeholder: "Container path"
                 },
                 {
-                  name: `serviceConfig.volumes[${index}].value`,
+                  name: `volumes[${index}].value`,
                   placeholder: "Access mode"
                 }
               ]}