refactor: updated create and edit volume modals to use form modal

services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback } from "react";
-import { Formik } from "formik";
 
 import {
   getFinalValues,
@@ -7,14 +6,13 @@ import {
   tabs,
   validationSchema
 } from "./form-utils";
-import General from "./General";
+import {
-import { CallbackFunction, IEditVolumeForm } from "../../../../types";
+  CallbackFunction,
+  IEditVolumeForm,
+  IVolumeNodeItem
+} from "../../../../types";
 import { toaster } from "../../../../utils";
-import { reportErrorsAndSubmit } from "../../../../utils/forms";
+import FormModal from "../../../FormModal";
-import { ScrollView } from "../../../ScrollView";
-import Modal from "../../../Modal";
-import Tabs from "../../../Tabs";
-import Tab from "../../../Tab";
 
 interface ICreateVolumeModalProps {
   onHide: CallbackFunction;
@@ -23,51 +21,25 @@ interface ICreateVolumeModalProps {
 
 const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
   const { onHide, onAddEndpoint } = props;
-  const [openTab, setOpenTab] = useState("General");
-
-  const handleCreate = useCallback((values: IEditVolumeForm, formik: any) => {
-    onAddEndpoint(getFinalValues(values));
-    formik.resetForm();
-    onHide();
-
-    toaster(`Created "${values.entryName}" volume successfully`, "success");
-  }, []);
 
-  const initialValues = useMemo(() => getInitialValues(), []);
+  const handleCreate = useCallback(
+    (finalValues: IVolumeNodeItem, values: IEditVolumeForm) => {
+      onAddEndpoint(finalValues);
+      toaster(`Created "${values.entryName}" volume successfully`, "success");
+    },
+    [onAddEndpoint]
+  );
 
   return (
-    <Modal onHide={onHide} title="Add volume">
+    <FormModal
-      <Formik
+      title="Add volume"
-        initialValues={initialValues}
+      tabs={tabs}
-        enableReinitialize={true}
+      getInitialValues={getInitialValues}
-        onSubmit={handleCreate}
+      getFinalValues={getFinalValues}
-        validationSchema={validationSchema}
+      validationSchema={validationSchema}
-      >
+      onHide={onHide}
-        {(formik) => (
+      onCreate={handleCreate}
-          <>
+    />
-            <Tabs value={openTab} onChange={setOpenTab}>
-              {tabs.map((tab) => (
-                <Tab key={tab.name} value={tab.name} title={tab.name} />
-              ))}
-            </Tabs>
-
-            <ScrollView height="500px" className="relative px-4 py-3 flex-auto">
-              {openTab === "General" && <General />}
-            </ScrollView>
-
-            <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
-              <button
-                className="btn-util"
-                type="button"
-                onClick={reportErrorsAndSubmit(formik)}
-              >
-                Add
-              </button>
-            </div>
-          </>
-        )}
-      </Formik>
-    </Modal>
   );
 };
 

services/frontend/src/components/modals/docker-compose/volume/EditVolumeModal.tsx

@@ -1,7 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
-import { Formik } from "formik";
-import { XIcon } from "@heroicons/react/outline";
-import General from "./General";
 import type {
   CallbackFunction,
   IEditVolumeForm,
@@ -14,10 +11,7 @@ import {
   validationSchema
 } from "./form-utils";
 import { toaster } from "../../../../utils";
-import { reportErrorsAndSubmit } from "../../../../utils/forms";
+import FormModal from "../../../FormModal";
-import { ScrollView } from "../../../ScrollView";
-import Tabs from "../../../Tabs";
-import Tab from "../../../Tab";
 
 interface IEditVolumeModal {
   node: IVolumeNodeItem;
@@ -27,7 +21,6 @@ interface IEditVolumeModal {
 
 const EditVolumeModal = (props: IEditVolumeModal) => {
   const { node, onHide, onUpdateEndpoint } = props;
-  const [openTab, setOpenTab] = useState("General");
   const [selectedNode, setSelectedNode] = useState<IVolumeNodeItem>();
 
   useEffect(() => {
@@ -36,77 +29,25 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
     }
   }, [node]);
 
-  const handleUpdate = (values: IEditVolumeForm) => {
+  const handleUpdate = (
-    onUpdateEndpoint(getFinalValues(values, selectedNode));
+    finalValues: IVolumeNodeItem,
-
+    values: IEditVolumeForm
+  ) => {
+    onUpdateEndpoint(finalValues);
     toaster(`Updated "${values.entryName}" volume successfully`, "success");
   };
 
-  const initialValues = useMemo(
-    () => getInitialValues(selectedNode),
-    [selectedNode]
-  );
-
   return (
-    <div className="fixed z-50 inset-0 overflow-y-auto">
+    <FormModal
-      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
+      title="Edit volume"
-        <div
+      tabs={tabs}
-          onClick={onHide}
+      getInitialValues={getInitialValues}
-          className="opacity-25 fixed inset-0 z-40 bg-black"
+      getFinalValues={getFinalValues}
-        ></div>
+      selectedNode={selectedNode}
-        <div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
+      validationSchema={validationSchema}
-          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+      onHide={onHide}
-            <div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
+      onCreate={handleUpdate}
-              <h3 className="text-sm font-semibold">Edit top level volumes</h3>
+    />
-              <button
-                className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
-                onClick={onHide}
-              >
-                <span className="block outline-none focus:outline-none">
-                  <XIcon className="w-4" />
-                </span>
-              </button>
-            </div>
-
-            {selectedNode && (
-              <Formik
-                initialValues={initialValues}
-                enableReinitialize={true}
-                onSubmit={handleUpdate}
-                validationSchema={validationSchema}
-              >
-                {(formik) => (
-                  <>
-                    <Tabs value={openTab} onChange={setOpenTab}>
-                      {tabs.map((tab) => (
-                        <Tab key={tab.name} value={tab.name} title={tab.name} />
-                      ))}
-                    </Tabs>
-
-                    <ScrollView
-                      height="500px"
-                      className="relative px-4 py-3 flex-auto"
-                    >
-                      {openTab === "General" && <General />}
-                    </ScrollView>
-
-                    <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
-                      <button
-                        className="btn-util"
-                        type="button"
-                        onClick={reportErrorsAndSubmit(formik)}
-                      >
-                        Save
-                      </button>
-                    </div>
-                  </>
-                )}
-              </Formik>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
   );
 };
 

services/frontend/src/components/modals/docker-compose/volume/form-utils.ts

@@ -1,6 +1,7 @@
 import * as yup from "yup";
 import { IEditVolumeForm, IVolumeNodeItem } from "../../../../types";
 import { pruneObject } from "../../../../utils/forms";
+import General from "./General";
 
 export const validationSchema = yup.object({
   entryName: yup
@@ -74,6 +75,8 @@ export const getFinalValues = (
 
 export const tabs = [
   {
-    name: "General"
+    title: "General",
+    value: "general",
+    component: General
   }
 ];