feat(frontend): renamed volumes tab as data tab

* Moved environment records to data tab.

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

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

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

@@ -0,0 +1,68 @@
+import { styled } from "@mui/joy";
+import Records from "../../Records";
+
+const Root = styled("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Volumes = () => {
+  return (
+    <Root>
+      <Records
+        name="environmentVariables"
+        title="Environment"
+        fields={(index: number) => [
+          {
+            name: `environmentVariables[${index}].key`,
+            placeholder: "Key",
+            required: true,
+            type: "text"
+          },
+          {
+            name: `environmentVariables[${index}].value`,
+            placeholder: "Value",
+            required: false,
+            type: "text"
+          }
+        ]}
+        newValue={{
+          hostPort: "",
+          containerPort: "",
+          protocol: ""
+        }}
+      />
+
+      <Records
+        name="volumes"
+        title="Volumes"
+        fields={(index: number) => [
+          {
+            name: `volumes[${index}].name`,
+            placeholder: "Name",
+            required: true,
+            type: "text"
+          },
+          {
+            name: `volumes[${index}].containerPath`,
+            placeholder: "Container path",
+            type: "text"
+          },
+          {
+            name: `volumes[${index}].accessMode`,
+            placeholder: "Access mode",
+            type: "text"
+          }
+        ]}
+        newValue={{
+          name: "",
+          containerPath: "",
+          accessMode: ""
+        }}
+      />
+    </Root>
+  );
+};
+
+export default Volumes;

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

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

@@ -28,30 +28,6 @@ const General = () => {
       </ImageNameGroup>
       <TextField label="Container name" name="containerName" required={true} />
 
-      <Records
-        name="environmentVariables"
-        title="Environment"
-        fields={(index: number) => [
-          {
-            name: `environmentVariables[${index}].key`,
-            placeholder: "Key",
-            required: true,
-            type: "text"
-          },
-          {
-            name: `environmentVariables[${index}].value`,
-            placeholder: "Value",
-            required: false,
-            type: "text"
-          }
-        ]}
-        newValue={{
-          hostPort: "",
-          containerPort: "",
-          protocol: ""
-        }}
-      />
-
       <Records
         name="labels"
         title="Labels"

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

@@ -1,96 +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 Volumes = () => {
-  const formik = useFormikContext<IEditServiceForm>();
-  const { volumes } = formik.values;
-
-  const handleNewVolume = useCallback(() => {
-    formik.setFieldValue(`volumes[${volumes.length}]`, {
-      name: "",
-      containerPath: "",
-      accessMode: ""
-    });
-  }, [formik]);
-
-  const handleRemoveVolume = useCallback(
-    (index: number) => {
-      const newVolumes = volumes.filter(
-        (_: unknown, currentIndex: number) => currentIndex != index
-      );
-      formik.setFieldValue(`volumes`, newVolumes);
-    },
-    [formik]
-  );
-
-  const emptyVolumes = volumes && volumes.length === 0 ? true : false;
-
-  return (
-    <Root>
-      {!emptyVolumes && (
-        <Records>
-          {volumes.map((_: unknown, index: number) => (
-            <Record
-              key={index}
-              index={index}
-              fields={[
-                {
-                  name: `volumes[${index}].name`,
-                  placeholder: "Name",
-                  required: true,
-                  type: "text"
-                },
-                {
-                  name: `volumes[${index}].containerPath`,
-                  placeholder: "Container path",
-                  type: "text"
-                },
-                {
-                  name: `volumes[${index}].accessMode`,
-                  placeholder: "Access mode",
-                  type: "text"
-                }
-              ]}
-              onRemove={handleRemoveVolume}
-            />
-          ))}
-        </Records>
-      )}
-      {emptyVolumes && <Description>No volumes.</Description>}
-
-      <AddButton size="sm" variant="plain" onClick={handleNewVolume}>
-        <PlusIcon className="h-4 w-4 mr-2" />
-        New volume
-      </AddButton>
-    </Root>
-  );
-};
-
-export default Volumes;