fix: Formik wrap instead of useFormik

services/frontend/package.json

@@ -45,7 +45,8 @@
     "typescript": "^4.5.5",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.4",
-    "yaml": "^1.10.2"
+    "yaml": "^1.10.2",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",

services/frontend/src/components/Canvas/ServiceNode.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { ServerIcon } from "@heroicons/react/outline";
+import { truncateStr } from "../../utils";
 import { IServiceNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
@@ -52,14 +54,21 @@ export default function ServiceNode(props: INodeProps) {
           }}
         ></Popover>
       )}
-      <div className="node-label w-full py-2 px-4">
+      <div className="relative node-label w-full py-2 px-4">
         <>
+          {node.canvasConfig.service_name && (
             <div className="text-sm font-semibold overflow-x-hidden">
-            {node.canvasConfig.service_name}
+              {truncateStr(node.canvasConfig.service_name, 12)}
             </div>
+          )}
+
+          {node.serviceConfig.container_name && (
             <div className="text-xs text-gray-500 overflow-x-hidden">
-            {node.serviceConfig.container_name}
+              {truncateStr(node.serviceConfig.container_name, 20)}
             </div>
+          )}
+
+          <ServerIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
         </>
       </div>
     </div>

services/frontend/src/components/Canvas/VolumeNode.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { DatabaseIcon } from "@heroicons/react/outline";
+import { truncateStr } from "../../utils";
 import { IVolumeNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
@@ -52,11 +54,15 @@ export default function VolumeNode(props: INodeProps) {
           }}
         ></Popover>
       )}
-      <div className="node-label w-full py-2 px-4">
+      <div className="relative node-label w-full py-2 px-4">
         <>
-          <div className="text-xs text-gray-500 overflow-x-hidden">
+          {node.volumeConfig.name && (
-            {node.volumeConfig.name}
+            <div className="text-sm font-semibold overflow-x-hidden">
+              {truncateStr(node.volumeConfig.name, 20)}
             </div>
+          )}
+
+          <DatabaseIcon className="w-3 h-3 text-gray-600 absolute top-2 right-2" />
         </>
       </div>
     </div>

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,23 @@ const ModalNetwork = (props: IModalNetworkProps) => {
               </button>
             </div>
 
-            <div>
+            <Formik
+              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 +114,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 +124,15 @@ const ModalNetwork = (props: IModalNetworkProps) => {
                       className="btn-util"
                       type="button"
                       onClick={() => {
-                  formik.resetForm();
+                        formik.submitForm();
                       }}
                     >
                       Add
                     </button>
                   </div>
+                </>
+              )}
+            </Formik>
           </div>
         </div>
       </div>

services/frontend/src/components/Modal/Service/Create.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 Environment from "./Environment";
@@ -16,22 +17,23 @@ interface IModalServiceProps {
 const ModalServiceCreate = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-
+  const handleCreate = (values: any, formik: any) => {
-  const formik = useFormik({
+    onAddEndpoint(values);
-    initialValues: {
+    formik.resetForm();
-      canvasConfig: {
+  };
-        ...serviceConfigCanvasInitialValues()
+  const validationSchema = yup.object({
-      },
+    canvasConfig: yup.object({
-      serviceConfig: {
+      service_name: yup
-        container_name: ""
+        .string()
-      },
+        .max(256, "service name should be 256 characters or less")
-      key: "service",
+        .required("service name is required")
-      type: "SERVICE",
+    }),
-      inputs: ["op_source"],
+    serviceConfig: yup.object({
-      outputs: [],
+      container_name: yup
-      config: {}
+        .string()
-    },
+        .max(256, "container name should be 256 characters or less")
-    onSubmit: () => undefined
+        .required("container name is required")
+    })
   });
   const tabs = [
     {
@@ -84,7 +86,28 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
               </button>
             </div>
 
-            <div>
+            <Formik
+              initialValues={{
+                canvasConfig: {
+                  ...serviceConfigCanvasInitialValues()
+                },
+                serviceConfig: {
+                  container_name: ""
+                },
+                key: "service",
+                type: "SERVICE",
+                inputs: ["op_source"],
+                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">
@@ -113,13 +136,10 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                   </div>
 
                   <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
+                    {openTab === "General" && <General />}
-                  {openTab === "General" && <General formik={formik} />}
+                    {openTab === "Environment" && <Environment />}
-                  {openTab === "Environment" && <Environment formik={formik} />}
+                    {openTab === "Volumes" && <Volumes />}
-                  {openTab === "Volumes" && <Volumes 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">
@@ -134,6 +154,9 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                       Add
                     </button>
                   </div>
+                </>
+              )}
+            </Formik>
           </div>
         </div>
       </div>

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

@@ -1,17 +1,12 @@
 import { useState, useEffect } 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 Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
-import { serviceConfigCanvasInitialValues } from "../../../utils";
+import { CallbackFunction, IServiceNodeItem } from "../../../types";
-import {
-  CallbackFunction,
-  ICanvasConfig,
-  IServiceNodeItem,
-  IService
-} from "../../../types";
 
 interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -23,16 +18,26 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
   const { node, onHide, onUpdateEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
   const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
-  const formik = useFormik({
+
-    initialValues: {
+  const handleUpdate = (values: any) => {
-      canvasConfig: {
+    const updated = { ...selectedNode };
-        ...serviceConfigCanvasInitialValues()
+    updated.canvasConfig = values.canvasConfig;
-      },
+    updated.serviceConfig = values.serviceConfig;
-      serviceConfig: {
+    onUpdateEndpoint(updated);
-        container_name: ""
+  };
-      }
+  const validationSchema = yup.object({
-    },
+    canvasConfig: yup.object({
-    onSubmit: () => undefined
+      service_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 = [
     {
@@ -70,25 +75,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
     }
   }, [node]);
 
-  useEffect(() => {
-    formik.resetForm();
-
-    if (selectedNode) {
-      formik.initialValues.canvasConfig = {
-        ...selectedNode.canvasConfig
-      } as ICanvasConfig;
-      formik.initialValues.serviceConfig = {
-        ...selectedNode.serviceConfig
-      } as IService;
-    }
-  }, [selectedNode]);
-
-  useEffect(() => {
-    return () => {
-      formik.resetForm();
-    };
-  }, []);
-
   return (
     <div className="fixed z-50 inset-0 overflow-y-auto">
       <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
@@ -110,10 +96,30 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
               </button>
             </div>
 
-            <div>
+            {selectedNode && (
+              <Formik
+                initialValues={{
+                  canvasConfig: {
+                    ...selectedNode.canvasConfig
+                  },
+                  serviceConfig: {
+                    ...selectedNode.serviceConfig
+                  }
+                }}
+                enableReinitialize={true}
+                onSubmit={(values) => {
+                  handleUpdate(values);
+                }}
+                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">
+                        <nav
+                          className="-mb-px flex space-x-8"
+                          aria-label="Tabs"
+                        >
                           {tabs.map((tab) => (
                             <a
                               key={tab.name}
@@ -139,13 +145,10 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
                     </div>
 
                     <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
+                      {openTab === "General" && <General />}
-                  {openTab === "General" && <General formik={formik} />}
+                      {openTab === "Environment" && <Environment />}
-                  {openTab === "Environment" && <Environment formik={formik} />}
+                      {openTab === "Volumes" && <Volumes />}
-                  {openTab === "Volumes" && <Volumes 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">
@@ -153,15 +156,16 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
                         className="btn-util"
                         type="button"
                         onClick={() => {
-                  const updated = { ...selectedNode };
+                          formik.submitForm();
-                  updated.canvasConfig = formik.values.canvasConfig;
-                  updated.serviceConfig = formik.values.serviceConfig;
-                  onUpdateEndpoint(updated);
                         }}
                       >
                         Update
                       </button>
                     </div>
+                  </>
+                )}
+              </Formik>
+            )}
           </div>
         </div>
       </div>

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

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

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

@@ -1,56 +1,12 @@
-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="Service name" name="canvasConfig.service_name" />
-        <div className="grid grid-cols-6 gap-4">
+      <TextField label="Container name" name="serviceConfig.container_name" />
-          <div className="col-span-3">
-            <label
-              htmlFor="service_name"
-              className="block text-xs font-medium text-gray-700"
-            >
-              Service name
-            </label>
-            <div className="mt-1">
-              <input
-                id="service_name"
-                name="canvasConfig.service_name"
-                type="text"
-                autoComplete="none"
-                className="input-util"
-                onChange={formik.handleChange}
-                value={formik.values.canvasConfig.service_name}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative pb-3 flex-auto">
-        <div className="grid grid-cols-6 gap-4">
-          <div className="col-span-3">
-            <label
-              htmlFor="container_name"
-              className="block text-xs font-medium text-gray-700"
-            >
-              Container name
-            </label>
-            <div className="mt-1">
-              <input
-                id="container_name"
-                name="serviceConfig.container_name"
-                type="text"
-                autoComplete="none"
-                className="input-util"
-                onChange={formik.handleChange}
-                value={formik.values.serviceConfig.container_name}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
     </>
   );
 };
+
 export default General;

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

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

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

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

services/frontend/src/components/Modal/Volume/Create.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 Labels from "./Labels";
@@ -14,19 +15,17 @@ interface IModalVolumeCreate {
 const ModalVolumeCreate = (props: IModalVolumeCreate) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-
+  const handleCreate = (values: any, formik: any) => {
-  const formik = useFormik({
+    onAddEndpoint(values);
-    initialValues: {
+    formik.resetForm();
-      volumeConfig: {
+  };
-        ...topLevelVolumeConfigInitialValues()
+  const validationSchema = yup.object({
-      },
+    volumeConfig: yup.object({
-      key: "volume",
+      name: yup
-      type: "VOLUME",
+        .string()
-      inputs: [],
+        .max(256, "name should be 256 characters or less")
-      outputs: [],
+        .required("name is required")
-      config: {}
+    })
-    },
-    onSubmit: () => undefined
   });
   const tabs = [
     {
@@ -67,7 +66,25 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => {
               </button>
             </div>
 
-            <div>
+            <Formik
+              initialValues={{
+                volumeConfig: {
+                  ...topLevelVolumeConfigInitialValues()
+                },
+                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">
@@ -96,11 +113,8 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => {
                   </div>
 
                   <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
+                    {openTab === "General" && <General />}
-                  {openTab === "General" && <General 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,13 +122,15 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => {
                       className="btn-util"
                       type="button"
                       onClick={() => {
-                  onAddEndpoint(formik.values);
+                        formik.submitForm();
-                  formik.resetForm();
                       }}
                     >
                       Add
                     </button>
                   </div>
+                </>
+              )}
+            </Formik>
           </div>
         </div>
       </div>

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

@@ -1,14 +1,10 @@
 import { useEffect, 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 Labels from "./Labels";
-import { topLevelVolumeConfigInitialValues } from "../../../utils";
+import { CallbackFunction, IVolumeNodeItem } from "../../../types";
-import {
-  CallbackFunction,
-  IVolumeNodeItem,
-  IVolumeTopLevel
-} from "../../../types";
 
 interface IModalVolumeEdit {
   node: IVolumeNodeItem;
@@ -20,14 +16,18 @@ const ModalVolumeEdit = (props: IModalVolumeEdit) => {
   const { node, onHide, onUpdateEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
   const [selectedNode, setSelectedNode] = useState<IVolumeNodeItem>();
-
+  const handleUpdate = (values: any) => {
-  const formik = useFormik({
+    const updated = { ...selectedNode };
-    initialValues: {
+    updated.volumeConfig = values.volumeConfig;
-      volumeConfig: {
+    onUpdateEndpoint(updated);
-        ...topLevelVolumeConfigInitialValues()
+  };
-      }
+  const validationSchema = yup.object({
-    },
+    volumeConfig: yup.object({
-    onSubmit: () => undefined
+      name: yup
+        .string()
+        .max(256, "name should be 256 characters or less")
+        .required("name is required")
+    })
   });
   const tabs = [
     {
@@ -53,22 +53,6 @@ const ModalVolumeEdit = (props: IModalVolumeEdit) => {
     }
   }, [node]);
 
-  useEffect(() => {
-    formik.resetForm();
-
-    if (selectedNode) {
-      formik.initialValues.volumeConfig = {
-        ...selectedNode.volumeConfig
-      } as IVolumeTopLevel;
-    }
-  }, [selectedNode]);
-
-  useEffect(() => {
-    return () => {
-      formik.resetForm();
-    };
-  }, []);
-
   return (
     <div className="fixed z-50 inset-0 overflow-y-auto">
       <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
@@ -92,10 +76,27 @@ const ModalVolumeEdit = (props: IModalVolumeEdit) => {
               </button>
             </div>
 
-            <div>
+            {selectedNode && (
+              <Formik
+                initialValues={{
+                  volumeConfig: {
+                    ...selectedNode.volumeConfig
+                  }
+                }}
+                enableReinitialize={true}
+                onSubmit={(values) => {
+                  handleUpdate(values);
+                }}
+                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">
+                        <nav
+                          className="-mb-px flex space-x-8"
+                          aria-label="Tabs"
+                        >
                           {tabs.map((tab) => (
                             <a
                               key={tab.name}
@@ -121,11 +122,8 @@ const ModalVolumeEdit = (props: IModalVolumeEdit) => {
                     </div>
 
                     <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
+                      {openTab === "General" && <General />}
-                  {openTab === "General" && <General 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">
@@ -133,14 +131,16 @@ const ModalVolumeEdit = (props: IModalVolumeEdit) => {
                         className="btn-util"
                         type="button"
                         onClick={() => {
-                  const updated = { ...selectedNode };
+                          formik.submitForm();
-                  updated.volumeConfig = formik.values.volumeConfig;
-                  onUpdateEndpoint(updated);
                         }}
                       >
                         Update
                       </button>
                     </div>
+                  </>
+                )}
+              </Formik>
+            )}
           </div>
         </div>
       </div>

services/frontend/src/components/Modal/Volume/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="volumeConfig.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="volumeConfig.name"
-                type="text"
-                autoComplete="none"
-                className="input-util"
-                onChange={formik.handleChange}
-                value={formik.values.volumeConfig.name}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
     </>
   );
 };
+
 export default General;

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

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

services/frontend/src/components/Project/index.tsx

@@ -245,9 +245,9 @@ export default function Project() {
 
     if (existingIndex !== -1) {
       _connections.splice(existingIndex, 1);
-    }
-
       setConnections(_connections);
+      stateConnectionsRef.current = _connections;
+    }
   };
 
   const onConnectionAttached = (data: any) => {

services/frontend/src/components/global/FormElements/InputField.tsx

@@ -0,0 +1,50 @@
+import _ from "lodash";
+import { useFormikContext } from "formik";
+
+interface Props {
+  name: string;
+  help?: string;
+  [key: string]: any;
+}
+
+const TextField = (props: Props) => {
+  const { label, name, help, ...otherProps } = props;
+  const formik = useFormikContext();
+  const error = _.get(formik.touched, name) && _.get(formik.errors, name);
+
+  return (
+    <div className="relative pb-3 flex-auto">
+      <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"
+          >
+            {label}
+          </label>
+          <div className="mt-1">
+            <input
+              id={name}
+              name={name}
+              type="text"
+              autoComplete="none"
+              className="input-util"
+              onBlur={formik.handleBlur}
+              onChange={formik.handleChange}
+              {...otherProps}
+              value={_.get(formik.values, name)}
+            />
+            {
+              <div className="mt-1 text-xs text-red-600">
+                {error && <div className="caption">{error}</div>}
+                {!error && help}
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TextField;