From d68de05dc28dec108f06df4c4479298414d02786 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 15:25:08 +0530 Subject: [PATCH 01/13] refactor(frontend): renamed `Volume` directory to `volume` --- .../frontend/src/components/Modal/{Volume => volume}/Create.tsx | 0 .../frontend/src/components/Modal/{Volume => volume}/Edit.tsx | 0 .../frontend/src/components/Modal/{Volume => volume}/General.tsx | 0 .../frontend/src/components/Modal/{Volume => volume}/Labels.tsx | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename services/frontend/src/components/Modal/{Volume => volume}/Create.tsx (100%) rename services/frontend/src/components/Modal/{Volume => volume}/Edit.tsx (100%) rename services/frontend/src/components/Modal/{Volume => volume}/General.tsx (100%) rename services/frontend/src/components/Modal/{Volume => volume}/Labels.tsx (100%) diff --git a/services/frontend/src/components/Modal/Volume/Create.tsx b/services/frontend/src/components/Modal/volume/Create.tsx similarity index 100% rename from services/frontend/src/components/Modal/Volume/Create.tsx rename to services/frontend/src/components/Modal/volume/Create.tsx diff --git a/services/frontend/src/components/Modal/Volume/Edit.tsx b/services/frontend/src/components/Modal/volume/Edit.tsx similarity index 100% rename from services/frontend/src/components/Modal/Volume/Edit.tsx rename to services/frontend/src/components/Modal/volume/Edit.tsx diff --git a/services/frontend/src/components/Modal/Volume/General.tsx b/services/frontend/src/components/Modal/volume/General.tsx similarity index 100% rename from services/frontend/src/components/Modal/Volume/General.tsx rename to services/frontend/src/components/Modal/volume/General.tsx diff --git a/services/frontend/src/components/Modal/Volume/Labels.tsx b/services/frontend/src/components/Modal/volume/Labels.tsx similarity index 100% rename from services/frontend/src/components/Modal/Volume/Labels.tsx rename to services/frontend/src/components/Modal/volume/Labels.tsx From c06f688cf39592537a970d063957e56e5e87d7c4 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 15:26:18 +0530 Subject: [PATCH 02/13] refactor(frontend): renamed `ModalVolumeCreate` to `CreateVolumeModal` --- .../Modal/volume/{Create.tsx => CreateVolumeModal.tsx} | 6 +++--- services/frontend/src/components/Project/index.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) rename services/frontend/src/components/Modal/volume/{Create.tsx => CreateVolumeModal.tsx} (97%) diff --git a/services/frontend/src/components/Modal/volume/Create.tsx b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx similarity index 97% rename from services/frontend/src/components/Modal/volume/Create.tsx rename to services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx index fd75afe..ccc221d 100644 --- a/services/frontend/src/components/Modal/volume/Create.tsx +++ b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx @@ -10,12 +10,12 @@ import { } from "../../../utils"; import { CallbackFunction } from "../../../types"; -interface IModalVolumeCreate { +interface ICreateVolumeModal { onHide: CallbackFunction; onAddEndpoint: CallbackFunction; } -const ModalVolumeCreate = (props: IModalVolumeCreate) => { +const CreateVolumeModal = (props: ICreateVolumeModal) => { const { onHide, onAddEndpoint } = props; const [openTab, setOpenTab] = useState("General"); const handleCreate = (values: any, formik: any) => { @@ -150,4 +150,4 @@ const ModalVolumeCreate = (props: IModalVolumeCreate) => { ); }; -export default ModalVolumeCreate; +export default CreateVolumeModal; diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx index 497a1df..2be9c96 100644 --- a/services/frontend/src/components/Project/index.tsx +++ b/services/frontend/src/components/Project/index.tsx @@ -37,8 +37,8 @@ import ModalConfirmDelete from "../Modal/ConfirmDelete"; import ModalServiceCreate from "../Modal/Service/Create"; import ModalServiceEdit from "../Modal/Service/Edit"; import ModalNetwork from "../Modal/Network"; -import ModalVolumeCreate from "../Modal/Volume/Create"; -import ModalVolumeEdit from "../Modal/Volume/Edit"; +import CreateVolumeModal from "../Modal/volume/Create"; +import ModalVolumeEdit from "../Modal/volume/Edit"; import CodeEditor from "../CodeEditor"; export default function Project() { @@ -329,7 +329,7 @@ export default function Project() { ) : null} {showVolumesModal ? ( - setShowVolumesModal(false)} onAddEndpoint={(values: any) => onAddEndpoint(values)} /> From 61344ff300368b8d50c4fdc0bb916679b5631fdc Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:09:35 +0530 Subject: [PATCH 03/13] refactor(frontend): moved `checkArray` function to utils module --- .../frontend/src/components/Modal/Service/Labels.tsx | 2 +- .../src/components/Modal/Service/form-utils.ts | 10 +--------- services/frontend/src/utils/forms.ts | 8 ++++++++ 3 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 services/frontend/src/utils/forms.ts diff --git a/services/frontend/src/components/Modal/Service/Labels.tsx b/services/frontend/src/components/Modal/Service/Labels.tsx index c7e8550..d3ac439 100644 --- a/services/frontend/src/components/Modal/Service/Labels.tsx +++ b/services/frontend/src/components/Modal/Service/Labels.tsx @@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/react/outline"; import { Button, styled } from "@mui/joy"; import { useFormikContext } from "formik"; import Record from "../../Record"; -import { IEditServiceForm, IService } from "../../../types"; +import { IEditServiceForm } from "../../../types"; const Root = styled("div")` display: flex; diff --git a/services/frontend/src/components/Modal/Service/form-utils.ts b/services/frontend/src/components/Modal/Service/form-utils.ts index 51f4be0..f469f1e 100644 --- a/services/frontend/src/components/Modal/Service/form-utils.ts +++ b/services/frontend/src/components/Modal/Service/form-utils.ts @@ -1,6 +1,7 @@ import type { IEditServiceForm, IServiceNodeItem } from "../../../types"; import * as yup from "yup"; import lodash from "lodash"; +import { checkArray } from "../../../utils/forms"; const initialValues: IEditServiceForm = { imageName: "", @@ -96,15 +97,6 @@ export const getInitialValues = (node?: IServiceNodeItem): IEditServiceForm => { labels } = serviceConfig; - const checkArray = (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; - }; - const environment0: string[] = checkArray(environment, "environment"); const volumes0: string[] = checkArray(volumes, "volumes"); const ports0: string[] = checkArray(ports, "ports"); diff --git a/services/frontend/src/utils/forms.ts b/services/frontend/src/utils/forms.ts new file mode 100644 index 0000000..931a359 --- /dev/null +++ b/services/frontend/src/utils/forms.ts @@ -0,0 +1,8 @@ +export const checkArray = (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; +}; From e0a81cbeca558faf3e38cce2534fa13ffb24a3d4 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:12:51 +0530 Subject: [PATCH 04/13] feat(frontend): created `IEditVolumeForm` interface --- services/frontend/src/types/index.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/services/frontend/src/types/index.ts b/services/frontend/src/types/index.ts index 2f3f875..059af69 100644 --- a/services/frontend/src/types/index.ts +++ b/services/frontend/src/types/index.ts @@ -377,3 +377,12 @@ export interface IEditServiceForm { value: string; }[]; } + +export interface IEditVolumeForm { + entryName: string; + volumeName: string; + labels: { + key: string; + value: string; + }[]; +} From 46f7e212b838cb572afdfd7fee3e8282cd5beacd Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:13:40 +0530 Subject: [PATCH 05/13] feat(frontend): created utilities for volume forms --- .../src/components/Modal/volume/form-utils.ts | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 services/frontend/src/components/Modal/volume/form-utils.ts diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts new file mode 100644 index 0000000..f6f7b06 --- /dev/null +++ b/services/frontend/src/components/Modal/volume/form-utils.ts @@ -0,0 +1,80 @@ +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; +}; From a7ee6738c30d78877cfe007d9089a6b84438b413 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:14:27 +0530 Subject: [PATCH 06/13] feat(frontend): updated `CreateVolumeModal` to work with new form shape --- .../Modal/volume/CreateVolumeModal.tsx | 98 +++++++------------ .../frontend/src/components/Project/index.tsx | 2 +- 2 files changed, 37 insertions(+), 63 deletions(-) diff --git a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx index ccc221d..ba11792 100644 --- a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx +++ b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx @@ -1,58 +1,48 @@ -import { useState } from "react"; +import { useCallback, useMemo, useState } from "react"; import { Formik } from "formik"; -import * as yup from "yup"; import { XIcon } from "@heroicons/react/outline"; + +import { + getFinalValues, + getInitialValues, + validationSchema +} from "./form-utils"; import General from "./General"; import Labels from "./Labels"; -import { - topLevelVolumeConfigInitialValues, - volumeConfigCanvasInitialValues -} from "../../../utils"; import { CallbackFunction } from "../../../types"; -interface ICreateVolumeModal { +interface ICreateVolumeModalProps { onHide: CallbackFunction; onAddEndpoint: CallbackFunction; } -const CreateVolumeModal = (props: ICreateVolumeModal) => { +const tabs = [ + { + name: "General", + href: "#", + current: true, + hidden: false + }, + { + name: "Labels", + href: "#", + current: false, + hidden: false + } +]; + +const classNames = (...classes: string[]) => classes.filter(Boolean).join(" "); + +const CreateVolumeModal = (props: ICreateVolumeModalProps) => { const { onHide, onAddEndpoint } = props; const [openTab, setOpenTab] = useState("General"); - const handleCreate = (values: any, formik: any) => { - onAddEndpoint(values); + + const handleCreate = useCallback((values: any, formik: any) => { + onAddEndpoint(getFinalValues(values)); formik.resetForm(); - }; - const validationSchema = yup.object({ - canvasConfig: yup.object({ - node_name: yup - .string() - .max(256, "volume name should be 256 characters or less") - .required("volume name is required") - }), - volumeConfig: yup.object({ - name: yup - .string() - .max(256, "name should be 256 characters or less") - .required("name is required") - }) - }); - const tabs = [ - { - name: "General", - href: "#", - current: true, - hidden: false - }, - { - name: "Labels", - href: "#", - current: false, - hidden: false - } - ]; - const classNames = (...classes: string[]) => { - return classes.filter(Boolean).join(" "); - }; + }, []); + + const initialValues = useMemo(() => getInitialValues(), []); return (
@@ -64,7 +54,7 @@ const CreateVolumeModal = (props: ICreateVolumeModal) => {
-

Create top level volume

+

Add top level volume

{ - handleCreate(values, formik); - }} + onSubmit={handleCreate} validationSchema={validationSchema} > {(formik) => ( @@ -133,9 +109,7 @@ const CreateVolumeModal = (props: ICreateVolumeModal) => { diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx index 2be9c96..4b4a20a 100644 --- a/services/frontend/src/components/Project/index.tsx +++ b/services/frontend/src/components/Project/index.tsx @@ -37,7 +37,7 @@ import ModalConfirmDelete from "../Modal/ConfirmDelete"; import ModalServiceCreate from "../Modal/Service/Create"; import ModalServiceEdit from "../Modal/Service/Edit"; import ModalNetwork from "../Modal/Network"; -import CreateVolumeModal from "../Modal/volume/Create"; +import CreateVolumeModal from "../Modal/volume/CreateVolumeModal"; import ModalVolumeEdit from "../Modal/volume/Edit"; import CodeEditor from "../CodeEditor"; From 3f3185aabe18f5935dcfd5dc5b56feb4344b4615 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:14:52 +0530 Subject: [PATCH 07/13] feat(frontend): updated general form to work with new form shape * Added CSS for row gap. --- .../src/components/Modal/volume/General.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/services/frontend/src/components/Modal/volume/General.tsx b/services/frontend/src/components/Modal/volume/General.tsx index 88b8f14..d2985ae 100644 --- a/services/frontend/src/components/Modal/volume/General.tsx +++ b/services/frontend/src/components/Modal/volume/General.tsx @@ -1,11 +1,19 @@ +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 ( - <> - - - + + + + ); }; From b2aff6207a9f46653495c3b19937d5bea31dfafa Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:15:34 +0530 Subject: [PATCH 08/13] feat(frontend): implemented labels form for volume modals --- .../src/components/Modal/volume/Labels.tsx | 96 ++++++++++++++++++- 1 file changed, 95 insertions(+), 1 deletion(-) diff --git a/services/frontend/src/components/Modal/volume/Labels.tsx b/services/frontend/src/components/Modal/volume/Labels.tsx index 710b9e5..b3fbab7 100644 --- a/services/frontend/src/components/Modal/volume/Labels.tsx +++ b/services/frontend/src/components/Modal/volume/Labels.tsx @@ -1,4 +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 = () => { - return <>; + 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 && ( + + This volume does not have any labels. +
+ Click "+ New label" to add a new label. + + )} + + + + New label + + + ); }; + export default Labels; From 21f8d324a9dcd08045b82fbf1c64b9fdc62f4886 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:28:34 +0530 Subject: [PATCH 09/13] refactor(frontend): renamed `ModalVolumeEdit` to `EditVolumeModal` --- .../Modal/volume/{Edit.tsx => EditVolumeModal.tsx} | 6 +++--- services/frontend/src/components/Project/index.tsx | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) rename services/frontend/src/components/Modal/volume/{Edit.tsx => EditVolumeModal.tsx} (97%) diff --git a/services/frontend/src/components/Modal/volume/Edit.tsx b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx similarity index 97% rename from services/frontend/src/components/Modal/volume/Edit.tsx rename to services/frontend/src/components/Modal/volume/EditVolumeModal.tsx index 9eaf6e6..ce98c54 100644 --- a/services/frontend/src/components/Modal/volume/Edit.tsx +++ b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx @@ -11,13 +11,13 @@ import { IVolumeTopLevel } from "../../../types"; -interface IModalVolumeEdit { +interface IEditVolumeModal { node: IVolumeNodeItem; onHide: CallbackFunction; onUpdateEndpoint: CallbackFunction; } -const ModalVolumeEdit = (props: IModalVolumeEdit) => { +const EditVolumeModal = (props: IEditVolumeModal) => { const { node, onHide, onUpdateEndpoint } = props; const [openTab, setOpenTab] = useState("General"); const [selectedNode, setSelectedNode] = useState(); @@ -163,4 +163,4 @@ const ModalVolumeEdit = (props: IModalVolumeEdit) => { ); }; -export default ModalVolumeEdit; +export default EditVolumeModal; diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx index 4b4a20a..f29ea34 100644 --- a/services/frontend/src/components/Project/index.tsx +++ b/services/frontend/src/components/Project/index.tsx @@ -9,8 +9,7 @@ import { IServiceNodeItem, IVolumeNodeItem, IServiceNodePosition, - IProject, - INetworkTopLevel + IProject } from "../../types"; import eventBus from "../../events/eventBus"; import { useMutation } from "react-query"; @@ -38,7 +37,7 @@ import ModalServiceCreate from "../Modal/Service/Create"; import ModalServiceEdit from "../Modal/Service/Edit"; import ModalNetwork from "../Modal/Network"; import CreateVolumeModal from "../Modal/volume/CreateVolumeModal"; -import ModalVolumeEdit from "../Modal/volume/Edit"; +import EditVolumeModal from "../Modal/volume/EditVolumeModal"; import CodeEditor from "../CodeEditor"; export default function Project() { @@ -361,7 +360,7 @@ export default function Project() { ) : null} {volumeToEdit ? ( - setVolumeToEdit(null)} onUpdateEndpoint={(values: any) => onUpdateEndpoint(values)} From 5ab98f7c8e1e2b6528f833417403ffdb984a443c Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:34:05 +0530 Subject: [PATCH 10/13] feat(frontend): updated labels in `ModalServiceEdit` component --- services/frontend/src/components/Modal/Service/Edit.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/frontend/src/components/Modal/Service/Edit.tsx b/services/frontend/src/components/Modal/Service/Edit.tsx index 4d0768b..06c765a 100644 --- a/services/frontend/src/components/Modal/Service/Edit.tsx +++ b/services/frontend/src/components/Modal/Service/Edit.tsx @@ -80,7 +80,7 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
-

Update service

+

Edit service

From efba82a1cbb76ecf07163f53283b5047d92468e1 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:34:27 +0530 Subject: [PATCH 11/13] refactor(frontend): moved `tabs` constant to form utils --- .../Modal/volume/CreateVolumeModal.tsx | 16 +--------------- .../src/components/Modal/volume/form-utils.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx index ba11792..6d017ed 100644 --- a/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx +++ b/services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx @@ -5,6 +5,7 @@ import { XIcon } from "@heroicons/react/outline"; import { getFinalValues, getInitialValues, + tabs, validationSchema } from "./form-utils"; import General from "./General"; @@ -16,21 +17,6 @@ interface ICreateVolumeModalProps { onAddEndpoint: CallbackFunction; } -const tabs = [ - { - name: "General", - href: "#", - current: true, - hidden: false - }, - { - name: "Labels", - href: "#", - current: false, - hidden: false - } -]; - const classNames = (...classes: string[]) => classes.filter(Boolean).join(" "); const CreateVolumeModal = (props: ICreateVolumeModalProps) => { diff --git a/services/frontend/src/components/Modal/volume/form-utils.ts b/services/frontend/src/components/Modal/volume/form-utils.ts index f6f7b06..da2aaf3 100644 --- a/services/frontend/src/components/Modal/volume/form-utils.ts +++ b/services/frontend/src/components/Modal/volume/form-utils.ts @@ -78,3 +78,18 @@ export const getFinalValues = ( } ) as any; }; + +export const tabs = [ + { + name: "General", + href: "#", + current: true, + hidden: false + }, + { + name: "Labels", + href: "#", + current: false, + hidden: false + } +]; From 51870c9e5f53a6f142038799a225d6c82d8e337d Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:34:46 +0530 Subject: [PATCH 12/13] feat(frontend): updated edit volume modal to use new form state shape --- .../Modal/volume/EditVolumeModal.tsx | 80 +++++-------------- 1 file changed, 21 insertions(+), 59 deletions(-) diff --git a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx index ce98c54..a17f6a4 100644 --- a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx +++ b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx @@ -1,15 +1,15 @@ -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Formik } from "formik"; -import * as yup from "yup"; import { XIcon } from "@heroicons/react/outline"; import General from "./General"; import Labels from "./Labels"; +import type { CallbackFunction, IVolumeNodeItem } from "../../../types"; import { - CallbackFunction, - ICanvasConfig, - IVolumeNodeItem, - IVolumeTopLevel -} from "../../../types"; + getFinalValues, + getInitialValues, + tabs, + validationSchema +} from "./form-utils"; interface IEditVolumeModal { node: IVolumeNodeItem; @@ -17,47 +17,14 @@ interface IEditVolumeModal { onUpdateEndpoint: CallbackFunction; } +const classNames = (...classes: string[]) => { + return classes.filter(Boolean).join(" "); +}; + const EditVolumeModal = (props: IEditVolumeModal) => { const { node, onHide, onUpdateEndpoint } = props; const [openTab, setOpenTab] = useState("General"); const [selectedNode, setSelectedNode] = useState(); - const handleUpdate = (values: any) => { - const updated = { ...selectedNode }; - updated.canvasConfig = values.canvasConfig; - updated.volumeConfig = values.volumeConfig; - onUpdateEndpoint(updated); - }; - const validationSchema = yup.object({ - canvasConfig: yup.object({ - node_name: yup - .string() - .max(256, "volume name should be 256 characters or less") - .required("volume name is required") - }), - volumeConfig: yup.object({ - name: yup - .string() - .max(256, "name should be 256 characters or less") - .required("name is required") - }) - }); - const tabs = [ - { - name: "General", - href: "#", - current: true, - hidden: false - }, - { - name: "Labels", - href: "#", - current: false, - hidden: false - } - ]; - const classNames = (...classes: string[]) => { - return classes.filter(Boolean).join(" "); - }; useEffect(() => { if (node) { @@ -65,6 +32,12 @@ const EditVolumeModal = (props: IEditVolumeModal) => { } }, [node]); + const handleUpdate = (values: any) => { + onUpdateEndpoint(getFinalValues(values, selectedNode)); + }; + + const initialValues = useMemo(() => getInitialValues(), []); + return (
@@ -75,9 +48,7 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
-

- Update top level volumes -

+

Edit top level volumes

From eff3e26e66598eab81b443f51627899d403be7e5 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Tue, 26 Jul 2022 17:56:31 +0530 Subject: [PATCH 13/13] fix(frontend): fixed missing argument to `getInitialValues` in `EditVolumeModal` --- .../src/components/Modal/volume/EditVolumeModal.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx index a17f6a4..6c1aba4 100644 --- a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx +++ b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx @@ -36,7 +36,10 @@ const EditVolumeModal = (props: IEditVolumeModal) => { onUpdateEndpoint(getFinalValues(values, selectedNode)); }; - const initialValues = useMemo(() => getInitialValues(), []); + const initialValues = useMemo( + () => getInitialValues(selectedNode), + [selectedNode] + ); return (
@@ -107,9 +110,7 @@ const EditVolumeModal = (props: IEditVolumeModal) => {