feat(frontend): moved labels form to general tab

services/frontend/src/components/Modal/service/Create.tsx

@@ -3,7 +3,6 @@ import { Formik } from "formik";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Volumes from "./Volumes";
-import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
 import {
   getFinalValues,
@@ -31,12 +30,6 @@ const tabs = [
     current: false,
     hidden: false
   },
-  {
-    name: "Labels",
-    href: "#",
-    current: false,
-    hidden: false
-  },
   {
     name: "Build",
     href: "#",
@@ -153,7 +146,6 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                     <TabBody className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
                       {openTab === "Volumes" && <Volumes />}
-                      {openTab === "Labels" && <Labels />}
                       {openTab === "Build" && <Build />}
                     </TabBody>
                   </div>

services/frontend/src/components/Modal/service/Edit.tsx

@@ -4,7 +4,6 @@ import { Formik } from "formik";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Volumes from "./Volumes";
-import Labels from "./Labels";
 import type { CallbackFunction, IServiceNodeItem } from "../../../types";
 import {
   getInitialValues,
@@ -30,12 +29,6 @@ const tabs = [
     href: "#",
     current: false,
     hidden: false
-  },
-  {
-    name: "Labels",
-    href: "#",
-    current: false,
-    hidden: false
   }
 ];
 
@@ -124,7 +117,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
                     <div className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
                       {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">

services/frontend/src/components/Modal/service/General.tsx

@@ -52,6 +52,26 @@ const General = () => {
         }}
       />
 
+      <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: "" }}
+      />
+
       <Records
         name="ports"
         title="Ports"

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

@@ -1,91 +0,0 @@
-import { useCallback } from "react";
-import { PlusIcon } from "@heroicons/react/outline";
-import { Button, styled } from "@mui/joy";
-import { useFormikContext } from "formik";
-import Record from "../../Record";
-import { IEditServiceForm } from "../../../types";
-
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Records = styled("div")`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-const AddButton = styled(Button)`
-  margin-top: ${({ theme }) => theme.spacing(1)};
-`;
-
-const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(1)};
-  text-align: center;
-  color: #7a7a7a;
-  font-size: 14px;
-`;
-
-const Labels = () => {
-  const formik = useFormikContext<IEditServiceForm>();
-  const { labels } = formik.values;
-
-  const handleNewLabel = useCallback(() => {
-    formik.setFieldValue(`labels[${labels.length}]`, {
-      key: "",
-      value: ""
-    });
-  }, [formik]);
-
-  const handleRemoveLabel = useCallback(
-    (index: number) => {
-      const newLabels = labels.filter(
-        (_: unknown, currentIndex: number) => currentIndex != index
-      );
-      formik.setFieldValue(`labels`, newLabels);
-    },
-    [formik]
-  );
-
-  const emptyLabels = labels && labels.length === 0 ? true : false;
-
-  return (
-    <Root>
-      {!emptyLabels && (
-        <Records>
-          {labels.map((_: unknown, index: number) => (
-            <Record
-              key={index}
-              index={index}
-              fields={[
-                {
-                  name: `labels[${index}].key`,
-                  placeholder: "Key",
-                  required: true,
-                  type: "text"
-                },
-                {
-                  name: `labels[${index}].value`,
-                  placeholder: "Value",
-                  required: false,
-                  type: "text"
-                }
-              ]}
-              onRemove={handleRemoveLabel}
-            />
-          ))}
-        </Records>
-      )}
-      {emptyLabels && <Description>No labels.</Description>}
-
-      <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
-        <PlusIcon className="h-4 w-4 mr-2" />
-        New label
-      </AddButton>
-    </Root>
-  );
-};
-
-export default Labels;