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,20 +15,7 @@ export interface IModalServiceProps {
   onUpdateEndpoint: CallbackFunction;
 }
 
-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);
-  };
-
-  const tabs = [
+const tabs = [
   {
     name: "General",
     href: "#",
@@ -53,7 +40,16 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
     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) => {
+    onUpdateEndpoint(transform(values, selectedNode));
+  };
 
   const initialValues = useMemo(
     () => getInitialValues(selectedNode),