Tweak the analytics screens (#8833)

This commit is contained in:
Paulus Schoutsen 2021-04-06 18:48:10 -07:00 committed by GitHub
parent 48161fd02f
commit 8dd3d78f21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 138 additions and 97 deletions

View File

@ -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
>`;

View File

@ -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")
? 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(
<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`
)}
</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]) {
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;
}
`,
];
}

View File

@ -9,7 +9,6 @@ export interface AnalyticsPreferences {
export interface Analytics {
preferences: AnalyticsPreferences;
huuid: string;
}
export const getAnalyticsDetails = (hass: HomeAssistant) =>

View File

@ -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
}
}

View File

@ -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"
];
}
}

View File

@ -244,6 +244,10 @@ class ConfigCoreForm extends LitElement {
.row > * {
margin: 0 8px;
}
.card-actions {
text-align: right;
}
`;
}
}

View File

@ -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 {

View File

@ -158,6 +158,10 @@ class ConfigUrlForm extends LitElement {
.error {
color: var(--error-color);
}
.card-actions {
text-align: right;
}
`;
}
}

View File

@ -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": {