refactor: updated edit service modal to use `Tabs` and `Modal` components

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,26 +49,7 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
   }, [node]);
 
   return (
-    <div className="fixed z-50 inset-0 overflow-y-auto">
+    <Modal onHide={onHide} title="Edit service">
-      <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>
-
       {selectedNode && (
         <Formik
           initialValues={initialValues}
@@ -76,33 +59,11 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
         >
           {(formik) => (
             <>
-                    <div className="border-b border-gray-200 px-4 md:px-8">
+              <Tabs value={openTab} onChange={setOpenTab}>
-                      <nav
-                        className="-mb-px flex space-x-4 md:space-x-8"
-                        aria-label="Tabs"
-                      >
                 {tabs.map((tab) => (
-                          <a
+                  <Tab key={tab.name} value={tab.name} title={tab.name} />
-                            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>
+              </Tabs>
-                    </div>
 
               <ScrollView
                 height="500px"
@@ -128,10 +89,7 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
           )}
         </Formik>
       )}
-          </div>
+    </Modal>
-        </div>
-      </div>
-    </div>
   );
 };