Update webhook dialog (#13774)

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,18 +1,19 @@
 import "@material/mwc-button";
+import { mdiContentCopy, mdiOpenInNew } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
-import type { HaTextField } from "../../../../components/ha-textfield";
+import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
+import { showToast } from "../../../../util/toast";
 import { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 
-const inputLabel = "Public URL – Click to copy to clipboard";
-
 export class DialogManageCloudhook extends LitElement {
   protected hass?: HomeAssistant;
 
@@ -44,26 +45,19 @@ export class DialogManageCloudhook extends LitElement {
     return html`
       <ha-dialog
         open
-        .heading=${this.hass!.localize(
-          "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
-          "name",
-          webhook.name
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass!,
+          this.hass!.localize(
+            "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
+            { name: webhook.name }
+          )
         )}
       >
         <div>
           <p>
-            ${this.hass!.localize(
-              "ui.panel.config.cloud.dialog_cloudhook.available_at"
-            )}
-          </p>
-          <ha-textfield
-            .label=${inputLabel}
-            .value=${cloudhook.cloudhook_url}
-            @click=${this._copyClipboard}
-            @blur=${this._restoreLabel}
-          ></ha-textfield>
-          <p>
-            ${cloudhook.managed
+            ${!cloudhook.managed
               ? html`
                   ${this.hass!.localize(
                     "ui.panel.config.cloud.dialog_cloudhook.managed_by_integration"
@@ -79,7 +73,29 @@ export class DialogManageCloudhook extends LitElement {
                     )}</button
                   >.
                 `}
+            <br />
+            <a href=${docsUrl} target="_blank" rel="noreferrer">
+              ${this.hass!.localize(
+                "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+              )}
+              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+            </a>
           </p>
+          <ha-textfield
+            .label=${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.public_url"
+            )}
+            .value=${cloudhook.cloudhook_url}
+            iconTrailing
+            readOnly
+            @click=${this.focusInput}
+          >
+            <ha-icon-button
+              @click=${this._copyUrl}
+              slot="trailingIcon"
+              .path=${mdiContentCopy}
+            ></ha-icon-button>
+          </ha-textfield>
         </div>
 
         <a
@@ -102,33 +118,40 @@ export class DialogManageCloudhook extends LitElement {
   }
 
   private async _disableWebhook() {
-    showConfirmationDialog(this, {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable_title"
+      ),
       text: this.hass!.localize(
-        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable"
+        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable_text",
+        { name: this._params!.webhook.name }
       ),
       dismissText: this.hass!.localize("ui.common.cancel"),
       confirmText: this.hass!.localize("ui.common.disable"),
-      confirm: () => {
-        this._params!.disableHook();
-        this.closeDialog();
-      },
+      destructive: true,
     });
-  }
-
-  private _copyClipboard(ev: FocusEvent) {
-    const textField = ev.currentTarget as HaTextField;
-    try {
-      copyToClipboard(textField.value);
-      textField.label = this.hass!.localize(
-        "ui.panel.config.cloud.dialog_cloudhook.copied_to_clipboard"
-      );
-    } catch (err: any) {
-      // Copying failed. Oh no
+    if (confirmed) {
+      this._params!.disableHook();
+      this.closeDialog();
     }
   }
 
-  private _restoreLabel() {
-    this._input.label = inputLabel;
+  private focusInput(ev) {
+    const inputElement = ev.currentTarget as HaTextField;
+    inputElement.select();
+  }
+
+  private async _copyUrl(ev): Promise<void> {
+    if (!this.hass) return;
+    ev.stopPropagation();
+    const inputElement = ev.target.parentElement as HaTextField;
+    inputElement.select();
+    const url = this.hass.hassUrl(inputElement.value);
+
+    await copyToClipboard(url);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
   }
 
   static get styles(): CSSResultGroup {
@@ -142,12 +165,24 @@ export class DialogManageCloudhook extends LitElement {
         ha-textfield {
           display: block;
         }
+        ha-textfield > ha-icon-button {
+          --mdc-icon-button-size: 24px;
+          --mdc-icon-size: 18px;
+        }
         button.link {
           color: var(--primary-color);
+          text-decoration: none;
         }
         a {
           text-decoration: none;
         }
+        a ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
+        p {
+          margin-top: 0;
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -2558,14 +2558,14 @@
           },
           "dialog_cloudhook": {
             "webhook_for": "Webhook for {name}",
-            "available_at": "The webhook is available at the following URL:",
             "managed_by_integration": "This webhook is managed by an integration and cannot be disabled.",
             "info_disable_webhook": "If you no longer want to use this webhook, you can",
             "link_disable_webhook": "disable it",
+            "public_url": "Public address",
             "view_documentation": "View documentation",
             "close": "Close",
-            "confirm_disable": "Are you sure you want to disable this webhook?",
-            "copied_to_clipboard": "Copied to clipboard"
+            "confirm_disable_title": "Disable webhook",
+            "confirm_disable_text": "Webhook for {name} will be disabled."
           }
         },
         "devices": {