fix: refactor network modal and forms

services/frontend/src/components/Modal/Network/General.tsx

@@ -1,32 +1,11 @@
-const General = (props: any) => {
+import TextField from "../../global/FormElements/InputField";
-  const { formik } = props;
 
+const General = () => {
   return (
     <>
-      <div className="relative pb-3 flex-auto">
+      <TextField label="Name" name="name" />
-        <div className="grid grid-cols-6 gap-4">
-          <div className="col-span-3">
-            <label
-              htmlFor="name"
-              className="block text-xs font-medium text-gray-700"
-            >
-              Name
-            </label>
-            <div className="mt-1">
-              <input
-                id="name"
-                name="name"
-                type="text"
-                autoComplete="none"
-                className="input-util"
-                onChange={formik.handleChange}
-                value={formik.values.name}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
     </>
   );
 };
+
 export default General;

services/frontend/src/components/Modal/Network/IPam.tsx

@@ -1,6 +1,5 @@
-const IPam = (props: any) => {
+const IPam = () => {
-  const { formik } = props;
-
   return <></>;
 };
+
 export default IPam;

services/frontend/src/components/Modal/Network/Labels.tsx

@@ -1,6 +1,5 @@
-const Labels = (props: any) => {
+const Labels = () => {
-  const { formik } = props;
-
   return <></>;
 };
+
 export default Labels;

services/frontend/src/components/Modal/Network/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { useFormik } from "formik";
+import { Formik } from "formik";
+import * as yup from "yup";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import IPam from "./IPam";
@@ -14,12 +15,14 @@ interface IModalNetworkProps {
 const ModalNetwork = (props: IModalNetworkProps) => {
   const { onHide } = props;
   const [openTab, setOpenTab] = useState("General");
-
+  const handleCreate = (values: any, formik: any) => {
-  const formik = useFormik({
+    formik.resetForm();
-    initialValues: {
+  };
-      ...topLevelNetworkConfigInitialValues()
+  const validationSchema = yup.object({
-    },
+    name: yup
-    onSubmit: () => undefined
+      .string()
+      .max(256, "name should be 256 characters or less")
+      .required("name is required")
   });
   const tabs = [
     {
@@ -66,7 +69,25 @@ const ModalNetwork = (props: IModalNetworkProps) => {
               </button>
             </div>
 
-            <div>
+            <Formik
+              initialValues={{
+                initialValues: {
+                  ...topLevelNetworkConfigInitialValues()
+                },
+                key: "volume",
+                type: "VOLUME",
+                inputs: [],
+                outputs: [],
+                config: {}
+              }}
+              enableReinitialize={true}
+              onSubmit={(values, formik) => {
+                handleCreate(values, formik);
+              }}
+              validationSchema={validationSchema}
+            >
+              {(formik) => (
+                <>
                   <div className="hidden sm:block">
                     <div className="border-b border-gray-200 px-8">
                       <nav className="-mb-px flex space-x-8" aria-label="Tabs">
@@ -95,12 +116,9 @@ const ModalNetwork = (props: IModalNetworkProps) => {
                   </div>
 
                   <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
+                    {openTab === "General" && <General />}
-                  {openTab === "General" && <General formik={formik} />}
+                    {openTab === "IPam" && <IPam />}
-                  {openTab === "IPam" && <IPam formik={formik} />}
+                    {openTab === "Labels" && <Labels />}
-                  {openTab === "Labels" && <Labels formik={formik} />}
-                </form>
-              </div>
                   </div>
 
                   <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
@@ -108,12 +126,15 @@ const ModalNetwork = (props: IModalNetworkProps) => {
                       className="btn-util"
                       type="button"
                       onClick={() => {
-                  formik.resetForm();
+                        formik.submitForm();
                       }}
                     >
                       Add
                     </button>
                   </div>
+                </>
+              )}
+            </Formik>
           </div>
         </div>
       </div>