aiden
/
ctk
mirror of https://github.com/ctk-hq/ctk
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: service modal yup, breakout component, cleanup

Browse Source
pull/69/head^2
Artem Golub 3 years ago
parent de75971fb0
commit 5a35535eae
7 changed files with 192 additions and 212 deletions
Show Stats Download Patch File Download Diff File

153
services/frontend/src/components/Modal/Service/Create.tsx
Unescape Escape View File

@ -1,5 +1,6 @@
import { useState } from "react";
import { useFormik } from "formik";
import { Formik } from "formik";
import * as yup from "yup";
import { XIcon } from "@heroicons/react/outline";
import General from "./General";
import Environment from "./Environment";
@ -16,22 +17,23 @@ interface IModalServiceProps {
const ModalServiceCreate = (props: IModalServiceProps) => {
const { onHide, onAddEndpoint } = props;
const [openTab, setOpenTab] = useState("General");
const formik = useFormik({
initialValues: {
canvasConfig: {
...serviceConfigCanvasInitialValues()
},
serviceConfig: {
container_name: ""
},
key: "service",
type: "SERVICE",
inputs: ["op_source"],
outputs: [],
config: {}
},
onSubmit: () => undefined
const handleCreate = (values: any, formik: any) => {
onAddEndpoint(values);
formik.resetForm();
};
const validationSchema = yup.object({
canvasConfig: yup.object({
service_name: yup
.string()
.max(256, "service name should be 256 characters or less")
.required("service name is required")
}),
serviceConfig: yup.object({
container_name: yup
.string()
.max(256, "container name should be 256 characters or less")
.required("container name is required")
})
});
const tabs = [
{
@ -84,56 +86,77 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
</button>
</div>
<div>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
</div>
<Formik
initialValues={{
canvasConfig: {
...serviceConfigCanvasInitialValues()
},
serviceConfig: {
container_name: ""
},
key: "service",
type: "SERVICE",
inputs: ["op_source"],
outputs: [],
config: {}
}}
enableReinitialize={true}
onSubmit={(values, formik) => {
handleCreate(values, formik);
}}
validationSchema={validationSchema}
>
{(formik) => (
<>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
</div>
<div className="relative px-4 py-3 flex-auto">
<form onSubmit={formik.handleSubmit}>
{openTab === "General" && <General formik={formik} />}
{openTab === "Environment" && <Environment formik={formik} />}
{openTab === "Volumes" && <Volumes formik={formik} />}
{openTab === "Labels" && <Labels formik={formik} />}
</form>
</div>
</div>
<div className="relative px-4 py-3 flex-auto">
{openTab === "General" && <General />}
{openTab === "Environment" && <Environment />}
{openTab === "Volumes" && <Volumes />}
{openTab === "Labels" && <Labels />}
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
<button
className="btn-util"
type="button"
onClick={() => {
onAddEndpoint(formik.values);
formik.resetForm();
}}
>
Add
</button>
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
<button
className="btn-util"
type="button"
onClick={() => {
onAddEndpoint(formik.values);
formik.resetForm();
}}
>
Add
</button>
</div>
</>
)}
</Formik>
</div>
</div>
</div>

178
services/frontend/src/components/Modal/Service/Edit.tsx
Unescape Escape View File

@ -1,17 +1,12 @@
import { useState, useEffect } from "react";
import { useFormik } from "formik";
import { Formik } from "formik";
import * as yup from "yup";
import { XIcon } from "@heroicons/react/outline";
import General from "./General";
import Environment from "./Environment";
import Volumes from "./Volumes";
import Labels from "./Labels";
import { serviceConfigCanvasInitialValues } from "../../../utils";
import {
CallbackFunction,
ICanvasConfig,
IServiceNodeItem,
IService
} from "../../../types";
import { CallbackFunction, IServiceNodeItem } from "../../../types";
interface IModalServiceProps {
node: IServiceNodeItem;
@ -23,16 +18,26 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
const { node, onHide, onUpdateEndpoint } = props;
const [openTab, setOpenTab] = useState("General");
const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
const formik = useFormik({
initialValues: {
canvasConfig: {
...serviceConfigCanvasInitialValues()
},
serviceConfig: {
container_name: ""
}
},
onSubmit: () => undefined
const handleUpdate = (values: any) => {
const updated = { ...selectedNode };
updated.canvasConfig = values.canvasConfig;
updated.serviceConfig = values.serviceConfig;
onUpdateEndpoint(updated);
};
const validationSchema = yup.object({
canvasConfig: yup.object({
service_name: yup
.string()
.max(256, "service name should be 256 characters or less")
.required("service name is required")
}),
serviceConfig: yup.object({
container_name: yup
.string()
.max(256, "container name should be 256 characters or less")
.required("container name is required")
})
});
const tabs = [
{
@ -70,25 +75,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
}
}, [node]);
useEffect(() => {
formik.resetForm();
if (selectedNode) {
formik.initialValues.canvasConfig = {
...selectedNode.canvasConfig
} as ICanvasConfig;
formik.initialValues.serviceConfig = {
...selectedNode.serviceConfig
} as IService;
}
}, [selectedNode]);
useEffect(() => {
return () => {
formik.resetForm();
};
}, []);
return (
<div className="fixed z-50 inset-0 overflow-y-auto">
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
@ -110,58 +96,76 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
</button>
</div>
<div>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
</div>
<div className="relative px-4 py-3 flex-auto">
<form onSubmit={formik.handleSubmit}>
{openTab === "General" && <General formik={formik} />}
{openTab === "Environment" && <Environment formik={formik} />}
{openTab === "Volumes" && <Volumes formik={formik} />}
{openTab === "Labels" && <Labels formik={formik} />}
</form>
</div>
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
<button
className="btn-util"
type="button"
onClick={() => {
const updated = { ...selectedNode };
updated.canvasConfig = formik.values.canvasConfig;
updated.serviceConfig = formik.values.serviceConfig;
onUpdateEndpoint(updated);
{selectedNode && (
<Formik
initialValues={{
canvasConfig: {
...selectedNode.canvasConfig
},
serviceConfig: {
...selectedNode.serviceConfig
}
}}
enableReinitialize={true}
onSubmit={(values) => {
handleUpdate(values);
}}
validationSchema={validationSchema}
>
Update
</button>
</div>
{(formik) => (
<>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav
className="-mb-px flex space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
</div>
<div className="relative px-4 py-3 flex-auto">
{openTab === "General" && <General />}
{openTab === "Environment" && <Environment />}
{openTab === "Volumes" && <Volumes />}
{openTab === "Labels" && <Labels />}
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
<button
className="btn-util"
type="button"
onClick={() => {
formik.submitForm();
}}
>
Update
</button>
</div>
</>
)}
</Formik>
)}
</div>
</div>
</div>

5
services/frontend/src/components/Modal/Service/Environment.tsx
Unescape Escape View File

@ -1,6 +1,5 @@
const Environment = (props: any) => {
const { formik } = props;
const Environment = () => {
return <></>;
};
export default Environment;

54
services/frontend/src/components/Modal/Service/General.tsx
Unescape Escape View File

@ -1,56 +1,12 @@
const General = (props: any) => {
const { formik } = props;
import TextField from "../../global/FormElements/InputField";
const General = () => {
return (
<>
<div className="relative pb-3 flex-auto">
<div className="grid grid-cols-6 gap-4">
<div className="col-span-3">
<label
htmlFor="service_name"
className="block text-xs font-medium text-gray-700"
>
Service name
</label>
<div className="mt-1">
<input
id="service_name"
name="canvasConfig.service_name"
type="text"
autoComplete="none"
className="input-util"
onChange={formik.handleChange}
value={formik.values.canvasConfig.service_name}
/>
</div>
</div>
</div>
</div>
<div className="relative pb-3 flex-auto">
<div className="grid grid-cols-6 gap-4">
<div className="col-span-3">
<label
htmlFor="container_name"
className="block text-xs font-medium text-gray-700"
>
Container name
</label>
<div className="mt-1">
<input
id="container_name"
name="serviceConfig.container_name"
type="text"
autoComplete="none"
className="input-util"
onChange={formik.handleChange}
value={formik.values.serviceConfig.container_name}
/>
</div>
</div>
</div>
</div>
<TextField label="Service name" name="canvasConfig.service_name" />
<TextField label="Container name" name="serviceConfig.container_name" />
</>
);
};
export default General;

5
services/frontend/src/components/Modal/Service/Labels.tsx
Unescape Escape View File

@ -1,6 +1,5 @@
const Labels = (props: any) => {
const { formik } = props;
const Labels = () => {
return <></>;
};
export default Labels;

5
services/frontend/src/components/Modal/Service/Volumes.tsx
Unescape Escape View File

@ -1,6 +1,5 @@
const Volumes = (props: any) => {
const { formik } = props;
const Volumes = () => {
return <></>;
};
export default Volumes;

4
services/frontend/src/components/Modal/Volume/Create.tsx
Unescape Escape View File

@ -15,7 +15,7 @@ interface IModalVolumeCreate {
const ModalVolumeCreate = (props: IModalVolumeCreate) => {
const { onHide, onAddEndpoint } = props;
const [openTab, setOpenTab] = useState("General");
const handleSave = (values: any, formik: any) => {
const handleCreate = (values: any, formik: any) => {
onAddEndpoint(values);
formik.resetForm();
};
@ -79,7 +79,7 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => {
}}
enableReinitialize={true}
onSubmit={(values, formik) => {
handleSave(values, formik);
handleCreate(values, formik);
}}
validationSchema={validationSchema}
>

Write Preview
Loading…
Cancel
Save