Tweak the analytics screens (#8833)

2025-07-16 13:56:35 +00:00 · 2021-04-06 18:48:10 -07:00 · 2021-04-06 18:48:10 -07:00 · 8dd3d78f21
commit 8dd3d78f21
parent 48161fd02f
9 changed files with 138 additions and 97 deletions
--- a/src/components/ha-analytics-learn-more.ts
+++ b/src/components/ha-analytics-learn-more.ts
@ -0,0 +1,10 @@
+import { html } from "lit-element";
+import { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+
+export const analyticsLearnMore = (hass: HomeAssistant) => html`<a
+  .href=${documentationUrl(hass, "/integrations/analytics/")}
+  target="_blank"
+  rel="noreferrer"
+  >${hass.localize("ui.panel.config.core.section.core.analytics.learn_more")}</a
+>`;
--- a/src/components/ha-analytics.ts
+++ b/src/components/ha-analytics.ts
@ -13,7 +13,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-settings-row";
@ -30,38 +29,30 @@ declare global {
 export class HaAnalytics extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public analytics!: Analytics;
+  @property({ attribute: false }) public analytics?: Analytics;

  protected render(): TemplateResult {
-    if (!this.analytics.huuid) {
-      return html``;
-    }
-
-    const enabled = this.analytics.preferences.base;
+    const loading = this.analytics === undefined;
+    const baseEnabled = !loading && this.analytics!.preferences.base;

    return html`
-      <p>
-        ${this.hass.localize(
-          "ui.panel.config.core.section.core.analytics.instance_id",
-          "huuid",
-          this.analytics.huuid
-        )}
-      </p>
      <ha-settings-row>
        <span slot="prefix">
          <ha-checkbox
            @change=${this._handleRowCheckboxClick}
-            .checked=${enabled}
+            .checked=${baseEnabled}
            .preference=${"base"}
+            .disabled=${loading}
+            name="base"
          >
          </ha-checkbox>
        </span>
-        <span slot="heading">
+        <span slot="heading" data-for="base">
          ${this.hass.localize(
            `ui.panel.config.core.section.core.analytics.preference.base.title`
          )}
        </span>
-        <span slot="description">
+        <span slot="description" data-for="base">
          ${this.hass.localize(
            `ui.panel.config.core.section.core.analytics.preference.base.description`
          )}
@ -73,12 +64,12 @@ export class HaAnalytics extends LitElement {
            <span slot="prefix">
              <ha-checkbox
                @change=${this._handleRowCheckboxClick}
-                .checked=${this.analytics.preferences[preference]}
+                .checked=${this.analytics?.preferences[preference]}
                .preference=${preference}
-                .disabled=${!enabled}
+                name=${preference}
              >
              </ha-checkbox>
-              ${!enabled
+              ${!baseEnabled
                ? html`<paper-tooltip animation-delay="0" position="right"
                    >${this.hass.localize(
                      "ui.panel.config.core.section.core.analytics.needs_base"
@ -86,7 +77,7 @@ export class HaAnalytics extends LitElement {
                  </paper-tooltip>`
                : ""}
            </span>
-            <span slot="heading">
+            <span slot="heading" data-for=${preference}>
              ${preference === "usage"
                ? isComponentLoaded(this.hass, "hassio")
                  ? this.hass.localize(
@ -99,17 +90,17 @@ export class HaAnalytics extends LitElement {
                    `ui.panel.config.core.section.core.analytics.preference.${preference}.title`
                  )}
            </span>
-            <span slot="description">
-              ${preference === "usage"
-                ? isComponentLoaded(this.hass, "hassio")
+            <span slot="description" data-for=${preference}>
+              ${preference !== "usage"
+                ? this.hass.localize(
+                    `ui.panel.config.core.section.core.analytics.preference.${preference}.description`
+                  )
+                : isComponentLoaded(this.hass, "hassio")
                ? this.hass.localize(
                    `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.description`
                  )
                : this.hass.localize(
                    `ui.panel.config.core.section.core.analytics.preference.usage.description`
-                    )
-                : this.hass.localize(
-                    `ui.panel.config.core.section.core.analytics.preference.${preference}.description`
                  )}
            </span>
          </ha-settings-row>`
@ -118,48 +109,63 @@ export class HaAnalytics extends LitElement {
        <span slot="prefix">
          <ha-checkbox
            @change=${this._handleRowCheckboxClick}
-            .checked=${this.analytics.preferences.diagnostics}
+            .checked=${this.analytics?.preferences.diagnostics}
            .preference=${"diagnostics"}
+            .disabled=${loading}
+            name="diagnostics"
          >
          </ha-checkbox>
        </span>
-        <span slot="heading">
+        <span slot="heading" data-for="diagnostics">
          ${this.hass.localize(
            `ui.panel.config.core.section.core.analytics.preference.diagnostics.title`
          )}
        </span>
-        <span slot="description">
+        <span slot="description" data-for="diagnostics">
          ${this.hass.localize(
            `ui.panel.config.core.section.core.analytics.preference.diagnostics.description`
          )}
        </span>
      </ha-settings-row>
-      <p>
-        <a
-          .href=${documentationUrl(this.hass, "/integrations/analytics/")}
-          target="_blank"
-          rel="noreferrer"
-        >
-          ${this.hass.localize(
-            "ui.panel.config.core.section.core.analytics.learn_more"
-          )}
-        </a>
-      </p>
    `;
  }

+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    this.shadowRoot!.querySelectorAll("*[data-for]").forEach((el) => {
+      const forEl = (el as HTMLElement).dataset.for;
+      delete (el as HTMLElement).dataset.for;
+
+      el.addEventListener("click", () => {
+        const toFocus = this.shadowRoot!.querySelector(
+          `*[name=${forEl}]`
+        ) as HTMLElement | null;
+
+        if (toFocus) {
+          toFocus.focus();
+          toFocus.click();
+        }
+      });
+    });
+  }
+
  private _handleRowCheckboxClick(ev: Event) {
    const checkbox = ev.currentTarget as HaCheckbox;
    const preference = (checkbox as any).preference;
-    const preferences = { ...this.analytics.preferences };
+    const preferences = this.analytics ? { ...this.analytics.preferences } : {};

-    if (checkbox.checked) {
-      if (preferences[preference]) {
+    if (preferences[preference] === checkbox.checked) {
      return;
    }
-      preferences[preference] = true;
-    } else {
-      preferences[preference] = false;
+
+    preferences[preference] = checkbox.checked;
+
+    if (ADDITIONAL_PREFERENCES.includes(preference) && checkbox.checked) {
+      preferences.base = true;
+    } else if (preference === "base" && !checkbox.checked) {
+      preferences.usage = false;
+      preferences.statistics = false;
    }

    fireEvent(this, "analytics-preferences-changed", { preferences });
@ -176,6 +182,11 @@ export class HaAnalytics extends LitElement {
        ha-settings-row {
          padding: 0;
        }
+
+        span[slot="heading"],
+        span[slot="description"] {
+          cursor: pointer;
+        }
      `,
    ];
  }
--- a/src/data/analytics.ts
+++ b/src/data/analytics.ts
@ -9,7 +9,6 @@ export interface AnalyticsPreferences {

 export interface Analytics {
  preferences: AnalyticsPreferences;
-  huuid: string;
 }

 export const getAnalyticsDetails = (hass: HomeAssistant) =>
--- a/src/onboarding/onboarding-analytics.ts
+++ b/src/onboarding/onboarding-analytics.ts
@ -12,11 +12,8 @@ import {
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-analytics";
-import {
-  Analytics,
-  getAnalyticsDetails,
-  setAnalyticsPreferences,
-} from "../data/analytics";
+import { analyticsLearnMore } from "../components/ha-analytics-learn-more";
+import { Analytics, setAnalyticsPreferences } from "../data/analytics";
 import { onboardAnalyticsStep } from "../data/onboarding";
 import type { HomeAssistant } from "../types";

@ -28,20 +25,18 @@ class OnboardingAnalytics extends LitElement {

  @internalProperty() private _error?: string;

-  @internalProperty() private _analyticsDetails?: Analytics;
+  @internalProperty() private _analyticsDetails: Analytics = {
+    preferences: {},
+  };

  protected render(): TemplateResult {
-    if (!this._analyticsDetails?.huuid) {
-      return html``;
-    }
-
    return html`
      <p>
-        ${this.localize(
-          "ui.panel.page-onboarding.analytics.intro",
+        ${this.hass.localize(
+          "ui.panel.config.core.section.core.analytics.introduction",
          "link",
          html`<a href="https://analytics.home-assistant.io" target="_blank"
-            >https://analytics.home-assistant.io</a
+            >analytics.home-assistant.io</a
          >`
        )}
      </p>
@ -53,9 +48,10 @@ class OnboardingAnalytics extends LitElement {
      </ha-analytics>
      ${this._error ? html`<div class="error">${this._error}</div>` : ""}
      <div class="footer">
-        <mwc-button @click=${this._save}>
+        <mwc-button @click=${this._save} .disabled=${!this._analyticsDetails}>
          ${this.localize("ui.panel.page-onboarding.analytics.finish")}
        </mwc-button>
+        ${analyticsLearnMore(this.hass)}
      </div>
    `;
  }
@ -67,7 +63,6 @@ class OnboardingAnalytics extends LitElement {
        this._save(ev);
      }
    });
-    this._load();
  }

  private _preferencesChanged(event: CustomEvent): void {
@ -94,15 +89,6 @@ class OnboardingAnalytics extends LitElement {
    }
  }

-  private async _load() {
-    this._error = undefined;
-    try {
-      this._analyticsDetails = await getAnalyticsDetails(this.hass);
-    } catch (err) {
-      this._error = err.message || err;
-    }
-  }
-
  static get styles(): CSSResult {
    return css`
      .error {
@ -111,9 +97,18 @@ class OnboardingAnalytics extends LitElement {

      .footer {
        margin-top: 16px;
-        text-align: right;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: row-reverse;
+      }
+
+      a {
+        color: var(--primary-color);
      }
    `;
+
+    // footer is direction reverse to tab to "NEXT" first
  }
 }

--- a/src/panels/config/core/ha-config-analytics.ts
+++ b/src/panels/config/core/ha-config-analytics.ts
@ -12,6 +12,7 @@ import {
 } from "lit-element";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-analytics";
+import { analyticsLearnMore } from "../../../components/ha-analytics-learn-more";
 import "../../../components/ha-card";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-settings-row";
@ -32,14 +33,16 @@ class ConfigAnalytics extends LitElement {
  @internalProperty() private _error?: string;

  protected render(): TemplateResult {
-    if (
-      !isComponentLoaded(this.hass, "analytics") ||
-      !this.hass.user?.is_owner ||
-      !this._analyticsDetails?.huuid
-    ) {
+    if (!this.hass.user?.is_owner) {
      return html``;
    }

+    const error = this._error
+      ? this._error
+      : !isComponentLoaded(this.hass, "analytics")
+      ? "Analytics integration not loaded"
+      : undefined;
+
    return html`
      <ha-card
        .header=${this.hass.localize(
@ -47,13 +50,13 @@ class ConfigAnalytics extends LitElement {
        )}
      >
        <div class="card-content">
-          ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+          ${error ? html`<div class="error">${error}</div>` : ""}
          <p>
            ${this.hass.localize(
              "ui.panel.config.core.section.core.analytics.introduction",
              "link",
              html`<a href="https://analytics.home-assistant.io" target="_blank"
-                >https://analytics.home-assistant.io</a
+                >analytics.home-assistant.io</a
              >`
            )}
          </p>
@ -69,6 +72,7 @@ class ConfigAnalytics extends LitElement {
              "ui.panel.config.core.section.core.core_config.save_button"
            )}
          </mwc-button>
+          ${analyticsLearnMore(this.hass)}
        </div>
      </ha-card>
    `;
@ -120,7 +124,14 @@ class ConfigAnalytics extends LitElement {
        ha-settings-row {
          padding: 0;
        }
-      `,
+
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
+        }
+      `, // row-reverse so we tab first to "save"
    ];
  }
 }
--- a/src/panels/config/core/ha-config-core-form.ts
+++ b/src/panels/config/core/ha-config-core-form.ts
@ -244,6 +244,10 @@ class ConfigCoreForm extends LitElement {
      .row > * {
        margin: 0 8px;
      }
+
+      .card-actions {
+        text-align: right;
+      }
    `;
  }
 }
--- a/src/panels/config/core/ha-config-name-form.ts
+++ b/src/panels/config/core/ha-config-name-form.ts
@ -4,6 +4,7 @@ import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import {
+  css,
  customElement,
  html,
  internalProperty,
@ -87,6 +88,14 @@ class ConfigNameForm extends LitElement {
      this._working = false;
    }
  }
+
+  static get styles() {
+    return css`
+      .card-actions {
+        text-align: right;
+      }
+    `;
+  }
 }

 declare global {
--- a/src/panels/config/core/ha-config-url-form.ts
+++ b/src/panels/config/core/ha-config-url-form.ts
@ -158,6 +158,10 @@ class ConfigUrlForm extends LitElement {
      .error {
        color: var(--error-color);
      }
+
+      .card-actions {
+        text-align: right;
+      }
    `;
  }
 }
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -999,32 +999,31 @@
              },
              "analytics": {
                "header": "Analytics",
-                "introduction": "Share analytics from your instance. This data will be publicly available at {link}",
-                "instance_id": "Instance ID: {huuid}",
+                "introduction": "Share your installation information to help make Home Assistant better and help us convince manufacturers to add local control and privacy-focused features.",
                "needs_base": "You need to enable base analytics for this option to be available",
                "preference": {
                  "base": {
                    "title": "Basic analytics",
-                    "description": "This includes the instance ID, the version and the installation type"
+                    "description": "Instance ID, version and installation type."
                  },
                  "diagnostics": {
                    "title": "Diagnostics",
-                    "description": "Share crash reports and diagnostic information"
+                    "description": "Share crash reports when unexpected errors occur."
                  },
                  "usage": {
-                    "title": "Used integrations",
-                    "description": "This includes the names of your integrations"
+                    "title": "Used Integrations",
+                    "description": "Names and version information."
                  },
                  "usage_supervisor": {
                    "title": "Used integrations and add-ons",
-                    "description": "This includes the names and capabilities of your integrations and add-ons"
+                    "description": "Names, versions and capabilities."
                  },
                  "statistics": {
                    "title": "Usage statistics",
-                    "description": "This includes a count of elements in your installation, for a full list look at the documentation"
+                    "description": "Total used entities, users and other elements."
                  }
                },
-                "learn_more": "Learn more about how your data will be processed."
+                "learn_more": "How we process your data"
              }
            }
          }
@ -3513,7 +3512,6 @@
          "finish": "Finish"
        },
        "analytics": {
-          "intro": "Share analytics from your instance. This data will be publicly available at {link}",
          "finish": "Next"
        },
        "restore": {