From a7ee6738c30d78877cfe007d9089a6b84438b413 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Tue, 26 Jul 2022 17:14:27 +0530
Subject: [PATCH] feat(frontend): updated `CreateVolumeModal` to work with new
 form shape

---
 .../Modal/volume/CreateVolumeModal.tsx        | 98 +++++++------------
 .../frontend/src/components/Project/index.tsx |  2 +-
 2 files changed, 37 insertions(+), 63 deletions(-)

diff --git a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
index ccc221d..ba11792 100644
--- a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
+++ b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
@@ -1,58 +1,48 @@
-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 tabs = [
+  {
+    name: "General",
+    href: "#",
+    current: true,
+    hidden: false
+  },
+  {
+    name: "Labels",
+    href: "#",
+    current: false,
+    hidden: false
+  }
+];
+
+const classNames = (...classes: string[]) => classes.filter(Boolean).join(" ");
+
+const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-  const handleCreate = (values: any, formik: any) => {
-    onAddEndpoint(values);
+
+  const handleCreate = useCallback((values: any, formik: any) => {
+    onAddEndpoint(getFinalValues(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 = [
-    {
-      name: "General",
-      href: "#",
-      current: true,
-      hidden: false
-    },
-    {
-      name: "Labels",
-      href: "#",
-      current: false,
-      hidden: false
-    }
-  ];
-  const classNames = (...classes: string[]) => {
-    return classes.filter(Boolean).join(" ");
-  };
+  }, []);
+
+  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>
diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx
index 2be9c96..4b4a20a 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/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";