feat(frontend): moved labels form to general tab in networks modal

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>

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>

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>
   );
 };

services/frontend/src/components/Modal/network/Labels.tsx

@@ -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;

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
   }
 ];