Adds documentation tab (#5684)

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -63,6 +63,8 @@ class HassioAddonConfigDashboard extends LitElement {
           .content {
             width: 50%;
             margin: auto;
+            margin-top: 8px;
+            max-width: 1024px;
           }
         }
         hassio-addon-network,

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -0,0 +1,89 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
+
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import { HomeAssistant } from "../../../../src/types";
+import {
+  HassioAddonDetails,
+  fetchHassioAddonDocumentation,
+} from "../../../../src/data/hassio/addon";
+import "../../../../src/components/ha-markdown";
+import "../../../../src/layouts/loading-screen";
+import { hassioStyle } from "../../resources/hassio-style";
+import { haStyle } from "../../../../src/resources/styles";
+
+@customElement("hassio-addon-documentation-tab")
+class HassioAddonDocumentationDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public addon?: HassioAddonDetails;
+
+  @property() private _error?: string;
+
+  @property() private _content?: string;
+
+  public async connectedCallback(): Promise<void> {
+    super.connectedCallback();
+    await this._loadData();
+  }
+
+  protected render(): TemplateResult {
+    if (!this.addon) {
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+    return html`
+      <div class="content">
+        ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+        <div class="card-content">
+          ${this._content
+            ? html`<ha-markdown .content=${this._content}></ha-markdown>`
+            : html`<loading-screen></loading-screen>`}
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        @media screen and (min-width: 1024px) {
+          .content {
+            width: 50%;
+            margin: auto;
+            max-width: 1024px;
+          }
+        }
+      `,
+    ];
+  }
+
+  private async _loadData(): Promise<void> {
+    this._error = undefined;
+    try {
+      this._content = await fetchHassioAddonDocumentation(
+        this.hass,
+        this.addon!.slug
+      );
+    } catch (err) {
+      this._error = `Failed to get addon documentation, ${
+        err.body?.message || err
+      }`;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-documentation-tab": HassioAddonDocumentationDashboard;
+  }
+}

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -63,6 +63,14 @@ class HassioAddonDashboard extends LitElement {
       },
     ];
 
+    if (this.addon.documentation) {
+      addonTabs.push({
+        name: "Documentation",
+        path: `/hassio/addon/${this.addon.slug}/documentation`,
+        icon: "mdi:text-box",
+      });
+    }
+
     if (this.addon.version) {
       addonTabs.push(
         {

hassio/src/addon-view/hassio-addon-router.ts

@@ -8,6 +8,7 @@ import { HomeAssistant } from "../../../src/types";
 import "./info/hassio-addon-info-tab";
 import "./config/hassio-addon-config-tab";
 import "./log/hassio-addon-log-tab";
+import "./documentation/hassio-addon-documentation-tab";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
 
 @customElement("hassio-addon-router")
@@ -25,6 +26,9 @@ class HassioAddonRouter extends HassRouterPage {
       info: {
         tag: "hassio-addon-info-tab",
       },
+      documentation: {
+        tag: "hassio-addon-documentation-tab",
+      },
       config: {
         tag: "hassio-addon-config-tab",
       },

hassio/src/addon-view/info/hassio-addon-info-tab.ts

@@ -48,7 +48,9 @@ class HassioAddonInfoDashboard extends LitElement {
         @media screen and (min-width: 1024px) {
           .content {
             width: 50%;
-            margin-left: 25%;
+            margin: auto;
+            margin-top: 8px;
+            max-width: 1024px;
           }
         }
       `,

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -45,7 +45,9 @@ class HassioAddonLogDashboard extends LitElement {
         @media screen and (min-width: 1024px) {
           .content {
             width: 50%;
-            margin-left: 25%;
+            margin: auto;
+            margin-top: 8px;
+            max-width: 1024px;
           }
         }
       `,

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -13,6 +13,7 @@ import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
+import "../../../../src/layouts/loading-screen";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -73,9 +74,7 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get supervisor logs, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to get addon logs, ${err.body?.message || err}`;
     }
   }
 

src/data/hassio/addon.ts

@@ -26,6 +26,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   auto_update: boolean;
   url: null | string;
   detached: boolean;
+  documentation: boolean;
   available: boolean;
   arch: "armhf" | "aarch64" | "i386" | "amd64";
   machine: any;
@@ -135,6 +136,13 @@ export const fetchHassioAddonLogs = async (
   return hass.callApi<string>("GET", `hassio/addons/${slug}/logs`);
 };
 
+export const fetchHassioAddonDocumentation = async (
+  hass: HomeAssistant,
+  slug: string
+) => {
+  return hass.callApi<string>("GET", `hassio/addons/${slug}/documentation`);
+};
+
 export const setHassioAddonOption = async (
   hass: HomeAssistant,
   slug: string,