From 9bf8980fd7c62af6d24b2a9ecb646bd97ec0556a Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sun, 31 Jul 2022 18:56:09 +0530
Subject: [PATCH] feat(frontend): moved labels form to general tab in volumes
 modal

---
 .../Modal/volume/CreateVolumeModal.tsx        |  2 -
 .../Modal/volume/EditVolumeModal.tsx          |  2 -
 .../src/components/Modal/volume/General.tsx   | 20 ++++++++++
 .../src/components/Modal/volume/Labels.tsx    | 37 -------------------
 .../src/components/Modal/volume/form-utils.ts |  6 ---
 5 files changed, 20 insertions(+), 47 deletions(-)
 delete mode 100644 services/frontend/src/components/Modal/volume/Labels.tsx

diff --git a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
index f699905..54d550b 100644
--- a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
+++ b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx
@@ -9,7 +9,6 @@ import {
   validationSchema
 } from "./form-utils";
 import General from "./General";
-import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
 
 interface ICreateVolumeModalProps {
@@ -90,7 +89,6 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
 
                   <div className="relative px-4 py-3 flex-auto">
                     {openTab === "General" && <General />}
-                    {openTab === "Labels" && <Labels />}
                   </div>
 
                   <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
diff --git a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
index c690f24..f681452 100644
--- a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
+++ b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from "react";
 import { Formik } from "formik";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
-import Labels from "./Labels";
 import type { CallbackFunction, IVolumeNodeItem } from "../../../types";
 import {
   getFinalValues,
@@ -101,7 +100,6 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
 
                     <div className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
-                      {openTab === "Labels" && <Labels />}
                     </div>
 
                     <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
diff --git a/services/frontend/src/components/Modal/volume/General.tsx b/services/frontend/src/components/Modal/volume/General.tsx
index 44855c5..c21bb2b 100644
--- a/services/frontend/src/components/Modal/volume/General.tsx
+++ b/services/frontend/src/components/Modal/volume/General.tsx
@@ -1,6 +1,7 @@
 import { styled } from "@mui/joy";
 
 import TextField from "../../global/FormElements/TextField";
+import Records from "../../Records";
 
 const Root = styled("div")`
   display: flex;
@@ -13,6 +14,25 @@ const General = () => {
     <Root>
       <TextField label="Entry name" name="entryName" required={true} />
       <TextField label="Volume name" name="volumeName" required={true} />
+      <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/volume/Labels.tsx b/services/frontend/src/components/Modal/volume/Labels.tsx
deleted file mode 100644
index 38a3040..0000000
--- a/services/frontend/src/components/Modal/volume/Labels.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { styled } from "@mui/joy";
-import Records from "../../Records";
-
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Labels = () => {
-  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/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts
index b3da6d9..3f941e5 100644
--- a/services/frontend/src/components/Modal/volume/form-utils.ts
+++ b/services/frontend/src/components/Modal/volume/form-utils.ts
@@ -78,11 +78,5 @@ export const tabs = [
     href: "#",
     current: true,
     hidden: false
-  },
-  {
-    name: "Labels",
-    href: "#",
-    current: false,
-    hidden: false
   }
 ];