From 93047edaba0758ec4026168517bb8aec5d8d2c71 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sat, 13 Aug 2022 08:29:45 +0530
Subject: [PATCH] refactor: updated edit service modal to use `Tabs` and
 `Modal` components

---
 .../modals/docker-compose/service/Edit.tsx    | 124 ++++++------------
 1 file changed, 41 insertions(+), 83 deletions(-)

diff --git a/services/frontend/src/components/modals/docker-compose/service/Edit.tsx b/services/frontend/src/components/modals/docker-compose/service/Edit.tsx
index 20eeee2..d18084a 100644
--- a/services/frontend/src/components/modals/docker-compose/service/Edit.tsx
+++ b/services/frontend/src/components/modals/docker-compose/service/Edit.tsx
@@ -14,10 +14,12 @@ import {
 import Environment from "./Environment";
 import Build from "./Build";
 import Deploy from "./Deploy";
-import { classNames } from "../../../../utils/styles";
 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";
 
 export interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -47,91 +49,47 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
   }, [node]);
 
   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">
-        <div
-          onClick={onHide}
-          className="opacity-25 fixed inset-0 z-40 bg-black"
-        ></div>
-        <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">Edit service</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>
+    <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>
 
-            {selectedNode && (
-              <Formik
-                initialValues={initialValues}
-                enableReinitialize={true}
-                onSubmit={handleUpdate}
-                validationSchema={validationSchema}
+              <ScrollView
+                height="500px"
+                className="relative px-4 py-3 flex-auto"
               >
-                {(formik) => (
-                  <>
-                    <div className="border-b border-gray-200 px-4 md:px-8">
-                      <nav
-                        className="-mb-px flex space-x-4 md:space-x-8"
-                        aria-label="Tabs"
-                      >
-                        {tabs.map((tab) => (
-                          <a
-                            key={tab.name}
-                            href={tab.href}
-                            className={classNames(
-                              tab.name === openTab
-                                ? "border-indigo-500 text-indigo-600"
-                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                              "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                              tab.hidden ? "hidden" : ""
-                            )}
-                            aria-current={tab.current ? "page" : undefined}
-                            onClick={(e) => {
-                              e.preventDefault();
-                              setOpenTab(tab.name);
-                            }}
-                          >
-                            {tab.name}
-                          </a>
-                        ))}
-                      </nav>
-                    </div>
-
-                    <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>
+                {openTab === "General" && <General />}
+                {openTab === "Environment" && <Environment />}
+                {openTab === "Data" && <Data />}
+                {openTab === "Build" && <Build />}
+                {openTab === "Deploy" && <Deploy />}
+              </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>
+              <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>
   );
 };