Add diagnostics toggle (#6525)

* Add diagnostics toggle

* No need to check

* Expected blank line between class members

* Mimic the profile page

* Move settings-row to components and use button

* Update src/components/ha-settings-row.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/system/hassio-supervisor-info.ts

@@ -17,7 +17,12 @@ import {
   setSupervisorOption,
   SupervisorOptions,
 } from "../../../src/data/hassio/supervisor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import "../../../src/components/ha-switch";
+import {
+  showConfirmationDialog,
+  showAlertDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
+import "../../../src/components/ha-settings-row";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
@@ -55,6 +60,26 @@ class HassioSupervisorInfo extends LitElement {
                 : ""}
             </tbody>
           </table>
+          <div class="options">
+            <ha-settings-row>
+              <span slot="heading">
+                Share Diagnostics
+              </span>
+              <span slot="description">
+                Share crash reports and diagnostic information.
+                <button
+                  class="link"
+                  @click=${this._diagnosticsInformationDialog}
+                >
+                  Learn more
+                </button>
+              </span>
+              <ha-switch
+                .checked=${this.supervisorInfo.diagnostics}
+                @change=${this._toggleDiagnostics}
+              ></ha-switch>
+            </ha-settings-row>
+          </div>
           ${this._errors
             ? html` <div class="errors">Error: ${this._errors}</div> `
             : ""}
@@ -111,7 +136,8 @@ class HassioSupervisorInfo extends LitElement {
           box-sizing: border-box;
           height: calc(100% - 47px);
         }
-        .info {
+        .info,
+        .options {
           width: 100%;
         }
         .info td:nth-child(2) {
@@ -121,6 +147,12 @@ class HassioSupervisorInfo extends LitElement {
           color: var(--error-color);
           margin-top: 16px;
         }
+        ha-settings-row {
+          padding: 0;
+        }
+        button.link {
+          color: var(--primary-color);
+        }
       `,
     ];
   }
@@ -181,6 +213,40 @@ class HassioSupervisorInfo extends LitElement {
       this._errors = `Error joining beta channel, ${err.body?.message || err}`;
     }
   }
+
+  private async _diagnosticsInformationDialog() {
+    await showAlertDialog(this, {
+      title: "Help Improve Home Assistant",
+      text: html`Would you want to automatically share crash reports and
+        diagnostic information when the supervisor encounters unexpected errors?
+        <br /><br />
+        This will allow us to fix the problems, the information is only
+        accessible to the Home Assistant Core team and will not be shared with
+        others.
+        <br /><br />
+        The data does not include any private/sensetive information and you can
+        disable this in settings at any time you want.`,
+    });
+  }
+
+  private async _toggleDiagnostics() {
+    try {
+      const data: SupervisorOptions = {
+        diagnostics: !this.supervisorInfo?.diagnostics,
+      };
+      await setSupervisorOption(this.hass, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "option",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._errors = `Error changing supervisor setting, ${
+        err.body?.message || err
+      }`;
+    }
+  }
 }
 
 declare global {

src/components/ha-settings-row.ts

@@ -0,0 +1,59 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  SVGTemplateResult,
+} from "lit-element";
+import "@polymer/paper-item/paper-item-body";
+
+@customElement("ha-settings-row")
+export class HaSettingsRow extends LitElement {
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
+
+  @property({ type: Boolean, attribute: "three-line" })
+  public threeLine = false;
+
+  protected render(): SVGTemplateResult {
+    return html`
+      <style>
+        paper-item-body {
+          padding-right: 16px;
+        }
+      </style>
+      <paper-item-body
+        ?two-line=${!this.threeLine}
+        ?three-line=${!this.threeLine}
+      >
+        <slot name="heading"></slot>
+        <div secondary><slot name="description"></slot></div>
+      </paper-item-body>
+      <slot></slot>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        padding: 0 16px;
+        align-content: normal;
+        align-self: auto;
+        align-items: center;
+      }
+      :host([narrow]) {
+        align-items: normal;
+        flex-direction: column;
+        border-top: 1px solid var(--divider-color);
+        padding-bottom: 8px;
+      }
+    `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-settings-row": HaSettingsRow;
+  }
+}

src/data/hassio/supervisor.ts

@@ -31,6 +31,7 @@ export interface CreateSessionResponse {
 
 export interface SupervisorOptions {
   channel?: "beta" | "dev" | "stable";
+  diagnostics?: boolean;
   addons_repositories?: string[];
 }
 

src/panels/profile/ha-advanced-mode-row.ts

@@ -14,7 +14,7 @@ import {
   getOptimisticFrontendUserDataCollection,
 } from "../../data/frontend";
 import { HomeAssistant } from "../../types";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 @customElement("ha-advanced-mode-row")
 class AdvancedModeRow extends LitElement {

src/panels/profile/ha-force-narrow-row.ts

@@ -9,7 +9,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
 import type { HomeAssistant } from "../../types";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 @customElement("ha-force-narrow-row")
 class HaForcedNarrowRow extends LitElement {

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -13,7 +13,7 @@ import {
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import "../../styles/polymer-ha-style";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 /*
  * @appliesMixin EventsMixin

src/panels/profile/ha-pick-dashboard-row.ts

@@ -13,7 +13,7 @@ import "../../components/ha-paper-dropdown-menu";
 import { fetchDashboards, LovelaceDashboard } from "../../data/lovelace";
 import { setDefaultPanel } from "../../data/panel";
 import { HomeAssistant } from "../../types";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 @customElement("ha-pick-dashboard-row")
 class HaPickDashboardRow extends LitElement {

src/panels/profile/ha-pick-language-row.js

@@ -6,7 +6,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../components/ha-paper-dropdown-menu";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 /*
  * @appliesMixin LocalizeMixin

src/panels/profile/ha-pick-theme-row.ts

@@ -12,7 +12,7 @@ import {
   css,
 } from "lit-element";
 import { HomeAssistant } from "../../types";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-formfield";
 import "../../components/ha-radio";

src/panels/profile/ha-push-notifications-row.js

@@ -6,7 +6,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { pushSupported } from "../../components/ha-push-notifications-toggle";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 /*
  * @appliesMixin LocalizeMixin

src/panels/profile/ha-refresh-tokens-card.js

@@ -11,7 +11,7 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../dialogs/generic/show-dialog-box";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 /*
  * @appliesMixin EventsMixin

src/panels/profile/ha-set-suspend-row.ts

@@ -9,7 +9,7 @@ import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
 import type { HomeAssistant } from "../../types";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 declare global {
   // for fire event

src/panels/profile/ha-set-vibrate-row.ts

@@ -10,7 +10,7 @@ import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
-import "./ha-settings-row";
+import "../../components/ha-settings-row";
 
 @customElement("ha-set-vibrate-row")
 class HaSetVibrateRow extends LitElement {

src/panels/profile/ha-settings-row.js

@@ -1,48 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HaSettingsRow extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          padding: 0 16px;
-          align-content: normal;
-          align-self: auto;
-          align-items: center;
-        }
-        :host([narrow]) {
-          align-items: normal;
-          flex-direction: column;
-          border-top: 1px solid var(--divider-color);
-          padding-bottom: 8px;
-        }
-        paper-item-body {
-          padding-right: 16px;
-        }
-      </style>
-      <paper-item-body two-line$="[[!threeLine]]" three-line$="[[threeLine]]">
-        <slot name="heading"></slot>
-        <div secondary><slot name="description"></slot></div>
-      </paper-item-body>
-      <slot></slot>
-    `;
-  }
-
-  static get properties() {
-    return {
-      narrow: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-      threeLine: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-}
-
-customElements.define("ha-settings-row", HaSettingsRow);