fix: creating and updating a network

services/frontend/src/components/Modal/network/CreateNetworkModal.tsx

@@ -16,19 +16,13 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
 ): ReactElement => {
   const { onCreateNetwork } = props;
   const [openTab, setOpenTab] = useState("General");
-
-  const handleCreate = (values: any, formik: any) => {
-    onCreateNetwork(values);
-    formik.resetForm();
-  };
-
   const initialValues = useMemo(() => getInitialValues(), []);
 
   return (
     <Formik
       initialValues={initialValues}
       enableReinitialize={true}
-      onSubmit={handleCreate}
+      onSubmit={onCreateNetwork}
       validationSchema={validationSchema}
     >
       {(formik) => (

services/frontend/src/components/Modal/network/EditNetworkModal.tsx

@@ -1,15 +1,11 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Formik } from "formik";
-import * as yup from "yup";
 import { TrashIcon } from "@heroicons/react/outline";
 import General from "./General";
 import IPam from "./IPam";
 import Labels from "./Labels";
-import {
-  CallbackFunction,
-  ICanvasConfig,
-  INetworkTopLevel
-} from "../../../types";
+import { CallbackFunction } from "../../../types";
+import { getInitialValues, tabs, validationSchema } from "./form-utils";
 
 interface IEditNetworkModalProps {
   onUpdateNetwork: CallbackFunction;
@@ -20,64 +16,16 @@ interface IEditNetworkModalProps {
 const EditNetworkModal = (props: IEditNetworkModalProps) => {
   const { onUpdateNetwork, onDeleteNetwork, network } = props;
   const [openTab, setOpenTab] = useState("General");
-  const handleUpdate = (values: any) => {
-    const updated = { ...network };
-    updated.canvasConfig = values.canvasConfig;
-    updated.networkConfig = values.networkConfig;
-    onUpdateNetwork(updated);
-  };
-  const validationSchema = yup.object({
-    canvasConfig: yup.object({
-      node_name: yup
-        .string()
-        .max(256, "network name should be 256 characters or less")
-        .required("network name is required")
-    }),
-    networkConfig: 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: "Ipam",
-      href: "#",
-      current: false,
-      hidden: false
-    },
-    {
-      name: "Labels",
-      href: "#",
-      current: false,
-      hidden: false
-    }
-  ];
   const classNames = (...classes: string[]) => {
     return classes.filter(Boolean).join(" ");
   };
+  const initialValues = useMemo(() => getInitialValues(network), [network]);
 
   return (
     <Formik
-      initialValues={{
-        canvasConfig: {
-          ...network.canvasConfig
-        } as ICanvasConfig,
-        networkConfig: {
-          ...network.networkConfig
-        } as INetworkTopLevel
-      }}
+      initialValues={initialValues}
       enableReinitialize={true}
-      onSubmit={(values) => {
-        handleUpdate(values);
-      }}
+      onSubmit={onUpdateNetwork}
       validationSchema={validationSchema}
     >
       {(formik) => (

services/frontend/src/components/Modal/network/IPam.tsx

@@ -1,5 +1,5 @@
-import { styled } from "@mui/joy";
 import { ReactElement } from "react";
+import { styled } from "@mui/joy";
 
 import TextField from "../../global/FormElements/TextField";
 import { IFieldType } from "../../Record";

services/frontend/src/components/Modal/network/form-utils.ts

@@ -1,6 +1,7 @@
 import lodash from "lodash";
 import * as yup from "yup";
 import { IEditNetworkForm, INetworkNodeItem } from "../../../types";
+import { checkArray } from "../../../utils/forms";
 
 export const validationSchema = yup.object({
   entryName: yup
@@ -86,7 +87,8 @@ export const getInitialValues = (node?: INetworkNodeItem): IEditNetworkForm => {
 
   const { canvasConfig, networkConfig } = node;
   const { node_name = "" } = canvasConfig;
-  const { name = "", ipam } = networkConfig;
+  const { name = "", ipam, labels } = networkConfig;
+  const labels0: string[] = checkArray(labels, "labels");
 
   return {
     ...initialValues,
@@ -100,6 +102,13 @@ export const getInitialValues = (node?: INetworkNodeItem): IEditNetworkForm => {
         key,
         value: ipam.options[key].toString()
       };
+    }),
+    labels: labels0.map((label) => {
+      const [key, value] = label.split(":");
+      return {
+        key,
+        value
+      };
     })
   };
 };
@@ -108,6 +117,8 @@ export const getFinalValues = (
   values: IEditNetworkForm,
   previous?: INetworkNodeItem
 ): INetworkNodeItem => {
+  const { labels } = values;
+
   return lodash.merge(
     lodash.cloneDeep(previous) || {
       key: "network",
@@ -121,7 +132,8 @@ export const getFinalValues = (
         node_name: values.entryName
       },
       networkConfig: {
-        name: values.networkName
+        name: values.networkName,
+        labels: labels.map((label) => `${label.key}:${label.value}`)
       }
     }
   ) as any;

services/frontend/src/components/Modal/network/index.tsx

@@ -4,6 +4,7 @@ import CreateNetworkModal from "./CreateNetworkModal";
 import { CallbackFunction } from "../../../types";
 import EditNetworkModal from "./EditNetworkModal";
 import { attachUUID } from "../../../utils";
+import { getFinalValues } from "./form-utils";
 
 interface IModalNetworkProps {
   networks: Record<string, any>;
@@ -23,17 +24,19 @@ const ModalNetwork = (props: IModalNetworkProps) => {
   } = props;
   const [selectedNetwork, setSelectedNetwork] = useState<any | null>();
   const handleCreate = (values: any) => {
-    const uniqueKey = attachUUID(values.key);
+    const finalValues = getFinalValues(values);
+    const uniqueKey = attachUUID(finalValues.key);
     const network = {
-      ...values,
+      ...finalValues,
       key: uniqueKey
     };
     onCreateNetwork(network);
     setSelectedNetwork(network);
   };
   const handleUpdate = (values: any) => {
-    onUpdateNetwork(values);
-    setSelectedNetwork(values);
+    const finalValues = getFinalValues(values, selectedNetwork);
+    onUpdateNetwork(finalValues);
+    setSelectedNetwork(finalValues);
   };
   const handleDelete = () => {
     onDeleteNetwork(selectedNetwork.key);