From 43e18f93be226d84c0637e6ed09b59fe04aaa6e3 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sat, 2 Apr 2022 15:29:10 -0700
Subject: [PATCH] config deployment mount repo

---
 .../builds/tabs/build-config/CliBuild.tsx     |  2 +-
 .../builds/tabs/git-config/OnClone.tsx        | 67 +++++++------
 .../deployment/tabs/config/Config.tsx         | 47 ++++++---
 .../components/deployment/tabs/config/Env.tsx |  4 +-
 .../components/deployment/tabs/config/Git.tsx | 21 ++--
 .../deployment/tabs/config/OnGit.tsx          | 95 +++++++++++++++++++
 .../deployment/tabs/config/Ports.tsx          |  4 +-
 .../deployment/tabs/config/RepoMount.tsx      | 31 ++++++
 .../deployment/tabs/config/Volumes.tsx        |  8 +-
 frontend/src/components/sidebar/New.tsx       |  1 +
 frontend/src/components/sidebar/Sidebar.tsx   |  3 +-
 frontend/src/components/util/tabs/Tabs.tsx    | 38 ++++++--
 .../src/components/util/toggle/Toggle.tsx     | 30 +++---
 frontend/src/components/util/toggle/css.ts    |  2 +
 frontend/src/index.css                        |  4 +-
 frontend/src/util/hooks.ts                    |  6 +-
 16 files changed, 278 insertions(+), 85 deletions(-)
 create mode 100644 frontend/src/components/deployment/tabs/config/OnGit.tsx
 create mode 100644 frontend/src/components/deployment/tabs/config/RepoMount.tsx

diff --git a/frontend/src/components/builds/tabs/build-config/CliBuild.tsx b/frontend/src/components/builds/tabs/build-config/CliBuild.tsx
index 32ec13b9e..130d1317a 100644
--- a/frontend/src/components/builds/tabs/build-config/CliBuild.tsx
+++ b/frontend/src/components/builds/tabs/build-config/CliBuild.tsx
@@ -9,7 +9,7 @@ const CliBuild: Component<{}> = (p) => {
   return (
     <Grid class="config-item shadow">
       <h1>cli build</h1>
-      <div>build with a custom command</div>
+      <div style={{ opacity: 0.7 }}>build with a custom command</div>
       <Flex justifyContent="space-between" alignItems="center">
         <div>build path</div>
         <Input
diff --git a/frontend/src/components/builds/tabs/git-config/OnClone.tsx b/frontend/src/components/builds/tabs/git-config/OnClone.tsx
index 96f860f18..ff3aff53f 100644
--- a/frontend/src/components/builds/tabs/git-config/OnClone.tsx
+++ b/frontend/src/components/builds/tabs/git-config/OnClone.tsx
@@ -4,42 +4,49 @@ import Input from "../../../util/Input";
 import Grid from "../../../util/layout/Grid";
 import { useConfig } from "../Provider";
 import s from "../../build.module.css";
+import Flex from "../../../util/layout/Flex";
 
 const OnClone: Component = () => {
   const { build, setBuild } = useConfig();
   return (
     <Grid class="config-item shadow">
       <h1>on clone</h1>
-      <Input
-        placeholder="path relative to repo"
-        value={build.onClone?.path || ""}
-        onEdit={(path) => {
-          if (
-            path.length === 0 &&
-            (!build.onClone ||
-              !build.onClone.command ||
-              build.onClone.command.length === 0)
-          ) {
-            setBuild("onClone", undefined);
-          }
-          setBuild("onClone", { path });
-        }}
-      />
-      <Input
-        placeholder="command"
-        value={build.onClone?.command || ""}
-        onEdit={(command) => {
-          if (
-            command.length === 0 &&
-            (!build.onClone ||
-              !build.onClone.path ||
-              build.onClone.path.length === 0)
-          ) {
-            setBuild("onClone", undefined);
-          }
-          setBuild("onClone", { command });
-        }}
-      />
+      <Flex alignItems="center" justifyContent="space-between">
+        path:
+        <Input
+          placeholder="relative to repo"
+          value={build.onClone?.path || ""}
+          onEdit={(path) => {
+            if (
+              path.length === 0 &&
+              (!build.onClone ||
+                !build.onClone.command ||
+                build.onClone.command.length === 0)
+            ) {
+              setBuild("onClone", undefined);
+            }
+            setBuild("onClone", { path });
+          }}
+        />
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between">
+        command:
+        <Input
+          placeholder="command"
+          value={build.onClone?.command || ""}
+          onEdit={(command) => {
+            if (
+              command.length === 0 &&
+              (!build.onClone ||
+                !build.onClone.path ||
+                build.onClone.path.length === 0)
+            ) {
+              setBuild("onClone", undefined);
+            }
+            setBuild("onClone", { command });
+          }}
+        />
+      </Flex>
     </Grid>
   );
 };
diff --git a/frontend/src/components/deployment/tabs/config/Config.tsx b/frontend/src/components/deployment/tabs/config/Config.tsx
index a08b7d044..5941bebb6 100644
--- a/frontend/src/components/deployment/tabs/config/Config.tsx
+++ b/frontend/src/components/deployment/tabs/config/Config.tsx
@@ -12,24 +12,47 @@ import ConfirmButton from "../../../util/ConfirmButton";
 import Restart from "./Restart";
 import DockerAccount from "./DockerAccount";
 import Git from "./Git";
+import Tabs from "../../../util/tabs/Tabs";
+import RepoMount from "./RepoMount";
+import { OnClone, OnPull } from "./OnGit";
 
 const Config: Component<{}> = (p) => {
   const { deployment, reset, save } = useConfig();
   return (
     <Show when={deployment.loaded}>
       <Grid class="config">
-        <Grid class="config-items scroller">
-          <Image />
-          <Show when={deployment.image}>
-            <DockerAccount />
-          </Show>
-          <Network />
-          <Restart />
-          <Ports />
-          <Mounts />
-          <Env />
-          <Git />
-        </Grid>
+        <Tabs
+          tabsGap="0rem"
+          tabs={[
+            {
+              title: "container",
+              element: (
+                <Grid class="config-items scroller">
+                  <Image />
+                  <Show when={deployment.image}>
+                    <DockerAccount />
+                  </Show>
+                  <Network />
+                  <Restart />
+                  <Ports />
+                  <Mounts />
+                  <Env />
+                </Grid>
+              ),
+            },
+            {
+              title: "repo mount",
+              element: (
+                <Grid class="config-items scroller">
+                  <Git />
+                  <RepoMount />
+                  <OnClone />
+                  <OnPull />
+                </Grid>
+              ),
+            },
+          ]}
+        />
         <Show when={deployment.updated}>
           <Flex style={{ "place-self": "center", padding: "1rem" }}>
             <button onClick={reset}>
diff --git a/frontend/src/components/deployment/tabs/config/Env.tsx b/frontend/src/components/deployment/tabs/config/Env.tsx
index a1f243b52..ba207fce4 100644
--- a/frontend/src/components/deployment/tabs/config/Env.tsx
+++ b/frontend/src/components/deployment/tabs/config/Env.tsx
@@ -27,7 +27,7 @@ const Env: Component<{}> = (p) => {
         >
           <div>none</div>
         </Show>
-        <button onClick={onAdd}>
+        <button class="green" onClick={onAdd}>
           <Icon type="plus" />
         </button>
       </Flex>
@@ -56,7 +56,7 @@ const Env: Component<{}> = (p) => {
                 setDeployment("environment", index(), "value", value)
               }
             />
-            <button onClick={() => onRemove(index())}>
+            <button class="red" onClick={() => onRemove(index())}>
               <Icon type="minus" />
             </button>
           </Flex>
diff --git a/frontend/src/components/deployment/tabs/config/Git.tsx b/frontend/src/components/deployment/tabs/config/Git.tsx
index cbef34d3e..a13324a95 100644
--- a/frontend/src/components/deployment/tabs/config/Git.tsx
+++ b/frontend/src/components/deployment/tabs/config/Git.tsx
@@ -7,11 +7,20 @@ import Selector from "../../../util/menu/Selector";
 import { useConfig } from "./Provider";
 
 const Git: Component<{}> = (p) => {
-	const { githubAccounts } = useAppState();
-	const { deployment, setDeployment } = useConfig();
-	return (
+  const { githubAccounts } = useAppState();
+  const { deployment, setDeployment } = useConfig();
+  return (
     <Grid class="config-item shadow">
-      <h1>deployment repo</h1>
+      {/* <Flex alignItems="center" justifyContent="space-between">
+        <h1>deployment repo</h1>
+        <Toggle
+          toggled={deployment.repo !== undefined}
+          onChange={(toggled) =>
+            setDeployment("repo", toggled ? "" : undefined)
+          }
+        />
+      </Flex> */}
+      <h1>github config</h1>
       <Flex justifyContent="space-between" alignItems="center">
         <div>repo</div>
         <Input
@@ -47,6 +56,6 @@ const Git: Component<{}> = (p) => {
       </Show>
     </Grid>
   );
-}
+};
 
-export default Git;
\ No newline at end of file
+export default Git;
diff --git a/frontend/src/components/deployment/tabs/config/OnGit.tsx b/frontend/src/components/deployment/tabs/config/OnGit.tsx
new file mode 100644
index 000000000..e3ce1c052
--- /dev/null
+++ b/frontend/src/components/deployment/tabs/config/OnGit.tsx
@@ -0,0 +1,95 @@
+import { Component } from "solid-js";
+import Input from "../../../util/Input";
+import Flex from "../../../util/layout/Flex";
+import Grid from "../../../util/layout/Grid";
+import { useConfig } from "./Provider";
+
+export const OnClone: Component<{}> = (p) => {
+  const { deployment, setDeployment } = useConfig();
+  return (
+    <Grid class="config-item shadow">
+      <h1>on clone</h1>
+      <Flex alignItems="center" justifyContent="space-between">
+        path:
+        <Input
+          placeholder="relative to repo"
+          value={deployment.onClone?.path || ""}
+          onEdit={(path) => {
+            if (
+              path.length === 0 &&
+              (!deployment.onClone ||
+                !deployment.onClone.command ||
+                deployment.onClone.command.length === 0)
+            ) {
+              setDeployment("onClone", undefined);
+            }
+            setDeployment("onClone", { path });
+          }}
+        />
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between">
+        command:
+        <Input
+          placeholder="command"
+          value={deployment.onClone?.command || ""}
+          onEdit={(command) => {
+            if (
+              command.length === 0 &&
+              (!deployment.onClone ||
+                !deployment.onClone.path ||
+                deployment.onClone.path.length === 0)
+            ) {
+              setDeployment("onClone", undefined);
+            }
+            setDeployment("onClone", { command });
+          }}
+        />
+      </Flex>
+    </Grid>
+  );
+};
+
+export const OnPull: Component<{}> = (p) => {
+  const { deployment, setDeployment } = useConfig();
+  return (
+    <Grid class="config-item shadow">
+      <h1>on pull</h1>
+      <Flex alignItems="center" justifyContent="space-between">
+        path:
+        <Input
+          placeholder="relative to repo"
+          value={deployment.onPull?.path || ""}
+          onEdit={(path) => {
+            if (
+              path.length === 0 &&
+              (!deployment.onPull ||
+                !deployment.onPull.command ||
+                deployment.onPull.command.length === 0)
+            ) {
+              setDeployment("onPull", undefined);
+            }
+            setDeployment("onPull", { path });
+          }}
+        />
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between">
+        command:
+        <Input
+          placeholder="command"
+          value={deployment.onPull?.command || ""}
+          onEdit={(command) => {
+            if (
+              command.length === 0 &&
+              (!deployment.onPull ||
+                !deployment.onPull.path ||
+                deployment.onPull.path.length === 0)
+            ) {
+              setDeployment("onPull", undefined);
+            }
+            setDeployment("onPull", { command });
+          }}
+        />
+      </Flex>
+    </Grid>
+  );
+};
diff --git a/frontend/src/components/deployment/tabs/config/Ports.tsx b/frontend/src/components/deployment/tabs/config/Ports.tsx
index ee9a53067..2275c5769 100644
--- a/frontend/src/components/deployment/tabs/config/Ports.tsx
+++ b/frontend/src/components/deployment/tabs/config/Ports.tsx
@@ -23,7 +23,7 @@ const Ports: Component<{}> = (p) => {
         <Show when={!deployment.ports || deployment.ports.length === 0}>
           <div>none</div>
         </Show>
-        <button onClick={onAdd}>
+        <button class="green" onClick={onAdd}>
           <Icon type="plus" />
         </button>
       </Flex>
@@ -47,7 +47,7 @@ const Ports: Component<{}> = (p) => {
                 setDeployment("ports", index(), "container", value)
               }
             />
-            <button onClick={() => onRemove(index())}>
+            <button class="red" onClick={() => onRemove(index())}>
               <Icon type="minus" />
             </button>
           </Flex>
diff --git a/frontend/src/components/deployment/tabs/config/RepoMount.tsx b/frontend/src/components/deployment/tabs/config/RepoMount.tsx
new file mode 100644
index 000000000..120407724
--- /dev/null
+++ b/frontend/src/components/deployment/tabs/config/RepoMount.tsx
@@ -0,0 +1,31 @@
+import { Component } from "solid-js";
+import Input from "../../../util/Input";
+import Flex from "../../../util/layout/Flex";
+import Grid from "../../../util/layout/Grid";
+import { useConfig } from "./Provider";
+
+const RepoMount: Component<{}> = (p) => {
+  const { deployment, setDeployment } = useConfig();
+  return (
+    <Grid class="config-item shadow">
+      <h1>mount</h1>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Input
+          placeholder="repo folder to mount"
+          value={deployment.repoMount || ""}
+          style={{ width: "40%" }}
+          onEdit={(value) => setDeployment("repoMount", value)}
+        />
+        {" : "}
+        <Input
+          placeholder="container mount point"
+          value={deployment.containerMount || ""}
+          style={{ width: "40%" }}
+          onEdit={(value) => setDeployment("containerMount", value)}
+        />
+      </Flex>
+    </Grid>
+  );
+};
+
+export default RepoMount;
diff --git a/frontend/src/components/deployment/tabs/config/Volumes.tsx b/frontend/src/components/deployment/tabs/config/Volumes.tsx
index a64c06ea6..376423f0e 100644
--- a/frontend/src/components/deployment/tabs/config/Volumes.tsx
+++ b/frontend/src/components/deployment/tabs/config/Volumes.tsx
@@ -23,7 +23,7 @@ const Volumes: Component<{}> = (p) => {
         <Show when={!deployment.volumes || deployment.volumes.length === 0}>
           <div>none</div>
         </Show>
-        <button onClick={onAdd}>
+        <button class="green" onClick={onAdd}>
           <Icon type="plus" />
         </button>
       </Flex>
@@ -34,7 +34,7 @@ const Volumes: Component<{}> = (p) => {
               placeholder="system"
               value={local}
               style={{ width: "40%" }}
-              onConfirm={(value) =>
+              onEdit={(value) =>
                 setDeployment("volumes", index(), "local", value)
               }
             />
@@ -43,11 +43,11 @@ const Volumes: Component<{}> = (p) => {
               placeholder="container"
               value={container}
               style={{ width: "40%" }}
-              onConfirm={(value) =>
+              onEdit={(value) =>
                 setDeployment("volumes", index(), "container", value)
               }
             />
-            <button onClick={() => onRemove(index())}>
+            <button class="red" onClick={() => onRemove(index())}>
               <Icon type="minus" />
             </button>
           </Flex>
diff --git a/frontend/src/components/sidebar/New.tsx b/frontend/src/components/sidebar/New.tsx
index d7ce33863..484c5ed1f 100644
--- a/frontend/src/components/sidebar/New.tsx
+++ b/frontend/src/components/sidebar/New.tsx
@@ -32,6 +32,7 @@ const New: Component<{
         placeholder={p.placeholder}
         value={name()}
         onEdit={setName}
+        onConfirm={create}
         style={{ width: "11rem" }}
       />
       <Flex gap="0.4rem">
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index 9cd1c9737..227a6a805 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/frontend/src/components/sidebar/Sidebar.tsx
@@ -14,7 +14,7 @@ import s from "./sidebar.module.css";
 const SIDEBAR_WIDTH = 350;
 
 const Sidebar: Component<{}> = () => {
-  const { sidebar, servers } = useAppState();
+  const { sidebar, servers, selected } = useAppState();
   const { height } = useAppDimensions();
   const { permissions } = useUser();
   return (
@@ -59,7 +59,6 @@ const Sidebar: Component<{}> = () => {
             ),
           },
         ]}
-        localStorageKey="sidebar-tab"
       />
     </Show>
   );
diff --git a/frontend/src/components/util/tabs/Tabs.tsx b/frontend/src/components/util/tabs/Tabs.tsx
index 46fabd569..27534d7af 100644
--- a/frontend/src/components/util/tabs/Tabs.tsx
+++ b/frontend/src/components/util/tabs/Tabs.tsx
@@ -1,6 +1,13 @@
-import { Component, createSignal, For, JSX, JSXElement } from "solid-js";
+import {
+  Accessor,
+  Component,
+  createSignal,
+  For,
+  JSX,
+  JSXElement,
+} from "solid-js";
 import { combineClasses } from "../../../util/helpers";
-import { useLocalStorage } from "../../../util/hooks";
+import { LocalStorageSetter, useLocalStorage } from "../../../util/hooks";
 import Flex from "../layout/Flex";
 import s from "./Tabs.module.css";
 
@@ -16,7 +23,6 @@ const Tabs: Component<{
   localStorageKey?: string;
   tabsGap?: string;
   tabStyle?: JSX.CSSProperties;
-  titleStyle?: JSX.CSSProperties;
   containerClass?: string;
   containerStyle?: JSX.CSSProperties;
 }> = (p) => {
@@ -24,19 +30,33 @@ const Tabs: Component<{
   const [selected, set] = p.localStorageKey
     ? useLocalStorage(def, p.localStorageKey)
     : createSignal(def);
-  const current = () =>
-    p.tabs.filter((tab) => tab.title === selected())[0];
+  return <ControlledTabs selected={selected} set={set} {...p} />;
+};
+
+export const ControlledTabs: Component<{
+  tabs: Tab[];
+  selected: Accessor<string>;
+  set: LocalStorageSetter<string>;
+  tabsGap?: string;
+  tabStyle?: JSX.CSSProperties;
+  containerClass?: string;
+  containerStyle?: JSX.CSSProperties;
+}> = (p) => {
+  const current = () => p.tabs.filter((tab) => tab.title === p.selected())[0];
   const getClassName = (title: string) =>
-    selected() === title ? combineClasses(s.Tab, s.Active) : s.Tab;
+    p.selected() === title ? combineClasses(s.Tab, s.Active) : s.Tab;
   return (
-    <div class={combineClasses(s.Tabs, p.containerClass)} style={p.containerStyle}>
-      <Flex gap={p.tabsGap} alignItems="center" justifyContent="space-evenly">
+    <div
+      class={combineClasses(s.Tabs, p.containerClass)}
+      style={p.containerStyle}
+    >
+      <Flex gap={p.tabsGap || "0rem"} alignItems="center" justifyContent="space-evenly">
         <For each={p.tabs}>
           {(tab) => (
             <button
               class={getClassName(tab.title)}
               style={p.tabStyle}
-              onClick={() => set(tab.title)}
+              onClick={() => p.set(tab.title)}
             >
               {tab.titleElement || tab.title}
             </button>
diff --git a/frontend/src/components/util/toggle/Toggle.tsx b/frontend/src/components/util/toggle/Toggle.tsx
index 712c78caf..cd5cd7615 100644
--- a/frontend/src/components/util/toggle/Toggle.tsx
+++ b/frontend/src/components/util/toggle/Toggle.tsx
@@ -1,5 +1,6 @@
 import { Component, JSXElement } from "solid-js";
 import Flex from "../layout/Flex";
+import { toggleCss } from "./css";
 
 const Toggle: Component<{
   label?: JSXElement;
@@ -7,19 +8,22 @@ const Toggle: Component<{
   onChange?: (toggled: boolean) => void;
 }> = (p) => {
   return (
-    <Flex alignItems="center" justifyContent="space-between">
-      {p.label}
-      <label class="switch">
-        <input
-          type="checkbox"
-          checked={p.toggled}
-          onInput={() => {
-            p.onChange && p.onChange(!p.toggled);
-          }}
-        />
-        <span class="slider round"></span>
-      </label>
-    </Flex>
+    <>
+      <style>{toggleCss()}</style>
+      <Flex alignItems="center" justifyContent="space-between">
+        {p.label}
+        <label class="toggle">
+          <input
+            type="checkbox"
+            checked={p.toggled}
+            onInput={() => {
+              p.onChange && p.onChange(!p.toggled);
+            }}
+          />
+          <span class="slider round"></span>
+        </label>
+      </Flex>
+    </>
   );
 };
 
diff --git a/frontend/src/components/util/toggle/css.ts b/frontend/src/components/util/toggle/css.ts
index 689c36d66..7352807f1 100644
--- a/frontend/src/components/util/toggle/css.ts
+++ b/frontend/src/components/util/toggle/css.ts
@@ -3,6 +3,8 @@ export function toggleCss(scale = 0.75) {
 		.toggle {
 			position: relative;
 			display: inline-block;
+			padding: 0;
+			margin: 0;
 			width: ${60 * scale}px;
 			height: ${34 * scale}px;
 		}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0849213a8..da2abfdef 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -205,8 +205,8 @@ h1 {
 }
 
 .config-items {
-  max-height: 100%;
-  padding: 0.5rem;
+  max-height: 65vh;
+  padding: 0rem 0.5rem;
 }
 
 .config-item {
diff --git a/frontend/src/util/hooks.ts b/frontend/src/util/hooks.ts
index 225cdb8da..513fbc398 100644
--- a/frontend/src/util/hooks.ts
+++ b/frontend/src/util/hooks.ts
@@ -33,13 +33,15 @@ export function useToggleTimeout(
   return [s, toggle];
 }
 
+export type LocalStorageSetter<T> = (arg: T | ((s: T) => T)) => void;
+
 export function useLocalStorageToggle(
   key: string,
   initial?: boolean
 ): [
   Accessor<boolean>,
   () => void,
-  (arg: boolean | ((arg: boolean) => boolean)) => void
+  LocalStorageSetter<boolean>
 ] {
   const [s, set] = useLocalStorage(initial || false, key);
   const toggle = () => set((s) => !s);
@@ -49,7 +51,7 @@ export function useLocalStorageToggle(
 export function useLocalStorage<T>(
   defaultStore: T,
   key: string
-): [Accessor<T>, (arg: T | ((s: T) => T)) => void] {
+): [Accessor<T>, LocalStorageSetter<T>] {
   const toStore = window.localStorage.getItem(key);
   const [stored, setStored] = createSignal<T>(
     toStore ? JSON.parse(toStore) : defaultStore