diff --git a/services/frontend/src/components/Modal/service/Create.tsx b/services/frontend/src/components/Modal/service/Create.tsx
index 68051d9..997e809 100644
--- a/services/frontend/src/components/Modal/service/Create.tsx
+++ b/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) => {
{openTab === "General" && }
- {openTab === "Volumes" && }
+ {openTab === "Data" && }
{openTab === "Build" && }
diff --git a/services/frontend/src/components/Modal/service/Data.tsx b/services/frontend/src/components/Modal/service/Data.tsx
new file mode 100644
index 0000000..5cddbd8
--- /dev/null
+++ b/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 (
+
+ [
+ {
+ name: `environmentVariables[${index}].key`,
+ placeholder: "Key",
+ required: true,
+ type: "text"
+ },
+ {
+ name: `environmentVariables[${index}].value`,
+ placeholder: "Value",
+ required: false,
+ type: "text"
+ }
+ ]}
+ newValue={{
+ hostPort: "",
+ containerPort: "",
+ protocol: ""
+ }}
+ />
+
+ [
+ {
+ 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: ""
+ }}
+ />
+
+ );
+};
+
+export default Volumes;
diff --git a/services/frontend/src/components/Modal/service/Edit.tsx b/services/frontend/src/components/Modal/service/Edit.tsx
index 5a20956..7cb1b91 100644
--- a/services/frontend/src/components/Modal/service/Edit.tsx
+++ b/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) => {
{openTab === "General" && }
- {openTab === "Volumes" && }
+ {openTab === "Data" && }
diff --git a/services/frontend/src/components/Modal/service/General.tsx b/services/frontend/src/components/Modal/service/General.tsx
index 125c176..e77f345 100644
--- a/services/frontend/src/components/Modal/service/General.tsx
+++ b/services/frontend/src/components/Modal/service/General.tsx
@@ -28,30 +28,6 @@ const General = () => {
-
[
- {
- name: `environmentVariables[${index}].key`,
- placeholder: "Key",
- required: true,
- type: "text"
- },
- {
- name: `environmentVariables[${index}].value`,
- placeholder: "Value",
- required: false,
- type: "text"
- }
- ]}
- newValue={{
- hostPort: "",
- containerPort: "",
- protocol: ""
- }}
- />
-
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();
- 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 (
-
- {!emptyVolumes && (
-
- {volumes.map((_: unknown, index: number) => (
-
- ))}
-
- )}
- {emptyVolumes && No volumes.}
-
-
-
- New volume
-
-
- );
-};
-
-export default Volumes;