Add integrations to dev info page (#4800)

* Add integrations to dev info page

* Fix annoying looking html tags

* What happened here

src/panels/developer-tools/info/developer-tools-info.ts

@@ -11,6 +11,7 @@ import { HomeAssistant } from "../../../types";
 import { haStyle } from "../../../resources/styles";
 
 import "./system-health-card";
+import "./integrations-card";
 
 const JS_TYPE = __BUILD__;
 const JS_VERSION = __VERSION__;
@@ -149,6 +150,7 @@ class HaPanelDevInfo extends LitElement {
       </div>
       <div class="content">
         <system-health-card .hass=${this.hass}></system-health-card>
+        <integrations-card .hass=${this.hass}></integrations-card>
       </div>
     `;
   }
@@ -205,7 +207,8 @@ class HaPanelDevInfo extends LitElement {
           color: var(--dark-primary-color);
         }
 
-        system-health-card {
+        system-health-card,
+        integrations-card {
           display: block;
           max-width: 600px;
           margin: 0 auto;

src/panels/developer-tools/info/integrations-card.ts

@@ -0,0 +1,75 @@
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
+import { HomeAssistant } from "../../../types";
+import memoizeOne from "memoize-one";
+
+@customElement("integrations-card")
+class IntegrationsCard extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  private _sortedIntegrations = memoizeOne((components: string[]) => {
+    return components.filter((comp) => !comp.includes(".")).sort();
+  });
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Integrations">
+        <table class="card-content">
+          <tbody>
+            ${this._sortedIntegrations(this.hass!.config.components).map(
+              (domain) => html`
+                <tr>
+                  <td>${domain}</td>
+                  <td>
+                    <a
+                      href=${`https://www.home-assistant.io/integrations/${domain}`}
+                      target="_blank"
+                    >
+                      Documentation
+                    </a>
+                  </td>
+                  <td>
+                    <a
+                      href=${`https://github.com/home-assistant/home-assistant/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`}
+                      target="_blank"
+                    >
+                      Issues
+                    </a>
+                  </td>
+                </tr>
+              `
+            )}
+          </tbody>
+        </table>
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      td {
+        line-height: 2em;
+        padding: 0 8px;
+      }
+      td:first-child {
+        padding-left: 0;
+      }
+      a {
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "integrations-card": IntegrationsCard;
+  }
+}

src/panels/developer-tools/info/system-health-card.ts

@@ -78,7 +78,7 @@ class SystemHealthCard extends LitElement {
     }
 
     return html`
-      <ha-card header="${this.hass.localize("domain.system_health")}">
+      <ha-card .header=${this.hass.localize("domain.system_health")}>
         <div class="card-content">${sections}</div>
       </ha-card>
     `;