From ce7cb8fe4503aaf78e5ab559272f6c932705a947 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Tue, 28 Feb 2023 04:58:39 +0000 Subject: [PATCH] improve confirm menu with copy button --- frontend/src/components/build/Header.tsx | 2 +- .../build/tabs/config/WebhookUrl.tsx | 18 ++------ .../src/components/deployment/Actions.tsx | 6 +-- frontend/src/components/deployment/Header.tsx | 4 +- .../tabs/config/container/WebhookUrl.tsx | 42 ++++++++----------- frontend/src/components/server/Header.tsx | 2 +- .../components/shared/ConfirmMenuButton.tsx | 8 ++++ .../src/components/shared/CopyClipboard.tsx | 22 ++++++++++ .../src/components/shared/menu/CenterMenu.tsx | 5 ++- .../components/shared/menu/menu.module.scss | 5 --- 10 files changed, 61 insertions(+), 53 deletions(-) create mode 100644 frontend/src/components/shared/CopyClipboard.tsx diff --git a/frontend/src/components/build/Header.tsx b/frontend/src/components/build/Header.tsx index 16d566ae7..196af299f 100644 --- a/frontend/src/components/build/Header.tsx +++ b/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} > diff --git a/frontend/src/components/build/tabs/config/WebhookUrl.tsx b/frontend/src/components/build/tabs/config/WebhookUrl.tsx index e4b6e1d65..a87a65f37 100644 --- a/frontend/src/components/build/tabs/config/WebhookUrl.tsx +++ b/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 { copyToClipboard, getId } from "../../../../util/helpers"; -import ConfirmButton from "../../../shared/ConfirmButton"; -import Icon from "../../../shared/Icon"; +import { client } from "../../../.."; +import { getId } from "../../../../util/helpers"; +import CopyClipboard from "../../../shared/CopyClipboard"; 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()} - { - copyToClipboard(listenerUrl() || ""); - pushNotification("good", "copied url to clipboard"); - }} - confirm={} - > - - + ); diff --git a/frontend/src/components/deployment/Actions.tsx b/frontend/src/components/deployment/Actions.tsx index 521fc0edb..2ab33cf83 100644 --- a/frontend/src/components/deployment/Actions.tsx +++ b/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()!} > @@ -232,7 +232,7 @@ const RemoveContainer = () => { onConfirm={() => { client.remove_container(params.id); }} - title={`destroy container | ${name()}`} + title="destroy container" match={name()!} > @@ -298,7 +298,7 @@ const Stop = () => { onConfirm={() => { client.stop_container(params.id); }} - title={`stop container | ${name()}`} + title="stop container" match={name()!} > diff --git a/frontend/src/components/deployment/Header.tsx b/frontend/src/components/deployment/Header.tsx index 421795f16..0a0f4a1a2 100644 --- a/frontend/src/components/deployment/Header.tsx +++ b/frontend/src/components/deployment/Header.tsx @@ -88,9 +88,7 @@ const Header: Component<{}> = (p) => { client.delete_deployment(params.id); }} class="red" - title={`delete deployment | ${ - deployment().deployment.name - }`} + title="delete deployment" match={deployment().deployment.name} info={ diff --git a/frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx b/frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx index 346da2820..fdced383e 100644 --- a/frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx +++ b/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 { copyToClipboard, getId } from "../../../../../util/helpers"; -import ConfirmButton from "../../../../shared/ConfirmButton"; -import Icon from "../../../../shared/Icon"; +import { client } from "../../../../.."; +import { getId } from "../../../../../util/helpers"; +import CopyClipboard from "../../../../shared/CopyClipboard"; 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 [github_base_url] = createResource(() => client.get_github_webhook_base_url()); - const listenerUrl = () => { - if (github_base_url()) { - return `${github_base_url()}/api/listener/deployment/${getId(deployment)}`; - } - } - return ( + const { deployment } = useConfig(); + const [github_base_url] = createResource(() => + client.get_github_webhook_base_url() + ); + const listenerUrl = () => { + if (github_base_url()) { + return `${github_base_url()}/api/listener/deployment/${getId( + deployment + )}`; + } + }; + return (

webhook url

= (p) => { {listenerUrl()} - { - copyToClipboard(listenerUrl() || ""); - pushNotification("good", "copied url to clipboard"); - }} - confirm={} - > - - + ); -} +}; -export default WebhookUrl; \ No newline at end of file +export default WebhookUrl; diff --git a/frontend/src/components/server/Header.tsx b/frontend/src/components/server/Header.tsx index bf7cadc78..51f57027e 100644 --- a/frontend/src/components/server/Header.tsx +++ b/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={
diff --git a/frontend/src/components/shared/ConfirmMenuButton.tsx b/frontend/src/components/shared/ConfirmMenuButton.tsx index 389ce2d17..a2eb05f98 100644 --- a/frontend/src/components/shared/ConfirmMenuButton.tsx +++ b/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={() => ( + +

{p.match}

+ + + )} targetClass={p.class} target={p.children} content={() => ( diff --git a/frontend/src/components/shared/CopyClipboard.tsx b/frontend/src/components/shared/CopyClipboard.tsx new file mode 100644 index 000000000..d88c73914 --- /dev/null +++ b/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 ( + { + copyToClipboard(p.copyText); + pushNotification("good", `copied ${p.copying || "text"} to clipboard`); + }} + confirm={} + > + + + ); +} + +export default CopyClipboard; \ No newline at end of file diff --git a/frontend/src/components/shared/menu/CenterMenu.tsx b/frontend/src/components/shared/menu/CenterMenu.tsx index aa6d91d7e..acd224917 100644 --- a/frontend/src/components/shared/menu/CenterMenu.tsx +++ b/frontend/src/components/shared/menu/CenterMenu.tsx @@ -68,7 +68,7 @@ const Child: Component<{ return ( { + 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()} > -
{p.title}
+

{p.title}

{p.leftOfX && p.leftOfX()}