feat: add base networks modal and interfaces

services/frontend/src/components/Modal/Network/General.tsx

@@ -0,0 +1,32 @@
+const General = (props: any) => {
+  const { formik } = props;
+
+  return (
+    <>
+      <div className="relative pb-3 flex-auto">
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-3">
+            <label
+              htmlFor="name"
+              className="block text-xs font-medium text-gray-700"
+            >
+              Name
+            </label>
+            <div className="mt-1">
+              <input
+                id="name"
+                name="name"
+                type="text"
+                autoComplete="none"
+                className="input-util"
+                onChange={formik.handleChange}
+                value={formik.values.name}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default General;

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

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

services/frontend/src/components/Modal/Network/Labels.tsx

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

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

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { useFormik } from "formik";
+import { XIcon } from "@heroicons/react/outline";
+import General from "./General";
+import IPam from "./IPam";
+import Labels from "./Labels";
+import { topLevelNetworkConfigInitialValues } from "../../../utils";
+import { CallbackFunction } from "../../../types";
+
+interface IModalNetworkProps {
+  onHide: CallbackFunction;
+}
+
+const ModalNetwork = (props: IModalNetworkProps) => {
+  const { onHide } = props;
+  const [openTab, setOpenTab] = useState("General");
+
+  const formik = useFormik({
+    initialValues: {
+      ...topLevelNetworkConfigInitialValues()
+    },
+    onSubmit: () => undefined
+  });
+  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(" ");
+  };
+
+  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">
+        <div
+          onClick={onHide}
+          className="opacity-25 fixed inset-0 z-40 bg-black"
+        ></div>
+        <div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
+          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
+              <h3 className="text-sm font-semibold">Top level networks</h3>
+              <button
+                className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
+                onClick={onHide}
+              >
+                <span className="block outline-none focus:outline-none">
+                  <XIcon className="w-4" />
+                </span>
+              </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 === "IPam" && <IPam 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={() => {
+                  formik.resetForm();
+                }}
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalNetwork;

services/frontend/src/components/Project/index.tsx

@@ -33,6 +33,7 @@ import Spinner from "../global/Spinner";
 import ModalConfirmDelete from "../Modal/ConfirmDelete";
 import ModalServiceCreate from "../Modal/Service/Create";
 import ModalServiceEdit from "../Modal/Service/Edit";
+import ModalNetwork from "../Modal/Network";
 import CodeEditor from "../CodeEditor";
 
 export default function Project() {
@@ -276,6 +277,10 @@ export default function Project() {
     if (!error) {
       return (
         <>
+          {showNetworksModal ? (
+            <ModalNetwork onHide={() => setShowNetworksModal(false)} />
+          ) : null}
+
           {showModalCreateService ? (
             <ModalServiceCreate
               onHide={() => setShowModalCreateService(false)}

services/frontend/src/types/index.ts

@@ -2,6 +2,8 @@ import { AnchorId } from "@jsplumb/common";
 import { Dictionary } from "lodash";
 import { NodeGroupType } from "./enums";
 
+type NetworkImapConfig = "subnet";
+
 type KeyValPair = {
   [x: string]: string | number;
 };
@@ -95,6 +97,31 @@ export interface IVolume {
   consistency: string;
 }
 
+export interface INetworkTopLevel {
+  driver: string;
+  driver_opts: KeyValPair;
+  attachable: boolean;
+  enable_ipv6: boolean;
+  ipam: {
+    driver: string;
+    config: {
+      subnet: string;
+      ip_range: string;
+      gateway: string;
+      aux_addresses: {
+        host1: string;
+        host2: string;
+        host3: string;
+      };
+    }[];
+    options: KeyValPair;
+  };
+  internal: boolean;
+  labels: string[] | KeyValPair;
+  external: boolean;
+  name: string;
+}
+
 export interface IService {
   build: {
     context: string;

services/frontend/src/utils/index.ts

@@ -15,7 +15,8 @@ import {
   IClientNodeItem,
   INodeLibraryItem,
   INodeGroup,
-  ICanvasConfig
+  ICanvasConfig,
+  INetworkTopLevel
 } from "../types";
 
 export function ensure<T>(
@@ -172,6 +173,13 @@ export const getNodeKeyFromConnectionId = (uuid: string) => {
   return key;
 };
 
+export const topLevelNetworkConfigInitialValues =
+  (): Partial<INetworkTopLevel> => {
+    return {
+      name: "unnamed"
+    };
+  };
+
 export const canvasConfigInitialValues = (): ICanvasConfig => {
   return {
     service_name: "unnamed"