Docs integrations overflow (#6278)

src/panels/config/integrations/ha-config-integrations.ts

@@ -47,7 +47,11 @@ import {
   EntityRegistryEntry,
   subscribeEntityRegistry,
 } from "../../../data/entity_registry";
-import { domainToName } from "../../../data/integration";
+import {
+  domainToName,
+  fetchIntegrationManifests,
+  IntegrationManifest,
+} from "../../../data/integration";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-loading-screen";
@@ -106,6 +110,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
 
   @property() private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
 
+  @property() private _manifests!: { [domain: string]: IntegrationManifest };
+
   @property() private _showIgnored = false;
 
   @property() private _searchParms = new URLSearchParams(
@@ -211,6 +217,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     super.firstUpdated(changed);
     this._loadConfigEntries();
     this.hass.loadBackendTranslation("title", undefined, true);
+    this._fetchManifests();
   }
 
   protected updated(changed: PropertyValues) {
@@ -390,6 +397,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     .hass=${this.hass}
                     .domain=${domain}
                     .items=${items}
+                    .manifest=${this._manifests[domain]}
                     .entityRegistryEntries=${this._entityRegistryEntries}
                     .deviceRegistryEntries=${this._deviceRegistryEntries}
                   ></ha-integration-card>`
@@ -470,6 +478,13 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     });
   }
 
+  private async _fetchManifests() {
+    const manifests = {};
+    const fetched = await fetchIntegrationManifests(this.hass);
+    for (const manifest of fetched) manifests[manifest.domain] = manifest;
+    this._manifests = manifests;
+  }
+
   private _handleRemoved(ev: HASSDomEvent<ConfigEntryRemovedEvent>) {
     this._configEntries = this._configEntries!.filter(
       (entry) => entry.entry_id !== ev.detail.entryId

src/panels/config/integrations/ha-integration-card.ts

@@ -9,7 +9,7 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { ConfigEntryExtended } from "./ha-config-integrations";
-import { domainToName } from "../../../data/integration";
+import { domainToName, IntegrationManifest } from "../../../data/integration";
 import {
   ConfigEntry,
   updateConfigEntry,
@@ -27,7 +27,7 @@ import {
 import { haStyle } from "../../../resources/styles";
 import "../../../components/ha-icon-next";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { mdiDotsVertical } from "@mdi/js";
+import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
 
 export interface ConfigEntryUpdatedEvent {
   entry: ConfigEntry;
@@ -68,12 +68,18 @@ export class HaIntegrationCard extends LitElement {
 
   @property() public items!: ConfigEntryExtended[];
 
+  @property() public manifest!: IntegrationManifest;
+
   @property() public entityRegistryEntries!: EntityRegistryEntry[];
 
   @property() public deviceRegistryEntries!: DeviceRegistryEntry[];
 
   @property() public selectedConfigEntryId?: string;
 
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+  }
+
   protected render(): TemplateResult {
     if (this.items.length === 1) {
       return this._renderSingleEntry(this.items[0]);
@@ -125,6 +131,7 @@ export class HaIntegrationCard extends LitElement {
   private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult {
     const devices = this._getDevices(item);
     const entities = this._getEntities(item);
+
     return html`
       <ha-card
         outlined
@@ -229,6 +236,25 @@ export class HaIntegrationCard extends LitElement {
                 "ui.panel.config.integrations.config_entry.system_options"
               )}
             </mwc-list-item>
+            ${!this.manifest
+              ? ""
+              : html`
+                  <a
+                    class="documentation"
+                    href=${this.manifest.documentation}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <mwc-list-item hasMeta>
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.config_entry.documentation"
+                      )}<ha-svg-icon
+                        slot="meta"
+                        .path=${mdiOpenInNew}
+                      ></ha-svg-icon>
+                    </mwc-list-item>
+                  </a>
+                `}
             <mwc-list-item class="warning" @click=${this._removeIntegration}>
               ${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.delete"
@@ -360,6 +386,9 @@ export class HaIntegrationCard extends LitElement {
           align-items: center;
           padding-right: 5px;
         }
+        .card-actions .documentation {
+          color: var(--primary-text-color);
+        }
         .group-header {
           display: flex;
           align-items: center;
@@ -402,6 +431,7 @@ export class HaIntegrationCard extends LitElement {
         }
         ha-button-menu {
           color: var(--secondary-text-color);
+          --mdc-menu-min-width: 200px;
         }
         @media (min-width: 563px) {
           paper-listbox {

src/translations/en.json

@@ -1469,6 +1469,7 @@
             "rename": "Rename",
             "options": "Options",
             "system_options": "System options",
+            "documentation": "Documentation",
             "delete": "Delete",
             "delete_confirm": "Are you sure you want to delete this integration?",
             "restart_confirm": "Restart Home Assistant to finish removing this integration",