feat: add initial volume modal, types

services/frontend/src/components/Modal/Volume/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/Volume/Labels.tsx

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

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

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useFormik } from "formik";
+import { XIcon } from "@heroicons/react/outline";
+import General from "./General";
+import Labels from "./Labels";
+import { topLevelVolumeConfigInitialValues } from "../../../utils";
+import { CallbackFunction } from "../../../types";
+
+interface IModalVolume {
+  onHide: CallbackFunction;
+}
+
+const ModalVolume = (props: IModalVolume) => {
+  const { onHide } = props;
+  const [openTab, setOpenTab] = useState("General");
+
+  const formik = useFormik({
+    initialValues: {
+      ...topLevelVolumeConfigInitialValues()
+    },
+    onSubmit: () => undefined
+  });
+  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(" ");
+  };
+
+  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 volumes</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 === "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 ModalVolume;

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

@@ -34,6 +34,7 @@ import ModalConfirmDelete from "../Modal/ConfirmDelete";
 import ModalServiceCreate from "../Modal/Service/Create";
 import ModalServiceEdit from "../Modal/Service/Edit";
 import ModalNetwork from "../Modal/Network";
+import ModalVolume from "../Modal/Volume";
 import CodeEditor from "../CodeEditor";
 
 export default function Project() {
@@ -281,6 +282,10 @@ export default function Project() {
             <ModalNetwork onHide={() => setShowNetworksModal(false)} />
           ) : null}
 
+          {showVolumesModal ? (
+            <ModalVolume onHide={() => setShowVolumesModal(false)} />
+          ) : null}
+
           {showModalCreateService ? (
             <ModalServiceCreate
               onHide={() => setShowModalCreateService(false)}
@@ -391,19 +396,23 @@ export default function Project() {
                         <PlusIcon className="w-3" />
                         <span>Service</span>
                       </button>
+
                       <button
-                        className="btn-util"
+                        className="flex space-x-1 btn-util"
                         type="button"
                         onClick={() => setShowVolumesModal(true)}
                       >
-                        Volumes
+                        <PlusIcon className="w-3" />
+                        <span>Volume</span>
                       </button>
+
                       <button
-                        className="btn-util"
+                        className="flex space-x-1 btn-util"
                         type="button"
                         onClick={() => setShowNetworksModal(true)}
                       >
-                        Networks
+                        <PlusIcon className="w-3" />
+                        <span>Network</span>
                       </button>
                     </div>
                   </div>

services/frontend/src/types/index.ts

@@ -1,9 +1,8 @@
 import { AnchorId } from "@jsplumb/common";
 import { Dictionary } from "lodash";
+import { KeyValuePair } from "tailwindcss/types/config";
 import { NodeGroupType } from "./enums";
 
-type NetworkImapConfig = "subnet";
-
 type KeyValPair = {
   [x: string]: string | number;
 };
@@ -78,23 +77,16 @@ export interface IAnchor {
   position: AnchorId;
 }
 
-export interface IVolume {
+export interface IVolumeTopLevel {
-  type: string;
+  driver: string;
-  source: string;
+  driver_opts: {
-  target: string;
+    type: string;
-  read_only: boolean;
+    o: string;
-  bind: {
+    device: string;
-    propagation: string;
-    create_host_path: boolean;
-    selinux: string;
-  };
-  volume: {
-    nocopy: boolean;
-  };
-  tmpfs: {
-    size: string | number;
   };
-  consistency: string;
+  external: boolean;
+  labels: string[] | KeyValuePair;
+  name: string;
 }
 
 export interface INetworkTopLevel {
@@ -148,10 +140,26 @@ export interface IService {
   cap_drop: string[];
   cgroup_parent: string;
   command: string | string[];
-  configs: string[] | KeyValPair[];
+  configs:
+    | string[]
+    | {
+        [x: string]: {
+          source: string;
+          target: string;
+          uid: string;
+          gid: string;
+          mode: number;
+        };
+      };
   container_name: string;
   credential_spec: KeyValPair;
-  depends_on: string[] | { [key: string]: string | number | KeyValPair };
+  depends_on:
+    | string[]
+    | {
+        [key: string]: {
+          condition: string;
+        };
+      };
   deploy: {
     endpoint_mode: string;
     labels: string[] | { [key: string]: string };
@@ -291,7 +299,26 @@ export interface IService {
   };
   user: string;
   userns_mode: string;
-  volumes: string[] | IVolume;
+  volumes:
+    | string[]
+    | {
+        type: string;
+        source: string;
+        target: string;
+        read_only: boolean;
+        bind: {
+          propagation: string;
+          create_host_path: boolean;
+          selinux: string;
+        };
+        volume: {
+          nocopy: boolean;
+        };
+        tmpfs: {
+          size: string | number;
+        };
+        consistency: string;
+      };
   volumes_from: string[];
   working_dir: string;
   tag: string;

services/frontend/src/utils/index.ts

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