copy listener url

frontend/public/icons/clipboard.svg

@@ -0,0 +1,10 @@
+<?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>
+	<path fill="#fceade" d="M13,2c0-0.55-0.45-1-1-1h-0.78c-0.35-0.6-0.98-1-1.72-1S8.12,0.4,7.78,1H7C6.45,1,6,1.45,6,2v2h7V2z"/>
+	<path fill="#fceade" d="M16,2h-2v2v1h-1H6H5V4V2H3C2.45,2,2,2.45,2,3v16c0,0.55,0.45,1,1,1h13c0.55,0,1-0.45,1-1V3C17,2.45,16.55,2,16,2z"/>
+</g>
+</svg>

frontend/src/components/builds/tabs/git-config/Git.tsx

@@ -58,6 +58,7 @@ const Git: Component<{}> = (p) => {
           />
         </Flex>
       </Show>
+      
     </Grid>
   );
 };

frontend/src/components/builds/tabs/git-config/GitConfig.tsx

@@ -1,4 +1,6 @@
 import { Component, Show } from "solid-js";
+import { pushNotification, URL } from "../../../..";
+import { copyToClipboard } from "../../../../util/helpers";
 import ConfirmButton from "../../../util/ConfirmButton";
 import Icon from "../../../util/Icon";
 import Flex from "../../../util/layout/Flex";
@@ -10,12 +12,30 @@ import OnClone from "./OnClone";
 
 const GitConfig: Component<{}> = (p) => {
   const { build, reset, save, userCanUpdate } = useConfig();
+  const listenerUrl = () => `${URL}/api/listener/build/${build._id}`;
   return (
     <Show when={build.loaded}>
       <Grid class="config">
         <Grid class="config-items scroller">
           <Git />
           <OnClone />
+          <Grid class="config-item shadow">
+            <h1>webhook url</h1>
+            <Flex justifyContent="space-between" alignItems="center">
+              <div class="ellipsis" style={{ width: "350px" }}>
+                {listenerUrl()}
+              </div>
+              <button
+                class="blue"
+                onClick={() => {
+                  copyToClipboard(listenerUrl());
+                  pushNotification("good", "copied url to clipboard");
+                }}
+              >
+                <Icon type="clipboard" />
+              </button>
+            </Flex>
+          </Grid>
         </Grid>
         <Show when={userCanUpdate() && build.updated}>
           <Show

frontend/src/components/deployment/tabs/config/Config.tsx

@@ -17,9 +17,12 @@ import RepoMount from "./mount-repo/RepoMount";
 import { OnClone, OnPull } from "./mount-repo/OnGit";
 import Loading from "../../../util/loading/Loading";
 import Owners from "./Owners";
+import { pushNotification, URL } from "../../../..";
+import { copyToClipboard } from "../../../../util/helpers";
 
 const Config: Component<{}> = (p) => {
   const { deployment, reset, save, userCanUpdate } = useConfig();
+  const listenerUrl = () => `${URL}/api/listener/deployment/${deployment._id}`;
   return (
     <Show when={deployment.loaded}>
       <Grid class="config">
@@ -49,6 +52,23 @@ const Config: Component<{}> = (p) => {
               element: (
                 <Grid class="config-items scroller">
                   <Git />
+                  <Grid class="config-item shadow">
+                    <h1>webhook url</h1>
+                    <Flex justifyContent="space-between" alignItems="center">
+                      <div class="ellipsis" style={{ width: "350px" }}>
+                        {listenerUrl()}
+                      </div>
+                      <button
+                        class="blue"
+                        onClick={() => {
+                          copyToClipboard(listenerUrl());
+                          pushNotification("good", "copied url to clipboard");
+                        }}
+                      >
+                        <Icon type="clipboard" />
+                      </button>
+                    </Flex>
+                  </Grid>
                   <RepoMount />
                   <OnClone />
                   <OnPull />

frontend/src/components/util/Icon.tsx

@@ -34,7 +34,8 @@ export type IconType =
   | "cut"
   | "fullscreen"
   | "github"
-  | "edit";
+  | "edit"
+  | "clipboard";
 
 const Icon: Component<{
   type: IconType;

frontend/src/style/index.scss

@@ -6,8 +6,8 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   // font-family: "Chakra Petch", sans-serif;
   // font-family: "Work Sans", sans-serif;
@@ -192,3 +192,10 @@ input::placeholder {
   background: rgba(252, 234, 222, 0.3);
   border-radius: 0.25rem;
 }
+
+.ellipsis {
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

frontend/src/util/helpers.ts

@@ -104,3 +104,6 @@ export function serverStatusClass(
   }
 }
 
+export function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text);
+}