feat(frontend): updated `ModelServiceCreate` component to use form utilities

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

@@ -1,41 +1,19 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Formik } from "formik";
-import * as yup from "yup";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
-import { serviceConfigCanvasInitialValues } from "../../../utils";
 import { CallbackFunction } from "../../../types";
+import { getInitialValues, validationSchema } from "./form-utils";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
   onAddEndpoint: CallbackFunction;
 }
 
-const ModalServiceCreate = (props: IModalServiceProps) => {
-  const { onHide, onAddEndpoint } = props;
-  const [openTab, setOpenTab] = useState("General");
-  const handleCreate = (values: any, formik: any) => {
-    onAddEndpoint(values);
-    formik.resetForm();
-  };
-  const validationSchema = yup.object({
-    canvasConfig: yup.object({
-      node_name: yup
-        .string()
-        .max(256, "service name should be 256 characters or less")
-        .required("service name is required")
-    }),
-    serviceConfig: yup.object({
-      container_name: yup
-        .string()
-        .max(256, "container name should be 256 characters or less")
-        .required("container name is required")
-    })
-  });
-  const tabs = [
+const tabs = [
   {
     name: "General",
     href: "#",
@@ -60,7 +38,32 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
     current: false,
     hidden: false
   }
-  ];
+];
+
+const ModalServiceCreate = (props: IModalServiceProps) => {
+  const { onHide, onAddEndpoint } = props;
+  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: {}
+    });
+    formik.resetForm();
+  };
+
+  const initialValues = useMemo(() => getInitialValues(), []);
+
   const classNames = (...classes: string[]) => {
     return classes.filter(Boolean).join(" ");
   };
@@ -87,19 +90,7 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
             </div>
 
             <Formik
-              initialValues={{
-                canvasConfig: {
-                  ...serviceConfigCanvasInitialValues()
-                },
-                serviceConfig: {
-                  container_name: ""
-                },
-                key: "service",
-                type: "SERVICE",
-                inputs: ["op_source"],
-                outputs: [],
-                config: {}
-              }}
+              initialValues={initialValues}
               enableReinitialize={true}
               onSubmit={(values, formik) => {
                 handleCreate(values, formik);