Add support for device configuration URL (#10251)

* Add support for device configuration URL

* Lint

* Tweak text

gallery/src/demos/demo-integration-card.ts

@@ -212,6 +212,7 @@ const createDeviceRegistryEntries = (
     area_id: null,
     name_by_user: null,
     disabled_by: null,
+    configuration_url: null,
   },
 ];
 

src/data/device_registry.ts

@@ -18,6 +18,7 @@ export interface DeviceRegistryEntry {
   name_by_user: string | null;
   entry_type: "service" | null;
   disabled_by: string | null;
+  configuration_url: string | null;
 }
 
 export interface DeviceEntityLookup {

src/panels/config/devices/ha-config-device-page.ts

@@ -1,4 +1,4 @@
-import { mdiPencil, mdiPlusCircle } from "@mdi/js";
+import { mdiPencil, mdiPlusCircle, mdiOpenInNew } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,6 +13,7 @@ import { slugify } from "../../../common/string/slugify";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-svg-icon";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import {
   ConfigEntry,
@@ -316,6 +317,31 @@ export class HaConfigDevicePage extends LitElement {
                     `
                   : html``
               }
+              ${
+                device.configuration_url
+                  ? html`
+                      <div class="card-actions" slot="actions">
+                        <a
+                          href=${device.configuration_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <mwc-button>
+                            ${this.hass.localize(
+                              `ui.panel.config.devices.open_configuration_url_${
+                                device.entry_type || "device"
+                              }`
+                            )}
+                            <ha-svg-icon
+                              .path=${mdiOpenInNew}
+                              slot="trailingIcon"
+                            ></ha-svg-icon>
+                          </mwc-button>
+                        </a>
+                      </div>
+                    `
+                  : ""
+              }
               ${this._renderIntegrationInfo(device, integrations)}
               </ha-device-info-card>
 
@@ -944,6 +970,10 @@ export class HaConfigDevicePage extends LitElement {
         ha-card a {
           color: var(--primary-text-color);
         }
+
+        ha-svg-icon[slot="trailingIcon"] {
+          display: block;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -2131,6 +2131,8 @@
             "config_entry": "Config entry"
           },
           "enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
+          "open_configuration_url_device": "Visit device",
+          "open_configuration_url_service": "Visit service",
           "automation": {
             "automations": "Automations",
             "no_automations": "No automations",