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;