feat(frontend): moved labels form to general tab in volumes modal

pull/85/head
Samuel Rowe 3 years ago
parent 4f759ff3a8
commit 9bf8980fd7

@ -9,7 +9,6 @@ import {
validationSchema validationSchema
} from "./form-utils"; } from "./form-utils";
import General from "./General"; import General from "./General";
import Labels from "./Labels";
import { CallbackFunction } from "../../../types"; import { CallbackFunction } from "../../../types";
interface ICreateVolumeModalProps { interface ICreateVolumeModalProps {
@ -90,7 +89,6 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">
{openTab === "General" && <General />} {openTab === "General" && <General />}
{openTab === "Labels" && <Labels />}
</div> </div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b"> <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">

@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from "react";
import { Formik } from "formik"; import { Formik } from "formik";
import { XIcon } from "@heroicons/react/outline"; import { XIcon } from "@heroicons/react/outline";
import General from "./General"; import General from "./General";
import Labels from "./Labels";
import type { CallbackFunction, IVolumeNodeItem } from "../../../types"; import type { CallbackFunction, IVolumeNodeItem } from "../../../types";
import { import {
getFinalValues, getFinalValues,
@ -101,7 +100,6 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">
{openTab === "General" && <General />} {openTab === "General" && <General />}
{openTab === "Labels" && <Labels />}
</div> </div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b"> <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">

@ -1,6 +1,7 @@
import { styled } from "@mui/joy"; import { styled } from "@mui/joy";
import TextField from "../../global/FormElements/TextField"; import TextField from "../../global/FormElements/TextField";
import Records from "../../Records";
const Root = styled("div")` const Root = styled("div")`
display: flex; display: flex;
@ -13,6 +14,25 @@ const General = () => {
<Root> <Root>
<TextField label="Entry name" name="entryName" required={true} /> <TextField label="Entry name" name="entryName" required={true} />
<TextField label="Volume name" name="volumeName" required={true} /> <TextField label="Volume name" name="volumeName" required={true} />
<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: "" }}
/>
</Root> </Root>
); );
}; };

@ -1,37 +0,0 @@
import { styled } from "@mui/joy";
import Records from "../../Records";
const Root = styled("div")`
display: flex;
flex-direction: column;
align-items: center;
`;
const Labels = () => {
return (
<Root>
<Records
name="labels"
title=""
collapsible={false}
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: "" }}
/>
</Root>
);
};
export default Labels;

@ -78,11 +78,5 @@ export const tabs = [
href: "#", href: "#",
current: true, current: true,
hidden: false hidden: false
},
{
name: "Labels",
href: "#",
current: false,
hidden: false
} }
]; ];

Loading…
Cancel
Save