From d4fe50b466c00fd6e4e749f7aef9d527a87a0b7e Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sun, 31 Jul 2022 19:01:24 +0530
Subject: [PATCH] feat(frontend): moved labels form to general tab in networks
 modal

---
 .../Modal/network/CreateNetworkModal.tsx      |  2 -
 .../Modal/network/EditNetworkModal.tsx        |  2 -
 .../src/components/Modal/network/General.tsx  | 20 ++++++++++
 .../src/components/Modal/network/Labels.tsx   | 38 -------------------
 .../components/Modal/network/form-utils.ts    |  6 ---
 5 files changed, 20 insertions(+), 48 deletions(-)
 delete mode 100644 services/frontend/src/components/Modal/network/Labels.tsx

diff --git a/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx b/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
index c7aa3a6..bc13aeb 100644
--- a/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
+++ b/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
@@ -2,7 +2,6 @@ import { FunctionComponent, ReactElement, useMemo, useState } from "react";
 import { Formik } from "formik";
 import General from "./General";
 import IPam from "./IPam";
-import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
 import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
@@ -67,7 +66,6 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
           <div className="relative px-4 py-3 flex-auto">
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPam />}
-            {openTab === "Labels" && <Labels />}
           </div>
 
           <Actions>
diff --git a/services/frontend/src/components/Modal/network/EditNetworkModal.tsx b/services/frontend/src/components/Modal/network/EditNetworkModal.tsx
index ba391ec..68aaf84 100644
--- a/services/frontend/src/components/Modal/network/EditNetworkModal.tsx
+++ b/services/frontend/src/components/Modal/network/EditNetworkModal.tsx
@@ -2,7 +2,6 @@ import { useMemo, useState } from "react";
 import { Formik } from "formik";
 import General from "./General";
 import IPam from "./IPam";
-import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
 import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
@@ -66,7 +65,6 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => {
           <div className="relative px-4 py-3 flex-auto max-h-96 overflow-y-auto">
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPam />}
-            {openTab === "Labels" && <Labels />}
           </div>
 
           <Actions>
diff --git a/services/frontend/src/components/Modal/network/General.tsx b/services/frontend/src/components/Modal/network/General.tsx
index 04e9bcd..867a53a 100644
--- a/services/frontend/src/components/Modal/network/General.tsx
+++ b/services/frontend/src/components/Modal/network/General.tsx
@@ -1,5 +1,6 @@
 import { styled } from "@mui/joy";
 import TextField from "../../global/FormElements/TextField";
+import Records from "../../Records";
 
 const Root = styled("div")`
   display: flex;
@@ -12,6 +13,25 @@ const General = () => {
     <Root>
       <TextField label="Entry name" name="entryName" />
       <TextField label="Network name" name="networkName" />
+      <Records
+        name="labels"
+        title="Labels"
+        fields={(index: number) => [
+          {
+            name: `labels[${index}].key`,
+            placeholder: "Key",
+            required: true,
+            type: "text"
+          },
+          {
+            name: `labels[${index}].value`,
+            placeholder: "Value",
+            required: true,
+            type: "text"
+          }
+        ]}
+        newValue={{ key: "", value: "" }}
+      />
     </Root>
   );
 };
diff --git a/services/frontend/src/components/Modal/network/Labels.tsx b/services/frontend/src/components/Modal/network/Labels.tsx
deleted file mode 100644
index a626941..0000000
--- a/services/frontend/src/components/Modal/network/Labels.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { styled } from "@mui/joy";
-import { FunctionComponent, ReactElement } from "react";
-import Records from "../../Records";
-
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Labels: FunctionComponent = (): ReactElement => {
-  return (
-    <Root>
-      <Records
-        name="labels"
-        title=""
-        collapsible={false}
-        fields={(index: number) => [
-          {
-            name: `labels[${index}].key`,
-            placeholder: "Key",
-            required: true,
-            type: "text"
-          },
-          {
-            name: `labels[${index}].value`,
-            placeholder: "Value",
-            required: true,
-            type: "text"
-          }
-        ]}
-        newValue={{ key: "", value: "" }}
-      />
-    </Root>
-  );
-};
-
-export default Labels;
diff --git a/services/frontend/src/components/Modal/network/form-utils.ts b/services/frontend/src/components/Modal/network/form-utils.ts
index 184056c..7d3619d 100644
--- a/services/frontend/src/components/Modal/network/form-utils.ts
+++ b/services/frontend/src/components/Modal/network/form-utils.ts
@@ -61,12 +61,6 @@ export const tabs = [
     href: "#",
     current: false,
     hidden: false
-  },
-  {
-    name: "Labels",
-    href: "#",
-    current: false,
-    hidden: false
   }
 ];