From 2cea99de9682b97f6c14a1fd824eb07fff0faba0 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sun, 10 Apr 2022 13:04:50 -0700
Subject: [PATCH] add can edit indicator in the sidebar + username in topbar

---
 core/src/routes/deployments.ts                | 31 -------------------
 frontend/public/icons/edit.svg                | 13 ++++++++
 frontend/src/components/home/Home.tsx         |  8 ++---
 .../src/components/sidebar/builds/Build.tsx   | 14 ++++++++-
 .../components/sidebar/server/Deployment.tsx  | 23 ++++++++++++--
 .../src/components/sidebar/server/Server.tsx  |  9 +-----
 frontend/src/components/topbar/Account.tsx    |  1 -
 frontend/src/components/topbar/Topbar.tsx     |  5 ++-
 frontend/src/components/util/Icon.tsx         |  3 +-
 .../src/components/util/menu/HoverMenu.tsx    |  9 ++++--
 frontend/src/state/UserProvider.tsx           |  8 ++---
 11 files changed, 66 insertions(+), 58 deletions(-)
 create mode 100644 frontend/public/icons/edit.svg

diff --git a/core/src/routes/deployments.ts b/core/src/routes/deployments.ts
index 7f16bfd35..b25726b60 100644
--- a/core/src/routes/deployments.ts
+++ b/core/src/routes/deployments.ts
@@ -32,37 +32,6 @@ async function getDeployments(app: FastifyInstance, serverID: string) {
 }
 
 const deployments = fp((app: FastifyInstance, _: {}, done: () => void) => {
-  // app.get(
-  //   "/api/deployments",
-  //   { onRequest: [app.auth, app.userEnabled] },
-  //   async (req, res) => {
-  //     // returns the periphery deployments on the given serverID
-  //     // returns the core deployments if no serverID is specified
-  //     const { serverID } = req.query as { serverID?: string };
-  //     const server = serverID ? await app.servers.findById(serverID) : app.core;
-  //     if (!server) {
-  //       res.status(400);
-  //       res.send();
-  //       return;
-  //     }
-  //     const deployments = await app.deployments.find(
-  //       { serverID: server._id },
-  //       "name containerName serverID owners repo"
-  //     );
-  //     const status = server.isCore
-  //       ? await deploymentStatusLocal(app)
-  //       : await getPeripheryContainers(server);
-  //     res.send(
-  //       intoCollection(
-  //         deployments.map((deployment) => ({
-  //           ...deployment,
-  //           status: status[deployment.containerName!] || "not deployed",
-  //         }))
-  //       )
-  //     );
-  //   }
-  // );
-
   app.get(
     "/api/deployments",
     { onRequest: [app.auth, app.userEnabled] },
diff --git a/frontend/public/icons/edit.svg b/frontend/public/icons/edit.svg
new file mode 100644
index 000000000..aec04099c
--- /dev/null
+++ b/frontend/public/icons/edit.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<g id="edit_2_">
+	<g>
+		<path fill="#fceade" fill-rule="evenodd" clip-rule="evenodd" d="M4.59,12.59l2.83,2.83l7.65-7.65l-2.83-2.83L4.59,12.59z M2,18l4.41-1.59
+			l-2.81-2.79L2,18z M16,2c-0.55,0-1.05,0.22-1.41,0.59l-1.65,1.65l2.83,2.83l1.65-1.65C17.78,5.05,18,4.55,18,4C18,2.9,17.1,2,16,2
+			z"/>
+	</g>
+</g>
+</svg>
diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx
index 15340520e..53c390cb4 100644
--- a/frontend/src/components/home/Home.tsx
+++ b/frontend/src/components/home/Home.tsx
@@ -47,8 +47,8 @@ const Home: Component<{}> = (p) => {
         <Show
           when={filteredDeploymentIds() && filteredDeploymentIds()!.length > 0}
         >
-          <Grid class="card shadow">
-            <h1>my deployments</h1>
+          <Grid gap="0.5rem" class="card shadow">
+            <h1 style={{ opacity: 0.5 }}>my deployments</h1>
             <For each={filteredDeploymentIds()}>
               {(id) => (
                 <button
@@ -71,7 +71,7 @@ const Home: Component<{}> = (p) => {
 
         <Show when={filteredServerIds() && filteredServerIds()!.length > 0}>
           <Grid class="card shadow">
-            <h1>my servers</h1>
+            <h1 style={{ opacity: 0.5 }}>my servers</h1>
             <For each={filteredServerIds()}>
               {(id) => (
                 <button
@@ -103,7 +103,7 @@ const Home: Component<{}> = (p) => {
 
         <Show when={filteredBuildIds() && filteredBuildIds()!.length > 0}>
           <Grid class="card shadow">
-            <h1>my builds</h1>
+            <h1 style={{ opacity: 0.5 }}>my builds</h1>
             <For each={filteredBuildIds()}>
               {(id) => (
                 <button
diff --git a/frontend/src/components/sidebar/builds/Build.tsx b/frontend/src/components/sidebar/builds/Build.tsx
index 15a6eaaa1..43714a3b9 100644
--- a/frontend/src/components/sidebar/builds/Build.tsx
+++ b/frontend/src/components/sidebar/builds/Build.tsx
@@ -1,21 +1,33 @@
 import { Component, Show } from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
+import { useUser } from "../../../state/UserProvider";
 import { combineClasses } from "../../../util/helpers";
+import Icon from "../../util/Icon";
+import HoverMenu from "../../util/menu/HoverMenu";
 import s from "../sidebar.module.scss";
 
 const Build: Component<{ id: string }> = (p) => {
   const { builds, selected } = useAppState();
+  const { permissions, username } = useUser();
   const build = () => builds.get(p.id)!;
   return (
     <Show when={build()}>
       <button
         class={combineClasses(
           selected.id() === p.id && "selected",
-          s.DropdownItem,
+          s.DropdownItem
         )}
         onClick={() => selected.set(build()._id!, "build")}
       >
         <div>{build().name}</div>
+        <Show when={permissions() === 1 && build().owners.includes(username())}>
+          <HoverMenu
+            target={<Icon type="edit" style={{ padding: "0.25rem" }} />}
+            content="you are a collaborator"
+            padding="0.5rem"
+            position="bottom right"
+          />
+        </Show>
       </button>
     </Show>
   );
diff --git a/frontend/src/components/sidebar/server/Deployment.tsx b/frontend/src/components/sidebar/server/Deployment.tsx
index 84cbacc8d..227381545 100644
--- a/frontend/src/components/sidebar/server/Deployment.tsx
+++ b/frontend/src/components/sidebar/server/Deployment.tsx
@@ -1,12 +1,17 @@
 import { ContainerStatus } from "@monitor/types";
 import { Component, Show } from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
+import { useUser } from "../../../state/UserProvider";
 import { combineClasses, deploymentStatusClass } from "../../../util/helpers";
+import Icon from "../../util/Icon";
+import Flex from "../../util/layout/Flex";
+import HoverMenu from "../../util/menu/HoverMenu";
 import s from "../sidebar.module.scss";
 
 const Deployment: Component<{ id: string }> = (p) => {
   const { deployments, selected } = useAppState();
-  const deployment = () => deployments.get(p.id);
+  const { permissions, username } = useUser();
+  const deployment = () => deployments.get(p.id)!;
   const status = () => {
     if (!deployment() || deployment()!.status === "not deployed") {
       return "not deployed";
@@ -24,7 +29,21 @@ const Deployment: Component<{ id: string }> = (p) => {
         onClick={() => selected.set(deployment()!._id!, "deployment")}
       >
         <div>{deployment()!.name}</div>
-        <div class={deploymentStatusClass(status())}>{status()}</div>
+        <Flex alignItems="center">
+          <Show
+            when={
+              permissions() === 1 && deployment().owners.includes(username()!)
+            }
+          >
+            <HoverMenu
+              target={<Icon type="edit" style={{ padding: "0.25rem" }} />}
+              content="you are a collaborator"
+              padding="0.5rem"
+              position="bottom center"
+            />
+          </Show>
+          <div class={deploymentStatusClass(status())}>{status()}</div>
+        </Flex>
       </button>
     </Show>
   );
diff --git a/frontend/src/components/sidebar/server/Server.tsx b/frontend/src/components/sidebar/server/Server.tsx
index a4798fa88..340596a44 100644
--- a/frontend/src/components/sidebar/server/Server.tsx
+++ b/frontend/src/components/sidebar/server/Server.tsx
@@ -22,13 +22,6 @@ const Server: Component<{ id: string }> = (p) => {
     );
   });
   const [open, toggleOpen] = useLocalStorageToggle(p.id);
-  // createEffect(() => {
-  //   if (server() && !server()!.isCore) {
-  //     getDeployments({ serverID: p.id }).then((more) =>
-  //       deployments.addMany(more)
-  //     );
-  //   }
-  // });
   return (
     <Show when={server()}>
       <div class={combineClasses(s.Server, "shadow")}>
@@ -42,7 +35,7 @@ const Server: Component<{ id: string }> = (p) => {
         >
           <Flex>
             <Icon type="chevron-down" width="1rem" />
-            <h2>{server()?.name}</h2>
+            <h2 style={{ opacity: 0.7 }}>{server()?.name}</h2>
           </Flex>
           <div
             class={server()?.status === "OK" ? "green" : "red"}
diff --git a/frontend/src/components/topbar/Account.tsx b/frontend/src/components/topbar/Account.tsx
index 224fc38a9..ff62a2e42 100644
--- a/frontend/src/components/topbar/Account.tsx
+++ b/frontend/src/components/topbar/Account.tsx
@@ -11,7 +11,6 @@ const Account: Component<{ close: () => void }> = (p) => {
   const { username, permissions } = useUser();
   return (
     <Grid class={s.Account} placeItems="center end">
-      <div>{username()}</div>
       <div>permissions: {readablePermissions(permissions())}</div>
       <Show when={permissions() > 1}>
         <button
diff --git a/frontend/src/components/topbar/Topbar.tsx b/frontend/src/components/topbar/Topbar.tsx
index a0ca6d653..99add3bf2 100644
--- a/frontend/src/components/topbar/Topbar.tsx
+++ b/frontend/src/components/topbar/Topbar.tsx
@@ -1,5 +1,6 @@
 import { Component, createSignal } from "solid-js";
 import { useAppState } from "../../state/StateProvider";
+import { useUser } from "../../state/UserProvider";
 import { combineClasses, inPx } from "../../util/helpers";
 import Icon from "../util/Icon";
 import Flex from "../util/layout/Flex";
@@ -12,6 +13,7 @@ export const TOPBAR_HEIGHT = 40;
 
 const Topbar: Component = () => {
   const { sidebar, selected } = useAppState();
+  const { username } = useUser();
   const [menu, setMenu] = createSignal<"updates" | "account">();
   const close = () => setMenu(undefined);
   return (
@@ -56,7 +58,8 @@ const Topbar: Component = () => {
                 menu() === "account" ? setMenu(undefined) : setMenu("account")
               }
             >
-              <Icon type="user" alt="account" width="1.5rem" />
+              {username()}
+              <Icon type="chevron-down" />
             </button>
           }
           content={<Account close={close} />}
diff --git a/frontend/src/components/util/Icon.tsx b/frontend/src/components/util/Icon.tsx
index e4c90edf8..f77eea065 100644
--- a/frontend/src/components/util/Icon.tsx
+++ b/frontend/src/components/util/Icon.tsx
@@ -33,7 +33,8 @@ export type IconType =
   | "refresh"
   | "cut"
   | "fullscreen"
-  | "github";
+  | "github"
+  | "edit";
 
 const Icon: Component<{
   type: IconType;
diff --git a/frontend/src/components/util/menu/HoverMenu.tsx b/frontend/src/components/util/menu/HoverMenu.tsx
index f7ad917c9..9824aacb8 100644
--- a/frontend/src/components/util/menu/HoverMenu.tsx
+++ b/frontend/src/components/util/menu/HoverMenu.tsx
@@ -7,6 +7,7 @@ import {
   Show,
 } from "solid-js";
 import { combineClasses } from "../../../util/helpers";
+import Flex from "../layout/Flex";
 import { getPositionClass } from "./helpers";
 import { Position } from "./helpers";
 import s from "./menu.module.scss";
@@ -17,7 +18,7 @@ const HoverMenu: Component<{
   position?: Position;
   padding?: string;
   contentStyle?: JSX.CSSProperties;
-
+  containerStyle?: JSX.CSSProperties;
 }> = (p) => {
   const [show, set] = createSignal(false);
   const [buffer, setBuffer] = createSignal(false);
@@ -33,12 +34,14 @@ const HoverMenu: Component<{
     }
   });
   return (
-    <div
+    <Flex
       class={s.HoverMenuTarget}
+      style={p.containerStyle}
       onMouseEnter={() => set(true)}
       onMouseLeave={() => set(false)}
       onTouchStart={() => set((show) => !show)}
       // onClick={(e) => e.stopPropagation()}
+      alignItems="center"
     >
       {p.target}
       <Show when={buffer()}>
@@ -60,7 +63,7 @@ const HoverMenu: Component<{
           {p.content}
         </div>
       </Show>
-    </div>
+    </Flex>
   );
 };
 
diff --git a/frontend/src/state/UserProvider.tsx b/frontend/src/state/UserProvider.tsx
index ca0030bd0..e827b70ee 100644
--- a/frontend/src/state/UserProvider.tsx
+++ b/frontend/src/state/UserProvider.tsx
@@ -11,7 +11,7 @@ export type UserState = {
   user: () => User;
   setUser: Setter<false | User | undefined>;
   logout: () => void;
-  username: () => string | undefined;
+  username: () => string;
   permissions: () => number;
   loginStatus: () =>
     | "LOGGED_IN_ENABLED"
@@ -30,11 +30,7 @@ export const UserProvider: Component = (p) => {
     mutate(false);
   };
   const username = () => {
-    if (user()) {
-      return (user() as User).username;
-    } else {
-      return undefined;
-    }
+    return (user() as User)?.username!;
   };
   const loginStatus = createMemo(() => {
     const _user = user();