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

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

@@ -33,7 +33,7 @@ import { generateHttp } from "../../services/generate";
 import { Canvas } from "../Canvas";
 import Spinner from "../global/Spinner";
 import ModalConfirmDelete from "../modals/ConfirmDelete";
-import ModalServiceCreate from "../modals/docker-compose/service/Create";
+import CreateServiceModal from "../modals/docker-compose/service/Create";
 import ModalServiceEdit from "../modals/docker-compose/service/Edit";
 import ModalNetwork from "../modals/docker-compose/network";
 import CreateVolumeModal from "../modals/docker-compose/volume/CreateVolumeModal";
@@ -459,7 +459,7 @@ export default function Project(props: IProjectProps) {
           ) : null}
 
           {showModalCreateService ? (
-            <ModalServiceCreate
+            <CreateServiceModal
               onHide={() => setShowModalCreateService(false)}
               onAddEndpoint={(values: any) => onAddEndpoint(values)}
             />

services/frontend/src/components/modals/docker-compose/service/Create.tsx

@@ -1,47 +1,29 @@
-import { useCallback, useMemo, useState } from "react";
-import { Formik } from "formik";
-import { XIcon } from "@heroicons/react/outline";
-import General from "./General";
-import Data from "./Data";
-import { CallbackFunction, IEditServiceForm } from "../../../../types";
+import { useCallback } from "react";
+import {
+  CallbackFunction,
+  IEditServiceForm,
+  IServiceNodeItem
+} from "../../../../types";
 import {
   getFinalValues,
   getInitialValues,
   tabs,
   validationSchema
 } from "./form-utils";
-import Build from "./Build";
-import { styled } from "@mui/joy";
-import Environment from "./Environment";
-import Deploy from "./Deploy";
 import { toaster } from "../../../../utils";
-import { reportErrorsAndSubmit } from "../../../../utils/forms";
-import { ScrollView } from "../../../ScrollView";
-import Modal from "../../../Modal";
-import Tabs from "../../../Tabs";
-import Tab from "../../../Tab";
+import FormModal from "../../../FormModal";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
   onAddEndpoint: CallbackFunction;
 }
 
-const FormContainer = styled("div")`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const ModalServiceCreate = (props: IModalServiceProps) => {
+const CreateServiceModal = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
-  const [openTab, setOpenTab] = useState("General");
 
   const handleCreate = useCallback(
-    (values: IEditServiceForm, formik: any) => {
-      const result = getFinalValues(values);
-      onAddEndpoint(result);
-      formik.resetForm();
-      onHide();
+    (finalValues: IServiceNodeItem, values: IEditServiceForm) => {
+      onAddEndpoint(finalValues);
       toaster(
         `Created "${values.serviceName}" service successfully`,
         "success"
@@ -50,51 +32,17 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
     [onAddEndpoint, onHide]
   );
 
-  const initialValues = useMemo(() => getInitialValues(), []);
-
   return (
-    <Modal onHide={onHide} title="Add service">
-      <Formik
-        initialValues={initialValues}
-        enableReinitialize={true}
-        onSubmit={handleCreate}
-        validationSchema={validationSchema}
-      >
-        {(formik) => (
-          <FormContainer>
-            <div>
-              <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 />}
-                {openTab === "Environment" && <Environment />}
-                {openTab === "Data" && <Data />}
-                {openTab === "Build" && <Build />}
-                {openTab === "Deploy" && <Deploy />}
-              </ScrollView>
-            </div>
-
-            <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>
-          </FormContainer>
-        )}
-      </Formik>
-    </Modal>
+    <FormModal
+      title="Create service"
+      tabs={tabs}
+      getInitialValues={getInitialValues}
+      getFinalValues={getFinalValues}
+      validationSchema={validationSchema}
+      onHide={onHide}
+      onCreate={handleCreate}
+    />
   );
 };
 
-export default ModalServiceCreate;
+export default CreateServiceModal;

services/frontend/src/components/modals/docker-compose/service/Edit.tsx

@@ -1,25 +1,18 @@
-import { useState, useEffect, useMemo } from "react";
-import { Formik } from "formik";
+import { useState, useEffect } from "react";
 
-import { XIcon } from "@heroicons/react/outline";
-import General from "./General";
-import Data from "./Data";
-import type { CallbackFunction, IServiceNodeItem } from "../../../../types";
+import type {
+  CallbackFunction,
+  IEditServiceForm,
+  IServiceNodeItem
+} from "../../../../types";
 import {
   getInitialValues,
   getFinalValues,
   validationSchema,
   tabs
 } from "./form-utils";
-import Environment from "./Environment";
-import Build from "./Build";
-import Deploy from "./Deploy";
 import { toaster } from "../../../../utils";
-import { reportErrorsAndSubmit } from "../../../../utils/forms";
-import { ScrollView } from "../../../ScrollView";
-import Modal from "../../../Modal";
-import Tabs from "../../../Tabs";
-import Tab from "../../../Tab";
+import FormModal from "../../../FormModal";
 
 export interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -29,67 +22,33 @@ export interface IModalServiceProps {
 
 const ModalServiceEdit = (props: IModalServiceProps) => {
   const { node, onHide, onUpdateEndpoint } = props;
-  const [openTab, setOpenTab] = useState("General");
   const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
 
-  const handleUpdate = (values: any) => {
-    onUpdateEndpoint(getFinalValues(values, selectedNode));
-    toaster(`Updated "${values.serviceName}" service successfully`, "success");
-  };
-
-  const initialValues = useMemo(
-    () => getInitialValues(selectedNode),
-    [selectedNode]
-  );
-
   useEffect(() => {
     if (node) {
       setSelectedNode(node);
     }
   }, [node]);
 
-  return (
-    <Modal onHide={onHide} title="Edit service">
-      {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 />}
-                {openTab === "Environment" && <Environment />}
-                {openTab === "Data" && <Data />}
-                {openTab === "Build" && <Build />}
-                {openTab === "Deploy" && <Deploy />}
-              </ScrollView>
+  const handleUpdate = (
+    finalValues: IServiceNodeItem,
+    values: IEditServiceForm
+  ) => {
+    onUpdateEndpoint(finalValues);
+    toaster(`Updated "${values.serviceName}" service successfully`, "success");
+  };
 
-              <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>
-      )}
-    </Modal>
+  return (
+    <FormModal
+      title="Edit service"
+      tabs={tabs}
+      getInitialValues={getInitialValues}
+      getFinalValues={getFinalValues}
+      validationSchema={validationSchema}
+      onHide={onHide}
+      onCreate={handleUpdate}
+      selectedNode={selectedNode}
+    />
   );
 };
 

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

@@ -11,37 +11,37 @@ import {
   packArrayAsObject,
   packArrayAsStrings
 } from "../../../../utils/forms";
+import General from "./General";
+import Environment from "./Environment";
+import Data from "./Data";
+import Build from "./Build";
+import Deploy from "./Deploy";
 
 export const tabs = [
   {
-    name: "General",
-    href: "#",
-    current: true,
-    hidden: false
+    value: "general",
+    title: "General",
+    component: General
   },
   {
-    name: "Environment",
-    href: "#",
-    current: false,
-    hidden: false
+    value: "environment",
+    title: "Environment",
+    component: Environment
   },
   {
-    name: "Data",
-    href: "#",
-    current: false,
-    hidden: false
+    value: "data",
+    title: "Data",
+    component: Data
   },
   {
-    name: "Build",
-    href: "#",
-    current: false,
-    hidden: false
+    value: "build",
+    title: "Build",
+    component: Build
   },
   {
-    name: "Deploy",
-    href: "#",
-    current: false,
-    hidden: false
+    value: "deploy",
+    title: "Deploy",
+    component: Deploy
   }
 ];