diff --git a/services/frontend/src/components/Modal/service/Create.tsx b/services/frontend/src/components/Modal/service/Create.tsx index 21b2f98..68051d9 100644 --- a/services/frontend/src/components/Modal/service/Create.tsx +++ b/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) => { {openTab === "General" && } {openTab === "Volumes" && } - {openTab === "Labels" && } {openTab === "Build" && } diff --git a/services/frontend/src/components/Modal/service/Edit.tsx b/services/frontend/src/components/Modal/service/Edit.tsx index b92a8f3..5a20956 100644 --- a/services/frontend/src/components/Modal/service/Edit.tsx +++ b/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) => {
{openTab === "General" && } {openTab === "Volumes" && } - {openTab === "Labels" && }
diff --git a/services/frontend/src/components/Modal/service/General.tsx b/services/frontend/src/components/Modal/service/General.tsx index b88b00c..125c176 100644 --- a/services/frontend/src/components/Modal/service/General.tsx +++ b/services/frontend/src/components/Modal/service/General.tsx @@ -52,6 +52,26 @@ const General = () => { }} /> + [ + { + name: `labels[${index}].key`, + placeholder: "Key", + required: true, + type: "text" + }, + { + name: `labels[${index}].value`, + placeholder: "Value", + required: true, + type: "text" + } + ]} + newValue={{ key: "", value: "" }} + /> + 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(); - 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 ( - - {!emptyLabels && ( - - {labels.map((_: unknown, index: number) => ( - - ))} - - )} - {emptyLabels && No labels.} - - - - New label - - - ); -}; - -export default Labels;