Skip to content

Commit

Permalink
Tweak the analytics screens (#8833)
Browse files Browse the repository at this point in the history
  • Loading branch information
@balloob
balloob committed Apr 7, 2021
1 parent 48161fd commit 8dd3d78
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 98 deletions.
10 changes: 10 additions & 0 deletions src/components/ha-analytics-learn-more.ts
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
>`;
119 changes: 65 additions & 54 deletions src/components/ha-analytics.ts
View file
Expand Up @@ -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";
Expand All @@ -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`
)}
Expand All @@ -73,20 +64,20 @@ 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"
)}
</paper-tooltip>`
: ""}
</span>
<span slot="heading">
<span slot="heading" data-for=${preference}>
${preference === "usage"
? isComponentLoaded(this.hass, "hassio")
? this.hass.localize(
Expand All @@ -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>`
Expand All @@ -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 };

if (checkbox.checked) {
if (preferences[preference]) {
return;
}
preferences[preference] = true;
} else {
preferences[preference] = false;
const preferences = this.analytics ? { ...this.analytics.preferences } : {};

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 });
Expand All @@ -176,6 +182,11 @@ export class HaAnalytics extends LitElement {
ha-settings-row {
padding: 0;
}
span[slot="heading"],
span[slot="description"] {
cursor: pointer;
}
`,
];
}
Expand Down
1 change: 0 additions & 1 deletion src/data/analytics.ts
View file
Expand Up @@ -9,7 +9,6 @@ export interface AnalyticsPreferences {

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

export const getAnalyticsDetails = (hass: HomeAssistant) =>
Expand Down
45 changes: 20 additions & 25 deletions src/onboarding/onboarding-analytics.ts
View file
Expand Up @@ -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";

Expand All @@ -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>
Expand All @@ -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>
`;
}
Expand All @@ -67,7 +63,6 @@ class OnboardingAnalytics extends LitElement {
this._save(ev);
}
});
this._load();
}

private _preferencesChanged(event: CustomEvent): void {
Expand All @@ -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 {
Expand All @@ -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
}
}

Expand Down
27 changes: 19 additions & 8 deletions src/panels/config/core/ha-config-analytics.ts
View file
Expand Up @@ -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";
Expand All @@ -32,28 +33,30 @@ 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(
"ui.panel.config.core.section.core.analytics.header"
)}
>
<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>
Expand All @@ -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>
`;
Expand Down Expand Up @@ -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"
];
}
}
Expand Down

0 comments on commit 8dd3d78

Please sign in to comment.