Add opt-in toggle for zwave-js telemetry to config panel (#8958)

src/data/zwave_js.ts

@@ -56,6 +56,11 @@ export interface ZWaveJSSetConfigParamData {
   value: string | number;
 }
 
+export interface ZWaveJSDataCollectionStatus {
+  enabled: boolean;
+  opted_in: boolean;
+}
+
 export enum NodeStatus {
   Unknown,
   Asleep,
@@ -75,6 +80,26 @@ export const fetchNetworkStatus = (
     entry_id,
   });
 
+export const fetchDataCollectionStatus = (
+  hass: HomeAssistant,
+  entry_id: string
+): Promise<ZWaveJSDataCollectionStatus> =>
+  hass.callWS({
+    type: "zwave_js/data_collection_status",
+    entry_id,
+  });
+
+export const setDataCollectionPreference = (
+  hass: HomeAssistant,
+  entry_id: string,
+  opted_in: boolean
+): Promise<any> =>
+  hass.callWS({
+    type: "zwave_js/update_data_collection_preference",
+    entry_id,
+    opted_in,
+  });
+
 export const fetchNodeStatus = (
   hass: HomeAssistant,
   entry_id: string,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -17,9 +17,11 @@ import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-icon-next";
 import { getSignedPath } from "../../../../../data/auth";
 import {
+  fetchDataCollectionStatus,
   fetchNetworkStatus,
   fetchNodeStatus,
   NodeStatus,
+  setDataCollectionPreference,
   ZWaveJSNetwork,
   ZWaveJSNode,
 } from "../../../../../data/zwave_js";
@@ -55,6 +57,8 @@ class ZWaveJSConfigDashboard extends LitElement {
 
   @internalProperty() private _icon = mdiCircle;
 
+  @internalProperty() private _dataCollectionOptIn?: boolean;
+
   protected firstUpdated() {
     if (this.hass) {
       this._fetchData();
@@ -167,6 +171,39 @@ class ZWaveJSConfigDashboard extends LitElement {
                     </mwc-button>
                   </div>
                 </ha-card>
+                <ha-card>
+                  <div class="card-header">
+                    <h1>Third-Party Data Reporting</h1>
+                    ${this._dataCollectionOptIn !== undefined
+                      ? html`
+                          <ha-switch
+                            .checked=${this._dataCollectionOptIn === true}
+                            @change=${this._dataCollectionToggled}
+                          ></ha-switch>
+                        `
+                      : html`
+                          <ha-circular-progress
+                            size="small"
+                            active
+                          ></ha-circular-progress>
+                        `}
+                  </div>
+                  <div class="card-content">
+                    <p>
+                      Enable the reporting of anonymized telemetry and
+                      statistics to the <em>Z-Wave JS organization</em>. This
+                      data will be used to focus development efforts and improve
+                      the user experience. Information about the data that is
+                      collected and how it is used, including an example of the
+                      data collected, can be found in the
+                      <a
+                        target="_blank"
+                        href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection?id=usage-statistics"
+                        >Z-Wave JS data collection documentation</a
+                      >.
+                    </p>
+                  </div>
+                </ha-card>
               `
             : ``}
           <button class="link dump" @click=${this._dumpDebugClicked}>
@@ -183,11 +220,22 @@ class ZWaveJSConfigDashboard extends LitElement {
     if (!this.configEntryId) {
       return;
     }
-    this._network = await fetchNetworkStatus(this.hass!, this.configEntryId);
+    const [network, dataCollectionStatus] = await Promise.all([
+      fetchNetworkStatus(this.hass!, this.configEntryId),
+      fetchDataCollectionStatus(this.hass!, this.configEntryId),
+    ]);
+
+    this._network = network;
+
     this._status = this._network.client.state;
     if (this._status === "connected") {
       this._icon = mdiCheckCircle;
     }
+
+    this._dataCollectionOptIn =
+      dataCollectionStatus.opted_in === true ||
+      dataCollectionStatus.enabled === true;
+
     this._fetchNodeStatus();
   }
 
@@ -213,6 +261,14 @@ class ZWaveJSConfigDashboard extends LitElement {
     });
   }
 
+  private _dataCollectionToggled(ev) {
+    setDataCollectionPreference(
+      this.hass!,
+      this.configEntryId!,
+      ev.target.checked
+    );
+  }
+
   private async _dumpDebugClicked() {
     await this._fetchNodeStatus();
 
@@ -321,8 +377,19 @@ class ZWaveJSConfigDashboard extends LitElement {
           font-size: 1rem;
         }
 
+        .card-header {
+          display: flex;
+        }
+        .card-header h1 {
+          flex: 1;
+        }
+        .card-header ha-switch {
+          width: 48px;
+          margin-top: 16px;
+        }
+
         ha-card {
-          margin: 0 auto;
+          margin: 0px auto 24px;
           max-width: 600px;
         }