feat(frontend): updated create and edit forms to use `transform` utility

services/frontend/src/components/Modal/Service/Create.tsx

@@ -6,7 +6,7 @@ import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
-import { getInitialValues, validationSchema } from "./form-utils";
+import { getInitialValues, transform, validationSchema } from "./form-utils";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -45,20 +45,7 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
   const [openTab, setOpenTab] = useState("General");
   const handleCreate = (values: any, formik: any) => {
     // TODO: This modal should not be aware of endpoints. Seperation of concerns.
-    onAddEndpoint({
-      canvasConfig: {
-        node_name: values.serviceName,
-        node_icon: ""
-      },
-      serviceConfig: {
-        container_name: values.containerName
-      },
-      key: "service",
-      type: "SERVICE",
-      inputs: ["op_source"],
-      outputs: [],
-      config: {}
-    });
+    onAddEndpoint(transform(values));
     formik.resetForm();
   };
 

services/frontend/src/components/Modal/Service/Edit.tsx

@@ -7,7 +7,7 @@ import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
 import type { CallbackFunction, IServiceNodeItem } from "../../../types";
-import { getInitialValues, validationSchema } from "./form-utils";
+import { getInitialValues, transform, validationSchema } from "./form-utils";
 
 export interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -15,46 +15,42 @@ export interface IModalServiceProps {
   onUpdateEndpoint: CallbackFunction;
 }
 
+const tabs = [
+  {
+    name: "General",
+    href: "#",
+    current: true,
+    hidden: false
+  },
+  {
+    name: "Environment",
+    href: "#",
+    current: false,
+    hidden: false
+  },
+  {
+    name: "Volumes",
+    href: "#",
+    current: false,
+    hidden: false
+  },
+  {
+    name: "Labels",
+    href: "#",
+    current: false,
+    hidden: false
+  }
+];
+
 const ModalServiceEdit = (props: IModalServiceProps) => {
   const { node, onHide, onUpdateEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
   const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
 
   const handleUpdate = (values: any) => {
-    // TODO
-    const updated = { ...selectedNode };
-    updated.canvasConfig = values.canvasConfig;
-    updated.serviceConfig = values.serviceConfig;
-    onUpdateEndpoint(updated);
+    onUpdateEndpoint(transform(values, selectedNode));
   };
 
-  const tabs = [
-    {
-      name: "General",
-      href: "#",
-      current: true,
-      hidden: false
-    },
-    {
-      name: "Environment",
-      href: "#",
-      current: false,
-      hidden: false
-    },
-    {
-      name: "Volumes",
-      href: "#",
-      current: false,
-      hidden: false
-    },
-    {
-      name: "Labels",
-      href: "#",
-      current: false,
-      hidden: false
-    }
-  ];
-
   const initialValues = useMemo(
     () => getInitialValues(selectedNode),
     [selectedNode]