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

feat(frontend): updated create/edit tab forms to use new state shape

Browse Source
pull/75/head
Samuel Rowe 3 years ago
parent cae905bf4e
commit 379de7c3e8
4 changed files with 58 additions and 66 deletions
Show Stats Download Patch File Download Diff File

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

@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline";
import { Button, styled } from "@mui/joy"; import { Button, styled } from "@mui/joy";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import Record from "../../Record"; import Record from "../../Record";
import { IService } from "../../../types"; import { IEditServiceForm } from "../../../types";
const Root = styled("div")` const Root = styled("div")`
display: flex; display: flex;
@ -30,51 +30,50 @@ const Description = styled("p")`
`; `;
const Environment = () => { const Environment = () => {
const formik = useFormikContext<{ const formik = useFormikContext<IEditServiceForm>();
serviceConfig: IService; const { environmentVariables } = formik.values;
}>();
const environment = (formik.values.serviceConfig.environment as []) || [];
const handleNewEnvironmentVariable = useCallback(() => { const handleNewEnvironmentVariable = useCallback(() => {
formik.setFieldValue(`serviceConfig.environment[${environment.length}]`, { formik.setFieldValue(
key: "", `environmentVariables[${environmentVariables.length}]`,
value: "" {
}); key: "",
value: ""
}
);
}, [formik]); }, [formik]);
const handleRemoveEnvironmentVariable = useCallback( const handleRemoveEnvironmentVariable = useCallback(
(index: number) => { (index: number) => {
const newEnvironmentVariables = environment.filter( const newEnvironmentVariables = environmentVariables.filter(
(_: unknown, currentIndex: number) => currentIndex != index (_: unknown, currentIndex: number) => currentIndex != index
); );
formik.setFieldValue( formik.setFieldValue("environmentVariables", newEnvironmentVariables);
`serviceConfig.environment`,
newEnvironmentVariables
);
}, },
[formik] [formik]
); );
const emptyEnvironmentVariables = const emptyEnvironmentVariables =
environment && environment.length === 0 ? true : false; environmentVariables && environmentVariables.length === 0 ? true : false;
return ( return (
<Root> <Root>
{!emptyEnvironmentVariables && ( {!emptyEnvironmentVariables && (
<Records> <Records>
{environment.map((_: unknown, index: number) => ( {environmentVariables.map((_: unknown, index: number) => (
<Record <Record
key={index} key={index}
index={index} index={index}
formik={formik}
fields={[ fields={[
{ {
name: `serviceConfig.environment[${index}].key`, name: `environmentVariables[${index}].key`,
placeholder: "Key" placeholder: "Key",
required: true
}, },
{ {
name: `serviceConfig.environment[${index}].value`, name: `environmentVariables[${index}].value`,
placeholder: "Value" placeholder: "Value",
required: true
} }
]} ]}
onRemove={handleRemoveEnvironmentVariable} onRemove={handleRemoveEnvironmentVariable}

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

@ -4,7 +4,7 @@ import { PlusIcon } from "@heroicons/react/outline";
import { Button, styled } from "@mui/joy"; import { Button, styled } from "@mui/joy";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import Record from "../../Record"; import Record from "../../Record";
import { IService } from "../../../types"; import { IEditServiceForm } from "../../../types";
const Root = styled("div")` const Root = styled("div")`
display: flex; display: flex;
@ -38,66 +38,63 @@ const GroupTitle = styled("h5")`
`; `;
const General = () => { const General = () => {
const formik = useFormikContext<{ const formik = useFormikContext<IEditServiceForm>();
serviceConfig: IService; const { ports } = formik.values;
}>();
const labels = (formik.values.serviceConfig.labels as []) || [];
const handleNewLabel = useCallback(() => { const handleNewPort = useCallback(() => {
formik.setFieldValue(`serviceConfig.labels[${labels.length}]`, { formik.setFieldValue(`ports[${ports.length}]`, {
key: "", key: "",
value: "" value: ""
}); });
}, [formik]); }, [formik]);
const handleRemoveLabel = useCallback( const handleRemovePort = useCallback(
(index: number) => { (index: number) => {
const newLabels = labels.filter( const newPorts = ports.filter(
(_: unknown, currentIndex: number) => currentIndex != index (_: unknown, currentIndex: number) => currentIndex != index
); );
formik.setFieldValue(`serviceConfig.labels`, newLabels); formik.setFieldValue(`ports`, newPorts);
}, },
[formik] [formik]
); );
const emptyLabels = labels && labels.length === 0 ? true : false; const emptyPorts = ports && ports.length === 0 ? true : false;
return ( return (
<> <>
<TextField label="Service name" name="canvasConfig.node_name" /> <TextField label="Service name" name="serviceName" required={true} />
<TextField label="Container name" name="serviceConfig.container_name" /> <TextField label="Container name" name="containerName" required={true} />
<GroupTitle>Ports</GroupTitle> <GroupTitle>Ports</GroupTitle>
<Root> <Root>
{!emptyLabels && ( {!emptyPorts && (
<Records> <Records>
{labels.map((_: unknown, index: number) => ( {ports.map((_: unknown, index: number) => (
<Record <Record
key={index} key={index}
index={index} index={index}
formik={formik}
fields={[ fields={[
{ {
name: `serviceConfig.ports[${index}].hostPort`, name: `ports[${index}].hostPort`,
placeholder: "Host Port", placeholder: "Host Port",
required: true required: true
}, },
{ {
name: `serviceConfig.ports[${index}].containerPort`, name: `ports[${index}].containerPort`,
placeholder: "Container Port" placeholder: "Container Port"
}, },
{ {
name: `serviceConfig.ports[${index}].protocol`, name: `ports[${index}].protocol`,
placeholder: "Protocol" placeholder: "Protocol"
} }
]} ]}
onRemove={handleRemoveLabel} onRemove={handleRemovePort}
/> />
))} ))}
</Records> </Records>
)} )}
{emptyLabels && ( {emptyPorts && (
<Description> <Description>
This service does not have any ports. This service does not have any ports.
<br /> <br />
@ -105,7 +102,7 @@ const General = () => {
</Description> </Description>
)} )}
<AddButton size="sm" variant="plain" onClick={handleNewLabel}> <AddButton size="sm" variant="plain" onClick={handleNewPort}>
<PlusIcon className="h-4 w-4 mr-2" /> <PlusIcon className="h-4 w-4 mr-2" />
New port New port
</AddButton> </AddButton>

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

@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline";
import { Button, styled } from "@mui/joy"; import { Button, styled } from "@mui/joy";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import Record from "../../Record"; import Record from "../../Record";
import { IService } from "../../../types"; import { IEditServiceForm, IService } from "../../../types";
const Root = styled("div")` const Root = styled("div")`
display: flex; display: flex;
@ -30,13 +30,11 @@ const Description = styled("p")`
`; `;
const Labels = () => { const Labels = () => {
const formik = useFormikContext<{ const formik = useFormikContext<IEditServiceForm>();
serviceConfig: IService; const { labels } = formik.values;
}>();
const labels = (formik.values.serviceConfig.labels as []) || [];
const handleNewLabel = useCallback(() => { const handleNewLabel = useCallback(() => {
formik.setFieldValue(`serviceConfig.labels[${labels.length}]`, { formik.setFieldValue(`labels[${labels.length}]`, {
key: "", key: "",
value: "" value: ""
}); });
@ -47,7 +45,7 @@ const Labels = () => {
const newLabels = labels.filter( const newLabels = labels.filter(
(_: unknown, currentIndex: number) => currentIndex != index (_: unknown, currentIndex: number) => currentIndex != index
); );
formik.setFieldValue(`serviceConfig.labels`, newLabels); formik.setFieldValue(`labels`, newLabels);
}, },
[formik] [formik]
); );
@ -62,15 +60,16 @@ const Labels = () => {
<Record <Record
key={index} key={index}
index={index} index={index}
formik={formik}
fields={[ fields={[
{ {
name: `serviceConfig.labels[${index}].key`, name: `labels[${index}].key`,
placeholder: "Key" placeholder: "Key",
required: true
}, },
{ {
name: `serviceConfig.labels[${index}].value`, name: `labels[${index}].value`,
placeholder: "Value" placeholder: "Value",
required: true
} }
]} ]}
onRemove={handleRemoveLabel} onRemove={handleRemoveLabel}

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

@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline";
import { Button, styled } from "@mui/joy"; import { Button, styled } from "@mui/joy";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import Record from "../../Record"; import Record from "../../Record";
import { IService } from "../../../types"; import { IEditServiceForm } from "../../../types";
const Root = styled("div")` const Root = styled("div")`
display: flex; display: flex;
@ -30,13 +30,11 @@ const Description = styled("p")`
`; `;
const Volumes = () => { const Volumes = () => {
const formik = useFormikContext<{ const formik = useFormikContext<IEditServiceForm>();
serviceConfig: IService; const { volumes } = formik.values;
}>();
const volumes = (formik.values.serviceConfig.volumes as []) || [];
const handleNewVolume = useCallback(() => { const handleNewVolume = useCallback(() => {
formik.setFieldValue(`serviceConfig.volumes[${volumes.length}]`, { formik.setFieldValue(`volumes[${volumes.length}]`, {
key: "", key: "",
value: "" value: ""
}); });
@ -47,7 +45,7 @@ const Volumes = () => {
const newVolumes = volumes.filter( const newVolumes = volumes.filter(
(_: unknown, currentIndex: number) => currentIndex != index (_: unknown, currentIndex: number) => currentIndex != index
); );
formik.setFieldValue(`serviceConfig.volumes`, newVolumes); formik.setFieldValue(`volumes`, newVolumes);
}, },
[formik] [formik]
); );
@ -62,19 +60,18 @@ const Volumes = () => {
<Record <Record
key={index} key={index}
index={index} index={index}
formik={formik}
fields={[ fields={[
{ {
name: `serviceConfig.volumes[${index}].name`, name: `volumes[${index}].name`,
placeholder: "Name", placeholder: "Name",
required: true required: true
}, },
{ {
name: `serviceConfig.volumes[${index}].key`, name: `volumes[${index}].key`,
placeholder: "Container path" placeholder: "Container path"
}, },
{ {
name: `serviceConfig.volumes[${index}].value`, name: `volumes[${index}].value`,
placeholder: "Access mode" placeholder: "Access mode"
} }
]} ]}

Write Preview
Loading…
Cancel
Save