feat(frontend): updated `CreateVolumeModal` to work with new form shape

services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx

@@ -1,42 +1,22 @@
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Formik } from "formik";
-import * as yup from "yup";
 import { XIcon } from "@heroicons/react/outline";
+
+import {
+  getFinalValues,
+  getInitialValues,
+  validationSchema
+} from "./form-utils";
 import General from "./General";
 import Labels from "./Labels";
-import {
-  topLevelVolumeConfigInitialValues,
-  volumeConfigCanvasInitialValues
-} from "../../../utils";
 import { CallbackFunction } from "../../../types";
 
-interface ICreateVolumeModal {
+interface ICreateVolumeModalProps {
   onHide: CallbackFunction;
   onAddEndpoint: CallbackFunction;
 }
 
-const CreateVolumeModal = (props: ICreateVolumeModal) => {
-  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, "volume name should be 256 characters or less")
-        .required("volume name is required")
-    }),
-    volumeConfig: yup.object({
-      name: yup
-        .string()
-        .max(256, "name should be 256 characters or less")
-        .required("name is required")
-    })
-  });
-  const tabs = [
+const tabs = [
   {
     name: "General",
     href: "#",
@@ -49,10 +29,20 @@ const CreateVolumeModal = (props: ICreateVolumeModal) => {
     current: false,
     hidden: false
   }
-  ];
-  const classNames = (...classes: string[]) => {
-    return classes.filter(Boolean).join(" ");
-  };
+];
+
+const classNames = (...classes: string[]) => classes.filter(Boolean).join(" ");
+
+const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
+  const { onHide, onAddEndpoint } = props;
+  const [openTab, setOpenTab] = useState("General");
+
+  const handleCreate = useCallback((values: any, formik: any) => {
+    onAddEndpoint(getFinalValues(values));
+    formik.resetForm();
+  }, []);
+
+  const initialValues = useMemo(() => getInitialValues(), []);
 
   return (
     <div className="fixed z-50 inset-0 overflow-y-auto">
@@ -64,7 +54,7 @@ const CreateVolumeModal = (props: ICreateVolumeModal) => {
         <div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
           <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
             <div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
-              <h3 className="text-sm font-semibold">Create top level volume</h3>
+              <h3 className="text-sm font-semibold">Add top level volume</h3>
               <button
                 className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
                 onClick={onHide}
@@ -76,23 +66,9 @@ const CreateVolumeModal = (props: ICreateVolumeModal) => {
             </div>
 
             <Formik
-              initialValues={{
-                canvasConfig: {
-                  ...volumeConfigCanvasInitialValues()
-                },
-                volumeConfig: {
-                  ...topLevelVolumeConfigInitialValues()
-                },
-                key: "volume",
-                type: "VOLUME",
-                inputs: [],
-                outputs: [],
-                config: {}
-              }}
+              initialValues={initialValues}
               enableReinitialize={true}
-              onSubmit={(values, formik) => {
-                handleCreate(values, formik);
-              }}
+              onSubmit={handleCreate}
               validationSchema={validationSchema}
             >
               {(formik) => (
@@ -133,9 +109,7 @@ const CreateVolumeModal = (props: ICreateVolumeModal) => {
                     <button
                       className="btn-util"
                       type="button"
-                      onClick={() => {
-                        formik.submitForm();
-                      }}
+                      onClick={formik.submitForm}
                     >
                       Add
                     </button>

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

@@ -37,7 +37,7 @@ import ModalConfirmDelete from "../Modal/ConfirmDelete";
 import ModalServiceCreate from "../Modal/Service/Create";
 import ModalServiceEdit from "../Modal/Service/Edit";
 import ModalNetwork from "../Modal/Network";
-import CreateVolumeModal from "../Modal/volume/Create";
+import CreateVolumeModal from "../Modal/volume/CreateVolumeModal";
 import ModalVolumeEdit from "../Modal/volume/Edit";
 import CodeEditor from "../CodeEditor";