mirror of https://github.com/ctk-hq/ctk
Artem Golub
3 years ago
committed by
GitHub
commit
4080943699
@ -1,12 +0,0 @@
|
||||
import TextField from "../../global/FormElements/TextField";
|
||||
|
||||
const General = () => {
|
||||
return (
|
||||
<>
|
||||
<TextField label="Volume name" name="canvasConfig.node_name" />
|
||||
<TextField label="Name" name="volumeConfig.name" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default General;
|
||||
@ -1,4 +0,0 @@
|
||||
const Labels = () => {
|
||||
return <></>;
|
||||
};
|
||||
export default Labels;
|
||||
@ -0,0 +1,20 @@
|
||||
import { styled } from "@mui/joy";
|
||||
|
||||
import TextField from "../../global/FormElements/TextField";
|
||||
|
||||
const Root = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: ${({ theme }) => theme.spacing(1)};
|
||||
`;
|
||||
|
||||
const General = () => {
|
||||
return (
|
||||
<Root>
|
||||
<TextField label="Entry name" name="entryName" />
|
||||
<TextField label="Volume name" name="volumeName" />
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default General;
|
||||
@ -0,0 +1,98 @@
|
||||
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)`
|
||||
width: 140px;
|
||||
margin-top: ${({ theme }) => theme.spacing(2)};
|
||||
`;
|
||||
|
||||
const Description = styled("p")`
|
||||
margin-top: ${({ theme }) => theme.spacing(2)};
|
||||
text-align: center;
|
||||
color: #7a7a7a;
|
||||
font-size: 14px;
|
||||
`;
|
||||
|
||||
const Labels = () => {
|
||||
const formik = useFormikContext<IEditServiceForm>();
|
||||
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 (
|
||||
<Root>
|
||||
{!emptyLabels && (
|
||||
<Records>
|
||||
{labels.map((_: unknown, index: number) => (
|
||||
<Record
|
||||
key={index}
|
||||
index={index}
|
||||
fields={[
|
||||
{
|
||||
name: `labels[${index}].key`,
|
||||
placeholder: "Key",
|
||||
required: true,
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: `labels[${index}].value`,
|
||||
placeholder: "Value",
|
||||
required: true,
|
||||
type: "text"
|
||||
}
|
||||
]}
|
||||
onRemove={handleRemoveLabel}
|
||||
/>
|
||||
))}
|
||||
</Records>
|
||||
)}
|
||||
{emptyLabels && (
|
||||
<Description>
|
||||
This volume does not have any labels.
|
||||
<br />
|
||||
Click "+ New label" to add a new label.
|
||||
</Description>
|
||||
)}
|
||||
|
||||
<AddButton size="sm" variant="plain" onClick={handleNewLabel}>
|
||||
<PlusIcon className="h-4 w-4 mr-2" />
|
||||
New label
|
||||
</AddButton>
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default Labels;
|
||||
@ -0,0 +1,95 @@
|
||||
import lodash from "lodash";
|
||||
import * as yup from "yup";
|
||||
import { IEditVolumeForm, IVolumeNodeItem } from "../../../types";
|
||||
import { checkArray } from "../../../utils/forms";
|
||||
|
||||
export const validationSchema = yup.object({
|
||||
entryName: yup
|
||||
.string()
|
||||
.max(256, "Entry name should be 256 characters or less")
|
||||
.required("Entry name is required"),
|
||||
volumeName: yup
|
||||
.string()
|
||||
.max(256, "Volume name should be 256 characters or less")
|
||||
.required("Volume name is required"),
|
||||
labels: yup.array(
|
||||
yup.object({
|
||||
key: yup.string().required("Key is required"),
|
||||
value: yup.string().required("Value is required")
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
const initialValues: IEditVolumeForm = {
|
||||
entryName: "unknown",
|
||||
volumeName: "unknown",
|
||||
labels: []
|
||||
};
|
||||
|
||||
export const getInitialValues = (node?: IVolumeNodeItem): IEditVolumeForm => {
|
||||
if (!node) {
|
||||
return {
|
||||
...initialValues
|
||||
};
|
||||
}
|
||||
|
||||
const { canvasConfig, volumeConfig } = node;
|
||||
const { node_name = "" } = canvasConfig;
|
||||
const { name = "", labels } = volumeConfig;
|
||||
|
||||
const labels0: string[] = checkArray(labels, "labels");
|
||||
|
||||
return {
|
||||
...initialValues,
|
||||
entryName: node_name,
|
||||
volumeName: name,
|
||||
labels: labels0.map((label) => {
|
||||
const [key, value] = label.split(":");
|
||||
return {
|
||||
key,
|
||||
value
|
||||
};
|
||||
})
|
||||
};
|
||||
};
|
||||
|
||||
export const getFinalValues = (
|
||||
values: IEditVolumeForm,
|
||||
previous?: IVolumeNodeItem
|
||||
): IVolumeNodeItem => {
|
||||
const { labels } = values;
|
||||
|
||||
return lodash.merge(
|
||||
lodash.cloneDeep(previous) || {
|
||||
key: "volume",
|
||||
type: "VOLUME",
|
||||
inputs: [],
|
||||
outputs: [],
|
||||
config: {}
|
||||
},
|
||||
{
|
||||
canvasConfig: {
|
||||
node_name: values.entryName
|
||||
},
|
||||
volumeConfig: {
|
||||
name: values.volumeName,
|
||||
labels: labels.map((label) => `${label.key}:${label.value}`)
|
||||
}
|
||||
}
|
||||
) as any;
|
||||
};
|
||||
|
||||
export const tabs = [
|
||||
{
|
||||
name: "General",
|
||||
href: "#",
|
||||
current: true,
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "Labels",
|
||||
href: "#",
|
||||
current: false,
|
||||
hidden: false
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,8 @@
|
||||
export const checkArray = <T>(array: any, name: string): T => {
|
||||
if (!Array.isArray(array)) {
|
||||
throw new Error(
|
||||
`Looks like we encountered a bug. The current implementation expects "${name}" to be an array.`
|
||||
);
|
||||
}
|
||||
return array as unknown as T;
|
||||
};
|
||||
Loading…
Reference in New Issue