diff --git a/src/components/ha-analytics-learn-more.ts b/src/components/ha-analytics-learn-more.ts new file mode 100644 index 0000000000..8b7c756efa --- /dev/null +++ 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`${hass.localize("ui.panel.config.core.section.core.analytics.learn_more")}`; diff --git a/src/components/ha-analytics.ts b/src/components/ha-analytics.ts index bbc4682e27..6cf9d37b07 100644 --- 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` -

- ${this.hass.localize( - "ui.panel.config.core.section.core.analytics.instance_id", - "huuid", - this.analytics.huuid - )} -

- + ${this.hass.localize( `ui.panel.config.core.section.core.analytics.preference.base.title` )} - + ${this.hass.localize( `ui.panel.config.core.section.core.analytics.preference.base.description` )} @@ -73,12 +64,12 @@ export class HaAnalytics extends LitElement { - ${!enabled + ${!baseEnabled ? html`${this.hass.localize( "ui.panel.config.core.section.core.analytics.needs_base" @@ -86,7 +77,7 @@ export class HaAnalytics extends LitElement { ` : ""} - + ${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` )} - - ${preference === "usage" - ? 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( + + ${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` )} ` @@ -118,48 +109,63 @@ export class HaAnalytics extends LitElement { - + ${this.hass.localize( `ui.panel.config.core.section.core.analytics.preference.diagnostics.title` )} - + ${this.hass.localize( `ui.panel.config.core.section.core.analytics.preference.diagnostics.description` )} -

- - ${this.hass.localize( - "ui.panel.config.core.section.core.analytics.learn_more" - )} - -

`; } + 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]) { - return; - } - preferences[preference] = true; - } else { - preferences[preference] = false; + if (preferences[preference] === checkbox.checked) { + return; + } + + 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; + } `, ]; } diff --git a/src/data/analytics.ts b/src/data/analytics.ts index d8e04f69a1..a4e3875b5a 100644 --- 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) => diff --git a/src/onboarding/onboarding-analytics.ts b/src/onboarding/onboarding-analytics.ts index 7c1ac297c6..d8615b2408 100644 --- 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`

- ${this.localize( - "ui.panel.page-onboarding.analytics.intro", + ${this.hass.localize( + "ui.panel.config.core.section.core.analytics.introduction", "link", html`https://analytics.home-assistant.ioanalytics.home-assistant.io` )}

@@ -53,9 +48,10 @@ class OnboardingAnalytics extends LitElement { ${this._error ? html`
${this._error}
` : ""}
- + ${this.localize("ui.panel.page-onboarding.analytics.finish")} + ${analyticsLearnMore(this.hass)}
`; } @@ -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 } } diff --git a/src/panels/config/core/ha-config-analytics.ts b/src/panels/config/core/ha-config-analytics.ts index fae605964c..b582b5ed5e 100644 --- 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`
- ${this._error ? html`
${this._error}
` : ""} + ${error ? html`
${error}
` : ""}

${this.hass.localize( "ui.panel.config.core.section.core.analytics.introduction", "link", html`https://analytics.home-assistant.ioanalytics.home-assistant.io` )}

@@ -69,6 +72,7 @@ class ConfigAnalytics extends LitElement { "ui.panel.config.core.section.core.core_config.save_button" )} + ${analyticsLearnMore(this.hass)}
`; @@ -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" ]; } } diff --git a/src/panels/config/core/ha-config-core-form.ts b/src/panels/config/core/ha-config-core-form.ts index 406ca0d00b..f14b1ca526 100644 --- 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; + } `; } } diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts index d29cba9d8b..3dbdefb1ed 100644 --- 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 { diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts index 549ccfa4d0..778fa18a66 100644 --- 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; + } `; } } diff --git a/src/translations/en.json b/src/translations/en.json index db6ca93433..44e8dae6c6 100755 --- 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": {