only show delete when you have permission to delete

frontend/src/components/builds/Actions.tsx

@@ -15,7 +15,7 @@ const Actions: Component<{}> = (p) => {
   const build = () => builds.get(selected.id())!;
   const actions = useActionStates();
   return (
-    <Show when={build() && (permissions() >= 2 || build().owners.includes(username()!))}>
+    <Show when={permissions() > 1 || build().owners.includes(username()!)}>
       <Grid class="card shadow">
         <h1>actions</h1>
         <Flex class="action shadow">

frontend/src/components/builds/Build.tsx

@@ -8,9 +8,9 @@ import BuildTabs from "./tabs/Tabs";
 import Updates from "./Updates";
 
 const Build: Component<{}> = (p) => {
-	const { builds, selected } = useAppState();
+  const { builds, selected } = useAppState();
   const build = () => builds.get(selected.id())!;
-	return (
+  return (
     <Show when={build()}>
       <ActionStateProvider>
         <Grid class="content">
@@ -26,6 +26,6 @@ const Build: Component<{}> = (p) => {
       </ActionStateProvider>
     </Show>
   );
-}
+};
 
-export default Build;
+export default Build;

frontend/src/components/builds/Header.tsx

@@ -2,6 +2,7 @@ import { Build } from "@monitor/types";
 import { Component, Show } from "solid-js";
 import { DELETE_BUILD } from "../../state/actions";
 import { useAppState } from "../../state/StateProvider";
+import { useUser } from "../../state/UserProvider";
 import ConfirmButton from "../util/ConfirmButton";
 import Icon from "../util/Icon";
 import Flex from "../util/layout/Flex";
@@ -12,6 +13,7 @@ const Header: Component<{}> = (p) => {
   const { builds, selected, ws } = useAppState();
   const build = () => builds.get(selected.id())!;
   const actions = useActionStates();
+  const { permissions, username } = useUser();
   return (
     <Flex
       class="card shadow"
@@ -22,22 +24,24 @@ const Header: Component<{}> = (p) => {
         <h1>{build().name}</h1>
         <div style={{ opacity: 0.8 }}>{getSub(build())}</div>
       </Grid>
-      <Show
-        when={!actions.deleting}
-        fallback={
-          <button class="red">
-            <Icon type="trash" />
-          </button>
-        }
-      >
-        <ConfirmButton
-          onConfirm={() => {
-            ws.send(DELETE_BUILD, { buildID: selected.id() });
-          }}
-          color="red"
+      <Show when={permissions() >= 2 || build().owners.includes(username()!)}>
+        <Show
+          when={!actions.deleting}
+          fallback={
+            <button class="red">
+              <Icon type="trash" />
+            </button>
+          }
         >
-          <Icon type="trash" />
-        </ConfirmButton>
+          <ConfirmButton
+            onConfirm={() => {
+              ws.send(DELETE_BUILD, { buildID: selected.id() });
+            }}
+            color="red"
+          >
+            <Icon type="trash" />
+          </ConfirmButton>
+        </Show>
       </Show>
     </Flex>
   );

frontend/src/components/deployment/Header.tsx

@@ -2,6 +2,7 @@ import { ContainerStatus } from "@monitor/types";
 import { Component, Show } from "solid-js";
 import { DELETE_DEPLOYMENT } from "../../state/actions";
 import { useAppState } from "../../state/StateProvider";
+import { useUser } from "../../state/UserProvider";
 import { deploymentStatusClass } from "../../util/helpers";
 import ConfirmButton from "../util/ConfirmButton";
 import Icon from "../util/Icon";
@@ -12,9 +13,9 @@ import HoverMenu from "../util/menu/HoverMenu";
 import { useActionStates } from "./ActionStateProvider";
 
 const Header: Component<{}> = (p) => {
-  const { servers, deployments, ws, selected } = useAppState();
-  const deployment = () => deployments.get(selected.id());
-  const server = () => deployment() && servers.get(deployment()?.serverID!);
+  const { deployments, ws, selected } = useAppState();
+  const deployment = () => deployments.get(selected.id())!;
+  const { permissions, username } = useUser();
   const state = () =>
     deployment()!.status === "not deployed"
       ? "not deployed"
@@ -29,37 +30,43 @@ const Header: Component<{}> = (p) => {
       <Flex alignItems="center" justifyContent="space-between">
         <h1>{deployment()!.name}</h1>
         <Show
-          when={!actions.fullDeleting}
-          fallback={
-            <button class="red">
-              <Icon type="trash" />
-            </button>
-          }
+          when={permissions() >= 2 || deployment().owners.includes(username()!)}
         >
-          <HoverMenu
-            target={
-              <Show
-                when={!actions.fullDeleting}
-                fallback={
-                  <button class="red">
-                    <Loading />
-                  </button>
-                }
-              >
-                <ConfirmButton
-                  onConfirm={() => {
-                    ws.send(DELETE_DEPLOYMENT, { deploymentID: selected.id() });
-                  }}
-                  color="red"
-                >
-                  <Icon type="trash" />
-                </ConfirmButton>
-              </Show>
+          <Show
+            when={!actions.fullDeleting}
+            fallback={
+              <button class="red">
+                <Icon type="trash" />
+              </button>
             }
-            content="delete deployment"
-            position="bottom center"
-            padding="0.5rem"
-          />
+          >
+            <HoverMenu
+              target={
+                <Show
+                  when={!actions.fullDeleting}
+                  fallback={
+                    <button class="red">
+                      <Loading />
+                    </button>
+                  }
+                >
+                  <ConfirmButton
+                    onConfirm={() => {
+                      ws.send(DELETE_DEPLOYMENT, {
+                        deploymentID: selected.id(),
+                      });
+                    }}
+                    color="red"
+                  >
+                    <Icon type="trash" />
+                  </ConfirmButton>
+                </Show>
+              }
+              content="delete deployment"
+              position="bottom center"
+              padding="0.5rem"
+            />
+          </Show>
         </Show>
       </Flex>
       <Flex alignItems="center" justifyContent="space-between">

frontend/src/components/server/Header.tsx

@@ -2,6 +2,7 @@ import { Server } from "@monitor/types";
 import { Component, Show } from "solid-js";
 import { REMOVE_SERVER } from "../../state/actions";
 import { useAppState } from "../../state/StateProvider";
+import { useUser } from "../../state/UserProvider";
 import { serverStatusClass } from "../../util/helpers";
 import ConfirmButton from "../util/ConfirmButton";
 import Icon from "../util/Icon";
@@ -17,6 +18,7 @@ const Header: Component<{}> = (p) => {
         ? "OK"
         : "NOT OK"
       : "DISABLED";
+  const { permissions, username } = useUser();
   return (
     <Flex
       class="card shadow"
@@ -30,14 +32,16 @@ const Header: Component<{}> = (p) => {
       <Show when={!server().isCore}>
         <Flex alignItems="center">
           <div class={serverStatusClass(status())}>{status()}</div>
-          <ConfirmButton
-            onConfirm={() => {
-              ws.send(REMOVE_SERVER, { serverID: selected.id() });
-            }}
-            color="red"
-          >
-            <Icon type="trash" />
-          </ConfirmButton>
+          <Show when={permissions() > 1 || server().owners.includes(username())}>
+            <ConfirmButton
+              onConfirm={() => {
+                ws.send(REMOVE_SERVER, { serverID: selected.id() });
+              }}
+              color="red"
+            >
+              <Icon type="trash" />
+            </ConfirmButton>
+          </Show>
         </Flex>
       </Show>
     </Flex>