improve confirm menu with copy button

frontend/src/components/build/Header.tsx

@@ -55,7 +55,7 @@ const Header: Component<{}> = (p) => {
                       client.delete_build(params.id);
                     }}
                     class="red"
-                    title={`delete build | ${build().name}`}
+                    title="delete build"
                     match={build().name}
                   >
                     <Icon type="trash" />

frontend/src/components/build/tabs/config/WebhookUrl.tsx

@@ -1,8 +1,7 @@
 import { Component, createResource, Show } from "solid-js";
-import { pushNotification, MONITOR_BASE_URL, client } from "../../../..";
+import { client } from "../../../..";
-import { copyToClipboard, getId } from "../../../../util/helpers";
+import { getId } from "../../../../util/helpers";
-import ConfirmButton from "../../../shared/ConfirmButton";
+import CopyClipboard from "../../../shared/CopyClipboard";
-import Icon from "../../../shared/Icon";
 import Flex from "../../../shared/layout/Flex";
 import Grid from "../../../shared/layout/Grid";
 import Loading from "../../../shared/loading/Loading";
@@ -31,16 +30,7 @@ const ListenerUrl: Component<{}> = (p) => {
             {listenerUrl()}
           </div>
         </Show>
-        <ConfirmButton
+        <CopyClipboard copyText={listenerUrl() || ""} copying="url" />
-          class="blue"
-          onFirstClick={() => {
-            copyToClipboard(listenerUrl() || "");
-            pushNotification("good", "copied url to clipboard");
-          }}
-          confirm={<Icon type="check" />}
-        >
-          <Icon type="clipboard" />
-        </ConfirmButton>
       </Flex>
     </Grid>
   );

frontend/src/components/deployment/Actions.tsx

@@ -196,7 +196,7 @@ const Deploy: Component<{ redeploy?: boolean }> = (p) => {
               onConfirm={() => {
                 client.deploy_container(params.id);
               }}
-              title={`redeploy container | ${name()}`}
+              title="redeploy container"
               match={name()!}
             >
               <Icon type={"reset"} />
@@ -232,7 +232,7 @@ const RemoveContainer = () => {
             onConfirm={() => {
               client.remove_container(params.id);
             }}
-            title={`destroy container | ${name()}`}
+            title="destroy container"
             match={name()!}
           >
             <Icon type="trash" />
@@ -298,7 +298,7 @@ const Stop = () => {
             onConfirm={() => {
               client.stop_container(params.id);
             }}
-            title={`stop container | ${name()}`}
+            title="stop container"
             match={name()!}
           >
             <Icon type="pause" />

frontend/src/components/deployment/Header.tsx

@@ -88,9 +88,7 @@ const Header: Component<{}> = (p) => {
                       client.delete_deployment(params.id);
                     }}
                     class="red"
-                    title={`delete deployment | ${
+                    title="delete deployment"
-                      deployment().deployment.name
-                    }`}
                     match={deployment().deployment.name}
                     info={
                       <Show when={deployment().container}>

frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx

@@ -1,22 +1,25 @@
 import { Component, createResource, Show } from "solid-js";
-import { client, pushNotification } from "../../../../..";
+import { client } from "../../../../..";
-import { copyToClipboard, getId } from "../../../../../util/helpers";
+import { getId } from "../../../../../util/helpers";
-import ConfirmButton from "../../../../shared/ConfirmButton";
+import CopyClipboard from "../../../../shared/CopyClipboard";
-import Icon from "../../../../shared/Icon";
 import Flex from "../../../../shared/layout/Flex";
 import Grid from "../../../../shared/layout/Grid";
 import Loading from "../../../../shared/loading/Loading";
 import { useConfig } from "../Provider";
 
 const WebhookUrl: Component<{}> = (p) => {
-	const { deployment } = useConfig();
+  const { deployment } = useConfig();
-	const [github_base_url] = createResource(() => client.get_github_webhook_base_url());
+  const [github_base_url] = createResource(() =>
-	const listenerUrl = () => {
+    client.get_github_webhook_base_url()
-		if (github_base_url()) {
+  );
-			return `${github_base_url()}/api/listener/deployment/${getId(deployment)}`;
+  const listenerUrl = () => {
-		}
+    if (github_base_url()) {
-	}
+      return `${github_base_url()}/api/listener/deployment/${getId(
-	return (
+        deployment
+      )}`;
+    }
+  };
+  return (
     <Grid class="config-item shadow">
       <h1>webhook url</h1>
       <Flex
@@ -29,19 +32,10 @@ const WebhookUrl: Component<{}> = (p) => {
             {listenerUrl()}
           </div>
         </Show>
-        <ConfirmButton
+        <CopyClipboard copyText={listenerUrl() || ""} copying="url" />
-          class="blue"
-          onFirstClick={() => {
-            copyToClipboard(listenerUrl() || "");
-            pushNotification("good", "copied url to clipboard");
-          }}
-          confirm={<Icon type="check" />}
-        >
-          <Icon type="clipboard" />
-        </ConfirmButton>
       </Flex>
     </Grid>
   );
-}
+};
 
-export default WebhookUrl;
+export default WebhookUrl;

frontend/src/components/server/Header.tsx

@@ -75,7 +75,7 @@ const Header: Component<{}> = (p) => {
                       client.delete_server(params.id);
                     }}
                     class="red"
-                    title={`delete server | ${server().server.name}`}
+                    title="delete server"
                     match={server().server.name}
                     info={
                       <div style={{ opacity: 0.7 }}>

frontend/src/components/shared/ConfirmMenuButton.tsx

@@ -2,7 +2,9 @@ import { Component, createSignal, JSX } from "solid-js";
 import { pushNotification } from "../..";
 import { useToggle } from "../../util/hooks";
 import ConfirmButton from "./ConfirmButton";
+import CopyClipboard from "./CopyClipboard";
 import Input from "./Input";
+import Flex from "./layout/Flex";
 import Grid from "./layout/Grid";
 import CenterMenu from "./menu/CenterMenu";
 
@@ -22,6 +24,12 @@ const ConfirmMenuButton: Component<{
       show={show}
       toggleShow={toggleShow}
       title={p.title}
+      leftOfX={() => (
+        <Flex alignItems="center" justifyContent="space-between" style={{ width: "100%" }}>
+          <h1>{p.match}</h1>
+          <CopyClipboard copyText={p.match} copying="name" />
+        </Flex>
+      )}
       targetClass={p.class}
       target={p.children}
       content={() => (

frontend/src/components/shared/CopyClipboard.tsx

@@ -0,0 +1,22 @@
+import { Component } from "solid-js";
+import { pushNotification } from "../..";
+import { copyToClipboard } from "../../util/helpers";
+import ConfirmButton from "./ConfirmButton";
+import Icon from "./Icon";
+
+const CopyClipboard: Component<{ copyText: string; copying?: string; }> = (p) => {
+	return (
+    <ConfirmButton
+      class="blue"
+      onFirstClick={() => {
+        copyToClipboard(p.copyText);
+        pushNotification("good", `copied ${p.copying || "text"} to clipboard`);
+      }}
+      confirm={<Icon type="check" />}
+    >
+      <Icon type="clipboard" />
+    </ConfirmButton>
+  );
+}
+
+export default CopyClipboard;

frontend/src/components/shared/menu/CenterMenu.tsx

@@ -68,7 +68,7 @@ const Child: Component<{
   return (
     <Grid
       class={combineClasses(s.CenterMenuContainer)}
-      onClick={(e) => {
+      onPointerDown={(e) => {
         e.stopPropagation();
         p.toggleShow();
       }}
@@ -78,6 +78,7 @@ const Child: Component<{
         class={combineClasses(s.Menu, "shadow")}
         style={{ padding: (p.padding as any) || "1rem", ...p.style }}
         onClick={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
       >
         <Flex
           class={s.CenterMenuHeader}
@@ -85,7 +86,7 @@ const Child: Component<{
           justifyContent="space-between"
           alignItems="center"
         >
-          <div class={s.CenterMenuTitle}>{p.title}</div>
+          <h1>{p.title}</h1>
           <Flex alignItems="center">
             {p.leftOfX && p.leftOfX()}
             <button class="red" onClick={p.toggleShow}>

frontend/src/components/shared/menu/menu.module.scss

@@ -142,11 +142,6 @@ $anim-time: 350ms;
   background-color: rgba(0, 0, 0, 0.4);
 }
 
-.CenterMenuTitle {
-	font-size: 1.5rem;
-	font-weight: 500;
-}
-
 .SelectorItem:hover {
   background-color: c.$lightgrey;
 }