From 5a35535eaed325c16e6987c5f8a21b4dcc4572d2 Mon Sep 17 00:00:00 2001
From: Artem Golub <artemgolub@gmail.com>
Date: Fri, 15 Jul 2022 13:45:43 +0300
Subject: [PATCH] fix: service modal yup, breakout component, cleanup

---
 .../src/components/Modal/Service/Create.tsx   | 153 ++++++++-------
 .../src/components/Modal/Service/Edit.tsx     | 178 +++++++++---------
 .../components/Modal/Service/Environment.tsx  |   5 +-
 .../src/components/Modal/Service/General.tsx  |  54 +-----
 .../src/components/Modal/Service/Labels.tsx   |   5 +-
 .../src/components/Modal/Service/Volumes.tsx  |   5 +-
 .../src/components/Modal/Volume/Create.tsx    |   4 +-
 7 files changed, 192 insertions(+), 212 deletions(-)

diff --git a/services/frontend/src/components/Modal/Service/Create.tsx b/services/frontend/src/components/Modal/Service/Create.tsx
index 3315933..aba5516 100644
--- a/services/frontend/src/components/Modal/Service/Create.tsx
+++ b/services/frontend/src/components/Modal/Service/Create.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { useFormik } from "formik";
+import { Formik } from "formik";
+import * as yup from "yup";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Environment from "./Environment";
@@ -16,22 +17,23 @@ interface IModalServiceProps {
 const ModalServiceCreate = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-
-  const formik = useFormik({
-    initialValues: {
-      canvasConfig: {
-        ...serviceConfigCanvasInitialValues()
-      },
-      serviceConfig: {
-        container_name: ""
-      },
-      key: "service",
-      type: "SERVICE",
-      inputs: ["op_source"],
-      outputs: [],
-      config: {}
-    },
-    onSubmit: () => undefined
+  const handleCreate = (values: any, formik: any) => {
+    onAddEndpoint(values);
+    formik.resetForm();
+  };
+  const validationSchema = yup.object({
+    canvasConfig: yup.object({
+      service_name: yup
+        .string()
+        .max(256, "service name should be 256 characters or less")
+        .required("service name is required")
+    }),
+    serviceConfig: yup.object({
+      container_name: yup
+        .string()
+        .max(256, "container name should be 256 characters or less")
+        .required("container name is required")
+    })
   });
   const tabs = [
     {
@@ -84,56 +86,77 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
               </button>
             </div>
 
-            <div>
-              <div className="hidden sm:block">
-                <div className="border-b border-gray-200 px-8">
-                  <nav className="-mb-px flex 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>
-              </div>
+            <Formik
+              initialValues={{
+                canvasConfig: {
+                  ...serviceConfigCanvasInitialValues()
+                },
+                serviceConfig: {
+                  container_name: ""
+                },
+                key: "service",
+                type: "SERVICE",
+                inputs: ["op_source"],
+                outputs: [],
+                config: {}
+              }}
+              enableReinitialize={true}
+              onSubmit={(values, formik) => {
+                handleCreate(values, formik);
+              }}
+              validationSchema={validationSchema}
+            >
+              {(formik) => (
+                <>
+                  <div className="hidden sm:block">
+                    <div className="border-b border-gray-200 px-8">
+                      <nav className="-mb-px flex 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>
+                  </div>
 
-              <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
-                  {openTab === "General" && <General formik={formik} />}
-                  {openTab === "Environment" && <Environment formik={formik} />}
-                  {openTab === "Volumes" && <Volumes formik={formik} />}
-                  {openTab === "Labels" && <Labels formik={formik} />}
-                </form>
-              </div>
-            </div>
+                  <div className="relative px-4 py-3 flex-auto">
+                    {openTab === "General" && <General />}
+                    {openTab === "Environment" && <Environment />}
+                    {openTab === "Volumes" && <Volumes />}
+                    {openTab === "Labels" && <Labels />}
+                  </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={() => {
-                  onAddEndpoint(formik.values);
-                  formik.resetForm();
-                }}
-              >
-                Add
-              </button>
-            </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={() => {
+                        onAddEndpoint(formik.values);
+                        formik.resetForm();
+                      }}
+                    >
+                      Add
+                    </button>
+                  </div>
+                </>
+              )}
+            </Formik>
           </div>
         </div>
       </div>
diff --git a/services/frontend/src/components/Modal/Service/Edit.tsx b/services/frontend/src/components/Modal/Service/Edit.tsx
index 2eb49be..0001646 100644
--- a/services/frontend/src/components/Modal/Service/Edit.tsx
+++ b/services/frontend/src/components/Modal/Service/Edit.tsx
@@ -1,17 +1,12 @@
 import { useState, useEffect } from "react";
-import { useFormik } from "formik";
+import { Formik } from "formik";
+import * as yup from "yup";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
-import { serviceConfigCanvasInitialValues } from "../../../utils";
-import {
-  CallbackFunction,
-  ICanvasConfig,
-  IServiceNodeItem,
-  IService
-} from "../../../types";
+import { CallbackFunction, IServiceNodeItem } from "../../../types";
 
 interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -23,16 +18,26 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
   const { node, onHide, onUpdateEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
   const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
-  const formik = useFormik({
-    initialValues: {
-      canvasConfig: {
-        ...serviceConfigCanvasInitialValues()
-      },
-      serviceConfig: {
-        container_name: ""
-      }
-    },
-    onSubmit: () => undefined
+
+  const handleUpdate = (values: any) => {
+    const updated = { ...selectedNode };
+    updated.canvasConfig = values.canvasConfig;
+    updated.serviceConfig = values.serviceConfig;
+    onUpdateEndpoint(updated);
+  };
+  const validationSchema = yup.object({
+    canvasConfig: yup.object({
+      service_name: yup
+        .string()
+        .max(256, "service name should be 256 characters or less")
+        .required("service name is required")
+    }),
+    serviceConfig: yup.object({
+      container_name: yup
+        .string()
+        .max(256, "container name should be 256 characters or less")
+        .required("container name is required")
+    })
   });
   const tabs = [
     {
@@ -70,25 +75,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
     }
   }, [node]);
 
-  useEffect(() => {
-    formik.resetForm();
-
-    if (selectedNode) {
-      formik.initialValues.canvasConfig = {
-        ...selectedNode.canvasConfig
-      } as ICanvasConfig;
-      formik.initialValues.serviceConfig = {
-        ...selectedNode.serviceConfig
-      } as IService;
-    }
-  }, [selectedNode]);
-
-  useEffect(() => {
-    return () => {
-      formik.resetForm();
-    };
-  }, []);
-
   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">
@@ -110,58 +96,76 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
               </button>
             </div>
 
-            <div>
-              <div className="hidden sm:block">
-                <div className="border-b border-gray-200 px-8">
-                  <nav className="-mb-px flex 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>
-              </div>
-
-              <div className="relative px-4 py-3 flex-auto">
-                <form onSubmit={formik.handleSubmit}>
-                  {openTab === "General" && <General formik={formik} />}
-                  {openTab === "Environment" && <Environment formik={formik} />}
-                  {openTab === "Volumes" && <Volumes formik={formik} />}
-                  {openTab === "Labels" && <Labels formik={formik} />}
-                </form>
-              </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={() => {
-                  const updated = { ...selectedNode };
-                  updated.canvasConfig = formik.values.canvasConfig;
-                  updated.serviceConfig = formik.values.serviceConfig;
-                  onUpdateEndpoint(updated);
+            {selectedNode && (
+              <Formik
+                initialValues={{
+                  canvasConfig: {
+                    ...selectedNode.canvasConfig
+                  },
+                  serviceConfig: {
+                    ...selectedNode.serviceConfig
+                  }
+                }}
+                enableReinitialize={true}
+                onSubmit={(values) => {
+                  handleUpdate(values);
                 }}
+                validationSchema={validationSchema}
               >
-                Update
-              </button>
-            </div>
+                {(formik) => (
+                  <>
+                    <div className="hidden sm:block">
+                      <div className="border-b border-gray-200 px-8">
+                        <nav
+                          className="-mb-px flex 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>
+                    </div>
+
+                    <div className="relative px-4 py-3 flex-auto">
+                      {openTab === "General" && <General />}
+                      {openTab === "Environment" && <Environment />}
+                      {openTab === "Volumes" && <Volumes />}
+                      {openTab === "Labels" && <Labels />}
+                    </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={() => {
+                          formik.submitForm();
+                        }}
+                      >
+                        Update
+                      </button>
+                    </div>
+                  </>
+                )}
+              </Formik>
+            )}
           </div>
         </div>
       </div>
diff --git a/services/frontend/src/components/Modal/Service/Environment.tsx b/services/frontend/src/components/Modal/Service/Environment.tsx
index f68aaa3..066dfb9 100644
--- a/services/frontend/src/components/Modal/Service/Environment.tsx
+++ b/services/frontend/src/components/Modal/Service/Environment.tsx
@@ -1,6 +1,5 @@
-const Environment = (props: any) => {
-  const { formik } = props;
-
+const Environment = () => {
   return <></>;
 };
+
 export default Environment;
diff --git a/services/frontend/src/components/Modal/Service/General.tsx b/services/frontend/src/components/Modal/Service/General.tsx
index 3ae0c59..40b26e4 100644
--- a/services/frontend/src/components/Modal/Service/General.tsx
+++ b/services/frontend/src/components/Modal/Service/General.tsx
@@ -1,56 +1,12 @@
-const General = (props: any) => {
-  const { formik } = props;
+import TextField from "../../global/FormElements/InputField";
 
+const General = () => {
   return (
     <>
-      <div className="relative pb-3 flex-auto">
-        <div className="grid grid-cols-6 gap-4">
-          <div className="col-span-3">
-            <label
-              htmlFor="service_name"
-              className="block text-xs font-medium text-gray-700"
-            >
-              Service name
-            </label>
-            <div className="mt-1">
-              <input
-                id="service_name"
-                name="canvasConfig.service_name"
-                type="text"
-                autoComplete="none"
-                className="input-util"
-                onChange={formik.handleChange}
-                value={formik.values.canvasConfig.service_name}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative pb-3 flex-auto">
-        <div className="grid grid-cols-6 gap-4">
-          <div className="col-span-3">
-            <label
-              htmlFor="container_name"
-              className="block text-xs font-medium text-gray-700"
-            >
-              Container name
-            </label>
-            <div className="mt-1">
-              <input
-                id="container_name"
-                name="serviceConfig.container_name"
-                type="text"
-                autoComplete="none"
-                className="input-util"
-                onChange={formik.handleChange}
-                value={formik.values.serviceConfig.container_name}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
+      <TextField label="Service name" name="canvasConfig.service_name" />
+      <TextField label="Container name" name="serviceConfig.container_name" />
     </>
   );
 };
+
 export default General;
diff --git a/services/frontend/src/components/Modal/Service/Labels.tsx b/services/frontend/src/components/Modal/Service/Labels.tsx
index 9838a34..12d9e27 100644
--- a/services/frontend/src/components/Modal/Service/Labels.tsx
+++ b/services/frontend/src/components/Modal/Service/Labels.tsx
@@ -1,6 +1,5 @@
-const Labels = (props: any) => {
-  const { formik } = props;
-
+const Labels = () => {
   return <></>;
 };
+
 export default Labels;
diff --git a/services/frontend/src/components/Modal/Service/Volumes.tsx b/services/frontend/src/components/Modal/Service/Volumes.tsx
index 8ed7f94..054bed2 100644
--- a/services/frontend/src/components/Modal/Service/Volumes.tsx
+++ b/services/frontend/src/components/Modal/Service/Volumes.tsx
@@ -1,6 +1,5 @@
-const Volumes = (props: any) => {
-  const { formik } = props;
-
+const Volumes = () => {
   return <></>;
 };
+
 export default Volumes;
diff --git a/services/frontend/src/components/Modal/Volume/Create.tsx b/services/frontend/src/components/Modal/Volume/Create.tsx
index 62cfe5b..6d8ef0c 100644
--- a/services/frontend/src/components/Modal/Volume/Create.tsx
+++ b/services/frontend/src/components/Modal/Volume/Create.tsx
@@ -15,7 +15,7 @@ interface IModalVolumeCreate {
 const ModalVolumeCreate = (props: IModalVolumeCreate) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
-  const handleSave = (values: any, formik: any) => {
+  const handleCreate = (values: any, formik: any) => {
     onAddEndpoint(values);
     formik.resetForm();
   };
@@ -79,7 +79,7 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => {
               }}
               enableReinitialize={true}
               onSubmit={(values, formik) => {
-                handleSave(values, formik);
+                handleCreate(values, formik);
               }}
               validationSchema={validationSchema}
             >